From db0cfd4635669a07eb0f40cdf79b1ec4a0f024a6 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 24 May 2024 20:03:03 +0100 Subject: [PATCH] MarkdownEditor: code/UI tweaks --- .../input-markdown.element.ts | 6 +++--- .../property-editor-ui-markdown-editor.element.ts | 15 +++++++++------ .../url-picker-monaco-markdown-editor-action.ts | 6 +++--- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts index 005a9ada65..43d24ea962 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts @@ -48,10 +48,10 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, #editor?: UmbCodeEditorController; @query('umb-code-editor') - _codeEditor?: UmbCodeEditorElement; + private _codeEditor?: UmbCodeEditorElement; @state() - _actionExtensions: Array = []; + private _actionExtensions: Array = []; private _modalContext?: UmbModalManagerContext; @@ -92,7 +92,7 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, id: api.getUnique(), label: api.getLabel(), keybindings: api.getKeybindings(), - run: async () => await api.execute({ editor: this.#editor }), + run: async () => await api.execute({ editor: this.#editor, overlaySize: this.overlaySize }), }; this.#editor?.monacoEditor?.addAction(action); this._actionExtensions.push(action); diff --git a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts index 407ef70206..ed29a6f243 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/markdown-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts @@ -8,10 +8,11 @@ import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; import '../../components/input-markdown-editor/index.js'; +const elementName = 'umb-property-editor-ui-markdown-editor'; /** * @element umb-property-editor-ui-markdown-editor */ -@customElement('umb-property-editor-ui-markdown-editor') +@customElement(elementName) export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement implements UmbPropertyEditorUiElement { @property() value = ''; @@ -20,11 +21,13 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl private _preview?: boolean; @state() - private _overlaySize?: UUIModalSidebarSize; + private _overlaySize: UUIModalSidebarSize = 'small'; public set config(config: UmbPropertyEditorConfigCollection | undefined) { - this._preview = config?.getValueByAlias('preview'); - this._overlaySize = config?.getValueByAlias('overlaySize') ?? undefined; + if (!config) return; + + this._preview = config.getValueByAlias('preview'); + this._overlaySize = config.getValueByAlias('overlaySize') ?? 'small'; } #onChange(event: Event & { target: UmbInputMarkdownElement }) { @@ -43,10 +46,10 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl } } -export default UmbPropertyEditorUIMarkdownEditorElement; +export { UmbPropertyEditorUIMarkdownEditorElement as element }; declare global { interface HTMLElementTagNameMap { - 'umb-property-editor-ui-markdown-editor': UmbPropertyEditorUIMarkdownEditorElement; + [elementName]: UmbPropertyEditorUIMarkdownEditorElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/url-picker-monaco-markdown-editor-action.ts b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/url-picker-monaco-markdown-editor-action.ts index 061dd98255..0db383a10b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/url-picker-monaco-markdown-editor-action.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/monaco-markdown-editor-action/url-picker-monaco-markdown-editor-action.ts @@ -1,10 +1,10 @@ import { UMB_LINK_PICKER_MODAL } from '../link-picker-modal/link-picker-modal.token.js'; -import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor'; -import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; export class UmbUrlPickerMonacoMarkdownEditorAction extends UmbControllerBase { #localize = new UmbLocalizationController(this);