Merge branch 'main' into v14/feature/readonly-member-group-picker-pro…

…perty-editor
umbraco · Aug 30, 2024 · 08cf288 · 08cf288
2 parents a7083d4 + 1b1bc54
commit 08cf288
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts b/src/packages/markdown-editor/components/input-markdown-editor/input-markdown.element.ts
@@ -1,4 +1,13 @@
-import { css, customElement, html, property, query, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	customElement,
+	html,
+	nothing,
+	property,
+	query,
+	state,
+	unsafeHTML,
+} from '@umbraco-cms/backoffice/external/lit';
 import { createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
 import { marked } from '@umbraco-cms/backoffice/external/marked';
 import { monaco } from '@umbraco-cms/backoffice/external/monaco-editor';
@@ -34,6 +43,22 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 	@property()
 	overlaySize?: UUIModalSidebarSize;
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	public get readonly() {
+		return this.#readonly;
+	}
+	public set readonly(value) {
+		this.#readonly = value;
+		this.#editor?.monacoEditor?.updateOptions({ readOnly: this.#readonly });
+	}
+	#readonly = false;
+
 	#editor?: UmbCodeEditorController;
 
 	@query('umb-code-editor')
@@ -50,6 +75,9 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 		try {
 			this.#editor = this._codeEditor?.editor;
 
+			// Set read only mode
+			this.#editor?.monacoEditor?.updateOptions({ readOnly: this.#readonly });
+
 			// TODO: make all action into extensions
 			this.observe(umbExtensionsRegistry.byType('monacoMarkdownEditorAction'), (manifests) => {
 				manifests.forEach(async (manifest) => {
@@ -416,6 +444,7 @@ export class UmbInputMarkdownElement extends UmbFormControlMixin(UmbLitElement,
 	}
 
 	#renderToolbar() {
+		if (this.readonly) return nothing;
 		return html`
 			<div id="toolbar">
 				<uui-button-group>

diff --git a/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts b/src/packages/markdown-editor/property-editors/markdown-editor/manifests.ts
@@ -11,6 +11,7 @@ const manifest: ManifestPropertyEditorUi = {
 		propertyEditorSchemaAlias: 'Umbraco.MarkdownEditor',
 		icon: 'icon-code',
 		group: 'richContent',
+		supportsReadOnly: true,
 		settings: {
 			properties: [
 				{

diff --git a/...own-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts b/...own-editor/property-editors/markdown-editor/property-editor-ui-markdown-editor.element.ts
@@ -17,6 +17,15 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
 	@property()
 	value = '';
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	private _preview?: boolean;
 
@@ -41,7 +50,8 @@ export class UmbPropertyEditorUIMarkdownEditorElement extends UmbLitElement impl
 				value=${this.value}
 				.overlaySize=${this._overlaySize}
 				?preview=${this._preview}
-				@change=${this.#onChange}></umb-input-markdown>
+				@change=${this.#onChange}
+				?readonly=${this.readonly}></umb-input-markdown>
 		`;
 	}
 }