@dxos/react-ui-editor 0.3.11-main.13264f1 → 0.3.11-main.1690b50

package/dist/lib/browser/index.mjs

@@ -674,10 +674,10 @@ var blast = (options = defaultOptions) => {
   const getPoint = (view, pos) => {
     const { left: x = 0, top: y = 0 } = view.coordsForChar(pos) ?? {};
     const element = document.elementFromPoint(x, y);
-    const { offsetLeft: left = 0, offsetTop: top = 0 } = view.scrollDOM.parentElement ?? {};
+    const { offsetLeft: left = 0, offsetTop: top2 = 0 } = view.scrollDOM.parentElement ?? {};
     const point = {
       x: x - left,
-      y: y - top
+      y: y - top2
     };
     return {
       element,
@@ -997,34 +997,15 @@ var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
 // packages/ui/react-ui-editor/src/styles/markdown.ts
 import { mx } from "@dxos/react-ui-theme";
 var headings = {
-  1: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
-    "-ml-[10px]"
-  ],
-  2: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-    "-ml-[8px]"
-  ],
-  3: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-    "-ml-[7px]"
-  ],
-  4: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-    "-ml-[6px]"
-  ],
-  5: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
-    "-ml-[5px]"
-  ],
-  6: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline",
-    "-ml-[4px]"
-  ]
-};
-var heading = (level, readonly) => {
-  const [style, offset] = headings[level];
-  return mx(style, readonly && offset);
+  1: "mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl",
+  2: "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
+  3: "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
+  4: "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
+  5: "mbs-4 mbe-2 font-medium text-inherit no-underline text-lg",
+  6: "mbs-4 mbe-2 font-medium text-inherit no-underline"
+};
+var heading = (level) => {
+  return headings[level];
 };
 var light = "text-neutral-200 dark:text-neutral-800";
 var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
@@ -1518,7 +1499,7 @@ var markdownHighlightStyle = (readonly) => {
         markdownTags.QuoteMark,
         markdownTags.EmphasisMark
       ],
