@dxos/react-ui-editor 0.3.10-main.cbe7692 → 0.3.10-main.dcfebef

package/dist/lib/browser/index.mjs

@@ -24,13 +24,13 @@ var autocomplete = ({ onSearch }) => {
       // TODO(burdon): Optional decoration via addToOptions
       override: [
         (context) => {
-          const match = context.matchBefore(/\w*/);
-          if (!match || match.from === match.to && !context.explicit) {
+          const word = context.matchBefore(/\w*/);
+          if (!word || word.from === word.to && !context.explicit) {
             return null;
           }
           return {
-            from: match.from,
-            options: onSearch(match.text.toLowerCase())
+            from: word.from,
+            options: onSearch(word.text.toLowerCase())
           };
         }
       ]
@@ -43,7 +43,7 @@ import { closeBrackets } from "@codemirror/autocomplete";
 import { bracketMatching, defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
 import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark";
 import { EditorView, placeholder } from "@codemirror/view";
-var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
+var basicBundle = ({ themeMode, placeholder: _placeholder }) => [
   // TODO(burdon): Compare with minimalSetup.
   // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
@@ -54,324 +54,8 @@ var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts
-import { StateField } from "@codemirror/state";
-import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
-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 = {
-  maxParticles: 200,
-  particleGravity: 0.08,
-  particleAlphaFadeout: 0.996,
-  particleSize: {
-    min: 2,
-    max: 8
-  },
-  particleNumRange: {
-    min: 5,
-    max: 10
-  },
-  particleVelocityRange: {
-    x: [
-      -1,
-      1
-    ],
-    y: [
-      -3.5,
-      -1.5
-    ]
-  },
-  particleShrinkRate: 0.95,
-  shakeIntensity: 5
-};
-var blast = (options) => {
-  let blaster;
-  let last = 0;
-  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 point = {
-      x: x - left,
-      y: y - top
-    };
-    return {
-      element,
-      point
-    };
-  };
-  return [
-    // Cursor moved.
-    EditorView2.updateListener.of((update4) => {
-      if (blaster?.node !== update4.view.scrollDOM) {
-        if (blaster) {
-          blaster.destroy();
-        }
-        blaster = new Blaster(update4.view.scrollDOM, defaultsDeep({}, options, defaultOptions));
-        blaster.initialize();
-        blaster.start();
-      } else {
-        blaster.resize();
-      }
-      const current = update4.view.state.selection.main.head;
-      if (current !== last) {
-        last = current;
-        const { element, point } = getPoint(update4.view, current);
-        if (element && point) {
-          blaster.spawn({
-            element,
-            point
-          });
-        }
-      }
-    }),
-    // Document changed.
-    StateField.define({
-      create: () => null,
-      update: (_value, transaction) => {
-        if (blaster && transaction.docChanged) {
-          const view = EditorView2.findFromDOM(blaster.node);
-          const { element, point } = getPoint(view, transaction.selection.main.head);
-          if (element && point) {
-            blaster.spawn({
-              element,
-              point
-            });
-          }
-        }
-        return null;
-      }
-    }),
-    keymap2.of([
-      {
-        any: (view, event) => {
-          if (blaster && event.key === "Enter" && event.shiftKey) {
-            blaster.shake({
-              time: 0.4
-            });
-          }
-          return false;
-        }
-      }
-    ])
-  ];
-};
-var Blaster = class {
-  constructor(_node, _options) {
-    this._node = _node;
-    this._options = _options;
-    this._running = false;
-    this._shakeTime = 0;
-    this._shakeTimeMax = 0;
-    this._particles = [];
-    this._particlePointer = 0;
-    this._lastPoint = {
-      x: 0,
-      y: 0
-    };
-    this.shake = throttle(({ time }) => {
-      this._shakeTime = this._shakeTimeMax;
-      this._shakeTimeMax = time;
-    }, 100);
-    this.spawn = throttle(({ element, point }) => {
-      const color = getRGBComponents(element, this._options.color);
-      const numParticles = random(this._options.particleNumRange.min, this._options.particleNumRange.max);
-      const dir = this._lastPoint.x === point.x ? 0 : this._lastPoint.x < point.x ? 1 : -1;
-      this._lastPoint = point;
-      for (let i = numParticles; i--; i > 0) {
-        this._particles[this._particlePointer] = this._effect.create(point.x - dir * 16, point.y, color);
-        this._particlePointer = (this._particlePointer + 1) % this._options.maxParticles;
-      }
-    }, 100);
-    this._effect = this._options.effect === 1 ? new Effect1(_options) : new Effect2(_options);
-  }
-  get node() {
-    return this._node;
-  }
-  initialize() {
-    invariant(!this._canvas && !this._ctx, void 0, {
-      F: __dxlog_file,
-      L: 140,
-      S: this,
-      A: [
-        "!this._canvas && !this._ctx",
-        ""
-      ]
-    });
-    this._canvas = document.createElement("canvas");
-    this._canvas.id = "code-blast-canvas";
-    this._canvas.style.position = "absolute";
-    this._canvas.style.zIndex = "0";
-    this._canvas.style.pointerEvents = "none";
-    this._ctx = this._canvas.getContext("2d");
-    const parent = this._node.parentElement?.parentElement;
-    parent?.appendChild(this._canvas);
-    this.resize();
-  }
-  destroy() {
-    this.stop();
-    if (this._canvas) {
-      this._canvas.remove();
-      this._canvas = void 0;
-      this._ctx = void 0;
-    }
-  }
-  resize() {
-    if (this._node.parentElement && this._canvas) {
-      const { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = this._node.parentElement;
-      this._canvas.style.top = `${y}px`;
-      this._canvas.style.left = `${x}px`;
-      this._canvas.width = width;
-      this._canvas.height = height;
-    }
-  }
-  start() {
-    invariant(this._canvas && this._ctx, void 0, {
-      F: __dxlog_file,
-      L: 179,
-      S: this,
-      A: [
-        "this._canvas && this._ctx",
-        ""
-      ]
-    });
-    this._running = true;
-    this.loop();
-  }
-  stop() {
-    this._running = false;
-    this._node.style.transform = "translate(0px, 0px)";
-  }
-  loop() {
-    if (!this._running || !this._canvas || !this._ctx) {
-      return;
-    }
-    this._ctx.clearRect(0, 0, this._canvas.width ?? 0, this._canvas.height ?? 0);
-    const now = (/* @__PURE__ */ new Date()).getTime();
-    this._lastTime ??= now;
-    const dt = (now - this._lastTime) / 1e3;
-    this._lastTime = now;
-    if (this._shakeTime > 0) {
-      this._shakeTime -= dt;
-      const magnitude = this._shakeTime / this._shakeTimeMax * this._options.shakeIntensity;
-      const shakeX = random(-magnitude, magnitude);
-      const shakeY = random(-magnitude, magnitude);
-      this._node.style.transform = `translate(${shakeX}px,${shakeY}px)`;
-    }
-    this.drawParticles();
-    requestAnimationFrame(this.loop.bind(this));
-  }
-  drawParticles() {
-    for (let i = this._particles.length; i--; i > 0) {
-      const particle = this._particles[i];
-      if (!particle) {
-        continue;
-      }
-      if (particle.alpha < 0.01 || particle.size <= 0.5) {
-        continue;
-      }
-      this._effect.update(this._ctx, particle);
-    }
-  }
-};
-var Effect = class {
-  constructor(_options) {
-    this._options = _options;
-  }
-};
-var Effect1 = class extends Effect {
-  create(x, y, color) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1
-    };
-  }
-  update(ctx, particle) {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.alpha *= this._options.particleAlphaFadeout;
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.fillRect(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, particle.size);
-  }
-};
-var Effect2 = class extends Effect {
-  create(x, y, color) {
-    return {
-      x,
-      y: y + 10,
-      vx: random(this._options.particleVelocityRange.x[0], this._options.particleVelocityRange.x[1]),
-      vy: random(this._options.particleVelocityRange.y[0], this._options.particleVelocityRange.y[1]),
-      size: random(this._options.particleSize.min, this._options.particleSize.max),
-      color,
-      alpha: 1,
-      theta: random(0, 360) * Math.PI / 180,
-      drag: 0.92,
-      wander: 0.15
-    };
-  }
-  update(ctx, particle) {
-    particle.vy += this._options.particleGravity;
-    particle.x += particle.vx;
-    particle.y += particle.vy;
-    particle.vx *= particle.drag;
-    particle.vy *= particle.drag;
-    particle.theta += random(-0.5, 0.5);
-    particle.vx += Math.sin(particle.theta) * 0.1;
-    particle.vy += Math.cos(particle.theta) * 0.1;
-    particle.size *= this._options.particleShrinkRate;
-    particle.alpha *= this._options.particleAlphaFadeout;
-    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
-    ctx.beginPath();
-    ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
-    ctx.fill();
-  }
-};
-function throttle(callback, limit) {
-  let wait = false;
-  return function(...args) {
-    if (!wait) {
-      callback.apply(this, args);
-      wait = true;
-      setTimeout(() => {
-        wait = false;
-      }, limit);
-    }
-  };
-}
-var getRGBComponents = (node, color) => {
-  if (typeof color === "function") {
-    return color();
-  }
-  const bgColor = getComputedStyle(node).color;
-  if (bgColor) {
-    const x = bgColor.match(/(\d+), (\d+), (\d+)/)?.slice(1);
-    if (x) {
-      return x;
-    }
-  }
-  return [
-    50,
-    50,
-    50
-  ];
-};
-var random = (min, max) => {
-  if (!max) {
-    max = min;
-    min = 0;
-  }
-  return min + ~~(Math.random() * (max - min + 1));
-};
-
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
-import { keymap as keymap3 } from "@codemirror/view";
+import { keymap as keymap2 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -381,7 +65,7 @@ var demo = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap3.of([
+    keymap2.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -428,17 +112,17 @@ var demo = ({ delay = 75, items = defaultItems } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
-import { keymap as keymap4, Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
+import { keymap as keymap3, Decoration, EditorView as EditorView2, MatchDecorator, ViewPlugin, WidgetType } from "@codemirror/view";
 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";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
 var BookmarkWidget = class extends WidgetType {
   constructor(_pos, _id) {
     super();
     this._pos = _pos;
     this._id = _id;
-    invariant2(this._id, void 0, {
-      F: __dxlog_file2,
+    invariant(this._id, void 0, {
+      F: __dxlog_file,
       L: 41,
       S: this,
       A: [
@@ -457,7 +141,7 @@ var BookmarkWidget = class extends WidgetType {
     return span;
   }
 };
-var styles = EditorView3.baseTheme({
+var styles = EditorView2.baseTheme({
   "& .cm-bookmark": {
     cursor: "pointer",
     margin: "4px",
@@ -484,12 +168,12 @@ var comments = (options = {}) => {
     constructor(view) {
       this.bookmarks = bookmarkMatcher.createDeco(view);
     }
-    update(update4) {
-      this.bookmarks = bookmarkMatcher.updateDeco(update4, this.bookmarks);
+    update(update2) {
+      this.bookmarks = bookmarkMatcher.updateDeco(update2, this.bookmarks);
     }
   }, {
     decorations: (instance) => instance.bookmarks,
-    provide: (plugin) => EditorView3.atomicRanges.of((view) => {
+    provide: (plugin) => EditorView2.atomicRanges.of((view) => {
       return view.plugin(plugin)?.bookmarks || Decoration.none;
     })
   });
@@ -497,7 +181,7 @@ var comments = (options = {}) => {
     options.onUpdate?.(data);
   }, 200);
   return [
-    keymap4.of([
+    keymap3.of([
       {
         key: options?.key ?? "shift-meta-c",
         run: (view) => {
@@ -522,12 +206,12 @@ var comments = (options = {}) => {
     ]),
     bookmarks,
     // Monitor cursor movement.
-    EditorView3.updateListener.of((update4) => {
+    EditorView2.updateListener.of((update2) => {
       active = void 0;
       if (!options.onUpdate) {
         return;
       }
-      const view = update4.view;
+      const view = update2.view;
       const pos = view.state.selection.main.head;
       const decorations = [];
       const rangeSet = view.plugin(bookmarks)?.bookmarks;
@@ -563,62 +247,11 @@ var comments = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/image.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
-import { Decoration as Decoration2, EditorView as EditorView4, WidgetType as WidgetType2 } from "@codemirror/view";
-var image = (options = {}) => {
-  return StateField2.define({
-    create: (state) => update(state, options),
-    update: (_, tr) => update(tr.state, options),
-    provide: (field) => EditorView4.decorations.from(field)
-  });
-};
-var update = (state, options) => {
-  const builder = new RangeSetBuilder();
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === "Image") {
-        const urlNode = node.node.getChild("URL");
-        if (urlNode) {
-          const url = state.sliceDoc(urlNode.from, urlNode.to);
-          builder.add(state.readOnly ? node.from : node.to, node.to, Decoration2.widget({
-            widget: new ImageWidget(url)
-          }));
-        }
-      }
-    }
-  });
-  return builder.finish();
-};
-var ImageWidget = class extends WidgetType2 {
-  constructor(_url) {
-    super();
-    this._url = _url;
-  }
-  eq(other) {
-    return this._url === other?._url;
-  }
-  toDOM(view) {
-    const img = document.createElement("img");
-    img.setAttribute("src", this._url);
-    img.setAttribute("class", "cm-image");
-    return img;
-  }
-};
-
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField3 } from "@codemirror/state";
-import { Decoration as Decoration3, EditorView as EditorView5, WidgetType as WidgetType3 } from "@codemirror/view";
-var link = (options = {}) => {
-  return StateField3.define({
-    create: (state) => update2(state, options),
-    update: (_, tr) => update2(tr.state, options),
-    provide: (field) => EditorView5.decorations.from(field)
-  });
-};
-var LinkButton = class extends WidgetType3 {
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateField } from "@codemirror/state";
+import { Decoration as Decoration2, EditorView as EditorView3, WidgetType as WidgetType2 } from "@codemirror/view";
+var LinkButton = class extends WidgetType2 {
   constructor(_pos, _url, _onAttach) {
     super();
     this._pos = _pos;
@@ -634,7 +267,7 @@ var LinkButton = class extends WidgetType3 {
     return el;
   }
 };
-var LinkText = class extends WidgetType3 {
+var LinkText = class extends WidgetType2 {
   constructor(_pos, _text, _url) {
     super();
     this._pos = _pos;
@@ -664,10 +297,10 @@ var LinkText = class extends WidgetType3 {
     return link2;
   }
 };
-var update2 = (state, options) => {
-  const builder = new RangeSetBuilder2();
+var update = (state, options) => {
+  const builder = new RangeSetBuilder();
   const cursor = state.selection.main.head;
-  syntaxTree2(state).iterate({
+  syntaxTree(state).iterate({
     enter: (node) => {
       if (node.name === "Link") {
         const marks = node.node.getChildren("LinkMark");
@@ -678,12 +311,12 @@ var update2 = (state, options) => {
           return false;
         }
         if (cursor < node.from || cursor > node.to) {
-          builder.add(node.from, node.to, Decoration3.replace({
+          builder.add(node.from, node.to, Decoration2.replace({
             widget: new LinkText(node.from, text, options.link ? url : void 0)
           }));
         }
         if (options.onRender) {
-          builder.add(node.to, node.to, Decoration3.replace({
+          builder.add(node.to, node.to, Decoration2.replace({
             widget: new LinkButton(node.from, url, options.onRender)
           }));
         }
@@ -693,20 +326,25 @@ var update2 = (state, options) => {
   });
   return builder.finish();
 };
+var link = (options = {}) => {
+  return StateField.define({
+    create: (state) => update(state, options),
+    update: (_, tr) => update(tr.state, options),
+    provide: (field) => EditorView3.decorations.from(field)
+  });
+};
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
-import { StateField as StateField4 } from "@codemirror/state";
-var listener = ({ onChange }) => {
-  return StateField4.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged && onChange) {
-        onChange(transaction.newDoc.toString());
-      }
-      return null;
+import { StateField as StateField2 } from "@codemirror/state";
+var listener = ({ onChange }) => StateField2.define({
+  create: () => null,
+  update: (_value, transaction) => {
+    if (transaction.docChanged && onChange) {
+      onChange(transaction.newDoc.toString());
     }
-  });
-};
+    return null;
+  }
+});
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
@@ -717,46 +355,23 @@ import { languages } from "@codemirror/language-data";
 import { highlightSelectionMatches, 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 EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap as keymap4, placeholder as placeholder2, rectangularSelection } 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 get from "lodash.get";
-import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // 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-1.5"
-  ],
-  2: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl",
-    "-ml-1.5"
-  ],
-  3: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl",
-    "-ml-1.5"
-  ],
-  4: [
-    "mbs-4 mbe-2 font-medium text-inherit no-underline text-xl",
-    "-ml-[5px]"
-  ],
-  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);
+var heading = {
+  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 light = "text-neutral-200 dark:text-neutral-800";
 var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
@@ -767,7 +382,7 @@ var code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
 var codeMark = "font-mono text-primary-500";
 var inlineUrl = mx(code, "px-1");
 var blockquote = mx("pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30", light);
-var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800";
+var horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50";
 
 // packages/ui/react-ui-editor/src/styles/tokens.ts
 import { tailwindConfig } from "@dxos/react-ui-theme";
@@ -793,7 +408,7 @@ var markdownTagsExtension = {
     styleTags(markdownTags)
   ]
 };
-var markdownHighlightStyle = (readonly) => HighlightStyle.define([
+var markdownHighlightStyle = HighlightStyle.define([
   {
     tag: [
       tags.keyword,
@@ -837,54 +452,40 @@ var markdownHighlightStyle = (readonly) => HighlightStyle.define([
     tag: [
       tags.meta,
       tags.processingInstruction,
+      markdownTags.CodeMark,
+      markdownTags.EmphasisMark,
+      markdownTags.HeaderMark,
       markdownTags.LinkLabel,
       markdownTags.LinkReference,
-      markdownTags.ListMark
+      markdownTags.ListMark,
+      markdownTags.QuoteMark
     ],
     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)
+    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.
   {
@@ -906,6 +507,14 @@ var markdownHighlightStyle = (readonly) => HighlightStyle.define([
     ],
     class: inlineUrl
   },
+  // E.g., code block language (after ```).
+  {
+    tag: [
+      tags.function(tags.variableName),
+      tags.labelName
+    ],
+    class: codeMark
+  },
   // 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
@@ -928,7 +537,7 @@ var markdownHighlightStyle = (readonly) => HighlightStyle.define([
     tag: [
       markdownTags.HorizontalRule
     ],
-    class: mx2(horizontalRule, readonly && "-indent-[100rem]")
+    class: horizontalRule
   }
 ], {
   scope: markdownLanguage,
@@ -938,13 +547,13 @@ var markdownHighlightStyle = (readonly) => HighlightStyle.define([
 });
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
-var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
+var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
   return [
     bracketMatching2(),
     closeBrackets2(),
     _placeholder && placeholder2(_placeholder),
     EditorState.allowMultipleSelections.of(true),
-    EditorView6.lineWrapping,
+    EditorView4.lineWrapping,
     crosshairCursor(),
     dropCursor(),
     drawSelection(),
@@ -956,7 +565,7 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
     indentOnInput(),
     rectangularSelection(),
     // https://codemirror.net/docs/ref/#view.keymap
-    keymap5.of([
+    keymap4.of([
       // https://codemirror.net/docs/ref/#commands.defaultKeymap
       ...defaultKeymap,
       // https://codemirror.net/docs/ref/#commands.historyKeymap
@@ -986,132 +595,16 @@ var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
         markdownTagsExtension
       ]
     }),
-    // https://github.com/codemirror/theme-one-dark
-    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
     // Custom styles.
-    syntaxHighlighting2(markdownHighlightStyle(readonly))
+    syntaxHighlighting2(markdownHighlightStyle),
+    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
+    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2)
   ].filter(Boolean);
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/mention.ts
-import { autocompletion as autocompletion2 } from "@codemirror/autocomplete";
-var mention = ({ onSearch }) => {
-  return autocompletion2({
-    closeOnBlur: false,
-    override: [
-      (context) => {
-        const match = context.matchBefore(/@(\w+)?/);
-        if (!match || match.from === match.to && !context.explicit) {
-          return null;
-        }
-        console.log(match);
-        return {
-          from: match.from,
-          options: onSearch(match.text.slice(1).toLowerCase()).map((value) => ({
-            label: `@${value}`
-          }))
-        };
-      }
-    ]
-  });
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/table.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration4, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
-var table = (options = {}) => {
-  return StateField5.define({
-    create: (state) => update3(state, options),
-    update: (_, tr) => update3(tr.state, options),
-    provide: (field) => EditorView7.decorations.from(field)
-  });
-};
-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;
-          }
-        }
-      }
-    });
-    tables.forEach((table2) => builder.add(table2.from, table2.to, Decoration4.replace({
-      widget: new TableWidget(table2)
-    })));
-  }
-  return builder.finish();
-};
-var TableWidget = class extends WidgetType4 {
-  constructor(_table) {
-    super();
-    this._table = _table;
-  }
-  eq(other) {
-    return this._table.from === other?._table?.from;
-  }
-  toDOM(view) {
-    const table2 = document.createElement("table");
-    {
-      const header = table2.appendChild(document.createElement("thead"));
-      const row = 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;
-      });
-    }
-    {
-      const body = table2.appendChild(document.createElement("tbody"));
-      this._table.rows?.forEach((row) => {
-        const tr = body.appendChild(document.createElement("tr"));
-        row.forEach((cell) => {
-          const td = document.createElement("td");
-          td.setAttribute("class", "cm-table-cell");
-          tr.appendChild(td).textContent = cell;
-        });
-      });
-    }
-    return table2;
-  }
-};
-
 // 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 CheckboxWidget = class extends WidgetType5 {
+import { EditorView as EditorView5, Decoration as Decoration3, WidgetType as WidgetType3, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+var CheckboxWidget = class extends WidgetType3 {
   constructor(_pos, _checked, _indent, _onCheck) {
     super();
     this._pos = _pos;
@@ -1130,35 +623,30 @@ var CheckboxWidget = class extends WidgetType5 {
     const input = wrap.appendChild(document.createElement("input"));
     input.type = "checkbox";
     input.checked = this._checked;
-    if (!this._onCheck) {
-      input.setAttribute("disabled", "true");
-    }
-    if (this._onCheck) {
-      input.onchange = (event) => {
-        this._onCheck?.(event.target.checked);
-        return true;
-      };
-    }
+    input.onchange = (event) => {
+      this._onCheck(event.target.checked);
+      return true;
+    };
     return wrap;
   }
   ignoreEvent() {
     return false;
   }
 };
-var styles2 = EditorView8.baseTheme({
+var styles2 = EditorView5.baseTheme({
   "& .cm-task-item": {
     paddingLeft: "4px",
     paddingRight: "8px"
   }
 });
-var tasklist = (options = {}) => {
+var tasklist = () => {
   const taskMatcher = new MatchDecorator2({
     regexp: /^(\s*)- \[([ xX])\]\s/g,
     decoration: (match, view, pos) => {
       const indent = Math.floor(match[1].length / 2);
       const checked = match[2] === "x" || match[2] === "X";
-      return Decoration5.replace({
-        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
+      return Decoration3.replace({
+        widget: new CheckboxWidget(pos, checked, indent, (checked2) => {
           const idx = pos + match[0].indexOf("[") + 1;
           view.dispatch({
             changes: {
@@ -1179,13 +667,13 @@ var tasklist = (options = {}) => {
     constructor(view) {
       this.tasks = taskMatcher.createDeco(view);
     }
-    update(update4) {
-      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
+    update(update2) {
+      this.tasks = taskMatcher.updateDeco(update2, this.tasks);
     }
   }, {
     decorations: (instance) => instance.tasks,
-    provide: (plugin) => EditorView8.atomicRanges.of((view) => {
-      return view.plugin(plugin)?.tasks || Decoration5.none;
+    provide: (plugin) => EditorView5.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tasks || Decoration3.none;
     })
   });
   return [
@@ -1352,51 +840,8 @@ var defaultTheme = {
   "& .cm-tooltip": {
     border: "none"
   },
-  "& .cm-tooltip-below": {},
-  //
-  // autocomplete
-  //
-  "& .cm-tooltip-autocomplete": {
-    marginTop: "4px",
-    marginLeft: "-3px"
-  },
-  "& .cm-tooltip-autocomplete ul li": {},
-  "& .cm-tooltip-autocomplete ul li[aria-selected]": {},
-  "& .cm-completionIcon": {
-    display: "none"
-  },
-  "& .cm-completionLabel": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
-  },
-  "& .cm-completionMatchedText": {
-    textDecoration: "none"
-  },
-  //
-  // widgets
-  //
-  "& .cm-widgetBuffer": {
-    display: "none",
-    height: 0
-  },
-  //
-  // table
-  //
-  "& .cm-table-head": {
-    padding: "2px 16px 2px 0px",
-    borderBottom: `1px solid ${get2(tokens, "extend.colors.neutral.500")}`,
-    fontWeight: 100,
-    textAlign: "left",
-    color: get2(tokens, "extend.colors.neutral.500")
-  },
-  "& .cm-table-cell": {
-    padding: "2px 16px 2px 0px"
-  },
-  //
-  // image
-  //
-  "& .cm-image": {
-    margin: "0.5rem 0"
-  },
+  // '& .cm-tooltip-below': {},
+  // '& .cm-tooltip-autocomplete': {},
   //
   // font size
   // TODO(thure): This appears to be the best or only way to set selection caret heights, but it's far more verbose than it needs to be.
@@ -1446,19 +891,19 @@ var codeTheme = {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView9 } from "@codemirror/view";
+import { EditorView as EditorView6 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
-import defaultsDeep2 from "lodash.defaultsdeep";
+import defaultsDeep from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
 import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
-import { getColorForValue, inputSurface, mx as mx3 } from "@dxos/react-ui-theme";
+import { getColorForValue, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
 var EditorModes = [
   "default",
   "vim"
 ];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots = defaultSlots, editorMode }, forwardedRef) => {
   const { themeMode } = useThemeContext();
   const tabsterDOMAttribute = useFocusableGroup({
     tabBehavior: "limited"
@@ -1503,14 +948,13 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
     const state2 = EditorState2.create({
       doc: model.text(),
       extensions: [
-        readonly && EditorState2.readOnly.of(readonly),
         // TODO(burdon): Factor out VIM mode?
         editorMode === "vim" && vim(),
         // Theme.
-        EditorView9.baseTheme(defaultTheme),
-        EditorView9.theme(slots?.editor?.theme ?? {}),
+        EditorView6.baseTheme(defaultTheme),
+        EditorView6.theme(slots?.editor?.theme ?? {}),
         // TODO(burdon): themeMode doesn't change in storybooks.
-        EditorView9.darkTheme.of(themeMode === "dark"),
+        EditorView6.darkTheme.of(themeMode === "dark"),
         // Storage and replication.
         model.extension,
         // Custom.
@@ -1518,7 +962,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
       ].filter(Boolean)
     });
     view?.destroy();
-    setView(new EditorView9({
+    setView(new EditorView6({
       state: state2,
       parent: root
     }));
@@ -1532,7 +976,6 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode,
     root,
     model,
     themeMode,
-    readonly,
     editorMode
   ]);
   const handleKeyUp = useCallback((event) => {
@@ -1569,15 +1012,13 @@ var maybeDebug = () => {
   }
   return [];
 };
-var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var TextEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  const slots = defaultsDeep({}, _slots, defaultTextSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
-    readonly,
     extensions: [
       basicBundle({
-        readonly,
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
@@ -1588,15 +1029,13 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots:
     ...props
   });
 });
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions = [], slots: _slots, ...props }, forwardedRef) => {
   const { themeMode } = useThemeContext();
-  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  const slots = defaultsDeep({}, _slots, defaultMarkdownSlots);
   return /* @__PURE__ */ React.createElement(BaseTextEditor, {
     ref: forwardedRef,
-    readonly,
     extensions: [
       markdownBundle({
-        readonly,
         themeMode,
         placeholder: slots?.editor?.placeholder
       }),
@@ -1609,7 +1048,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], sl
 });
 var defaultSlots = {
   root: {
-    className: mx3("p-2", inputSurface)
+    className: mx2("p-2", inputSurface)
   }
 };
 var defaultTextSlots = {
@@ -1629,11 +1068,11 @@ var defaultMarkdownSlots = {
 import get3 from "lodash.get";
 import { useEffect as useEffect2, useState as useState2 } from "react";
 import { yCollab } from "y-codemirror.next";
-import { invariant as invariant3 } from "@dxos/invariant";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
 
 // packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
-import { Annotation, Facet, StateEffect, StateField as StateField6 } from "@codemirror/state";
+import { Annotation, Facet, StateEffect, StateField as StateField3 } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin3 } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
@@ -1822,7 +1261,7 @@ var semaphoreFacet = Facet.define({
   combine: (values) => values.at(-1)
 });
 var automergePlugin = (handle, path) => {
-  const stateField = StateField6.define({
+  const stateField = StateField3.define({
     create: () => ({
       lastHeads: automerge2.getHeads(handle.docSync()),
       unreconciledTransactions: [],
@@ -1860,8 +1299,8 @@ var automergePlugin = (handle, path) => {
       this._view = view;
       handle.addListener("change", this._handleChange);
     }
-    update(update4) {
-      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
+    update(update2) {
+      if (update2.transactions.length > 0 && update2.transactions.some((t) => !isReconcileTx(t))) {
         queueMicrotask(() => {
           this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
@@ -1883,7 +1322,7 @@ var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
 // packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
-import * as random2 from "lib0/random";
+import * as random from "lib0/random";
 var cursorColors = [
   {
     color: "#30bced",
@@ -1918,7 +1357,7 @@ var cursorColors = [
     light: "#1be7ff33"
   }
 ];
-var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
+var cursorColor = cursorColors[random.uint32() % cursorColors.length];
 
 // packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts
 import * as decoding from "lib0/decoding";
@@ -1926,7 +1365,7 @@ import * as encoding from "lib0/encoding";
 import { Observable } from "lib0/observable";
 import * as awarenessProtocol from "y-protocols/awareness";
 import { log } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
 var messageAwareness = 1;
 var messageQueryAwareness = 3;
 var SpaceAwarenessProvider = class extends Observable {
@@ -1963,7 +1402,7 @@ var SpaceAwarenessProvider = class extends Observable {
       removed,
       origin
     }, {
-      F: __dxlog_file3,
+      F: __dxlog_file2,
       L: 67,
       S: this,
       C: (f, a) => f(...a)
@@ -1976,7 +1415,7 @@ var SpaceAwarenessProvider = class extends Observable {
   }
   _handleSpaceMessage({ payload }) {
     log("space message", payload, {
-      F: __dxlog_file3,
+      F: __dxlog_file2,
       L: 79,
       S: this,
       C: (f, a) => f(...a)
@@ -2021,7 +1460,7 @@ var SpaceAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = ({ identity, space, text }) => {
   const [model, setModel] = useState2(() => createModel({
     identity,
@@ -2053,8 +1492,8 @@ var createModel = (options) => {
   }
 };
 var createYjsModel = ({ identity, space, text }) => {
-  invariant3(text?.doc && text?.content, void 0, {
-    F: __dxlog_file4,
+  invariant2(text?.doc && text?.content, void 0, {
+    F: __dxlog_file3,
     L: 74,
     S: void 0,
     A: [
@@ -2107,17 +1546,14 @@ export {
   YXmlFragment,
   autocomplete,
   basicBundle,
-  blast,
   codeTheme,
   comments,
   cursorColor,
   defaultMarkdownSlots,
-  defaultOptions,
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
   demo,
-  image,
   link,
   listener,
   markdownBundle,
@@ -2125,8 +1561,6 @@ export {
   markdownTags,
   markdownTagsExtension,
   markdownTheme,
-  mention,
-  table,
   tags2 as tags,
   tasklist,
   textTheme,