V16: Removes TinyMCE (client-side)

src/Umbraco.Web.UI.Client/.gitignore

@@ -51,7 +51,6 @@ custom-elements.json
 # https://github.com/runem/web-component-analyzer#vscode
 # https://github.com/microsoft/vscode-custom-data
 vscode-html-custom-data.json
-public/tinymce/*
 
 # Vite runtime files
 vite.config.ts.timestamp-*.mjs

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -21,7 +21,6 @@
 		"stylesheet",
 		"svgs",
 		"templating",
-		"tinymce",
 		"tiptap",
 		"umbraco",
 		"Uncategorized",

src/Umbraco.Web.UI.Client/eslint.config.js

@@ -69,7 +69,7 @@ export default [
 			'local-rules/exported-string-constant-naming': [
 				'error',
 				{
-					excludedFileNames: ['umbraco-package', 'input-tiny-mce.defaults'], // TODO: what to do about the tiny mce defaults?
+					excludedFileNames: ['umbraco-package'],
 				},
 			],
 			'@typescript-eslint/no-non-null-assertion': 'off',

src/Umbraco.Web.UI.Client/package.json

@@ -100,7 +100,6 @@
 		"./template": "./dist-cms/packages/templating/templates/index.js",
 		"./temporary-file": "./dist-cms/packages/core/temporary-file/index.js",
 		"./themes": "./dist-cms/packages/core/themes/index.js",
-		"./tiny-mce": "./dist-cms/packages/tiny-mce/index.js",
 		"./tiptap": "./dist-cms/packages/tiptap/index.js",
 		"./translation": "./dist-cms/packages/translation/index.js",
 		"./tree": "./dist-cms/packages/core/tree/index.js",
@@ -124,7 +123,6 @@
 		"./external/openid": "./dist-cms/external/openid/index.js",
 		"./external/router-slot": "./dist-cms/external/router-slot/index.js",
 		"./external/rxjs": "./dist-cms/external/rxjs/index.js",
-		"./external/tinymce": "./dist-cms/external/tinymce/index.js",
 		"./external/tiptap": "./dist-cms/external/tiptap/index.js",
 		"./external/uui": "./dist-cms/external/uui/index.js",
 		"./external/uuid": "./dist-cms/external/uuid/index.js"
@@ -227,8 +225,6 @@
 		"marked": "^15.0.7",
 		"monaco-editor": "^0.52.2",
 		"rxjs": "^7.8.1",
-		"tinymce": "^6.8.5",
-		"tinymce-i18n": "^24.12.30",
 		"uuid": "^11.0.5"
 	},
 	"devDependencies": {

src/Umbraco.Web.UI.Client/src/apps/backoffice/backoffice.element.ts

@@ -42,7 +42,6 @@ const CORE_PACKAGES = [
 	import('../../packages/tags/umbraco-package.js'),
 	import('../../packages/telemetry/umbraco-package.js'),
 	import('../../packages/templating/umbraco-package.js'),
-	import('../../packages/tiny-mce/umbraco-package.js'),
 	import('../../packages/tiptap/umbraco-package.js'),
 	import('../../packages/translation/umbraco-package.js'),
 	import('../../packages/ufm/umbraco-package.js'),

src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

@@ -879,6 +879,7 @@ export default {
 		orderBy: 'Order by',
 		password: 'Password',
 		path: 'Path',
+		pixels: 'pixels',
 		pleasewait: 'One moment please...',
 		previous: 'Previous',
 		properties: 'Properties',

src/Umbraco.Web.UI.Client/src/css/rte-content.css

@@ -1,37 +1,4 @@
-/* TinyMCE specific styles */
-#tinymce {
-	.umb-embed-holder {
-		position: relative;
-	}
-
-	.umb-embed-holder > * {
-		user-select: none;
-		pointer-events: none;
-	}
-
-	.umb-embed-holder[data-mce-selected] {
-		outline: 2px solid var(--uui-palette-spanish-pink-light);
-	}
-
-	.umb-embed-holder::before {
-		z-index: 1000;
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		content: ' ';
-	}
-
-	.umb-embed-holder[data-mce-selected]::before {
-		background: rgba(0, 0, 0, 0.025);
-	}
-
-	*[data-mce-selected='inline-boundary'] {
-		background: rgba(0, 0, 0, 0.025);
-		outline: 2px solid var(--uui-palette-spanish-pink-light);
-	}
-}
-
-/* General styles (that apply to both TinyMCE and Tiptap RTEs) */
+/* General RTEs styles */
 
 .umb-macro-holder {
 	border: 3px dotted red;

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -1088,101 +1088,6 @@ export const data: Array<UmbMockDataTypeModel> = [
 			{ alias: 'overlaySize', value: 'medium' },
 		],
 	},