-      class: readonly ? "hidden" : mark
+      class: mark
     },
     // E.g., code block language (after ```).
     {
@@ -1526,7 +1507,7 @@ var markdownHighlightStyle = (readonly) => {
         tags.function(tags.variableName),
         tags.labelName
       ],
-      class: readonly ? "hidden" : codeMark
+      class: codeMark
     },
     {
       tag: [
@@ -1537,27 +1518,27 @@ var markdownHighlightStyle = (readonly) => {
     // Headings.
     {
       tag: tags.heading1,
-      class: heading(1, readonly)
+      class: heading(1)
     },
     {
       tag: tags.heading2,
-      class: heading(2, readonly)
+      class: heading(2)
     },
     {
       tag: tags.heading3,
-      class: heading(3, readonly)
+      class: heading(3)
     },
     {
       tag: tags.heading4,
-      class: heading(4, readonly)
+      class: heading(4)
     },
     {
       tag: tags.heading5,
-      class: heading(5, readonly)
+      class: heading(5)
     },
     {
       tag: tags.heading6,
-      class: heading(6, readonly)
+      class: heading(6)
     },
     // Emphasis.
     {
@@ -1583,7 +1564,7 @@ var markdownHighlightStyle = (readonly) => {
     // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
     // when a language is specified. In this case, the syntax highlighting extensions will colorize
     // the code, but all other CSS properties will be inherited.
-    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font unless changed by an extension.
     {
       tag: [
         markdownTags.CodeText,
@@ -1612,7 +1593,7 @@ var markdownHighlightStyle = (readonly) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/bundle.ts
-var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
+var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
   return [
     EditorState.allowMultipleSelections.of(true),
     EditorState.tabSize.of(2),
@@ -1648,7 +1629,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     // https://github.com/codemirror/theme-one-dark
     themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
     // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle(readonly)),
+    syntaxHighlighting2(markdownHighlightStyle()),
     keymap4.of([
       // https://codemirror.net/docs/ref/#commands.indentWithTab
       indentWithTab,
@@ -1665,32 +1646,32 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/code.ts
-import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3 } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin3, EditorView as EditorView8, Decoration as Decoration3, WidgetType as WidgetType2 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var CODE_REGEX = /```[\s\S]*?```/gs;
 var styles3 = EditorView8.baseTheme({
-  "& .cm-codeblock": {
+  "& .cm-code": {
+    paddingInline: "1rem !important",
     fontFamily: getToken("fontFamily.mono", []).join(",")
   },
-  '&light [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.50")
+  "& .cm-codeblock": {
+    display: "inline-block",
+    width: "100%"
   },
-  '&dark [aria-readonly="true"] .cm-codeblock': {
-    background: getToken("extend.colors.neutral.850")
+  "&light .cm-codeblock, &light .cm-codeblock.cm-activeLine": {
+    background: getToken("extend.colors.neutral.25")
   },
-  '& [aria-readonly="true"] .cm-codeblock': {
-    display: "block",
-    paddingInline: "4px !important"
+  "&dark .cm-codeblock, &dark .cm-codeblock.cm-activeLine": {
+    background: getToken("extend.colors.neutral.850")
   },
-  '& [aria-readonly="true"] .cm-codeblock-first': {
-    paddingTop: "4px !important",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px"
+  "& .cm-codeblock-first": {
+    borderTopLeftRadius: ".5rem",
+    borderTopRightRadius: ".5rem"
   },
-  '& [aria-readonly="true"] .cm-codeblock-last': {
-    paddingBottom: "4px !important",
-    borderBottomLeftRadius: "4px",
-    borderBottomRightRadius: "4px"
+  "& .cm-codeblock-last": {
+    borderBottomLeftRadius: ".5rem",
+    borderBottomRightRadius: ".5rem"
   }
 });
 var getLineRange = (lines, from, to) => {
@@ -1701,37 +1682,59 @@ var getLineRange = (lines, from, to) => {
     end
   ];
 };
+var LineWidget = class extends WidgetType2 {
+  constructor(_className) {
+    super();
+    this._className = _className;
+  }
+  toDOM() {
+    const el = document.createElement("span");
+    el.innerHTML = " ";
+    el.className = mx2("cm-code cm-codeblock", this._className);
+    return el;
+  }
+};
+var top = new LineWidget("cm-codeblock-first");
+var bottom = new LineWidget("cm-codeblock-last");
+var buildDecorations = (view) => {
+  const builder = new RangeSetBuilder();
+  const { state } = view;
+  const blocks = view.viewportLineBlocks;
+  const cursor = state.selection.main.head;
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === "FencedCode") {
+          const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
+          const range = getLineRange(blocks, node.from, node.to);
+          for (let i = range[0]; i <= range[1]; i++) {
+            const block = blocks[i];
+            if (!edit && (i === range[0] || i === range[1])) {
+              builder.add(block.from, block.to, Decoration3.replace({
+                widget: i === range[0] ? top : bottom
+              }));
+            } else {
+              builder.add(block.from, block.from, Decoration3.line({
+                class: mx2("cm-code cm-codeblock")
+              }));
+            }
+          }
+        }
+      },
+      from,
+      to
+    });
+  }
+  return builder.finish();
+};
 var code2 = () => {
-  const buildDecorations6 = (view) => {
-    const decorations = [];
-    const text = view.state.doc.sliceString(0);
-    const matches = text.matchAll(CODE_REGEX);
-    const blocks = view.viewportLineBlocks;
-    for (const match of matches) {
-      const range = getLineRange(blocks, match.index, match.index + match[0].length);
-      for (let i = range[0]; i <= range[1]; i++) {
-        const block = blocks[i];
-        decorations.push(Decoration3.line({
-          class: mx2("cm-codeblock", i === range[0] && "cm-codeblock-first", i === range[1] && "cm-codeblock-last")
-        }).range(block.from));
-      }
-    }
-    return Decoration3.set(decorations);
-  };
   return [
     ViewPlugin3.fromClass(class {
       constructor(view) {
-        this.hasFocus = false;
-        this.decorations = buildDecorations6(view);
+        this.decorations = buildDecorations(view);
       }
       update(update2) {
-        if (
-          // TODO(burdon): Generalize for other extensions.
-          this.hasFocus !== update2.view.hasFocus || update2.startState.readOnly !== update2.view.state.readOnly || update2.docChanged || update2.viewportChanged
-        ) {
-          this.hasFocus = update2.view.hasFocus;
-          this.decorations = buildDecorations6(update2.view);
-        }
+        this.decorations = buildDecorations(update2.view);
       }
     }, {
       decorations: (value) => value.decorations
@@ -1741,15 +1744,15 @@ var code2 = () => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/heading.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder } from "@codemirror/state";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
 import { Decoration as Decoration4, ViewPlugin as ViewPlugin4 } from "@codemirror/view";
-var buildDecorations = (view) => {
-  const builder = new RangeSetBuilder();
+var buildDecorations2 = (view) => {
+  const builder = new RangeSetBuilder2();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
+    syntaxTree2(state).iterate({
       enter: (node) => {
         switch (node.name) {
           case "ATXHeading1":
@@ -1759,8 +1762,10 @@ var buildDecorations = (view) => {
           case "ATXHeading5":
           case "ATXHeading6": {
             const mark2 = node.node.getChild("HeaderMark");
-            if (mark2 && (cursor < node.from || cursor > node.to)) {
-              builder.add(mark2.from, mark2.to + 1, Decoration4.replace({}));
+            if (mark2) {
+              if (view.state.readOnly || cursor < node.from || cursor > node.to) {
+                builder.add(mark2.from, mark2.to + 1, Decoration4.replace({}));
+              }
             }
           }
         }
@@ -1775,28 +1780,28 @@ var heading2 = () => {
   return [
     ViewPlugin4.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations(view);
+        this.decorations = buildDecorations2(view);
       }
       update(update2) {
-        this.decorations = buildDecorations(update2.view);
+        this.decorations = buildDecorations2(update2.view);
       }
     }, {
-      decorations: (v) => v.decorations
+      decorations: (value) => value.decorations
     })
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/hr.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin5, WidgetType as WidgetType2 } from "@codemirror/view";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
+import { Decoration as Decoration5, EditorView as EditorView9, ViewPlugin as ViewPlugin5, WidgetType as WidgetType3 } from "@codemirror/view";
 var styles4 = EditorView9.baseTheme({
   "& .cm-hr": {
     // Note that block-level decorations should not have vertical margins,
     borderTop: `1px solid ${getToken("extend.colors.neutral.200")}`
   }
 });
-var HorizontalRuleWidget = class extends WidgetType2 {
+var HorizontalRuleWidget = class extends WidgetType3 {
   toDOM() {
     const el = document.createElement("div");
     el.className = "cm-hr";
@@ -1806,12 +1811,12 @@ var HorizontalRuleWidget = class extends WidgetType2 {
 var decoration = Decoration5.replace({
   widget: new HorizontalRuleWidget()
 });
-var buildDecorations2 = (view) => {
-  const builder = new RangeSetBuilder2();
+var buildDecorations3 = (view) => {
+  const builder = new RangeSetBuilder3();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree2(state).iterate({
+    syntaxTree3(state).iterate({
       enter: (node) => {
         if (node.name === "HorizontalRule") {
           if (cursor <= node.from || cursor >= node.to) {
@@ -1827,28 +1832,28 @@ var buildDecorations2 = (view) => {
 };
 var hr = () => {
   return [
-    styles4,
     ViewPlugin5.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations2(view);
+        this.decorations = buildDecorations3(view);
       }
       update(update2) {
-        this.decorations = buildDecorations2(update2.view);
+        this.decorations = buildDecorations3(update2.view);
       }
     }, {
-      decorations: (v) => v.decorations
-    })
+      decorations: (value) => value.decorations
+    }),
+    styles4
   ];
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType3 } from "@codemirror/view";
+import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
   return StateField3.define({
     create: (state) => {
-      return Decoration6.set(buildDecorations3(0, state.doc.length, state));
+      return Decoration6.set(buildDecorations4(0, state.doc.length, state));
     },
     update: (value, tr) => {
       if (!tr.docChanged && !tr.selection) {
@@ -1868,16 +1873,16 @@ var image = (options = {}) => {
         filterFrom: from,
         filterTo: to,
         filter: () => false,
-        add: buildDecorations3(from, to, tr.state)
+        add: buildDecorations4(from, to, tr.state)
       });
     },
     provide: (field) => EditorView10.decorations.from(field)
   });
 };
-var buildDecorations3 = (from, to, state) => {
+var buildDecorations4 = (from, to, state) => {
   const decorations = [];
   const cursor = state.selection.main.head;
-  syntaxTree3(state).iterate({
+  syntaxTree4(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -1896,7 +1901,7 @@ var buildDecorations3 = (from, to, state) => {
   });
   return decorations;
 };
-var ImageWidget = class extends WidgetType3 {
+var ImageWidget = class extends WidgetType4 {
   constructor(_url) {
     super();
     this._url = _url;
@@ -1914,23 +1919,23 @@ var ImageWidget = class extends WidgetType3 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3 } from "@codemirror/state";
-import { hoverTooltip as hoverTooltip2, Decoration as Decoration7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType4 } from "@codemirror/view";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder4 } from "@codemirror/state";
+import { hoverTooltip as hoverTooltip2, Decoration as Decoration7, ViewPlugin as ViewPlugin6, WidgetType as WidgetType5 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var link = (options = {}) => {
   const extensions = [
     ViewPlugin6.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations4(view, options);
+        this.decorations = buildDecorations5(view, options);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations4(update2.view, options);
+          this.decorations = buildDecorations5(update2.view, options);
         }
       }
     }, {
-      decorations: (v) => v.decorations
+      decorations: (value) => value.decorations
     })
   ];
   if (options.onHover) {
@@ -1939,7 +1944,7 @@ var link = (options = {}) => {
       // https://codemirror.net/docs/ref/#view.hoverTooltip
       // https://github.com/codemirror/view/blob/main/src/tooltip.ts
       hoverTooltip2((view, pos, side) => {
-        const syntax = syntaxTree4(view.state).resolveInner(pos, side);
+        const syntax = syntaxTree5(view.state).resolveInner(pos, side);
         let link2 = null;
         for (let i = 0, node = syntax; !link2 && node && i < 5; node = node.parent, i++) {
           link2 = node.name === "Link" ? node : null;
@@ -1971,7 +1976,7 @@ var link = (options = {}) => {
   }
   return extensions;
 };
-var LinkButton = class extends WidgetType4 {
+var LinkButton = class extends WidgetType5 {
   constructor(_url, _onAttach) {
     super();
     this._url = _url;
@@ -1986,7 +1991,7 @@ var LinkButton = class extends WidgetType4 {
     return el;
   }
 };
-var LinkText = class extends WidgetType4 {
+var LinkText = class extends WidgetType5 {
   constructor(_text, _url) {
     super();
     this._text = _text;
@@ -2015,12 +2020,12 @@ var LinkText = class extends WidgetType4 {
     return link2;
   }
 };
-var buildDecorations4 = (view, options) => {
-  const builder = new RangeSetBuilder3();
+var buildDecorations5 = (view, options) => {
+  const builder = new RangeSetBuilder4();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree4(state).iterate({
+    syntaxTree5(state).iterate({
       enter: (node) => {
         if (node.name === "Link") {
           const marks2 = node.node.getChildren("LinkMark");
@@ -2051,9 +2056,9 @@ var buildDecorations4 = (view, options) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder4, StateField as StateField4 } from "@codemirror/state";
-import { Decoration as Decoration8, EditorView as EditorView11, WidgetType as WidgetType5 } from "@codemirror/view";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder5, StateField as StateField4 } from "@codemirror/state";
+import { Decoration as Decoration8, EditorView as EditorView11, WidgetType as WidgetType6 } from "@codemirror/view";
 var table = (options = {}) => {
   return StateField4.define({
     create: (state) => update(state, options),
@@ -2062,7 +2067,7 @@ var table = (options = {}) => {
   });
 };
 var update = (state, options) => {
-  const builder = new RangeSetBuilder4();
+  const builder = new RangeSetBuilder5();
   const cursor = state.selection.main.head;
   const tables = [];
   const getTable = () => tables[tables.length - 1];
@@ -2070,7 +2075,7 @@ var update = (state, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree5(state).iterate({
+  syntaxTree6(state).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -2111,7 +2116,7 @@ var update = (state, options) => {
   });
   return builder.finish();
 };
-var TableWidget = class extends WidgetType5 {
+var TableWidget = class extends WidgetType6 {
   constructor(_table) {
     super();
     this._table = _table;
@@ -2149,9 +2154,9 @@ var TableWidget = class extends WidgetType5 {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/tasklist.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder5 } from "@codemirror/state";
-import { EditorView as EditorView12, Decoration as Decoration9, WidgetType as WidgetType6, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder6 } from "@codemirror/state";
+import { EditorView as EditorView12, Decoration as Decoration9, WidgetType as WidgetType7, ViewPlugin as ViewPlugin7 } from "@codemirror/view";
 var styles5 = EditorView12.baseTheme({
   "& .cm-task": {
     color: getToken("extend.colors.blue.500")
@@ -2161,7 +2166,7 @@ var styles5 = EditorView12.baseTheme({
     marginRight: "4px"
   }
 });
-var CheckboxWidget = class extends WidgetType6 {
+var CheckboxWidget = class extends WidgetType7 {
   constructor(_checked) {
     super();
     this._checked = _checked;
@@ -2204,12 +2209,12 @@ var checkedDecoration = Decoration9.replace({
 var uncheckedDecoration = Decoration9.replace({
   widget: new CheckboxWidget(false)
 });
-var buildDecorations5 = (view) => {
-  const builder = new RangeSetBuilder5();
+var buildDecorations6 = (view) => {
+  const builder = new RangeSetBuilder6();
   const { state } = view;
   const cursor = state.selection.main.head;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree6(state).iterate({
+    syntaxTree7(state).iterate({
       enter: (node) => {
         if (node.name === "TaskMarker") {
           if (cursor < node.from || cursor > node.to) {
@@ -2231,15 +2236,15 @@ var tasklist = (options = {}) => {
   return [
     ViewPlugin7.fromClass(class {
       constructor(view) {
-        this.decorations = buildDecorations5(view);
+        this.decorations = buildDecorations6(view);
       }
       update(update2) {
         if (update2.docChanged || update2.viewportChanged || update2.selectionSet) {
-          this.decorations = buildDecorations5(update2.view);
+          this.decorations = buildDecorations6(update2.view);
         }
       }
     }, {
-      decorations: (v) => v.decorations
+      decorations: (value) => value.decorations
     }),
     styles5
   ];
@@ -2717,7 +2722,6 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
     extensions: [
       markdownBundle({
         themeMode,
-        readonly,
         placeholder: placeholder3
       }),
       ...extensions