@dxos/react-ui-editor 0.3.10-main.560f82b → 0.3.10-main.5e11230

package/dist/lib/browser/index.mjs

@@ -61,6 +61,7 @@ import defaultsDeep from "lodash.defaultsdeep";
 import { invariant } from "@dxos/invariant";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts";
 var defaultOptions = {
+  effect: 2,
   maxParticles: 200,
   particleGravity: 0.08,
   particleAlphaFadeout: 0.996,
@@ -108,7 +109,15 @@ var blast = (options) => {
         if (blaster) {
           blaster.destroy();
         }
-        blaster = new Blaster(update4.view.scrollDOM, defaultsDeep({}, options, defaultOptions));
+        blaster = new Blaster(update4.view.scrollDOM, defaultsDeep({
+          particleGravity: 0.2,
+          particleShrinkRate: 0.995,
+          color: () => [
+            100 + Math.random() * 100,
+            0,
+            0
+          ]
+        }, options, defaultOptions));
         blaster.initialize();
         blaster.start();
       } else {
@@ -192,7 +201,7 @@ var Blaster = class {
   initialize() {
     invariant(!this._canvas && !this._ctx, void 0, {
       F: __dxlog_file,
-      L: 140,
+      L: 152,
       S: this,
       A: [
         "!this._canvas && !this._ctx",
@@ -229,7 +238,7 @@ var Blaster = class {
   start() {
     invariant(this._canvas && this._ctx, void 0, {
       F: __dxlog_file,
-      L: 179,
+      L: 191,
       S: this,
       A: [
         "this._canvas && this._ctx",
@@ -432,14 +441,26 @@ import { keymap as keymap4, Decoration, EditorView as EditorView3, MatchDecorato
 import { debounce } from "@dxos/async";
 import { invariant as invariant2 } from "@dxos/invariant";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
+var styles = EditorView3.baseTheme({
+  "& .cm-bookmark": {
+    cursor: "pointer",
+    margin: "4px",
+    padding: "4px",
+    backgroundColor: "yellow"
+  },
+  "& .cm-bookmark-selected": {
+    backgroundColor: "orange"
+  }
+});
 var BookmarkWidget = class extends WidgetType {
-  constructor(_pos, _id) {
+  constructor(_pos, _id, _handleClick) {
     super();
     this._pos = _pos;
     this._id = _id;
+    this._handleClick = _handleClick;
     invariant2(this._id, void 0, {
       F: __dxlog_file2,
-      L: 41,
+      L: 37,
       S: this,
       A: [
         "this._id",
@@ -453,21 +474,11 @@ var BookmarkWidget = class extends WidgetType {
   toDOM() {
     const span = document.createElement("span");
     span.className = "cm-bookmark";
-    span.textContent = "\u{1F4AC}";
+    span.textContent = "\xA7";
+    span.onclick = () => this._handleClick();
     return span;
   }
 };
-var styles = EditorView3.baseTheme({
-  "& .cm-bookmark": {
-    cursor: "pointer",
-    margin: "4px",
-    padding: "4px",
-    backgroundColor: "yellow"
-  },
-  "& .cm-bookmark-selected": {
-    backgroundColor: "orange"
-  }
-});
 var comments = (options = {}) => {
   let active;
   const bookmarkMatcher = new MatchDecorator({
@@ -476,7 +487,9 @@ var comments = (options = {}) => {
       const id = match[1];
       return Decoration.replace({
         id,
-        widget: new BookmarkWidget(pos, id)
+        widget: new BookmarkWidget(pos, id, () => handleUpdate({
+          active: id
+        }))
       });
     }
   });
@@ -493,7 +506,7 @@ var comments = (options = {}) => {
       return view.plugin(plugin)?.bookmarks || Decoration.none;
     })
   });
-  const doUpdate = debounce((data) => {
+  const handleUpdate = debounce((data) => {
     options.onUpdate?.(data);
   }, 200);
   return [
@@ -532,10 +545,13 @@ var comments = (options = {}) => {
       const decorations = [];
       const rangeSet = view.plugin(bookmarks)?.bookmarks;
       let closest = Infinity;
-      const { from, to } = view.visibleRanges?.[0] ?? {
-        from: 0,
-        to: view.state.doc.length
-      };
+      const { from, to } = (
+        /* view.visibleRanges?.[0] ?? */
+        {
+          from: 0,
+          to: view.state.doc.length
+        }
+      );
       rangeSet?.between(from, to, (from2, to2, value) => {
         decorations.push({
           from: from2,
@@ -549,7 +565,7 @@ var comments = (options = {}) => {
         }
       });
       if (decorations.length) {
-        doUpdate({
+        handleUpdate({
           active,
           items: decorations.map(({ from: from2, value: { spec: { id } } }) => ({
             id,
@@ -576,13 +592,15 @@ var image = (options = {}) => {
 };
 var update = (state, options) => {
   const builder = new RangeSetBuilder();
+  const cursor = state.selection.main.head;
   syntaxTree(state).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
         if (urlNode) {
+          const hide = state.readOnly || cursor < node.from || cursor > node.to;
           const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(state.readOnly ? node.from : node.to, node.to, Decoration2.widget({
+          builder.add(hide ? node.from : node.to, node.to, Decoration2.replace({
             widget: new ImageWidget(url)
           }));
         }
@@ -677,7 +695,7 @@ var update2 = (state, options) => {
         if (!url) {
           return false;
         }
-        if (cursor < node.from || cursor > node.to) {
+        if (state.readOnly || cursor < node.from || cursor > node.to) {
           builder.add(node.from, node.to, Decoration3.replace({
             widget: new LinkText(node.from, text, options.link ? url : void 0)
           }));
@@ -710,19 +728,20 @@ var listener = ({ onChange }) => {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { history, historyKeymap, indentWithTab, standardKeymap } from "@codemirror/commands";
 import { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
 import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+import { searchKeymap } from "@codemirror/search";
 import { EditorState } from "@codemirror/state";
 import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
-import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView6, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap5, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
+import { crosshairCursor, drawSelection, dropCursor, EditorView as EditorView6, keymap as keymap5, placeholder as placeholder2 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/highlight.ts
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { HighlightStyle } from "@codemirror/language";
 import { tags, styleTags, Tag } from "@lezer/highlight";
+import { Table } from "@lezer/markdown";
 import get from "lodash.get";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
@@ -786,188 +805,201 @@ var markdownTags = {
   LinkReference: Tag.define(),
   ListMark: Tag.define(),
   QuoteMark: Tag.define(),
-  URL: Tag.define()
-};
-var markdownTagsExtension = {
-  props: [
-    styleTags(markdownTags)
-  ]
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
 };
-var markdownHighlightStyle = (readonly) => HighlightStyle.define([
-  {
-    tag: [
-      tags.keyword,
-      tags.name,
-      tags.deleted,
-      tags.character,
-      tags.propertyName,
-      tags.macroName,
-      tags.color,
-      tags.constant(tags.name),
-      tags.standard(tags.name),
-      tags.definition(tags.name),
-      tags.separator,
-      tags.typeName,
-      tags.className,
-      tags.number,
-      tags.changed,
-      tags.annotation,
-      tags.modifier,
-      tags.self,
-      tags.namespace,
-      tags.operator,
-      tags.operatorKeyword,
-      tags.escape,
-      tags.regexp,
-      tags.special(tags.string),
-      tags.meta,
-      tags.comment,
-      tags.atom,
-      tags.bool,
-      tags.special(tags.variableName),
-      tags.processingInstruction,
-      tags.string,
-      tags.inserted,
-      tags.invalid
-    ],
-    color: "inherit !important"
-  },
-  // Markdown marks.
-  {
-    tag: [
-      tags.meta,
-      tags.processingInstruction,
-      markdownTags.LinkLabel,
-      markdownTags.LinkReference,
-      markdownTags.ListMark
-    ],
-    class: mark
-  },
-  // Markdown marks.
-  {
-    tag: [
-      markdownTags.CodeMark,
-      markdownTags.HeaderMark,
-      markdownTags.QuoteMark,
-      markdownTags.EmphasisMark
-    ],
-    class: readonly ? "hidden" : mark
-  },
-  // E.g., code block language (after ```).
-  {
-    tag: [
-      tags.function(tags.variableName),
-      tags.labelName
-    ],
-    class: readonly ? "hidden" : codeMark
-  },
-  // Headings.
-  {
-    tag: tags.heading1,
-    class: heading(1, readonly)
-  },
-  {
-    tag: tags.heading2,
-    class: heading(2, readonly)
-  },
-  {
-    tag: tags.heading3,
-    class: heading(3, readonly)
-  },
-  {
-    tag: tags.heading4,
-    class: heading(4, readonly)
-  },
-  {
-    tag: tags.heading5,
-    class: heading(5, readonly)
-  },
-  {
-    tag: tags.heading6,
-    class: heading(6, readonly)
-  },
-  // Emphasis.
-  {
-    tag: tags.emphasis,
-    class: italic
-  },
-  {
-    tag: tags.strong,
-    class: bold
-  },
-  {
-    tag: tags.strikethrough,
-    class: strikethrough
-  },
-  // Naked URLs.
-  {
-    tag: [
-      markdownTags.URL
-    ],
-    class: inlineUrl
-  },
-  // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-  // 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.
-  {
-    tag: [
-      markdownTags.CodeText,
-      markdownTags.InlineCode
-    ],
-    class: code
-  },
-  {
-    tag: [
-      markdownTags.QuoteMark
-    ],
-    class: blockquote
-  },
-  {
-    tag: [
-      markdownTags.HorizontalRule
-    ],
-    class: mx2(horizontalRule, readonly && "-indent-[100rem]")
-  }
-], {
-  scope: markdownLanguage,
-  all: {
-    fontFamily: get(tokens, "fontFamily.body", []).join(",")
+Table.defineNodes?.forEach((node) => {
+  switch (node?.name) {
+    case "TableCell": {
+      node.style = markdownTags.TableCell;
+      break;
+    }
   }
 });
+var markdownTagsExtensions = [
+  Table,
+  {
+    props: [
+      styleTags(markdownTags)
+    ]
+  }
+];
+var markdownHighlightStyle = (readonly) => {
+  return HighlightStyle.define([
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid
+      ],
+      color: "inherit !important"
+    },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark
+      ],
+      class: mark
+    },
+    // Markdown marks.
+    {
+      tag: [
+        markdownTags.CodeMark,
+        markdownTags.HeaderMark,
+        markdownTags.QuoteMark,
+        markdownTags.EmphasisMark
+      ],
+      class: readonly ? "hidden" : mark
+    },
+    // E.g., code block language (after ```).
+    {
+      tag: [
+        tags.function(tags.variableName),
+        tags.labelName
+      ],
+      class: readonly ? "hidden" : codeMark
+    },
+    {
+      tag: [
+        tags.monospace
+      ],
+      class: "font-mono"
+    },
+    // Headings.
+    {
+      tag: tags.heading1,
+      class: heading(1, readonly)
+    },
+    {
+      tag: tags.heading2,
+      class: heading(2, readonly)
+    },
+    {
+      tag: tags.heading3,
+      class: heading(3, readonly)
+    },
+    {
+      tag: tags.heading4,
+      class: heading(4, readonly)
+    },
+    {
+      tag: tags.heading5,
+      class: heading(5, readonly)
+    },
+    {
+      tag: tags.heading6,
+      class: heading(6, readonly)
+    },
+    // Emphasis.
+    {
+      tag: tags.emphasis,
+      class: italic
+    },
+    {
+      tag: tags.strong,
+      class: bold
+    },
+    {
+      tag: tags.strikethrough,
+      class: strikethrough
+    },
+    // Naked URLs.
+    {
+      tag: [
+        markdownTags.URL
+      ],
+      class: inlineUrl
+    },
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // 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.
+    {
+      tag: [
+        markdownTags.CodeText,
+        markdownTags.InlineCode
+      ],
+      class: code
+    },
+    {
+      tag: [
+        markdownTags.QuoteMark
+      ],
+      class: blockquote
+    },
+    // TODO(burdon): Replace with extension.
+    {
+      tag: [
+        markdownTags.HorizontalRule
+      ],
+      class: mx2(horizontalRule, readonly && "-indent-[100rem]")
+    },
+    // TODO(burdon): Only if being edited.
+    {
+      tag: [
+        markdownTags.TableCell
+      ],
+      class: "font-mono"
+    }
+  ], {
+    scope: markdownLanguage,
+    all: {
+      fontFamily: get(tokens, "fontFamily.body", []).join(",")
+    }
+  });
+};
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
   return [
-    bracketMatching2(),
-    closeBrackets2(),
-    _placeholder && placeholder2(_placeholder),
     EditorState.allowMultipleSelections.of(true),
+    EditorState.tabSize.of(2),
     EditorView6.lineWrapping,
+    customKeymap(),
+    bracketMatching2(),
+    closeBrackets2(),
     crosshairCursor(),
     dropCursor(),
     drawSelection(),
-    highlightActiveLine(),
-    highlightActiveLineGutter(),
-    highlightSelectionMatches(),
-    highlightSpecialChars(),
     history(),
     indentOnInput(),
-    rectangularSelection(),
-    // https://codemirror.net/docs/ref/#view.keymap
-    keymap5.of([
-      // https://codemirror.net/docs/ref/#commands.defaultKeymap
-      ...defaultKeymap,
-      // https://codemirror.net/docs/ref/#commands.historyKeymap
-      ...historyKeymap,
-      // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
-      ...closeBracketsKeymap,
-      // https://codemirror.net/docs/ref/#search.searchKeymap
-      ...searchKeymap,
-      // https://codemirror.net/docs/ref/#commands.indentWithTab
-      indentWithTab
-    ]),
+    _placeholder && placeholder2(_placeholder),
     // Main extension.
     // https://github.com/codemirror/lang-markdown
     // https://codemirror.net/5/mode/markdown/index.html (demo).
@@ -982,8 +1014,8 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
       codeLanguages: languages,
       // Parser extensions.
       extensions: [
-        // GFM, // TODO(burdon): Provided by default?
-        markdownTagsExtension
+        // GFM provided by default.
+        markdownTagsExtensions
       ]
     }),
     // https://github.com/codemirror/theme-one-dark
@@ -992,6 +1024,18 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     syntaxHighlighting2(markdownHighlightStyle(readonly))
   ].filter(Boolean);
 };
+var customKeymap = () => keymap5.of([
+  // https://codemirror.net/docs/ref/#commands.indentWithTab
+  indentWithTab,
+  // https://codemirror.net/docs/ref/#commands.standardKeymap
+  ...standardKeymap,
+  // https://codemirror.net/docs/ref/#commands.historyKeymap
+  ...historyKeymap,
+  // https://codemirror.net/docs/ref/#autocomplete.closeBracketsKeymap
+  ...closeBracketsKeymap,
+  // https://codemirror.net/docs/ref/#search.searchKeymap
+  ...searchKeymap
+]);
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/mention.ts
 import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
@@ -1029,50 +1073,49 @@ var table = (options = {}) => {
 };
 var update3 = (state, options) => {
   const builder = new RangeSetBuilder3();
-  if (state.readOnly) {
-    const tables = [];
-    const getTable = () => tables[tables.length - 1];
-    const getRow = () => {
-      const table2 = getTable();
-      return table2.rows?.[table2.rows.length - 1];
-    };
-    syntaxTree3(state).iterate({
-      enter: (node) => {
-        switch (node.name) {
-          case "Table": {
-            tables.push({
-              from: node.from
-            });
-            break;
-          }
-          case "TableHeader": {
-            getTable().header = [];
-            break;
-          }
-          case "TableRow": {
-            (getTable().rows ??= []).push([]);
-            break;
-          }
-          case "TableCell": {
-            const row = getRow();
-            if (row) {
-              row.push(state.sliceDoc(node.from, node.to));
-            } else {
-              getTable().header?.push(state.sliceDoc(node.from, node.to));
-            }
-            break;
-          }
-          case "TableDelimiter": {
-            getTable().to = node.to;
-            break;
+  const cursor = state.selection.main.head;
+  const tables = [];
+  const getTable = () => tables[tables.length - 1];
+  const getRow = () => {
+    const table2 = getTable();
+    return table2.rows?.[table2.rows.length - 1];
+  };
+  syntaxTree3(state).iterate({
+    enter: (node) => {
+      switch (node.name) {
+        case "Table": {
+          tables.push({
+            from: node.from,
+            to: node.to
+          });
+          break;
+        }
+        case "TableHeader": {
+          getTable().header = [];
+          break;
+        }
+        case "TableRow": {
+          (getTable().rows ??= []).push([]);
+          break;
+        }
+        case "TableCell": {
+          const row = getRow();
+          if (row) {
+            row.push(state.sliceDoc(node.from, node.to));
+          } else {
+            getTable().header?.push(state.sliceDoc(node.from, node.to));
           }
+          break;
         }
       }
-    });
-    tables.forEach((table2) => builder.add(table2.from, table2.to, Decoration4.replace({
+    }
+  });
+  tables.forEach((table2) => {
+    const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
+    hide && builder.add(table2.from, table2.to, Decoration4.replace({
       widget: new TableWidget(table2)
-    })));
-  }
+    }));
+  });
   return builder.finish();
 };
 var TableWidget = class extends WidgetType4 {
@@ -1087,11 +1130,11 @@ var TableWidget = class extends WidgetType4 {
     const table2 = document.createElement("table");
     {
       const header = table2.appendChild(document.createElement("thead"));
-      const row = header.appendChild(document.createElement("tr"));
+      const tr = header.appendChild(document.createElement("tr"));
       this._table.header?.forEach((cell) => {
         const th = document.createElement("th");
         th.setAttribute("class", "cm-table-head");
-        row.appendChild(th).textContent = cell;
+        tr.appendChild(th).textContent = cell;
       });
     }
     {
@@ -1111,6 +1154,12 @@ var TableWidget = class extends WidgetType4 {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/tasklist.ts
 import { EditorView as EditorView8, Decoration as Decoration5, WidgetType as WidgetType5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+var styles2 = EditorView8.baseTheme({
+  "& .cm-task-item": {
+    paddingLeft: "4px",
+    paddingRight: "8px"
+  }
+});
 var CheckboxWidget = class extends WidgetType5 {
   constructor(_pos, _checked, _indent, _onCheck) {
     super();
@@ -1145,12 +1194,6 @@ var CheckboxWidget = class extends WidgetType5 {
     return false;
   }
 };
-var styles2 = EditorView8.baseTheme({
-  "& .cm-task-item": {
-    paddingLeft: "4px",
-    paddingRight: "8px"
-  }
-});
 var tasklist = (options = {}) => {
   const taskMatcher = new MatchDecorator2({
     regexp: /^(\s*)- \[([ xX])\]\s/g,
@@ -1419,7 +1462,42 @@ var defaultTheme = {
       height
     };
     return acc;
-  }, {})
+  }, {}),
+  /**
+  * Panels
+  * https://github.com/codemirror/search/blob/main/src/search.ts#L745
+  *
+  * Find/replace panel.
+  * <div class="cm-announced">...</div>
+  * <div class="cm-scroller">...</div>
+  * <div class="cm-panels cm-panels-bottom">
+  *   <div class="cm-search cm-panel">
+  *     <input class="cm-textfield" />
+  *     <button class="cm-button">...</button>
+  *     <label><input type="checkbox" />...</label>
+  *   </div>
+  * </div
+  */
+  "& .cm-panels": {
+    border: `1px solid ${get2(tokens, "extend.colors.neutral.200")}`,
+    borderBottom: "none"
+  },
+  "& .cm-panel": {
+    background: get2(tokens, "extend.colors.neutral.50"),
+    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-button": {
+    margin: "4px",
+    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
+    background: get2(tokens, "extend.colors.neutral.100"),
+    border: "none"
+  },
+  "& .cm-searchMatch": {
+    backgroundColor: get2(tokens, "extend.colors.yellow.100")
+  },
+  "& .cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: get2(tokens, "extend.colors.primary.100")
+  }
 };
 var textTheme = {
   "& .cm-scroller": {
@@ -1507,6 +1585,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
         // TODO(burdon): Factor out VIM mode?
         editorMode === "vim" && vim(),
         // Theme.
+        // TODO(burdon): Make optional.
         EditorView9.baseTheme(defaultTheme),
         EditorView9.theme(slots?.editor?.theme ?? {}),
         // TODO(burdon): themeMode doesn't change in storybooks.
@@ -1560,15 +1639,6 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
     onKeyUp: handleKeyUp
   });
 });
-var maybeDebug = () => {
-  const items = localStorage.getItem("dxos.composer.demo");
-  if (items) {
-    return demo({
-      items: items.split(",")
-    });
-  }
-  return [];
-};
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const slots = defaultsDeep2({}, _slots, defaultTextSlots);
@@ -1581,7 +1651,6 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots:
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
-      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -1600,7 +1669,6 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
-      maybeDebug(),
       ...extensions
     ],
     slots,
@@ -2123,7 +2191,7 @@ export {
   markdownBundle,
   markdownHighlightStyle,
   markdownTags,
-  markdownTagsExtension,
+  markdownTagsExtensions,
   markdownTheme,
   mention,
   table,