From 4cd161c76908f77eb6b726b82a82d902eaefb6c7 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Fri, 24 May 2024 20:06:35 +0100 Subject: [PATCH] MarkdownEditor: UI tweaks - Renamed "actions" as "toolbar" - Used `uui-button-group` to group similar actions - Code tidy-up --- .../input-markdown.element.ts | 294 +++++++++--------- 1 file changed, 147 insertions(+), 147 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 de6cd9c778..639ee5b94f 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 @@ -1,18 +1,12 @@ -import { - css, - html, - customElement, - query, - property, - unsafeHTML, - when, - state, -} from '@umbraco-cms/backoffice/external/lit'; -import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify'; +import { css, customElement, html, property, query, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit'; +import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; +import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor'; import { marked } from '@umbraco-cms/backoffice/external/marked'; import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor'; -import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { DOMPurify } from '@umbraco-cms/backoffice/external/dompurify'; import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; @@ -21,8 +15,6 @@ import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import type { UmbCodeEditorController, UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import type { UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api'; /** * @element umb-input-markdown @@ -401,112 +393,7 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, this._focusEditor(); } - private _renderBasicActions() { - return html`
- this.#editor?.monacoEditor?.getAction('h1')?.run()}> - H - - this.#editor?.monacoEditor?.getAction('b')?.run()}> - B - - this.#editor?.monacoEditor?.getAction('i')?.run()}> - I - -
-
- this.#editor?.monacoEditor?.getAction('q')?.run()}> - - - this.#editor?.monacoEditor?.getAction('ol')?.run()}> - - - this.#editor?.monacoEditor?.getAction('ul')?.run()}> - - -
-
- this.#editor?.monacoEditor?.getAction('code')?.run()}> - - - this.#editor?.monacoEditor?.getAction('line')?.run()}> - - - this.#editor?.monacoEditor?.getAction('image')?.run()}> - - - - ${this._actionExtensions.map( - (action) => html` - this.#onActionClick(event, action)}> - - - `, - )} -
-
- { - this._focusEditor(); - this.#editor?.monacoEditor?.trigger('', 'editor.action.quickCommand', ''); - }}> - F1 - -
`; - } - - onKeyPress(e: KeyboardEvent) { + #onKeyPress(e: KeyboardEvent) { if (e.key !== 'Enter') return; //TODO: Tab does not seem to trigger keyboard events. We need to make some logic for ordered and unordered lists when tab is being used. @@ -527,25 +414,138 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, #onInput(e: CustomEvent) { e.stopPropagation(); this.value = this.#editor?.monacoEditor?.getValue() ?? ''; - this.dispatchEvent(new CustomEvent('change')); + this.dispatchEvent(new UmbChangeEvent()); } render() { return html` -
${this._renderBasicActions()}
+ ${this.#renderToolbar()} - ${when(this.preview && this.value, () => this.renderPreview(this.value as string))} + ${this.#renderPreview()} `; } - renderPreview(markdown: string) { - const markdownAsHtml = marked.parse(markdown) as string; + #renderToolbar() { + return html` +
+ + this.#editor?.monacoEditor?.getAction('h1')?.run()}> + H + + this.#editor?.monacoEditor?.getAction('b')?.run()}> + B + + this.#editor?.monacoEditor?.getAction('i')?.run()}> + I + + + + + this.#editor?.monacoEditor?.getAction('q')?.run()}> + + + this.#editor?.monacoEditor?.getAction('ol')?.run()}> + + + this.#editor?.monacoEditor?.getAction('ul')?.run()}> + + + + + this.#editor?.monacoEditor?.getAction('code')?.run()}> + + + this.#editor?.monacoEditor?.getAction('line')?.run()}> + + + this.#editor?.monacoEditor?.getAction('image')?.run()}> + + + + + + ${this._actionExtensions.map( + (action) => html` + this.#onActionClick(event, action)}> + + + `, + )} + + + + { + this._focusEditor(); + this.#editor?.monacoEditor?.trigger('', 'editor.action.quickCommand', ''); + }}> + F1 + + +
+ `; + } + + #renderPreview() { + if (!this.preview || !this.value) return; + const markdownAsHtml = marked.parse(this.value as string) as string; const sanitizedHtml = markdownAsHtml ? DOMPurify.sanitize(markdownAsHtml) : ''; return html`${unsafeHTML(sanitizedHtml)}`; } @@ -557,22 +557,14 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, display: flex; flex-direction: column; } - #actions { + + #toolbar { background-color: var(--uui-color-background-alt); display: flex; - gap: var(--uui-size-6); + gap: var(--uui-size-2); } - #preview { - max-height: 400px; - } - - #actions div { - display: flex; - gap: var(--uui-size-1); - } - - #actions div:last-child { + #toolbar uui-button-group:last-child { margin-left: auto; } @@ -586,24 +578,32 @@ export class UmbInputMarkdownElement extends UUIFormControlMixin(UmbLitElement, width: 50px; } - blockquote { + #preview { + max-height: 400px; + } + + #preview blockquote { border-left: 2px solid var(--uui-color-default-emphasis); margin-inline: 0; padding-inline: var(--uui-size-3); } - p > code, - pre { + #preview img { + max-width: 100%; + } + + #preview hr { + border: none; + border-bottom: 1px solid var(--uui-palette-cocoa-black); + } + + #preview p > code, + #preview pre { border: 1px solid var(--uui-color-divider-emphasis); border-radius: var(--uui-border-radius); padding: 0 var(--uui-size-1); background-color: var(--uui-color-background); } - - hr { - border: none; - border-bottom: 1px solid var(--uui-palette-cocoa-black); - } `, ]; }