refact!: Replace v-html with v-safe-html

* feat: `ModelWithContent::toSafeHtmlString()`

* refact: Use `::toSafeHtmlString` for field options

* refact: Use `v-safe-html` for `k-item`

* refact: Use `v-safe-html` for `k-tags`

* refact: Use `v-safe-html` for `k-text`

* refact: Migrate `html: true` to `v-safe-html`

* refact: Use `HtmlString` in dialog controllers

* test: Ensure no `v-html` is added easily

* fix: Wrap remaining i18n strings as trusted

* chore: Upgrade `slint-plugin-vuejs-accessibility`

* feat: `HasI18n::i18nHtml()`

* docs: Fix inline code comments

* Update src/Toolkit/HtmlString.php

Co-authored-by: Lukas Bestle <lukas@getkirby.com>

---------

Co-authored-by: Lukas Bestle <lukas@getkirby.com>

Author: distantnative

config/sections/info.php

@@ -1,5 +1,6 @@
 <?php
 
+use Kirby\Toolkit\HtmlString;
 use Kirby\Toolkit\I18n;
 
 return [
@@ -22,7 +23,7 @@
 			if ($this->text) {
 				$text = $this->model()->toSafeString($this->text);
 				$text = $this->kirby()->kirbytext($text);
-				return $text;
+				return new HtmlString($text);
 			}
 		},
 	],

panel/eslint.config.js

