Merge pull request #929 from umbraco/feature/code-editor-modal-fix

Feature/code editor modal fix

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, UmbCodeEditorModalValue, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 
@@ -14,12 +13,11 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 
 	constructor() {
 		super();
-
 		this.#loadCodeEditor();
 	}
 
 	#handleConfirm() {
-		this.modalContext?.submit({ content: this.data?.content ?? '' });
+		this.modalContext?.submit({ content: this._codeEditor?.editor?.monacoEditor?.getValue() ?? '' });
 	}
 
 	#handleCancel() {
@@ -35,21 +33,10 @@ export class UmbCodeEditorModalElement extends UmbModalBaseElement<UmbCodeEditor
 		}
 	}
 
-	// TODO => debounce?
-	#onCodeEditorInput(e: UUIInputEvent) {
-		e.preventDefault();
-		if (!this.data) {
-			return;
-		}
-
-		this.data.content = this._codeEditor?.code ?? '';
-	}
-
 	#renderCodeEditor() {
 		return html`<umb-code-editor
 			language=${ifDefined(this.data?.language)}
-			.code=${this.data?.content ?? ''}
-			@input=${this.#onCodeEditorInput}></umb-code-editor>`;
+			.code=${this.data?.content ?? ''}></umb-code-editor>`;
 	}
 
 	#renderLoading() {

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/tiny-mce/plugins/tiny-mce-linkpicker.plugin.ts

@@ -70,32 +70,28 @@ 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,
-			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: {
@@ -107,7 +103,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;
@@ -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;
 		}

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';