From 334fedf34bc687f767a4d44ea34557feddbac164 Mon Sep 17 00:00:00 2001 From: Nathan Woulfe Date: Wed, 1 Mar 2023 12:26:20 +1000 Subject: [PATCH] adds tinyMCE WC, scaffold basic toolbar + plugins --- src/Umbraco.Web.UI.Client/package-lock.json | 160 +++++++++--------- src/Umbraco.Web.UI.Client/package.json | 1 + .../models/Umbraco.TinyMCE.ts | 1 + .../uis/tiny-mce/manifests.ts | 5 +- .../property-editor-ui-tiny-mce.element.ts | 41 ++++- .../src/core/mocks/data/data-type.data.ts | 62 ++++++- .../src/core/mocks/data/document-type.data.ts | 18 ++ .../src/core/mocks/data/document.data.ts | 6 + 8 files changed, 209 insertions(+), 85 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/package-lock.json b/src/Umbraco.Web.UI.Client/package-lock.json index 646bbd3b30..37df305bb9 100644 --- a/src/Umbraco.Web.UI.Client/package-lock.json +++ b/src/Umbraco.Web.UI.Client/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "@tinymce/tinymce-webcomponent": "^2.0.1", "@umbraco-ui/uui": "^1.2.0-rc.0", "@umbraco-ui/uui-css": "^1.2.0-rc.0", "@umbraco-ui/uui-modal": "file:umbraco-ui-uui-modal-0.0.0.tgz", @@ -3035,41 +3036,26 @@ "fsevents": "2.3.2" } }, - "node_modules/@rollup/plugin-node-resolve": { - "version": "13.3.0", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz", - "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^3.1.0", - "@types/resolve": "1.17.1", - "deepmerge": "^4.2.2", - "is-builtin-module": "^3.1.0", - "is-module": "^1.0.0", - "resolve": "^1.19.0" - }, - "engines": { - "node": ">= 10.0.0" - }, - "peerDependencies": { - "rollup": "^2.42.0" - } - }, "node_modules/@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", + "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", "dev": true, "dependencies": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" + "@types/estree": "^1.0.0", + "estree-walker": "^2.0.2", + "picomatch": "^2.3.1" }, "engines": { - "node": ">= 8.0.0" + "node": ">=14.0.0" }, "peerDependencies": { - "rollup": "^1.20.0||^2.0.0" + "rollup": "^1.20.0||^2.0.0||^3.0.0" + }, + "peerDependenciesMeta": { + "rollup": { + "optional": true + } } }, "node_modules/@sinclair/typebox": { @@ -5037,6 +5023,11 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@tinymce/tinymce-webcomponent": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-webcomponent/-/tinymce-webcomponent-2.0.1.tgz", + "integrity": "sha512-17rbpsggiRqfDTKaAvCFlt9LWfb3JBXXhCZtGprb/Rk707ZMJAjCMMrrobPdCqc71r7BTMCFRH5PL4sP87lbdw==" + }, "node_modules/@types/accepts": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz", @@ -5207,9 +5198,9 @@ "dev": true }, "node_modules/@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", + "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", "dev": true }, "node_modules/@types/express": { @@ -5497,15 +5488,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@types/resolve": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", - "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", - "dev": true, - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -7013,6 +6995,64 @@ "node": ">=10.0.0" } }, + "node_modules/@web/dev-server-rollup/node_modules/@rollup/plugin-node-resolve": { + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.3.0.tgz", + "integrity": "sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==", + "dev": true, + "dependencies": { + "@rollup/pluginutils": "^3.1.0", + "@types/resolve": "1.17.1", + "deepmerge": "^4.2.2", + "is-builtin-module": "^3.1.0", + "is-module": "^1.0.0", + "resolve": "^1.19.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "peerDependencies": { + "rollup": "^2.42.0" + } + }, + "node_modules/@web/dev-server-rollup/node_modules/@rollup/pluginutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", + "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "dev": true, + "dependencies": { + "@types/estree": "0.0.39", + "estree-walker": "^1.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0" + } + }, + "node_modules/@web/dev-server-rollup/node_modules/@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==", + "dev": true + }, + "node_modules/@web/dev-server-rollup/node_modules/@types/resolve": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", + "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==", + "dev": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@web/dev-server-rollup/node_modules/estree-walker": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", + "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", + "dev": true + }, "node_modules/@web/dev-server-rollup/node_modules/rollup": { "version": "2.79.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", @@ -10712,9 +10752,9 @@ } }, "node_modules/estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", "dev": true }, "node_modules/esutils": { @@ -16774,46 +16814,12 @@ "rollup": "^1.20.0 || ^2.0.0 || ^3.0.0" } }, - "node_modules/rollup-plugin-esbuild/node_modules/@rollup/pluginutils": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz", - "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/rollup-plugin-esbuild/node_modules/@types/estree": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz", - "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", - "dev": true - }, "node_modules/rollup-plugin-esbuild/node_modules/es-module-lexer": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.0.tgz", "integrity": "sha512-2BMfqBDeVCcOlLaL1ZAfp+D868SczNpKArrTM3dhpd7dK/OVlogzY15qpUngt+LMTq5UC/csb9vVQAgupucSbA==", "dev": true }, - "node_modules/rollup-plugin-esbuild/node_modules/estree-walker": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true - }, "node_modules/rollup-plugin-url": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/rollup-plugin-url/-/rollup-plugin-url-3.0.1.tgz", diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index b840c8daa8..69c0f0a4fe 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/src/Umbraco.Web.UI.Client/package.json @@ -57,6 +57,7 @@ "npm": ">=9.5 < 10" }, "dependencies": { + "@tinymce/tinymce-webcomponent": "^2.0.1", "@umbraco-ui/uui": "^1.2.0-rc.0", "@umbraco-ui/uui-css": "^1.2.0-rc.0", "@umbraco-ui/uui-modal": "file:umbraco-ui-uui-modal-0.0.0.tgz", diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts index d1778f6b4e..b3fb576256 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/models/Umbraco.TinyMCE.ts @@ -10,6 +10,7 @@ export const manifest: ManifestPropertyEditorModel = { { alias: 'mediaParentId', label: 'Image Upload Folder', + description: 'Choose the upload location of pasted images', propertyEditorUI: 'Umb.PropertyEditorUI.TreePicker', }, { diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts index 1c570b0cb8..d5ab888170 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/manifests.ts @@ -1,4 +1,4 @@ -import { manifest as configuration } from './config/configuration/manifests'; +import { manifest as toolbar } from './config/configuration/manifests'; import type { ManifestPropertyEditorUI } from '@umbraco-cms/models'; const manifest: ManifestPropertyEditorUI = { @@ -21,6 +21,7 @@ const manifest: ManifestPropertyEditorUI = { { alias: 'overlaySize', label: 'Overlay Size', + description: 'Select the width of the overlay (link picker)', propertyEditorUI: 'Umb.PropertyEditorUI.OverlaySize', }, { @@ -33,6 +34,6 @@ const manifest: ManifestPropertyEditorUI = { }, }; -const config = [configuration]; +const config = [toolbar]; export const manifests = [manifest, ...config]; diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts index 627563c013..28bc63b28a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -1,23 +1,54 @@ -import { html } from 'lit'; +import { css, html } from 'lit'; import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { customElement, property } from 'lit/decorators.js'; + import { UmbLitElement } from '@umbraco-cms/element'; +import { DataTypePropertyModel } from '@umbraco-cms/backend-api'; +import '@tinymce/tinymce-webcomponent'; /** * @element umb-property-editor-ui-tiny-mce */ @customElement('umb-property-editor-ui-tiny-mce') export class UmbPropertyEditorUITinyMceElement extends UmbLitElement { - static styles = [UUITextStyles]; + static styles = [UUITextStyles, css``]; @property() - value = ''; + value = 'Some default value'; + + @property() + private _config = { + statusbar: false, + width: 500, + height: 500, + }; + + @property({ type: Array }) + private _toolbar: Array = []; + + @property({ type: Array }) + private _plugins: Array = []; @property({ type: Array, attribute: false }) - public config = []; + public set config(config: Array) { + this._config.width = config.find((x) => x.alias === 'width')?.value; + this._config.height = config.find((x) => x.alias === 'height')?.value; + this._toolbar = config.find((x) => x.alias === 'toolbar')?.value; + this._plugins = config.find((x) => x.alias === 'plugins')?.value.map((x: {[key: string]: string}) => x.name); + } render() { - return html`
umb-property-editor-ui-tiny-mce
`; + return html`
+ ${this.value} +
`; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts index f1403b64d6..402c5f9f85 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts @@ -475,7 +475,67 @@ export const data: Array = [ parentKey: null, propertyEditorAlias: 'Umbraco.TinyMCE', propertyEditorUiAlias: 'Umb.PropertyEditorUI.TinyMCE', - data: [], + data: [ + { + alias: 'hideLabel', + value: true, + }, + { alias: 'dimensions', value: { width: 400, height: 500 } }, + { alias: 'maxImageSize', value: 500 }, + { alias: 'mode', value: 'classic' }, + { alias: 'stylesheets', value: [] }, + { + alias: 'toolbar', + value: [ + 'ace', + 'undo', + 'redo', + 'styles', + 'bold', + 'italic', + 'alignleft', + 'aligncenter', + 'alignright', + 'bullist', + 'numlist', + 'outdent', + 'indent', + 'link', + 'umbmediapicker', + 'umbmacro', + 'umbembeddialog', + ], + }, + { + alias: 'plugins', + value: [ + { + name: 'anchor', + }, + { + name: 'charmap', + }, + { + name: 'table', + }, + { + name: 'lists', + }, + { + name: 'advlist', + }, + { + name: 'autolink', + }, + { + name: 'directionality', + }, + { + name: 'searchreplace', + }, + ], + }, + ], }, { $type: 'data-type', diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts index f49db67bbb..399a469203 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document-type.data.ts @@ -21,6 +21,24 @@ export const data: Array = [ isElement: false, properties: [ { + key: '2`', + containerKey: 'all-properties-group-key', + alias: 'richTextEditor', + name: 'Rich Text editor', + description: '', + dataTypeKey: 'dt-richTextEditor', + variesByCulture: false, + variesBySegment: false, + validation: { + mandatory: true, + mandatoryMessage: null, + regEx: null, + regExMessage: null, + }, + appearance: { + labelOnTop: false, + }, + }, { key: '2', containerKey: 'all-properties-group-key', alias: 'colorPicker', diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts index d52e61ab8a..af97477dd8 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/document.data.ts @@ -19,6 +19,12 @@ export const data: Array = [ key: 'all-property-editors-document-key', contentTypeKey: 'all-property-editors-document-type-key', values: [ + { + alias: 'richTextEditor', + culture: null, + segment: null, + value: null, + }, { alias: 'email', culture: null,