yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

be more holistic about when to render the preview (it threw errors when value was undefined)

Browse Source
This commit is contained in:
Jacob Overgaard
2023-10-31 16:45:55 +01:00
parent b1d059c1b7
commit b220a14578
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.element.ts
View File

@@ -2,7 +2,7 @@ import { sanitizeHtml } from '@umbraco-cms/backoffice/external/sanitize-html';
import { marked } from '@umbraco-cms/backoffice/external/marked';
import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
import { UmbCodeEditorController, UmbCodeEditorElement, loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
import { css, html, customElement, query, property, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
import { css, html, customElement, query, property, unsafeHTML, when } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin, UUIModalSidebarSize, UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -541,13 +541,14 @@ export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
@keypress=${this.onKeyPress}
@input=${this.#onInput}
theme="umb-light"></umb-code-editor>
${this.renderPreview()}`;
${when(this.preview && this.value, () => this.renderPreview(this.value as string))}`;
}
renderPreview() {
if (!this.preview) return;
renderPreview(markdown: string) {
const markdownAsHtml = marked.parse(markdown);
const sanitizedHtml = markdownAsHtml ? sanitizeHtml(markdownAsHtml) : '';
return html`<uui-scroll-container id="preview">
${unsafeHTML(sanitizeHtml(marked.parse(this.value as string)))}
${unsafeHTML(sanitizedHtml)}
</uui-scroll-container>`;
}