V14: Add sanitization to dictionary

src/assets/lang/bs.ts

@@ -566,9 +566,9 @@ export default {
 		createNew: 'Kreirajte stavku iz rječnika',
 	},
 	dictionaryItem: {
-		description: "\n      Uredite različite jezičke verzije za stavku rječnika '<em>%0%</em>' ispod\n   ",
+		description: "Uredite različite jezičke verzije za stavku rječnika '%0%' ispod",
 		displayName: 'Kultura',
-		changeKeyError: "\n      Ključ '%0%' već postoji.\n   ",
+		changeKeyError: "Ključ '%0%' već postoji.",
 		overviewTitle: 'Pregled riječnika',
 	},
 	examineManagement: {

src/assets/lang/cs-cz.ts

@@ -498,9 +498,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n      Editujte různé jazykové verze pro položku slovníku '<em>%0%</em>' níže.<br/>Můžete přidat další jazyky v nabídce 'jazyky' nalevo.",
+			"Editujte různé jazykové verze pro položku slovníku '%0%' níže.<br/>Můžete přidat další jazyky v nabídce 'jazyky' nalevo.",
 		displayName: 'Název jazyka',
-		changeKeyError: "\n      Klíč '%0%' již existuje.\n   ",
+		changeKeyError: "Klíč '%0%' již existuje.",
 		overviewTitle: 'Přehled slovníku',
 	},
 	examineManagement: {

src/assets/lang/cy-gb.ts

@@ -591,9 +591,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n            Golygwch y fersiynau iaith gwahanol ar gyfer yr eitem geiriadur '<em>%0%</em>' islaw<br/>Gallwch ychwanegu ieithoedd ychwanegol o dan 'ieithoedd' yn y ddewislen ar y chwith\n            ",
+			"Golygwch y fersiynau iaith gwahanol ar gyfer yr eitem geiriadur '%0%' islaw<br/>Gallwch ychwanegu ieithoedd ychwanegol o dan 'ieithoedd' yn y ddewislen ar y chwith",
 		displayName: 'Enw Diwylliant',
-		changeKeyError: "\n            Mae'r allwedd '%0%' yn bodoli eisoes.\n            ",
+		changeKeyError: "Mae'r allwedd '%0%' yn bodoli eisoes.",
 		overviewTitle: 'Trosolwg Geiriadur',
 	},
 	examineManagement: {

src/assets/lang/da-dk.ts

@@ -585,9 +585,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n      Rediger de forskellige sprogversioner for ordbogselementet '%0%' herunder.<br />Du tilføjer flere sprog under 'sprog' i menuen til venstre </key>\n      ",
+			"Rediger de forskellige sprogversioner for ordbogselementet '%0%' herunder. Du tilføjer flere sprog under 'sprog' i menuen til venstre.",
 		displayName: 'Kulturnavn',
-		changeKeyError: "\n      Navnet '%0%' eksisterer allerede.\n   ",
+		changeKeyError: "Navnet '%0%' eksisterer allerede.",
 		overviewTitle: 'Ordbogsoversigt',
 	},
 	examineManagement: {

src/assets/lang/de-de.ts

@@ -590,9 +590,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n    Bearbeiten Sie nachfolgend die verschiedenen Sprachversionen für den Wörterbucheintrag '<em>%0%</em>'.\n    <br/>Unter dem links angezeigten Menüpunkt 'Sprachen' können Sie weitere hinzufügen.",
+			"Bearbeiten Sie nachfolgend die verschiedenen Sprachversionen für den Wörterbucheintrag '%0%'.<br/>Unter dem links angezeigten Menüpunkt 'Sprachen' können Sie weitere hinzufügen.",
 		displayName: 'Name der Kultur',
-		changeKeyError: "\n      Der Wert '%0%' ist bereits vorhanden.\n   ",
+		changeKeyError: "Der Wert '%0%' ist bereits vorhanden.",
 		overviewTitle: 'Wörterbuch Übersicht',
 	},
 	examineManagement: {

src/assets/lang/en-us.ts

@@ -595,9 +595,9 @@ export default {
 		createNew: 'Create dictionary item',
 	},
 	dictionaryItem: {
-		description: "\n      Edit the different language versions for the dictionary item '<em>%0%</em>' below\n   ",
+		description: "Edit the different language versions for the dictionary item '%0%' below",
 		displayName: 'Culture Name',
-		changeKeyError: "\n      The key '%0%' already exists.\n   ",
+		changeKeyError: "The key '%0%' already exists.",
 		overviewTitle: 'Dictionary overview',
 	},
 	examineManagement: {

src/assets/lang/en.ts

@@ -606,9 +606,9 @@ export default {
 		createNew: 'Create dictionary item',
 	},
 	dictionaryItem: {
-		description: "\n      Edit the different language versions for the dictionary item '<em>%0%</em>' below\n   ",
+		description: "Edit the different language versions for the dictionary item '%0%' below",
 		displayName: 'Culture Name',
-		changeKeyError: "\n      The key '%0%' already exists.\n   ",
+		changeKeyError: "The key '%0%' already exists.",
 		overviewTitle: 'Dictionary overview',
 	},
 	examineManagement: {

src/assets/lang/es-es.ts

@@ -370,9 +370,9 @@ export default {
 		createNew: 'Crear elemento de diccionario',
 	},
 	dictionaryItem: {
-		description: "Editar las diferentes versiones lingüísticas para la entrada en el diccionario '% 0%' debajo",
-		displayName: 'nombre de la cultura\n',
-		changeKeyError: "\n      La clave '%0%' ya existe.\n   ",
+		description: "Editar las diferentes versiones lingüísticas para la entrada en el diccionario '%0%' debajo",
+		displayName: 'nombre de la cultura',
+		changeKeyError: "La clave '%0%' ya existe.",
 	},
 	placeholders: {
 		username: 'Escribe tu nombre de usuario',

src/assets/lang/fr-fr.ts

@@ -517,10 +517,9 @@ export default {
 		createNew: 'Créer un élément de dictionnaire',
 	},
 	dictionaryItem: {
-		description:
-			"\n      Editez les différentes versions de langues pour l'élément de dictionnaire '<em>%0%</em>' ci-dessous.\n   ",
+		description: "Editez les différentes versions de langues pour l'élément de dictionnaire '%0%' ci-dessous.",
 		displayName: 'Nom de Culture',
-		changeKeyError: "\n      La clé '%0%' existe déjà.\n   ",
+		changeKeyError: "La clé '%0%' existe déjà.",
 		overviewTitle: 'Aperçu du dictionaire',
 	},
 	examineManagement: {

src/assets/lang/he-il.ts

@@ -204,7 +204,7 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			'\n      ערוך את גרסאות השפות השונות לפריט המילון \'<em>%0%</em>\' למטה<br/>ניתן להוסיף שפות נוספות תחת "שפות" בתפריט בצד שמאל\n   ',
+			'ערוך את גרסאות השפות השונות לפריט המילון \'%0%\' למטה ניתן להוסיף שפות נוספות תחת "שפות" בתפריט בצד שמאל',
 		displayName: 'שם התצוגה לשפה',
 	},
 	editdatatype: {

src/assets/lang/hr-hr.ts

@@ -568,9 +568,9 @@ export default {
 		createNew: 'Kreirajte stavku iz rječnika',
 	},
 	dictionaryItem: {
-		description: "\n      Uredite različite jezičke varijante za stavku rječnika '<em>%0%</em>' ispod\n   ",
+		description: "Uredite različite jezičke varijante za stavku rječnika '%0%' ispod",
 		displayName: 'Kultura',
-		changeKeyError: "\n      Stavka '%0%' već postoji.\n   ",
+		changeKeyError: "Stavka '%0%' već postoji.",
 		overviewTitle: 'Pregled riječnika',
 	},
 	examineManagement: {

src/assets/lang/it-it.ts

@@ -569,7 +569,7 @@ export default {
 		noItems: 'Non ci sono oggetti nel Dizionario.',
 	},
 	dictionaryItem: {
-		description: "Modifica le lingue per l'elemento '<em>%0%</em>' qui sotto.",
+		description: "Modifica le lingue per l'elemento '%0%' qui sotto.",
 		displayName: 'Nome della cultura',
 		changeKeyError: "La chiave '%0%' esiste già.",
 		overviewTitle: 'Panoramica del Dizionario',

src/assets/lang/ja-jp.ts

@@ -275,7 +275,7 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n      ディクショナリのアイテム '<em>%0%</em>' の別の言語版を編集するには、左側のメニューの'言語'でその言語を追加します\n   ",
+			"ディクショナリのアイテム '%0%' の別の言語版を編集するには、左側のメニューの'言語'でその言語を追加します",
 		displayName: 'カルチャ名',
 	},
 	placeholders: {

src/assets/lang/ko-kr.ts

@@ -204,7 +204,7 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n    '<em>%0%</em>'사전 항목 아래에 다른 언어버전들을 편집하세요<br/>왼쪽 '언어'메뉴를 사용하여 추가 언어들을 설정할 수 있습니다.\n ",
+			"'%0%'사전 항목 아래에 다른 언어버전들을 편집하세요<br/>왼쪽 '언어'메뉴를 사용하여 추가 언어들을 설정할 수 있습니다.",
 		displayName: '국가명',
 	},
 	editdatatype: {

src/assets/lang/nb-no.ts

@@ -250,8 +250,10 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"Rediger de forskjellige språkversjonene for ordbokelementet '<em>%0%</em>' under.<br/>Du kan legge til flere språk under 'språk' i menyen til venstre.",
+			"Rediger de forskjellige språkversjonene for ordbokelementet '%0%' under. Du kan legge til flere språk under 'språk' i menyen til venstre.",
 		displayName: 'Språk',
+		changeKeyError: "Kan ikke endre nøkkel for '%0%' fordi det allerede finnes en oversettelse for denne nøkkelen",
+		overviewTitle: 'Ordbok',
 	},
 	placeholders: {
 		username: 'Skriv inn ditt brukernavn',

src/assets/lang/nl-nl.ts

@@ -529,9 +529,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n      Wijzig de verschillende taalversies voor het woordenboek item '%0%'. Je kunt extra talen toevoegen bij 'talen' in het menu links\n    ",
+			"Wijzig de verschillende taalversies voor het woordenboek item '%0%'. Je kunt extra talen toevoegen bij 'talen' in het menu links",
 		displayName: 'Cultuurnaam',
-		changeKeyError: "\n      De key '%0%' bestaat al.\n    ",
+		changeKeyError: "De key '%0%' bestaat al.",
 		overviewTitle: 'Woordenboek overzicht',
 	},
 	examineManagement: {

src/assets/lang/pl-pl.ts

@@ -364,9 +364,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			'\n    Edytuj różne wersje językowe dla elementu słownika \'<em>%0%</em>\' poniżej.<br/>\n    Możesz dodać dodatkowe języki w menu "Języki" po lewej stronie.',
+			'Edytuj różne wersje językowe dla elementu słownika \'%0%\' poniżej. Możesz dodać dodatkowe języki w menu "Języki" po lewej stronie.',
 		displayName: 'Nazwa języka',
-		changeKeyError: "\n      Klucz '%0%' już istnieje.\n   ",
+		changeKeyError: "Klucz '%0%' już istnieje.",
 	},
 	placeholders: {
 		username: 'Wpisz nazwę użytkownika',

src/assets/lang/pt-br.ts

@@ -206,7 +206,7 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"Editar as diferente versões de linguagem para o item de dicionário '<em>%0%</em>' abaixo <br /> Você pode adicionar mais linguagens sob 'linguagens' no menu à esquerda",
+			"Editar as diferente versões de linguagem para o item de dicionário '%0%' abaixo. Você pode adicionar mais linguagens sob 'linguagens' no menu à esquerda.",
 		displayName: 'Nome da Cultura',
 	},
 	editdatatype: {

src/assets/lang/ru-ru.ts

@@ -423,9 +423,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n\t\tНиже Вы можете указать различные переводы данной статьи словаря '<em>%0%</em>'<br/>Добавить другие языки можно, воспользовавшись пунктом 'Языки' в меню слева\n\t\t",
+			"Ниже Вы можете указать различные переводы данной статьи словаря '%0%'. Добавить другие языки можно, воспользовавшись пунктом 'Языки' в меню слева.",
 		displayName: 'Название языка (культуры)',
-		changeKeyError: "\n      Ключ '%0%' уже существует в словаре.\n   ",
+		changeKeyError: "Ключ '%0%' уже существует в словаре.",
 		overviewTitle: 'Обзор словаря',
 	},
 	editcontenttype: {

src/assets/lang/tr-tr.ts

@@ -510,9 +510,9 @@ export default {
 		noItems: 'Sözlük öğesi yok.',
 	},
 	dictionaryItem: {
-		description: "\n      Aşağıdaki sözlük öğesi '<em>%0%</em>' için farklı dil sürümlerini düzenleyin\n   ",
+		description: "Aşağıdaki sözlük öğesi '%0%' için farklı dil sürümlerini düzenleyin",
 		displayName: 'Kültür Adı',
-		changeKeyError: "\n      '%0%' anahtarı zaten var.\n   ",
+		changeKeyError: "'%0%' anahtarı zaten var.",
 		overviewTitle: 'Sözlüğe genel bakış',
 	},
 	examineManagement: {

src/assets/lang/uk-ua.ts

@@ -422,9 +422,9 @@ export default {
 	},
 	dictionaryItem: {
 		description:
-			"\n\t\tНиже Ви можете вказати різні переклади даної статті словника '<em>%0%</em>'<br/>Додати інші мови можна, скориставшись пунктом 'Мови' в меню зліва\n\t\t",
+			"Ниже Ви можете вказати різні переклади даної статті словника '%0%'. Додати інші мови можна, скориставшись пунктом 'Мови' в меню зліва.",
 		displayName: 'Назва мови (культури)',
-		changeKeyError: "\n      Ключ '%0%' вже існує у словнику.\n   ",
+		changeKeyError: "Ключ '%0%' вже існує у словнику.",
 		overviewTitle: 'Огляд словника',
 	},
 	editcontenttype: {

src/assets/lang/zh-cn.ts

@@ -280,9 +280,9 @@ export default {
 		selectEditor: '选择编辑器',
 	},
 	dictionaryItem: {
-		description: '\n       为字典项编辑不同语言的版本‘<em>%0%</em>’<br/>您可以在左侧的“语言”中添加一种语言\n    ',
+		description: '为字典项编辑不同语言的版本‘%0%’, 您可以在左侧的“语言”中添加一种语言',
 		displayName: '语言名称',
-		changeKeyError: "\n      关键字 '%0%' 已经存在。\n   ",
+		changeKeyError: "关键字 '%0%' 已经存在。",
 	},
 	placeholders: {
 		username: '输入您的用户名',

src/assets/lang/zh-tw.ts

@@ -278,8 +278,7 @@ export default {
 		selectEditor: '選擇編輯器',
 	},
 	dictionaryItem: {
-		description:
-			"\n      為此字典項目 '<em>%0%</em>' 編輯不同語言版本，<br />您可以在左方選單「語言」中增添新的語言\n   ",
+		description: "為此字典項目 '%0%' 編輯不同語言版本，您可以在左方選單「語言」中增添新的語言",
 		displayName: '語言名稱',
 	},
 	placeholders: {

src/packages/core/utils/index.ts

@@ -17,6 +17,7 @@ export * from './path/stored-path.function.js';
 export * from './path/transform-server-path-to-client-path.function.js';
 export * from './path/umbraco-path.function.js';
 export * from './path/url-pattern-to-string.function.js';
+export * from './sanitize/sanitize-html.function.js';
 export * from './selection-manager/selection.manager.js';
 export * from './state-manager/index.js';
 export * from './string/from-camel-case.function.js';

src/packages/core/utils/sanitize/sanitize-html.function.ts

@@ -0,0 +1,10 @@
+import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify';
+
+/**
+ * Sanitize a HTML string by removing any potentially harmful content such as scripts.
+ * @param {string} html The HTML string to sanitize.
+ * @returns The sanitized HTML string.
+ */
+export function sanitizeHTML(html: string): string {
+	return DOMPurify.sanitize(html);
+}

src/packages/dictionary/workspace/views/workspace-view-dictionary-editor.element.ts

@@ -2,10 +2,11 @@ import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from '../dictionary-workspace.contex
 import type { UmbDictionaryDetailModel } from '../../types.js';
 import type { UUITextareaElement } from '@umbraco-cms/backoffice/external/uui';
 import { UUITextareaEvent } from '@umbraco-cms/backoffice/external/uui';
-import { css, html, customElement, state, repeat, ifDefined, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbLanguageCollectionRepository, type UmbLanguageDetailModel } from '@umbraco-cms/backoffice/language';
 import { UMB_CURRENT_USER_CONTEXT } from '@umbraco-cms/backoffice/current-user';
+import { sanitizeHTML } from '@umbraco-cms/backoffice/utils';
 
 @customElement('umb-workspace-view-dictionary-editor')
 export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
@@ -21,8 +22,12 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 	@state()
 	private _currentUserHasAccessToAllLanguages?: boolean = false;
 
-	#languageCollectionRepository = new UmbLanguageCollectionRepository(this);
-	#workspaceContext!: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE;
+	get #dictionaryName() {
+		return typeof this._dictionary?.name !== 'undefined' ? sanitizeHTML(this._dictionary.name) : '...';
+	}
+
+	readonly #languageCollectionRepository = new UmbLanguageCollectionRepository(this);
+	#workspaceContext?: typeof UMB_DICTIONARY_WORKSPACE_CONTEXT.TYPE;
 	#currentUserContext?: typeof UMB_CURRENT_USER_CONTEXT.TYPE;
 
 	constructor() {
@@ -59,7 +64,7 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 	}
 
 	#observeDictionary() {
-		this.observe(this.#workspaceContext.dictionary, (dictionary) => {
+		this.observe(this.#workspaceContext?.dictionary, (dictionary) => {
 			this._dictionary = dictionary;
 		});
 	}
@@ -77,14 +82,14 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 			const translation = (target.value as string).toString();
 			const isoCode = target.getAttribute('name')!;
 
-			this.#workspaceContext.setPropertyValue(isoCode, translation);
+			this.#workspaceContext?.setPropertyValue(isoCode, translation);
 		}
 	}
 
 	override render() {
 		return html`
 			<uui-box>
-				${unsafeHTML(this.localize.term('dictionaryItem_description', this._dictionary?.name || '&#8203;'))}
+				${this.localize.term('dictionaryItem_description', this.#dictionaryName)}
 				${repeat(
 					this._languages,
 					(item) => item.unique,
@@ -105,7 +110,7 @@ export class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
 				name=${language.unique}
 				label="translation"
 				@change=${this.#onTextareaChange}
-				value=${ifDefined(translation?.translation)}
+				.value=${translation?.translation ?? ''}
 				?readonly=${this.#isReadOnly(language.unique)}></uui-textarea>
 		</umb-property-layout>`;
 	}

src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts

@@ -12,7 +12,6 @@ import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 import { marked } from '@umbraco-cms/backoffice/external/marked';
 import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify';
 import { UmbChangeEvent, type UmbInputEvent } from '@umbraco-cms/backoffice/event';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
@@ -22,6 +21,7 @@ import { UmbCodeEditorLoadedEvent } from '@umbraco-cms/backoffice/code-editor';
 import type { UmbCodeEditorController, UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
 import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
+import { sanitizeHTML } from '@umbraco-cms/backoffice/utils';
 
 const elementName = 'umb-input-markdown';
 
@@ -560,7 +560,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 	#renderPreview() {
 		if (!this.preview || !this.value) return;
 		const markdownAsHtml = marked.parse(this.value as string) as string;
-		const sanitizedHtml = markdownAsHtml ? DOMPurify.sanitize(markdownAsHtml) : '';
+		const sanitizedHtml = markdownAsHtml ? sanitizeHTML(markdownAsHtml) : '';
 		return html`<uui-scroll-container id="preview">${unsafeHTML(sanitizedHtml)}</uui-scroll-container>`;
 	}