From e107dbfc8ae8bcfdddee8ada6cb151f0f356bc94 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 18 Sep 2024 15:47:53 +0100 Subject: [PATCH] Updated `umb-input-tiptap` to use extensions --- .../input-tiptap/input-tiptap.element.ts | 52 +++++++++---------- .../input-tiptap/tiptap-fixed-menu.element.ts | 16 +++--- .../property-editor-ui-tiptap.element.ts | 12 +++-- 3 files changed, 39 insertions(+), 41 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts index db32b07231..1aca063f49 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/input-tiptap.element.ts @@ -1,5 +1,5 @@ -import type { UmbTiptapExtensionBase } from '../../extensions/types.js'; -import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit'; +import type { UmbTiptapExtensionApi } from '../../extensions/types.js'; +import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { loadManifestApi } from '@umbraco-cms/backoffice/extension-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { @@ -13,6 +13,7 @@ import { Editor, Gapcursor, HardBreak, + Heading, History, HorizontalRule, Italic, @@ -34,7 +35,12 @@ import './tiptap-fixed-menu.element.js'; import './tiptap-hover-menu.element.js'; @customElement('umb-input-tiptap') -export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, undefined) { +export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement) { + #requiredExtensions = [Document, Dropcursor, Gapcursor, HardBreak, History, Paragraph, Text]; + + @state() + private _extensions: Array = []; + @property({ attribute: false }) configuration?: UmbPropertyEditorConfigCollection; @@ -44,9 +50,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un @property({ type: Boolean, reflect: true }) readonly = false; - @state() - private _extensions: Array = []; - @state() private _editor!: Editor; @@ -58,7 +61,6 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un await new Promise((resolve) => { this.observe(umbExtensionsRegistry.byType('tiptapExtension'), async (manifests) => { this._extensions = []; - for (const manifest of manifests) { if (manifest.api) { const extension = await loadManifestApi(manifest.api); @@ -67,38 +69,29 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un } } } - - this.requestUpdate('_extensions'); - resolve(); }); }); } async #loadEditor() { + const element = this.shadowRoot?.querySelector('#editor'); if (!element) return; - const extensions = this._extensions.map((ext) => ext.getExtensions()).flat(); + const extensions = this._extensions.map((ext) => ext.getTiptapExtensions()).flat(); this._editor = new Editor({ element: element, editable: !this.readonly, extensions: [ - // REQUIRED EXTENSIONS START - Document, - Dropcursor, - Gapcursor, - HardBreak, - History, - Paragraph, - Text, - // REQUIRED EXTENSIONS END + ...this.#requiredExtensions, Blockquote, Bold, BulletList, Code, CodeBlock, + Heading, HorizontalRule, Italic, Link.configure({ openOnClick: false }), @@ -111,7 +104,7 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un Underline, ...extensions, ], - content: this.value?.toString(), + content: this.value, onUpdate: ({ editor }) => { this.value = editor.getHTML(); this.dispatchEvent(new UmbChangeEvent()); @@ -120,13 +113,18 @@ export class UmbInputTiptapElement extends UmbFormControlMixin(UmbLitElement, un } override render() { - if (!this._extensions?.length) return html``; return html` - - + ${when( + !this._editor && !this._extensions?.length, + () => html``, + () => html` + + + `, + )}
`; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts index 3675670ab3..1567febabb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/components/input-tiptap/tiptap-fixed-menu.element.ts @@ -1,4 +1,5 @@ -import type { UmbTiptapExtensionBase, UmbTiptapToolbarButton } from '../../extensions/types.js'; +import type { UmbTiptapToolbarButton } from '../../extensions/types.js'; +import type { ManifestTiptapExtension } from '../../extensions/tiptap-extension.js'; import * as icons from './icons.js'; import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -153,18 +154,10 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement { } #editor?: Editor; - @property({ attribute: false }) - extensions: Array = []; - #onUpdate = () => { this.requestUpdate(); }; - protected override firstUpdated() { - const buttons = this.extensions.flatMap((ext) => ext.getToolbarButtons()); - this.actions.push(...buttons); - } - override render() { return html` ${this.actions.map( @@ -181,6 +174,11 @@ export class UmbTiptapFixedMenuElement extends UmbLitElement { `, )} + !!ext.kind || !!ext.element} + .elementProps=${{ editor: this.editor }}> + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts index 7ab482cb77..60dedc1240 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/rte/tiptap/property-editors/tiptap/property-editor-ui-tiptap.element.ts @@ -138,11 +138,13 @@ export class UmbPropertyEditorUITiptapElement extends UmbLitElement implements U } override render() { - return html``; + return html` + + `; } }