From eb5ce700055ce012197b6508d8f46e3c32cdb24e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 11 Oct 2023 13:32:37 +0200 Subject: [PATCH 1/4] code editor modal fix --- .../input-tiny-mce/input-tiny-mce.element.ts | 9 +++------ .../code-editor/code-editor-modal.element.ts | 16 ++-------------- 2 files changed, 5 insertions(+), 20 deletions(-) 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 6c530463d7..f46d60853b 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 @@ -5,10 +5,7 @@ import { uriAttributeSanitizer } from './input-tiny-mce.sanitizer.js'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { renderEditor, type tinymce } from '@umbraco-cms/backoffice/external/tinymce'; import { UMB_AUTH, UmbLoggedInUser } from '@umbraco-cms/backoffice/auth'; -import { - TinyMcePluginArguments, - UmbTinyMcePluginBase, -} from '@umbraco-cms/backoffice/components'; +import { TinyMcePluginArguments, UmbTinyMcePluginBase } from '@umbraco-cms/backoffice/components'; import { ClassConstructor, hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api'; import { ManifestTinyMcePlugin, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { @@ -210,11 +207,11 @@ export class UmbInputTinyMceElement extends FormControlMixin(UmbLitElement) { // define keyboard shortcuts editor.addShortcut('Ctrl+S', '', () => - this.dispatchEvent(new CustomEvent('rte.shortcut.save', { composed: true, bubbles: true })) + this.dispatchEvent(new CustomEvent('rte.shortcut.save', { composed: true, bubbles: true })), ); editor.addShortcut('Ctrl+P', '', () => - this.dispatchEvent(new CustomEvent('rte.shortcut.saveAndPublish', { composed: true, bubbles: true })) + this.dispatchEvent(new CustomEvent('rte.shortcut.saveAndPublish', { composed: true, bubbles: true })), ); // bind editor events diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts index fb8a6522b0..d5e8ef82a9 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts @@ -15,12 +15,11 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement debounce? - #onCodeEditorInput(e: UUIInputEvent) { - e.preventDefault(); - if (!this.data) { - return; - } - - this.data.content = this._codeEditor?.code ?? ''; - } - #renderCodeEditor() { return html``; + .code=${this.data?.content ?? ''}>`; } #renderLoading() { From 08f9b24694534daa46f7c114f4eb4a77a61b514c Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 11 Oct 2023 15:04:33 +0200 Subject: [PATCH 2/4] link picker --- .../uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts | 6 +++--- .../uis/tiny-mce/property-editor-ui-tiny-mce.element.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts index 756772a637..85d2b1d3a4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts @@ -70,13 +70,13 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { } if (!this.#anchorElement) { - this.#openLinkPicker(); + this.#openLinkPicker({ name: this.editor.selection.getContent() }); return; } //if we already have a link selected, we want to pass that data over to the dialog const currentTarget: UmbLinkPickerLink = { - name: this.#anchorElement.title, + name: this.#anchorElement.textContent, url: this.#anchorElement.getAttribute('href') ?? '', target: this.#anchorElement.target, }; @@ -107,7 +107,7 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { if (!modalHandler) return; - const linkPickerData = await modalHandler.onSubmit(); + const linkPickerData = await modalHandler.onSubmit().catch(() => undefined); if (!linkPickerData) return; this.#linkPickerData = linkPickerData; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts index 9f51b697cb..2c32a2eade 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/property-editor-ui-tiny-mce.element.ts @@ -1,4 +1,4 @@ -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; From 1c6a2ac6e5a58b8d2bff74c3f7ad5dc7a023a7fb Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 16 Oct 2023 11:11:18 +0200 Subject: [PATCH 3/4] unused --- .../core/modal/common/code-editor/code-editor-modal.element.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts index d5e8ef82a9..737db6d17a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/modal/common/code-editor/code-editor-modal.element.ts @@ -1,6 +1,5 @@ import { css, html, ifDefined, customElement, query } from '@umbraco-cms/backoffice/external/lit'; import { loadCodeEditor, type UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor'; -import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbCodeEditorModalData, UmbCodeEditorModalResult } from '@umbraco-cms/backoffice/modal'; import { UmbModalBaseElement } from '@umbraco-cms/internal/modal'; import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; From fac4af80cca8a6ba78edbeb6392c1ac21df0fc8a Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Mon, 16 Oct 2023 13:52:17 +0200 Subject: [PATCH 4/4] fix link issues --- .../plugins/tiny-mce-linkpicker.plugin.ts | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts index 85d2b1d3a4..1e000b870a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts @@ -76,26 +76,22 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { //if we already have a link selected, we want to pass that data over to the dialog const currentTarget: UmbLinkPickerLink = { - name: this.#anchorElement.textContent, - url: this.#anchorElement.getAttribute('href') ?? '', + name: this.#anchorElement.title || this.#anchorElement.textContent, target: this.#anchorElement.target, + queryString: `${this.#anchorElement.search}${this.#anchorElement.hash}`, }; - // drop the lead char from the anchor text, if it has a value - const anchorVal = this.#anchorElement.dataset.anchor; - if (anchorVal) { - currentTarget.queryString = anchorVal.substring(1); - } - - if (currentTarget.url?.includes('localLink:')) { - currentTarget.udi = - currentTarget.url?.substring(currentTarget.url.indexOf(':') + 1, currentTarget.url.lastIndexOf('}')) ?? ''; + if (this.#anchorElement.href.includes('localLink:')) { + const href = this.#anchorElement.getAttribute('href')!; + currentTarget.udi = href.split('localLink:')[1].slice(0, -1); + } else if (this.#anchorElement.host.length) { + currentTarget.url = this.#anchorElement.protocol ? this.#anchorElement.protocol + '//' : undefined; + currentTarget.url += this.#anchorElement.host + this.#anchorElement.pathname; } this.#openLinkPicker(currentTarget); } - // TODO => get anchors to provide to link picker? async #openLinkPicker(currentTarget?: UmbLinkPickerLink) { const modalHandler = this.#modalContext?.open(UMB_LINK_PICKER_MODAL, { config: { @@ -117,7 +113,9 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { //Create a json obj used to create the attributes for the tag // TODO => where has rel gone? #createElemAttributes() { - const a: AnchorElementAttributes = Object.assign({}, this.#linkPickerData?.link, { 'data-anchor': null }); + // Attribute 'name' because of linkPickerData. It should be 'title' . + const { name, ...linkPickerData } = this.#linkPickerData!.link; + const a: AnchorElementAttributes = Object.assign({}, linkPickerData); // always need to map back to href for tinymce to render correctly // do this first as checking querystring below may modify the href property @@ -125,6 +123,10 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { a.href = this.#linkPickerData.link.url; } + if (this.#linkPickerData?.link.name) { + a.title = name; + } + if (this.#linkPickerData?.link.queryString?.startsWith('#')) { a['data-anchor'] = this.#linkPickerData?.link.queryString; a.href += this.#linkPickerData?.link.queryString; @@ -185,7 +187,7 @@ export default class UmbTinyMceLinkPickerPlugin extends UmbTinyMcePluginBase { } } - if (!this.#linkPickerData?.link.url && !this.#linkPickerData?.link.queryString) { + if (!this.#linkPickerData?.link.url && !this.#linkPickerData?.link.queryString && !this.#linkPickerData?.link.udi) { this.editor.execCommand('unlink'); return; }