-	{
-		name: 'Rich Text Editor (TinyMCE)',
-		id: 'dt-richTextEditorTinyMce',
-		parent: null,
-		editorAlias: 'Umbraco.RichText',
-		editorUiAlias: 'Umb.PropertyEditorUi.TinyMCE',
-		hasChildren: false,
-		isFolder: false,
-		isDeletable: true,
-		canIgnoreStartNodes: false,
-		values: [
-			{
-				alias: 'hideLabel',
-				value: true,
-			},
-			{ alias: 'dimensions', value: { height: 500 } },
-			{ alias: 'maxImageSize', value: 500 },
-			{ alias: 'ignoreUserStartNodes', value: false },
-			{
-				alias: 'validElements',
-				value:
-					'+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-s[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption,video[*],audio[*],picture[*],source[*],canvas[*]',
-			},
-			{ alias: 'invalidElements', value: 'font' },
-			{ alias: 'stylesheets', value: ['/rte-styles.css'] },
-			{
-				alias: 'toolbar',
-				value: [
-					'sourcecode',
-					'undo',
-					'redo',
-					'styles',
-					'fontfamily',
-					'fontsize',
-					'forecolor',
-					'backcolor',
-					'blockquote',
-					'removeformat',
-					'bold',
-					'italic',
-					'underline',
-					'strikethrough',
-					'alignleft',
-					'aligncenter',
-					'alignright',
-					'alignjustify',
-					'bullist',
-					'numlist',
-					'outdent',
-					'indent',
-					'link',
-					'unlink',
-					'anchor',
-					'hr',
-					'subscript',
-					'superscript',
-					'charmap',
-					'rtl',
-					'ltr',
-					'table',
-					'umbmediapicker',
-					'umbembeddialog',
-				],
-			},
-			{
-				alias: 'plugins',
-				value: [
-					{
-						name: 'anchor',
-					},
-					{
-						name: 'charmap',
-					},
-					{
-						name: 'table',
-					},
-					{
-						name: 'lists',
-					},
-					{
-						name: 'advlist',
-					},
-					{
-						name: 'autolink',
-					},
-					{
-						name: 'directionality',
-					},
-					{
-						name: 'searchreplace',
-					},
-				],
-			},
-		],
-	},
 	{
 		name: 'Label',
 		id: 'dt-label',

src/Umbraco.Web.UI.Client/src/mocks/data/document-type/document-type.data.ts

@@ -105,30 +105,6 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 					labelOnTop: false,
 				},
 			},
-			{
-				id: '1',
-				container: {
-					id: 'all-properties-group-key',
-				},
-				alias: 'richTextEditorTinyMce',
-				name: 'Rich Text editor (TinyMce)',
-				description: 'Some description to test with a long description.',
-				dataType: {
-					id: 'dt-richTextEditorTinyMce',
-				},
-				variesByCulture: false,
-				variesBySegment: false,
-				sortOrder: 0,
-				validation: {
-					mandatory: true,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
 			{
 				id: '2',
 				container: {
@@ -1802,31 +1778,6 @@ export const data: Array<UmbMockDocumentTypeModel> = [
 					labelOnTop: false,
 				},
 			},
-			{
-				id: '2dd0d4d2-cda8-4ac2-affd-a69fc10382b1',
-				container: { id: 'the-simplest-document-type-id-container' },
-				alias: 'tinymce',
-				name: 'TinyMCE',
-				description: `
-This is to test the default configuration of the TinyMCE editor.
-
-Search for **dt-richTextEditorTinyMce** in the codebase to find the configuration and add configuration values.
-
-**NB!** If this throws an error in console, make sure that \`@umbraco-cms/backoffice/block-rte\` is available in the importmap.`,
-				dataType: { id: 'dt-richTextEditorTinyMce' },
-				variesByCulture: false,
-				variesBySegment: false,
-				sortOrder: 0,
-				validation: {
-					mandatory: false,
-					mandatoryMessage: null,
-					regEx: null,
-					regExMessage: null,
-				},
-				appearance: {
-					labelOnTop: false,
-				},
-			},
 		],
 		containers: [
 			{

src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts

@@ -948,25 +948,6 @@ export const data: Array<UmbMockDocumentModel> = [
 					`,
 				},
 			},
-			{
-				alias: 'tinymce',
-				editorAlias: 'Umb.PropertyEditorUi.TinyMCE',
-				culture: null,
-				segment: null,
-				value: {
-					blocks: undefined,
-					markup: `
-						<p>
-							Some value for the RTE with an <a href="https://google.com">external link</a> and an <a type="document" href="/{localLink:c05da24d-7740-447b-9cdc-bd8ce2172e38}">internal link</a> foo foo
-						</p>
-						<div class="umb-macro-holder TestMacro umb-macro-mce_1 mceNonEditable"><!-- <?UMBRACO_MACRO macroAlias="TestMacro" /> --><ins>Macro alias: <strong>TestMacro</strong></ins></div>
-						<p>
-							<img width="384" height="228" loading="lazy" alt="Installer illustration" src="/umbraco/backoffice/assets/installer-illustration.svg" />
-						</p>
-						<p>End of test content</p>
-					`,
-				},
-			},
 		],
 	},
 	{

src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet/stylesheet.data.ts

@@ -18,7 +18,7 @@ export const data: Array<UmbMockStylesheetModel> = [
 		content: `
 /** RTE Stylesheet */
 
-#editor, #tinymce {
+#editor {
 	background-color: pink;
 	font-size: 1.5rem;
 }