From 81ee826435a9bb21ee03a80f90cc8dbbe1f747b1 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Tue, 30 Jan 2024 11:54:40 +0100 Subject: [PATCH] make sure to load rte-content.css --- .../public-assets/css/rte-content.css | 29 ----------- .../src/css/rte-content.css | 49 +++++++++++++++++++ .../mocks/data/data-type/data-type.data.ts | 2 +- .../src/mocks/data/document.data.ts | 3 ++ .../input-tiny-mce/input-tiny-mce.element.ts | 5 +- 5 files changed, 57 insertions(+), 31 deletions(-) delete mode 100644 src/Umbraco.Web.UI.Client/public-assets/css/rte-content.css create mode 100644 src/Umbraco.Web.UI.Client/src/css/rte-content.css diff --git a/src/Umbraco.Web.UI.Client/public-assets/css/rte-content.css b/src/Umbraco.Web.UI.Client/public-assets/css/rte-content.css deleted file mode 100644 index 18b986bc23..0000000000 --- a/src/Umbraco.Web.UI.Client/public-assets/css/rte-content.css +++ /dev/null @@ -1,29 +0,0 @@ -.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); -} diff --git a/src/Umbraco.Web.UI.Client/src/css/rte-content.css b/src/Umbraco.Web.UI.Client/src/css/rte-content.css new file mode 100644 index 0000000000..2e6d1c23dc --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/css/rte-content.css @@ -0,0 +1,49 @@ +.umb-macro-holder { + border: 3px dotted red; + padding: 7px; + margin: 3px; + display: block; + position: relative; +} + +.umb-macro-holder::after { + content: 'Macros are no longer supported. Please use the block picker instead.'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + background-color: rgba(0, 0, 0, 0.7); + padding: 10px; + border-radius: 5px; +} + +.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); +} diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts index 89d4a3c1bc..4af08491a5 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts @@ -762,7 +762,7 @@ export const data: Array = [ '+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: ['/css/rte-content.css'] }, + { alias: 'stylesheets', value: [] }, { alias: 'toolbar', value: [ diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts index 255030d10f..65f4191338 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/document.data.ts @@ -40,6 +40,9 @@ export const data: Array = [ Some value for the RTE with an external link and an internal link foo foo

Macro alias: TestMacro
+

The following tests the embed plugin:

+
+

End of test content

`, }, }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts index 00f90f788a..9f3d8ef23b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-tiny-mce/input-tiny-mce.element.ts @@ -16,6 +16,7 @@ import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/ import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app'; import { UmbStylesheetDetailRepository, UmbStylesheetRuleManager } from '@umbraco-cms/backoffice/stylesheet'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import rteContentUrl from './css/rte_content.css?url'; @customElement('umb-input-tiny-mce') export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { @@ -179,6 +180,8 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { (stylesheetPath: string) => `${this.#serverUrl}/css/${stylesheetPath.replace(/\\/g, '/')}`, ) ?? []; + stylesheets.push('/umbraco/backoffice/css/rte-content.css'); + // create an object by merging the configuration onto the fallback config const configurationOptions: RawEditorOptions = { ...defaultFallbackConfig, @@ -218,7 +221,7 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { autoresize_bottom_margin: 10, body_class: 'umb-rte', contextMenu: false, - inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder', + inline_boundaries_selector: 'a[href],code,.mce-annotation,.umb-embed-holder,.umb-macro-holder', menubar: false, paste_remove_styles_if_webkit: true, paste_preprocess: pastePreProcessHandler,