diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts index afe5c2b742..7fdef3e2c8 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/components/property-editor-ui-tiptap-toolbar-configuration.element.ts @@ -36,10 +36,10 @@ export class UmbPropertyEditorUiTiptapToolbarConfigurationElement set value(value: UmbTiptapToolbarValue | undefined) { if (!value) value = [[[]]]; if (value === this.#value) return; - this.#value = value; + this.#value = this.#context.migrateTinyMceToolbar(value); } get value(): UmbTiptapToolbarValue | undefined { - return this.#value?.map((rows) => rows.map((groups) => [...groups])); + return this.#context.cloneToolbarValue(this.#value); } #value?: UmbTiptapToolbarValue; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts index a6d73979c5..4eb24c9995 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiptap/property-editors/tiptap/contexts/tiptap-toolbar-configuration.context.ts @@ -28,6 +28,49 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase([], (x) => x.unique); public readonly toolbar = this.#toolbar.asObservable(); + /** @deprecated This will be removed in Umbraco 16. */ + #tinyMceToolbarMapping: Record = { + undo: 'Umb.Tiptap.Toolbar.Undo', + redo: 'Umb.Tiptap.Toolbar.Redo', + cut: null, + copy: null, + paste: null, + styles: null, + fontname: null, + fontsize: null, + forecolor: null, + backcolor: null, + blockquote: 'Umb.Tiptap.Toolbar.Blockquote', + formatblock: null, + removeformat: 'Umb.Tiptap.Toolbar.ClearFormatting', + bold: 'Umb.Tiptap.Toolbar.Bold', + italic: 'Umb.Tiptap.Toolbar.Italic', + underline: 'Umb.Tiptap.Toolbar.Underline', + strikethrough: 'Umb.Tiptap.Toolbar.Strike', + alignleft: 'Umb.Tiptap.Toolbar.TextAlignLeft', + aligncenter: 'Umb.Tiptap.Toolbar.TextAlignCenter', + alignright: 'Umb.Tiptap.Toolbar.TextAlignRight', + alignjustify: 'Umb.Tiptap.Toolbar.TextAlignJustify', + bullist: 'Umb.Tiptap.Toolbar.BulletList', + numlist: 'Umb.Tiptap.Toolbar.OrderedList', + outdent: null, + indent: null, + anchor: null, + table: 'Umb.Tiptap.Toolbar.Table', + hr: 'Umb.Tiptap.Toolbar.HorizontalRule', + subscript: 'Umb.Tiptap.Toolbar.Subscript', + superscript: 'Umb.Tiptap.Toolbar.Superscript', + charmap: null, + rtl: null, + ltr: null, + link: 'Umb.Tiptap.Toolbar.Link', + unlink: 'Umb.Tiptap.Toolbar.Unlink', + sourcecode: 'Umb.Tiptap.Toolbar.SourceEditor', + umbmediapicker: 'Umb.Tiptap.Toolbar.MediaPicker', + umbembeddialog: 'Umb.Tiptap.Toolbar.EmbeddedMedia', + umbblockpicker: 'Umb.Tiptap.Toolbar.BlockPicker', + }; + constructor(host: UmbControllerHost) { super(host, UMB_TIPTAP_TOOLBAR_CONFIGURATION_CONTEXT); @@ -66,6 +109,11 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase row.map((group) => [...group])); + } + public filterExtensions(query: string): Array { return this.#extensions .getValue() @@ -132,6 +180,24 @@ export class UmbTiptapToolbarConfigurationContext extends UmbContextBase | null): UmbTiptapToolbarValue { + if (this.isValidToolbarValue(value)) return value; + + const items: Array = []; + + if (Array.isArray(value) && value.length > 0 && typeof value[0] === 'string') { + for (const alias of value) { + const mapping = this.#tinyMceToolbarMapping[alias]; + if (mapping) { + items.push(mapping); + } + } + } + + return [[items]]; + } + public moveToolbarItem(from: [number, number, number], to: [number, number, number]) { const [fromRowIndex, fromGroupIndex, fromItemIndex] = from; const [toRowIndex, toGroupIndex, toItemIndex] = to;