Feature: Readonly mode for Markdown Property Editor UI

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>

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: [
  {

src/packages/markdown-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>
  `;
  }
 }