@@ -87,7 +87,12 @@ export default [
 	},
 	{
 		rules: {
+			"vuejs-accessibility/heading-has-content": [
+				"error",
+				{ accessibleDirectives: ["safe-html"] }
+			],
 			"vue/attributes-order": "error",
+			"vue/no-v-html": "error",
 			"vue/component-definition-name-casing": "off",
 			"vue/html-closing-bracket-newline": [
 				"error",

panel/package-lock.json

@@ -40,7 +40,7 @@
 		"eslint": "^10.7.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-vue": "^10.9.2",
-		"eslint-plugin-vuejs-accessibility": "^2.5.0",
+		"eslint-plugin-vuejs-accessibility": "^2.6.0",
 		"glob": "^13.0.6",
 		"globals": "^17.7.0",
 		"happy-dom": "^20.10.6",

panel/package.json

@@ -40,7 +40,7 @@
 		</component>
 
 		<footer v-if="help || hasPagination" class="k-collection-footer">
-			<k-text class="k-help k-collection-help" :html="help" />
+			<k-text class="k-help k-collection-help" :text="help" />
 			<!--
 				Emitted when the pagination changes
 				@event paginate

panel/src/components/Collection/Collection.vue

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from "@test/unit";
 import { mount as vueMount } from "@vue/test-utils";
+import html from "@/panel/html";
 import Item from "./Item.vue";
 
 function mount(props = {}, attrs = {}) {
@@ -85,8 +86,15 @@ describe("Item.vue", () => {
 	});
 
 	describe("text prop", () => {
-		it("renders the text as HTML", () => {
+		it("escapes a plain string", () => {
 			const wrapper = mount({ text: "<b>Hello</b>" });
+			expect(wrapper.find(".k-item-title span").html()).toBe(
+				"<span>&lt;b&gt;Hello&lt;/b&gt;</span>"
+			);
+		});
+
+		it("renders trusted HTML as-is", () => {
+			const wrapper = mount({ text: html("<b>Hello</b>") });
 			expect(wrapper.find(".k-item-title span").html()).toBe(
 				"<span><b>Hello</b></span>"
 			);
@@ -177,18 +185,27 @@ describe("Item.vue", () => {
 			);
 		});
 
-		it("strips tags", () => {
+		it("keeps markup a plain string renders as visible text", () => {
 			const wrapper = mount({ text: "<b>Hello</b>" });
-			expect(wrapper.find(".k-item-title").attributes("title")).toBe("Hello");
+			expect(wrapper.find(".k-item-title").attributes("title")).toBe(
+				"<b>Hello</b>"
+			);
 		});
 
-		it("unescapes entities", () => {
-			const wrapper = mount({ text: "Tom &amp; Jerry" });
+		it("strips authored tags from trusted HTML", () => {
+			const wrapper = mount({ text: html("<b>Tom &amp; Jerry</b>") });
 			expect(wrapper.find(".k-item-title").attributes("title")).toBe(
 				"Tom & Jerry"
 			);
 		});
 
+		it("keeps escaped tags, which render as visible text", () => {
+			const wrapper = mount({ text: html("Using &lt;div&gt; tags") });
+			expect(wrapper.find(".k-item-title").attributes("title")).toBe(
+				"Using <div> tags"
+			);
+		});
+
 		it("trims surrounding whitespace", () => {
 			const wrapper = mount({ text: "  Kirby  " });
 			expect(wrapper.find(".k-item-title").attributes("title")).toBe("Kirby");

panel/src/components/Collection/Item.test.ts

@@ -33,14 +33,16 @@
 						:target="target"
 						:to="link"
 					>
-						<!-- eslint-disable-next-line vue/no-v-html -->
-						<span v-html="text ?? '&nbsp;'" />
+						<span v-safe-html="text ?? '\u00a0'" />
 					</k-link>
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<span v-else v-html="text ?? '&nbsp;'" />
+					<span v-else v-safe-html="text ?? '\u00a0'" />
 				</h3>
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<p v-if="info" :title="title(info)" class="k-item-info" v-html="info" />
+				<p
+					v-if="info"
+					v-safe-html="info"
+					:title="title(info)"
+					class="k-item-info"
+				/>
 			</div>
 
 			<div
@@ -81,6 +83,7 @@
 <script>
 import { props as ItemImageProps } from "./ItemImage.vue";
 import { layout } from "@/mixins/props.js";
+import { HtmlString } from "@/panel/html";
 /**
  * A collection item that can be displayed in various layouts
  *
@@ -182,9 +185,16 @@ export default {
 			this.$emit("option", event);
 		},
 		title(text) {
-			return this.$helper.string
-				.stripHTML(this.$helper.string.unescapeHTML(text))
-				.trim();
+			// only trusted HTML carries tags and entities to undo,
+			// a plain string is already the text we want. Tags go
+			// first, so escaped ones survive as visible characters.
+			if (text instanceof HtmlString) {
+				return this.$helper.string
+					.unescapeHTML(this.$helper.string.stripHTML(text))
+					.trim();
+			}
+
+			return String(text ?? "").trim();
 		}
 	}
 };

panel/src/components/Collection/Item.vue

@@ -1,5 +1,5 @@
 <template>
-	<k-text v-if="text" :html="text" />
+	<k-text v-if="text" :text="text" />
 	<k-box v-else theme="info">{{ empty }}</k-box>
 </template>
 

panel/src/components/Dialogs/Elements/Text.vue

@@ -45,12 +45,12 @@
 				<k-definition v-if="license.info" :term="$t('status')">
 					<p :data-theme="license.theme">
 						<k-icon :type="license.icon" />
-						<k-text :html="license.info" />
+						<k-text :text="license.info" />
 					</p>
 				</k-definition>
 			</k-definitions>
 
-			<k-text class="k-help" :html="licenseHubText" />
+			<k-text class="k-help" :text="licenseHubText" />
 		</k-stack>
 	</k-dialog>
 </template>
@@ -80,9 +80,11 @@ export default {
 	emits: ["cancel", "submit"],
 	computed: {
 		licenseHubText() {
-			return this.$t("license.manage.hub", {
-				url: "https://hub.getkirby.com/"
-			});
+			return this.$panel.html(
+				this.$t("license.manage.hub", {
+					url: "https://hub.getkirby.com/"
+				})
+			);
 		}
 	}
 };

panel/src/components/Dialogs/LicenseDialog.vue

@@ -1,5 +1,5 @@
 <template>
-	<k-text v-if="text" :html="text" />
+	<k-text v-if="text" :text="text" />
 	<k-box v-else theme="info">{{ empty }}</k-box>
 </template>