markdown editor

src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts

@@ -17,6 +17,7 @@ export * from './input-checkbox-list/index.js';
 export * from './input-color/index.js';
 export * from './input-eye-dropper/index.js';
 export * from './input-list-base/index.js';
+export * from './input-markdown-editor/index.js';
 export * from './input-multi-url/index.js';
 export * from './input-tiny-mce/index.js';
 export * from './input-number-range/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/index.ts

@@ -0,0 +1 @@
+export * from './input-markdown.element.js';

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

@@ -0,0 +1,75 @@
+import { UmbCodeEditorElement, loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
+import { css, html, customElement, query, property } from '@umbraco-cms/backoffice/external/lit';
+import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
+import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+
+/**
+ * @element umb-input-markdown
+ * @fires change - when the value of the input changes
+ */
+@customElement('umb-input-markdown')
+export class UmbInputMarkdownElement extends FormControlMixin(UmbLitElement) {
+	protected getFormElement() {
+		return undefined;
+	}
+
+	@property({ type: Boolean })
+	preview?: boolean;
+
+	#isCodeEditorReady = new UmbBooleanState(false);
+	isCodeEditorReady = this.#isCodeEditorReady.asObservable();
+
+	@query('umb-code-editor')
+	_codeEditor?: UmbCodeEditorElement;
+
+	constructor() {
+		super();
+		this.#loadCodeEditor();
+	}
+
+	async #loadCodeEditor() {
+		try {
+			await loadCodeEditor();
+			this.#isCodeEditorReady.next(true);
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	render() {
+		return html` <div id="actions"></div>
+			<umb-code-editor language="markdown" .code=${this.value as string}></umb-code-editor>
+			${this.renderPreview()}`;
+	}
+
+	renderPreview() {
+		if (!this.preview) return;
+		return html`<div>TODO Preview</div>`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+			}
+			#actions {
+				background-color: var(--uui-color-background-alt);
+				display: flex;
+			}
+
+			umb-code-editor {
+				height: 200px;
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-divider-emphasis);
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-markdown': UmbInputMarkdownElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/components/input-markdown-editor/input-markdown.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './input-markdown.element.js';
+import type { UmbInputMarkdownElement } from './input-markdown.element.js';
+
+const meta: Meta<UmbInputMarkdownElement> = {
+	title: 'Components/Inputs/Markdown',
+	component: 'umb-input-markdown',
+};
+
+export default meta;
+type Story = StoryObj<UmbInputMarkdownElement>;
+
+export const Overview: Story = {
+	args: {
+		value: 'markdown',
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/markdown-editor/property-editor-ui-markdown-editor.element.ts

@@ -1,8 +1,9 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
+import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
+import { UmbInputMarkdownElement } from '@umbraco-cms/backoffice/components';
 
 /**
  * @element umb-property-editor-ui-markdown-editor
@@ -15,11 +16,24 @@ export class UmbPropertyEditorUIMarkdownEditorElement
 	@property()
 	value = '';
 
+	@state()
+	private _preview?: boolean;
+
 	@property({ attribute: false })
-	public config?: UmbPropertyEditorConfigCollection;
+	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
+		this._preview = config?.getValueByAlias('preview');
+	}
+
+	#onChange(e: Event) {
+		this.value = (e.target as UmbInputMarkdownElement).value as string;
+		this.dispatchEvent(new CustomEvent('property-value-change'));
+	}
 
 	render() {
-		return html`<div>umb-property-editor-ui-markdown-editor</div>`;
+		return html`<umb-input-markdown
+			?preview=${this._preview}
+			@change=${this.#onChange}
+			.value=${this.value}></umb-input-markdown>`;
 	}
 
 	static styles = [UmbTextStyles];