From 4d55628ba02cfddaa7b130131016206591da672b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 27 May 2024 10:15:48 +0200 Subject: [PATCH] split block entry into two components --- .../block-rte-entry-inline.element.ts | 25 +++++++++++++++++++ .../block-rte-entry.element.ts | 5 +--- .../components/block-rte-entry/index.ts | 1 + .../block/block-rte/components/index.ts | 1 + .../context/block-rte-manager.context.ts | 2 +- .../src/packages/block/block-rte/index.ts | 1 + .../input-tiny-mce/input-tiny-mce.defaults.ts | 20 ++++++++++++++- 7 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry-inline.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry-inline.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry-inline.element.ts new file mode 100644 index 0000000000..8d2065c439 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry-inline.element.ts @@ -0,0 +1,25 @@ +import { UmbBlockRteEntryElement } from './block-rte-entry.element.js'; +import { css } from '@umbraco-cms/backoffice/external/lit'; + +/** + * @element umb-rte-block + * @element umb-rte-block-inline + */ +export class UmbBlockRteEntryInlineElement extends UmbBlockRteEntryElement { + static styles = [ + ...UmbBlockRteEntryElement.styles, + css` + :host { + display: inline; + } + `, + ]; +} + +export default UmbBlockRteEntryInlineElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-rte-block-inline': UmbBlockRteEntryInlineElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts index 47d5ef0818..59575a92d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts @@ -1,6 +1,6 @@ import { UmbBlockRteEntryContext } from '../../context/block-rte-entry.context.js'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { html, css, property, state } from '@umbraco-cms/backoffice/external/lit'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import '../ref-rte-block/index.js'; import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block'; @@ -10,8 +10,6 @@ import type { UmbBlockListLayoutModel } from '@umbraco-cms/backoffice/block-list * @element umb-rte-block * @element umb-rte-block-inline */ -@customElement('umb-rte-block') -@customElement('umb-rte-block-inline') export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropertyEditorUiElement { // @property({ attribute: false }) @@ -140,6 +138,5 @@ export default UmbBlockRteEntryElement; declare global { interface HTMLElementTagNameMap { 'umb-rte-block': UmbBlockRteEntryElement; - 'umb-rte-block-inline': UmbBlockRteEntryElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/index.ts index f9cc8dae8f..991ba3eea7 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/index.ts @@ -1 +1,2 @@ export * from './block-rte-entry.element.js'; +export * from './block-rte-entry-inline.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/index.ts index e69de29bb2..0f97db6dc9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/index.ts @@ -0,0 +1 @@ +export * from './block-rte-entry/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts index ecdeaefc88..0c06ba5c3e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts @@ -4,7 +4,7 @@ import type { UmbBlockDataType } from '../../block/types.js'; import type { Editor } from '@umbraco-cms/backoffice/external/tinymce'; import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block'; -import '../components/block-rte-entry/block-rte-entry.element.js'; +import '../components/block-rte-entry/index.js'; /** * A implementation of the Block Manager specifically for the Rich Text Editor. diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts index 4cf976fea5..5ce24a84b0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/index.ts @@ -1,3 +1,4 @@ +export * from './components/index.js'; export * from './context/index.js'; export * from './workspace/index.js'; export * from './types.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts index 1407018f59..a604896101 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/tiny-mce/components/input-tiny-mce/input-tiny-mce.defaults.ts @@ -1,5 +1,9 @@ +import { UmbBlockRteEntryElement, UmbBlockRteEntryInlineElement } from '@umbraco-cms/backoffice/block-rte'; import type { RawEditorOptions } from '@umbraco-cms/backoffice/external/tinymce'; +//export const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = '/umbraco/backoffice/packages/block/block-rte/index.js'; +export const UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH = '@umbraco-cms/backoffice/block-rte'; + //we put these as extended elements because they get merged on top of the normal allowed elements by tiny mce //so we don't have to specify all the normal elements again export const defaultFallbackConfig: RawEditorOptions = { @@ -8,7 +12,7 @@ export const defaultFallbackConfig: RawEditorOptions = { '+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,cite,video[*],audio[*],picture[*],source[*],canvas[*]', invalid_elements: 'font', extended_valid_elements: - '@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|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],span[id|class|style|lang],figure,figcaption', + '@[id|class|style],umb-rte-block[!data-content-udi],-umb-rte-block-inline[!data-content-udi],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|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],span[id|class|style|lang],figure,figcaption', toolbar: [ 'styles', 'bold', @@ -24,6 +28,20 @@ export const defaultFallbackConfig: RawEditorOptions = { 'umbmediapicker', 'umbembeddialog', ], + + init_instance_callback: function (editor) { + console.log('editor', editor, editor.dom.doc); + + const script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = UMB_BLOCK_ENTRY_WEB_COMPONENTS_ABSOLUTE_PATH; + + editor.dom.doc.head.appendChild(script); + + //editor.iframeElement?.contentWindow?.customElements.define('umb-rte-block', UmbBlockRteEntryElement); + //editor.iframeElement?.contentWindow?.customElements.define('umb-rte-block-inline', UmbBlockRteEntryInlineElement); + }, + style_formats: [ { title: 'Headers',