@dxos/react-ui-editor 0.3.10-next.ef70620 → 0.3.10

package/dist/lib/browser/index.mjs

@@ -1,162 +1,1410 @@
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
-import { Doc, YText as YText2, YXmlFragment } from "@dxos/text-model";
+import { Doc, YText, YXmlFragment } from "@dxos/text-model";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic/bundle.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/autocomplete.ts
+import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+import { keymap } from "@codemirror/view";
+var autocomplete = ({ onSearch }) => {
+  return [
+    // https://codemirror.net/docs/ref/#view.keymap
+    // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
+    keymap.of(completionKeymap),
+    // https://codemirror.net/examples/autocompletion
+    // https://codemirror.net/docs/ref/#autocomplete.autocompletion
+    autocompletion({
+      // TODO(burdon): Set custom keymap.
+      // defaultKeymap: false,
+      // Don't start unless key press.
+      activateOnTyping: false,
+      // TODO(burdon): Option to create new page?
+      // TODO(burdon): Optional decoration via addToOptions
+      override: [
+        (context) => {
+          const match = context.matchBefore(/\w*/);
+          if (!match || match.from === match.to && !context.explicit) {
+            return null;
+          }
+          return {
+            from: match.from,
+            options: onSearch(match.text.toLowerCase())
+          };
+        }
+      ]
+    })
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic.ts
 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 = ({ themeMode, placeholder: _placeholder }) => [
+import { drawSelection, EditorView, placeholder } from "@codemirror/view";
+var basicBundle = ({ readonly, themeMode, placeholder: _placeholder }) => [
+  EditorView.lineWrapping,
+  // TODO(burdon): Compare with minimalSetup.
+  // https://codemirror.net/docs/ref/#codemirror.minimalSetup
   bracketMatching(),
   closeBrackets(),
+  drawSelection(),
   _placeholder && placeholder(_placeholder),
-  EditorView.lineWrapping,
   // TODO(burdon): Is this required?
   themeMode === "dark" ? syntaxHighlighting(oneDarkHighlightStyle) : syntaxHighlighting(defaultHighlightStyle)
 ].filter(Boolean);
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/basic/theme.ts
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts
+import { EditorView as EditorView2, keymap as keymap2 } from "@codemirror/view";
+import defaultsDeep from "lodash.defaultsdeep";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/circleci/project/packages/ui/react-ui-editor/src/components/TextEditor/extensions/blast.ts";
+var defaultOptions = {
+  effect: 2,
+  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 = defaultOptions) => {
+  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({
+          particleGravity: 0.2,
+          particleShrinkRate: 0.995,
+          color: () => [
+            100 + Math.random() * 100,
+            0,
+            0
+          ]
+        }, options, defaultOptions));
+        blaster.initialize();
+        blaster.start();
+      } else {
+        blaster.resize();
+      }
+      const current = update4.state.selection.main.head;
+      if (current !== last) {
+        last = current;
+        const { element, point } = getPoint(update4.view, current - 1);
+        if (element && point) {
+          blaster.spawn({
+            element,
+            point
+          });
+        }
+      }
+    }),
+    keymap2.of([
+      {
+        any: (_, event) => {
+          if (blaster) {
+            if (event.key === "Enter" && event.shiftKey) {
+              blaster.shake({
+                time: 0.8
+              });
+              return true;
+            }
+          }
+          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 || time;
+      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: 138,
+      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: 177,
+      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/code.ts
+import { ViewPlugin, EditorView as EditorView3, Decoration } from "@codemirror/view";
 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 heading = {
-  1: "mbs-4 mbe-2 text-4xl font-semibold text-inherit no-underline",
-  2: "mbs-4 mbe-2 text-3xl font-bold text-inherit no-underline",
-  3: "mbs-4 mbe-2 text-2xl font-bold text-inherit no-underline",
-  4: "mbs-4 mbe-2 text-xl font-extrabold text-inherit no-underline",
-  5: "mbs-4 mbe-2 text-lg font-extrabold text-inherit no-underline",
-  6: "mbs-4 mbe-2 font-black text-inherit no-underline"
+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);
+};
+var light = "text-neutral-200 dark:text-neutral-800";
+var mark = mx("!font-normal !no-underline !text-inherit opacity-40", light);
+var bold = "font-bold";
+var italic = "italic";
+var strikethrough = "line-through";
+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";
+
+// packages/ui/react-ui-editor/src/styles/tokens.ts
+import { tailwindConfig } from "@dxos/react-ui-theme";
+var tokens = tailwindConfig({}).theme;
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/code.ts
+var CODE_REGEX = /```[\s\S]*?```/gs;
+var styles = EditorView3.baseTheme({
+  "& .cm-code-block": {
+    display: "block",
+    paddingInline: "4px !important"
+  },
+  "&light .cm-code-block": {
+    background: get(tokens, "extend.colors.neutral.50")
+  },
+  "&dark .cm-code-block": {
+    background: get(tokens, "extend.colors.neutral.850")
+  },
+  "& .cm-code-block-first": {
+    paddingTop: "4px !important",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  "& .cm-code-block-last": {
+    paddingBottom: "4px !important",
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
+  }
+});
+var getLineRange = (lines, from, to) => {
+  const start = lines.findIndex((line) => line.from >= from);
+  const end = lines.findIndex((line) => line.to >= to);
+  return [
+    start,
+    end
+  ];
+};
+var code2 = () => {
+  const getDecorations = (view) => {
+    const decorations = [];
+    if (view.state.readOnly) {
+      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(Decoration.line({
+            class: mx2("cm-code-block", i === range[0] && "cm-code-block-first", i === range[1] && "cm-code-block-last")
+          }).range(block.from));
+        }
+      }
+    }
+    return Decoration.set(decorations);
+  };
+  return [
+    ViewPlugin.fromClass(class {
+      constructor(view) {
+        this.decorations = getDecorations(view);
+      }
+      update(update4) {
+        if (update4.docChanged || update4.viewportChanged) {
+          this.decorations = getDecorations(update4.view);
+        }
+      }
+    }, {
+      decorations: (value) => value.decorations
+    }),
+    styles
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/demo.ts
+import { keymap as keymap3 } from "@codemirror/view";
+var defaultItems = [
+  "hello world!",
+  "this is a test.",
+  "this is [DXOS](https://dxos.org)"
+];
+var demo = ({ delay = 75, items = defaultItems } = {}) => {
+  let t;
+  let idx = 0;
+  return [
+    keymap3.of([
+      {
+        // Reset.
+        key: "alt-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          idx = 0;
+          return true;
+        }
+      },
+      {
+        // Next prompt.
+        // TODO(burdon): Press 1-9 to select prompt?
+        key: "shift-meta-'",
+        run: (view) => {
+          clearTimeout(t);
+          const text = items[idx++];
+          if (idx === items?.length) {
+            idx = 0;
+          }
+          let i = 0;
+          const insert = (d = 0) => {
+            t = setTimeout(() => {
+              const pos = view.state.selection.main.head;
+              view.dispatch({
+                changes: {
+                  from: pos,
+                  insert: text[i++]
+                },
+                selection: {
+                  anchor: pos + 1
+                }
+              });
+              if (i < text.length) {
+                insert(Math.random() * delay * (text[i] === " " ? 2 : 1));
+              }
+            }, d);
+          };
+          insert();
+          return true;
+        }
+      }
+    ])
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts
+import { keymap as keymap4, Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin as ViewPlugin2, WidgetType } from "@codemirror/view";
+import { debounce } from "@dxos/async";
+import { invariant as invariant2 } from "@dxos/invariant";
+var __dxlog_file2 = "/home/circleci/project/packages/ui/react-ui-editor/src/components/TextEditor/extensions/comments.ts";
+var styles2 = EditorView4.baseTheme({
+  "& .cm-bookmark": {
+    cursor: "pointer",
+    margin: "4px",
+    padding: "4px",
+    backgroundColor: "yellow"
+  },
+  "& .cm-bookmark-selected": {
+    backgroundColor: "orange"
+  }
+});
+var BookmarkWidget = class extends WidgetType {
+  constructor(_pos, _id, _handleClick) {
+    super();
+    this._pos = _pos;
+    this._id = _id;
+    this._handleClick = _handleClick;
+    invariant2(this._id, void 0, {
+      F: __dxlog_file2,
+      L: 37,
+      S: this,
+      A: [
+        "this._id",
+        ""
+      ]
+    });
+  }
+  eq(other) {
+    return this._id === other._id;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-bookmark";
+    span.textContent = "\xA7";
+    span.onclick = () => this._handleClick();
+    return span;
+  }
+};
+var comments = (options = {}) => {
+  let active;
+  const bookmarkMatcher = new MatchDecorator({
+    regexp: /\[\^(\w+)\]/g,
+    decoration: (match, view, pos) => {
+      const id = match[1];
+      return Decoration2.replace({
+        id,
+        widget: new BookmarkWidget(pos, id, () => handleUpdate({
+          active: id
+        }))
+      });
+    }
+  });
+  const bookmarks = ViewPlugin2.fromClass(class {
+    constructor(view) {
+      this.bookmarks = bookmarkMatcher.createDeco(view);
+    }
+    update(update4) {
+      this.bookmarks = bookmarkMatcher.updateDeco(update4, this.bookmarks);
+    }
+  }, {
+    decorations: (instance) => instance.bookmarks,
+    provide: (plugin) => EditorView4.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.bookmarks || Decoration2.none;
+    })
+  });
+  const handleUpdate = debounce((data) => {
+    options.onUpdate?.(data);
+  }, 200);
+  return [
+    keymap4.of([
+      {
+        key: options?.key ?? "shift-meta-c",
+        run: (view) => {
+          const { from, to, head } = view.state.selection.main;
+          const id = options.onCreate?.(from, to);
+          if (id) {
+            const tag = `[^${id}]`;
+            view.dispatch({
+              changes: {
+                from: head,
+                insert: tag
+              },
+              selection: {
+                anchor: head + tag.length
+              }
+            });
+            return true;
+          }
+          return false;
+        }
+      }
+    ]),
+    bookmarks,
+    // Monitor cursor movement.
+    EditorView4.updateListener.of((update4) => {
+      active = void 0;
+      if (!options.onUpdate) {
+        return;
+      }
+      const { view, state } = update4;
+      const pos = state.selection.main.head;
+      const decorations = [];
+      const rangeSet = view.plugin(bookmarks)?.bookmarks;
+      let closest = Infinity;
+      const { from, to } = (
+        /* view.visibleRanges?.[0] ?? */
+        {
+          from: 0,
+          to: state.doc.length
+        }
+      );
+      rangeSet?.between(from, to, (from2, to2, value) => {
+        decorations.push({
+          from: from2,
+          to: to2,
+          value
+        });
+        const d = Math.min(Math.abs(pos - from2), Math.abs(pos - to2));
+        if (d < closest) {
+          active = value.spec.id;
+          closest = d;
+        }
+      });
+      if (decorations.length) {
+        handleUpdate({
+          active,
+          items: decorations.map(({ from: from2, value: { spec: { id } } }) => ({
+            id,
+            pos: from2,
+            location: view.coordsAtPos(from2)
+          }))
+        });
+      }
+    }),
+    styles2
+  ];
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/highlight.ts
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration as Decoration3, EditorView as EditorView5 } from "@codemirror/view";
+import sortBy from "lodash.sortby";
+import { useEffect } from "react";
+var styles3 = EditorView5.baseTheme({
+  "& .cm-highlight": {
+    backgroundColor: "yellow"
+  },
+  "& .cm-highlight::before": {
+    content: "]"
+  },
+  "& .cm-highlight-active": {
+    backgroundColor: "lime"
+  }
+});
+var marks = {
+  highlight: Decoration3.mark({
+    class: "cm-highlight"
+  }),
+  HighlightActive: Decoration3.mark({
+    class: "cm-highlight-active"
+  })
+};
+var setHighlights = StateEffect.define();
+var useHighlights = (view, ranges = []) => {
+  useEffect(() => {
+    view?.dispatch({
+      effects: setHighlights.of(ranges)
+    });
+  }, [
+    view,
+    ranges
+  ]);
+};
+var highlightStateField = StateField.define({
+  create: () => [],
+  update: (threads, tr) => {
+    for (const effect of tr.effects) {
+      if (effect.is(setHighlights)) {
+        return effect.value;
+      }
+    }
+    return threads;
+  }
+});
+var highlightDecorations = EditorView5.decorations.compute([
+  highlightStateField
+], (state) => {
+  const selectionRanges = state.field(highlightStateField);
+  const decorations = sortBy(selectionRanges ?? [], (selection) => selection.from)?.flatMap((selection) => {
+    const range = {
+      from: selection.from,
+      to: selection.to + 1
+    };
+    if (selection.to > selection.from) {
+      if (selection.active) {
+        return marks.HighlightActive.range(range.from, range.to);
+      } else {
+        return marks.highlight.range(range.from, range.to);
+      }
+    } else {
+      return [];
+    }
+  }) ?? [];
+  return Decoration3.set(decorations);
+});
+var listener = (options) => {
+  return EditorView5.updateListener.of((update4) => {
+    const { view, state } = update4;
+    const { head } = state.selection.main;
+    const ranges = state.field(highlightStateField);
+    let mod = false;
+    const newRanges = ranges.map((range) => {
+      const active = head >= range.from && head <= range.to;
+      if (active !== range.active) {
+        mod = true;
+        return {
+          ...range,
+          active
+        };
+      } else {
+        return range;
+      }
+    });
+    if (mod) {
+      view.dispatch({
+        effects: setHighlights.of(newRanges)
+      });
+      options?.onChange?.(newRanges.find((range) => range.active)?.id);
+    }
+  });
+};
+var highlight = (options = {}) => {
+  return [
+    highlightStateField,
+    highlightDecorations,
+    listener(options),
+    styles3
+  ];
+};
+
+// 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 Decoration4, EditorView as EditorView6, 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) => EditorView6.decorations.from(field)
+  });
+};
+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(hide ? node.from : node.to, node.to, Decoration4.replace({
+            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 Decoration5, EditorView as EditorView7, 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) => EditorView7.decorations.from(field)
+  });
+};
+var LinkButton = class extends WidgetType3 {
+  constructor(_pos, _url, _onAttach) {
+    super();
+    this._pos = _pos;
+    this._url = _url;
+    this._onAttach = _onAttach;
+  }
+  eq(other) {
+    return this._pos === other._pos && this._url === other._url;
+  }
+  toDOM(view) {
+    const el = document.createElement("span");
+    this._onAttach(el, this._url);
+    return el;
+  }
+};
+var LinkText = class extends WidgetType3 {
+  constructor(_pos, _text, _url) {
+    super();
+    this._pos = _pos;
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._pos === other._pos && this._url === other._url;
+  }
+  toDOM(view) {
+    const link2 = document.createElement("a");
+    link2.setAttribute("class", "cm-link");
+    link2.textContent = this._text;
+    if (this._url) {
+      link2.setAttribute("rel", "noreferrer");
+      link2.setAttribute("target", "_blank");
+      link2.href = this._url;
+    } else {
+      link2.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._pos
+          }
+        });
+      };
+    }
+    return link2;
+  }
+};
+var update2 = (state, options) => {
+  const builder = new RangeSetBuilder2();
+  const cursor = state.selection.main.head;
+  syntaxTree2(state).iterate({
+    enter: (node) => {
+      if (node.name === "Link") {
+        const marks2 = node.node.getChildren("LinkMark");
+        const text = marks2.length >= 2 ? state.sliceDoc(marks2[0].to, marks2[1].from) : "";
+        const urlNode = node.node.getChild("URL");
+        const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+        if (!url) {
+          return false;
+        }
+        if (state.readOnly || cursor < node.from || cursor > node.to) {
+          builder.add(node.from, node.to, Decoration5.replace({
+            widget: new LinkText(node.from, text, options.link ? url : void 0)
+          }));
+        }
+        if (options.onRender) {
+          builder.add(node.to, node.to, Decoration5.replace({
+            widget: new LinkButton(node.from, url, options.onRender)
+          }));
+        }
+        return false;
+      }
+    }
+  });
+  return builder.finish();
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
+import { StateField as StateField4 } from "@codemirror/state";
+var listener2 = ({ onChange }) => {
+  return StateField4.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";
+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 { searchKeymap } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
+import { crosshairCursor, drawSelection as drawSelection2, dropCursor, EditorView as EditorView8, highlightActiveLine, 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 get2 from "lodash.get";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var markdownTags = {
+  Blockquote: Tag.define(),
+  CodeMark: Tag.define(),
+  CodeText: Tag.define(),
+  EmphasisMark: Tag.define(),
+  HeaderMark: Tag.define(),
+  HorizontalRule: Tag.define(),
+  InlineCode: Tag.define(),
+  LinkLabel: Tag.define(),
+  LinkReference: Tag.define(),
+  ListMark: Tag.define(),
+  QuoteMark: Tag.define(),
+  URL: Tag.define(),
+  // Custom.
+  TableCell: Tag.define()
+};
+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: mx3(horizontalRule, readonly && "-indent-[100rem]")
+    },
+    // TODO(burdon): Only if being edited.
+    {
+      tag: [
+        markdownTags.TableCell
+      ],
+      class: "font-mono"
+    }
+  ], {
+    scope: markdownLanguage,
+    all: {
+      fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+    }
+  });
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
+var markdownBundle = ({ readonly, themeMode, placeholder: _placeholder }) => {
+  return [
+    EditorState.allowMultipleSelections.of(true),
+    EditorState.tabSize.of(2),
+    EditorView8.lineWrapping,
+    customKeymap(),
+    bracketMatching2(),
+    closeBrackets2(),
+    crosshairCursor(),
+    dropCursor(),
+    drawSelection2(),
+    highlightActiveLine(),
+    history(),
+    indentOnInput(),
+    _placeholder && placeholder2(_placeholder),
+    // Main extension.
+    // https://github.com/codemirror/lang-markdown
+    // https://codemirror.net/5/mode/markdown/index.html (demo).
+    markdown({
+      // GRM by default (vs strict CommonMark):
+      // Table, TaskList, Strikethrough, and Autolink.
+      // NOTE: This extends the parser; it doesn't affect rendering.
+      // https://github.github.com/gfm
+      // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+      base: markdownLanguage2,
+      // Languages for syntax highlighting fenced code blocks.
+      codeLanguages: languages,
+      // Parser extensions.
+      extensions: [
+        // GFM provided by default.
+        markdownTagsExtensions
+      ]
+    }),
+    // https://github.com/codemirror/theme-one-dark
+    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2),
+    // Custom styles.
+    syntaxHighlighting2(markdownHighlightStyle(readonly))
+  ].filter(Boolean);
 };
-var bold = "font-bold";
-var code = "font-mono bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5";
-var codeWithoutMarks = mx(code, "pli-1.5 mli-0.5");
-var italic = "italic";
-var strikethrough = "line-through";
-var mark = "!font-normal !no-underline !text-inherit opacity-40";
+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/styles/tokens.ts
-import { tailwindConfig } from "@dxos/react-ui-theme";
-var tokens = tailwindConfig({}).theme;
+// 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/basic/theme.ts
-var basicTheme = {
-  "&.cm-focused": {
-    outline: "none"
-  },
-  "& .cm-line": {
-    paddingInline: 0,
-    lineHeight: 1.6,
-    minBlockSize: "1.6em"
-  },
-  "& .cm-line *": {
-    lineHeight: 1.6
-  },
-  "& .cm-scroller": {
-    fontFamily: get(tokens, "fontFamily.body", []).join(","),
-    overflow: "visible"
-  },
-  "& .cm-content": {
-    padding: 0,
-    caretColor: "black"
-  },
-  ".dark & .cm-content": {
-    caretColor: "white"
-  },
-  "& .cm-tooltip": {
-    backgroundColor: "transparent",
-    border: "none"
-  },
-  "& .cm-link": {
-    color: get(tokens, "extend.colors.primary.500"),
-    textDecoration: "underline"
+// 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 Decoration6, EditorView as EditorView9, 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) => EditorView9.decorations.from(field)
+  });
+};
+var update3 = (state, options) => {
+  const builder = new RangeSetBuilder3();
+  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) => {
+    const hide = state.readOnly || cursor < table2.from || cursor > table2.to;
+    hide && builder.add(table2.from, table2.to, Decoration6.replace({
+      widget: new TableWidget(table2)
+    }));
+    builder.add(table2.from, table2.to, Decoration6.mark({
+      class: "cm-table"
+    }));
+  });
+  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 tr = header.appendChild(document.createElement("tr"));
+      this._table.header?.forEach((cell) => {
+        const th = document.createElement("th");
+        th.setAttribute("class", "cm-table-head");
+        tr.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/change.ts
-import { StateField } from "@codemirror/state";
-var onChangeExtension = (onChange) => StateField.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/tasklist.ts
+import { EditorView as EditorView10, Decoration as Decoration7, WidgetType as WidgetType5, MatchDecorator as MatchDecorator2, ViewPlugin as ViewPlugin3 } from "@codemirror/view";
+var styles4 = EditorView10.baseTheme({
+  "& .cm-task-item": {
+    paddingLeft: "4px",
+    paddingRight: "8px"
   }
 });
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkDecoration.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
-import { Decoration, EditorView as EditorView2, WidgetType } from "@codemirror/view";
-var Link = class extends WidgetType {
-  constructor(_anchor, _text, _url) {
+var CheckboxWidget = class extends WidgetType5 {
+  constructor(_pos, _checked, _indent, _onCheck) {
     super();
-    this._anchor = _anchor;
-    this._text = _text;
-    this._url = _url;
+    this._pos = _pos;
+    this._checked = _checked;
+    this._indent = _indent;
+    this._onCheck = _onCheck;
   }
   eq(other) {
-    return this._text === other.text && this._url === other.url;
+    return this._pos === other._pos && this._checked === other._checked && this._indent === other._indent;
   }
   toDOM(view) {
-    const link = document.createElement("a");
-    link.setAttribute("class", "cm-link");
-    link.textContent = this._text;
-    if (this._url) {
-      link.setAttribute("target", "_blank");
-      link.href = this._url;
-    } else {
-      link.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: this._anchor
-          }
-        });
+    const wrap = document.createElement("span");
+    wrap.className = "cm-task-item";
+    wrap.setAttribute("aria-hidden", "true");
+    wrap.style.setProperty("margin-left", this._indent * 24 + "px");
+    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;
       };
     }
-    return link;
+    return wrap;
+  }
+  ignoreEvent() {
+    return false;
   }
 };
-var hyperlinkDecoration = ({ link } = {}) => {
-  return StateField2.define({
-    create: (state) => update(state, link),
-    update: (_, tr) => update(tr.state, link),
-    provide: (field) => EditorView2.decorations.from(field)
+var tasklist = (options = {}) => {
+  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 Decoration7.replace({
+        widget: new CheckboxWidget(pos, checked, indent, view.state.readOnly ? void 0 : (checked2) => {
+          const idx = pos + match[0].indexOf("[") + 1;
+          view.dispatch({
+            changes: {
+              from: idx,
+              to: idx + 1,
+              insert: checked2 ? "x" : " "
+            },
+            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+            selection: {
+              anchor: idx + 3
+            }
+          });
+        })
+      });
+    }
   });
-};
-var update = (state, link) => {
-  const builder = new RangeSetBuilder();
-  const cursor = state.selection.main.head;
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (cursor < node.from || cursor > node.to) {
-        if (node.name === "Link") {
-          const marks = node.node.getChildren("LinkMark");
-          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
-          const urlNode = node.node.getChild("URL");
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
-          builder.add(node.from, node.to, Decoration.replace({
-            widget: new Link(node.from, text, link ? url : void 0)
-          }));
-          return false;
-        }
-      }
-      return true;
+  const tasks = ViewPlugin3.fromClass(class {
+    constructor(view) {
+      this.tasks = taskMatcher.createDeco(view);
     }
+    update(update4) {
+      this.tasks = taskMatcher.updateDeco(update4, this.tasks);
+    }
+  }, {
+    decorations: (value) => value.tasks,
+    provide: (plugin) => EditorView10.atomicRanges.of((view) => {
+      return view.plugin(plugin)?.tasks || Decoration7.none;
+    })
   });
-  return builder.finish();
+  return [
+    tasks,
+    styles4
+  ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkTooltip.tsx
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.tsx
 import { hoverTooltip } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp) => hoverTooltip((view, pos) => {
+var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip((view, pos) => {
   const { from, text } = view.state.doc.lineAt(pos);
   const p = pos - from;
   let idx = 0;
@@ -182,288 +1430,102 @@ var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp) => hoverTool
     end: idx + from + match[0].length,
     above: true,
     create: () => {
-      const el = document.createElement("a");
-      el.innerText = "_";
-      el.className = tooltipContent({}, "mb-2 p-1");
-      el.setAttribute("target", "_blank");
-      el.setAttribute("href", url);
+      const el = document.createElement("div");
+      el.className = tooltipContent({}, "pli-2 plb-1");
       onHover(el, url);
       return {
-        dom: el
+        dom: el,
+        offset: {
+          x: 0,
+          y: 12
+        }
       };
     }
   };
 });
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink/hyperlinkWidget.tsx
-import { Decoration as Decoration2, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
-var markdownLinkRegexp2 = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
-var linkDecorator = () => new MatchDecorator({
-  regexp: markdownLinkRegexp2,
-  decorate: (add, from, to, match, view) => {
-    const [_, label, url] = match;
-    const p0 = {
-      start: from,
-      end: from + 1
-    };
-    const p1 = {
-      start: from + 1,
-      end: from + 1 + label.length
-    };
-    const p2 = {
-      start: p1.end,
-      end: p1.end + 1
-    };
-    const p3 = {
-      start: p1.end + 1,
-      end: p1.end + 1 + url.length + 2
-    };
-    add(p0.start, p0.end, Decoration2.mark({
-      class: "cm-hyperlink-bracket",
-      _attributes: {
-        style: "display: none"
-      }
-    }));
-    add(p1.start, p1.end, Decoration2.mark({
-      class: "cm-hyperlink-label"
-    }));
-    add(p2.start, p2.end, Decoration2.mark({
-      class: "cm-hyperlink-bracket",
-      _attributes: {
-        style: "display: none"
-      }
-    }));
-    add(p3.start, p3.end, Decoration2.mark({
-      class: "cm-hyperlink-url",
-      _attributes: {
-        style: "display: none"
-      }
-    }));
-  }
-});
-function hyperLinkExtension() {
-  return ViewPlugin.fromClass(class HyperLinkView {
-    constructor(view) {
-      this.decorator = linkDecorator();
-      this.decorations = this.decorator.createDeco(view);
-    }
-    update(update2) {
-      if (update2.docChanged || update2.viewportChanged) {
-        this.decorations = this.decorator.updateDeco(update2, this.decorations);
-      }
-    }
-  }, {
-    decorations: (view) => view.decorations,
-    eventHandlers: {
-      // TODO(burdon): CLick to expand link.
-      // https://discuss.codemirror.net/t/decorator-iteration-on-click-event/4226/2
-      mousedown: function(event, view) {
-        const pos = view.posAtDOM(event.target);
-        if (pos !== 0) {
-          console.log(this);
-        }
-      },
-      // TODO(burdon): Hide when cursor moves away.
-      keydown: (event, view) => {
-        view.update([]);
-      }
-    }
-  });
-}
-var hyperlinkStyle = EditorView3.baseTheme({
-  ".cm-hyperlink-label": {
-    cursor: "pointer",
-    textDecoration: "underline"
-  },
-  ".cm-hyperlink-bracket": {
-    opacity: 0.2
-  },
-  ".cm-hyperlink-url": {
-    opacity: 0.5,
-    fontFamily: "monospace"
-  }
-});
-var hyperlinkWidget = [
-  hyperLinkExtension(),
-  hyperlinkStyle
-];
-
-// 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 { markdownLanguage as markdownLanguage2, markdown } from "@codemirror/lang-markdown";
-import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, foldKeymap, indentOnInput, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
-import { languages } from "@codemirror/language-data";
-import { lintKeymap } from "@codemirror/lint";
-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 EditorView4, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, placeholder as placeholder2, rectangularSelection } from "@codemirror/view";
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/tags.ts
-import { styleTags, Tag } from "@lezer/highlight";
-var markdownTags = {
-  headingMark: Tag.define(),
-  quoteMark: Tag.define(),
-  listMark: Tag.define(),
-  linkMark: Tag.define(),
-  emphasisMark: Tag.define(),
-  codeMark: Tag.define(),
-  codeText: Tag.define(),
-  inlineCode: Tag.define(),
-  url: Tag.define(),
-  linkReference: Tag.define(),
-  linkLabel: Tag.define()
-};
-var markdownTagsExtension = {
-  props: [
-    styleTags({
-      HeaderMark: markdownTags.headingMark,
-      QuoteMark: markdownTags.quoteMark,
-      ListMark: markdownTags.listMark,
-      LinkMark: markdownTags.linkMark,
-      EmphasisMark: markdownTags.emphasisMark,
-      CodeMark: markdownTags.codeMark,
-      CodeText: markdownTags.codeText,
-      InlineCode: markdownTags.inlineCode,
-      URL: markdownTags.url,
-      LinkReference: markdownTags.linkReference,
-      LinkLabel: markdownTags.linkLabel
-    })
-  ]
-};
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/theme.ts
-import { markdownLanguage } from "@codemirror/lang-markdown";
-import { HighlightStyle } from "@codemirror/language";
-import { tags } from "@lezer/highlight";
-import get2 from "lodash.get";
-var chalky = "#e5c07b";
-var coral = "#e06c75";
-var cyan = "#56b6c2";
-var invalid = "#ffffff";
-var ivory = "#abb2bf";
-var stone = "#7d8799";
-var malibu = "#61afef";
-var sage = "#98c379";
-var whiskey = "#d19a66";
-var violet = "#c678dd";
-var highlightBackground = "#2c313a";
-var tooltipBackground = "#353a42";
-var monospace = get2(tokens, "fontFamily.mono", [
-  "monospace"
-]).join(",");
-var markdownTheme = {
-  // TODO(thure): Consider whether these commented-out rules from one-dark-theme should be integrated.
-  // '&': {
-  //   color: ivory,
-  //   backgroundColor: background
-  // },
-  // '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
-  // '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-  //   backgroundColor: selection
-  // },
-  // '.cm-panels': { backgroundColor: darkBackground, color: ivory },
-  // '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
-  // '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
-  // '.cm-searchMatch': {
-  //   backgroundColor: '#72a1ff59',
-  //   outline: '1px solid #457dff'
-  // },
-  // '.cm-searchMatch.cm-searchMatch-selected': {
-  //   backgroundColor: '#6199ff2f'
-  // },
-  // '.cm-activeLine': { backgroundColor: '#6699ff0b' },
-  // '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-  // '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-  //   backgroundColor: '#bad0f847'
-  // },
-  // '.cm-gutters': {
-  //   backgroundColor: background,
-  //   color: stone,
-  //   border: 'none'
-  // },
-  // '.cm-activeLineGutter': {
-  //   backgroundColor: highlightBackground
-  // },
-  // '.cm-foldPlaceholder': {
-  //   backgroundColor: 'transparent',
-  //   border: 'none',
-  //   color: '#ddd'
-  // },
-  "& .cm-tooltip": {
-    backgroundColor: "transparent",
-    border: "none"
-  },
-  // '.dark & .cm-tooltip': {
-  //   border: 'none',
-  //   backgroundColor: tooltipBackground,
-  // },
-  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
-  //   borderTopColor: 'transparent',
-  //   borderBottomColor: 'transparent',
-  // },
-  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
-  //   borderTopColor: tooltipBackground,
-  //   borderBottomColor: tooltipBackground,
-  // },
-  // '.dark & .cm-tooltip-autocomplete': {
-  //   '& > ul > li[aria-selected]': {
-  //     backgroundColor: highlightBackground,
-  //     color: ivory,
-  //   },
-  // },
+// packages/ui/react-ui-editor/src/components/TextEditor/themes/default.ts
+import get3 from "lodash.get";
+var defaultTheme = {
+  //
+  // Main layout:
+  // <div class=".cm-editor .cm-focused">
+  //   <div class=".cm-scroller">
+  //     <div class=".cm-content" role="textbox" contenteditable="true">
+  //       <div class=".cm-line" />
+  //     </div>
+  //   </div>
+  // </div>
+  //
+  "&": {},
   "&.cm-focused": {
     outline: "none"
   },
-  "& .cm-line": {
-    paddingInline: 0,
-    lineHeight: 1.6,
-    minBlockSize: "1.6em"
-  },
-  "& .cm-line *": {
-    lineHeight: 1.6
-  },
-  "&.cm-focused .cm-selectionBackground, & .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.150", "#00ffff")
-  },
-  ".dark & .cm-selectionBackground, .dark &.cm-focused .cm-selectionBackground": {
-    background: get2(tokens, "extend.colors.primary.850", "#00ffff")
-  },
-  "& .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.250", "#00ffff") + "44"
-  },
-  ".dark & .cm-selectionMatch": {
-    background: get2(tokens, "extend.colors.primary.600", "#00ffff") + "44"
+  "& .cm-scroller": {
+    overflow: "visible",
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   },
   "& .cm-content": {
     padding: 0,
+    // Base font size (otherwise defined by HTML tag, which might be different for storybook).
+    fontSize: "16px"
+  },
+  "&light .cm-content": {
+    color: get3(tokens, "extend.colors.neutral.900", "black"),
     caretColor: "black"
   },
-  ".dark & .cm-content": {
+  "&dark .cm-content": {
+    color: get3(tokens, "extend.colors.neutral.100", "white"),
     caretColor: "white"
   },
-  "& .cm-cursor": {
-    borderLeftColor: "black"
+  //
+  // Cursor
+  //
+  "&light .cm-cursor, &light .cm-dropCursor": {
+    borderLeft: "2px solid black"
   },
-  ".dark & .cm-cursor": {
-    borderLeftColor: "white"
+  "&dark .cm-cursor, &dark .cm-dropCursor": {
+    borderLeft: "2px solid white"
   },
-  ".cm-placeholder": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+  "& .cm-placeholder": {
+    fontWeight: 100
   },
-  "& .cm-scroller": {
-    fontFamily: get2(tokens, "fontFamily.mono", []).join(","),
-    overflow: "visible"
+  //
+  // line
+  //
+  "& .cm-line": {
+    paddingInline: 0
   },
+  "& .cm-line *": {},
   "& .cm-activeLine": {
     backgroundColor: "transparent"
   },
-  ".dark & .cm-activeLine": {
-    backgroundColor: "transparent"
+  //
+  // selection
+  //
+  "&light .cm-selectionBackground, &light.cm-focused .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.150", "#00ffff")
+  },
+  "&dark .cm-selectionBackground, &dark.cm-focused .cm-selectionBackground": {
+    background: get3(tokens, "extend.colors.primary.850", "#00ffff")
+  },
+  "&light .cm-selectionMatch": {
+    background: get3(tokens, "extend.colors.primary.250", "#00ffff") + "44"
+  },
+  "&dark .cm-selectionMatch": {
+    background: get3(tokens, "extend.colors.primary.600", "#00ffff") + "44"
+  },
+  //
+  // collaboration
+  // TODO(burdon): Review classnames (YJS dependent?)
+  //
+  "&light .cm-ySelection, &light .cm-yLineSelection": {
+    mixBlendMode: "multiply"
+  },
+  "&dark .cm-ySelection, &dark .cm-yLineSelection": {
+    mixBlendMode: "screen"
   },
   "& .cm-ySelectionInfo": {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(","),
     padding: "2px 4px",
     marginBlockStart: "-4px"
   },
@@ -471,12 +1533,6 @@ var markdownTheme = {
     paddingBlockStart: ".15em",
     paddingBlockEnd: ".15em"
   },
-  "& .cm-ySelection, & .cm-yLineSelection": {
-    mixBlendMode: "multiply"
-  },
-  ".dark & .cm-ySelection, .dark & .cm-yLineSelection": {
-    mixBlendMode: "screen"
-  },
   "& .cm-ySelectionCaret": {
     display: "inline-block",
     insetBlockStart: ".1em",
@@ -484,18 +1540,80 @@ var markdownTheme = {
     verticalAlign: "top"
   },
   "& .cm-yLineSelection": {
-    margin: "0"
+    margin: 0
   },
-  ".cm-link": {
-    color: "rgb(20 89 208)",
+  //
+  // link
+  //
+  "& .cm-link": {
+    color: get3(tokens, "extend.colors.primary.500"),
     textDecorationLine: "underline",
     textDecorationThickness: "1px",
     textUnderlineOffset: "2px",
-    borderRadius: ".125rem"
+    borderRadius: ".125rem",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  //
+  // tooltip
+  //
+  "& .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: get3(tokens, "fontFamily.body", []).join(",")
+  },
+  "& .cm-completionMatchedText": {
+    textDecoration: "none"
+  },
+  //
+  // widgets
+  //
+  "& .cm-widgetBuffer": {
+    display: "none",
+    height: 0
   },
-  // TODO(burdon): Document.
-  ...Object.keys(get2(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
-    const height = get2(tokens, [
+  //
+  // table
+  //
+  "& .cm-table *": {
+    fontFamily: `${get3(tokens, "fontFamily.mono", []).join(",")} !important`,
+    textDecoration: "none !important"
+  },
+  "& .cm-table-head": {
+    padding: "2px 16px 2px 0px",
+    borderBottom: `1px solid ${get3(tokens, "extend.colors.neutral.500")}`,
+    fontWeight: 100,
+    textAlign: "left",
+    color: get3(tokens, "extend.colors.neutral.500")
+  },
+  "& .cm-table-cell": {
+    padding: "2px 16px 2px 0px"
+  },
+  //
+  // image
+  //
+  "& .cm-image": {
+    margin: "0.5rem 0"
+  },
+  //
+  // 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.
+  //
+  ...Object.keys(get3(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
+    const height = get3(tokens, [
       "extend",
       "fontSize",
       fontSize,
@@ -512,208 +1630,255 @@ var markdownTheme = {
       height
     };
     return acc;
-  }, {})
-};
-var markdownHighlightStyle = 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"
-  },
-  {
-    tag: [
-      tags.link,
-      tags.url
-    ],
-    color: "inherit !important",
-    textDecoration: "none !important"
-  },
-  {
-    tag: [
-      tags.function(tags.variableName),
-      tags.labelName
-    ],
-    color: malibu,
-    fontFamily: monospace
-  },
-  {
-    tag: [
-      markdownTags.codeMark,
-      markdownTags.emphasisMark,
-      markdownTags.headingMark,
-      markdownTags.linkLabel,
-      markdownTags.linkReference,
-      markdownTags.listMark,
-      markdownTags.quoteMark,
-      markdownTags.url,
-      tags.meta,
-      tags.processingInstruction
-    ],
-    class: mark
-  },
-  {
-    tag: [
-      markdownTags.codeText,
-      markdownTags.inlineCode
-    ],
-    class: "font-mono"
-  },
-  {
-    tag: tags.emphasis,
-    class: italic
-  },
-  {
-    tag: tags.heading1,
-    class: heading[1]
-  },
-  {
-    tag: tags.heading2,
-    class: heading[2]
-  },
-  {
-    tag: tags.heading3,
-    class: heading[3]
+  }, {}),
+  /**
+  * 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 ${get3(tokens, "extend.colors.neutral.200")}`,
+    borderBottom: "none"
   },
-  {
-    tag: tags.heading4,
-    class: heading[4]
+  "& .cm-panel": {
+    background: get3(tokens, "extend.colors.neutral.50"),
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  {
-    tag: tags.heading5,
-    class: heading[5]
+  "& .cm-button": {
+    margin: "4px",
+    fontFamily: get3(tokens, "fontFamily.body", []).join(","),
+    background: get3(tokens, "extend.colors.neutral.100"),
+    border: "none"
   },
-  {
-    tag: tags.heading6,
-    class: heading[6]
+  "& .cm-searchMatch": {
+    backgroundColor: get3(tokens, "extend.colors.yellow.100")
   },
-  {
-    tag: tags.strikethrough,
-    class: strikethrough
+  "& .cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: get3(tokens, "extend.colors.primary.100")
+  }
+};
+var textTheme = {
+  "& .cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   },
-  {
-    tag: tags.strong,
-    class: bold
+  "& .cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
   }
-], {
-  scope: markdownLanguage,
-  all: {
-    fontFamily: get2(tokens, "fontFamily.body", []).join(",")
+};
+var markdownTheme = {
+  // NOTE: Must leave base font family as is (i.e., monospace) due to fenced code blocks.
+  "& .cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.body", []).join(",")
+  }
+};
+var codeTheme = {
+  "& .cm-scroller": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
+  },
+  "& .cm-placeholder": {
+    fontFamily: get3(tokens, "fontFamily.mono", []).join(",")
   }
-});
-
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
-var markdownBundle = ({ themeMode, placeholder: _placeholder }) => {
-  return [
-    bracketMatching2(),
-    closeBrackets2(),
-    _placeholder && placeholder2(_placeholder),
-    EditorState.allowMultipleSelections.of(true),
-    EditorView4.lineWrapping,
-    // autocompletion(),
-    crosshairCursor(),
-    dropCursor(),
-    drawSelection(),
-    highlightActiveLine(),
-    highlightActiveLineGutter(),
-    highlightSelectionMatches(),
-    highlightSpecialChars(),
-    history(),
-    indentOnInput(),
-    rectangularSelection(),
-    keymap.of([
-      ...closeBracketsKeymap,
-      // ...completionKeymap,
-      ...defaultKeymap,
-      ...foldKeymap,
-      ...historyKeymap,
-      ...lintKeymap,
-      ...searchKeymap,
-      indentWithTab
-    ]),
-    // Main extension.
-    // https://github.com/codemirror/lang-markdown
-    markdown({
-      base: markdownLanguage2,
-      codeLanguages: languages,
-      extensions: [
-        // TODO(burdon): This seems to upgrade the parser.
-        // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
-        // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
-        // https://github.github.com/gfm
-        // GFM,
-        // Custom styling.
-        markdownTagsExtension
-      ]
-    }),
-    // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-    syntaxHighlighting2(markdownHighlightStyle),
-    themeMode === "dark" ? syntaxHighlighting2(oneDarkHighlightStyle2) : syntaxHighlighting2(defaultHighlightStyle2)
-  ].filter(Boolean);
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
-import { EditorView as EditorView5 } from "@codemirror/view";
+import { EditorView as EditorView11 } from "@codemirror/view";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { vim } from "@replit/codemirror-vim";
-import defaultsDeep from "lodash.defaultsdeep";
-import get3 from "lodash.get";
+import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useState } from "react";
-import { isDocAccessor as isDocAccessor2 } from "@dxos/echo-schema";
+import { generateName } from "@dxos/display-name";
 import { useThemeContext } from "@dxos/react-ui";
+import { getColorForValue, inputSurface, mx as mx4 } from "@dxos/react-ui-theme";
+var EditorModes = [
+  "default",
+  "vim"
+];
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, editorMode, extensions = [], slots = defaultSlots }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
+  const [root, setRoot] = useState(null);
+  const [state, setState] = useState();
+  const [view, setView] = useState();
+  useImperativeHandle(forwardedRef, () => ({
+    root,
+    state,
+    view
+  }), [
+    view,
+    state,
+    root
+  ]);
+  const { awareness, peer } = model;
+  useEffect2(() => {
+    if (awareness && peer) {
+      awareness.setLocalStateField("user", {
+        name: peer.name ?? generateName(peer.id),
+        color: getColorForValue({
+          value: peer.id,
+          type: "color"
+        }),
+        colorLight: getColorForValue({
+          value: peer.id,
+          themeMode,
+          type: "highlight"
+        })
+      });
+    }
+  }, [
+    awareness,
+    peer,
+    themeMode
+  ]);
+  useEffect2(() => {
+    if (!root) {
+      return;
+    }
+    const state2 = EditorState2.create({
+      doc: model.text(),
+      extensions: [
+        readonly && EditorState2.readOnly.of(readonly),
+        // TODO(burdon): Factor out VIM mode?
+        editorMode === "vim" && vim(),
+        // Theme.
+        // TODO(burdon): Make optional.
+        EditorView11.baseTheme(defaultTheme),
+        EditorView11.theme(slots?.editor?.theme ?? {}),
+        // TODO(burdon): themeMode doesn't change in storybooks.
+        EditorView11.darkTheme.of(themeMode === "dark"),
+        // Storage and replication.
+        model.extension,
+        // Custom.
+        ...extensions
+      ].filter(Boolean)
+    });
+    view?.destroy();
+    setView(new EditorView11({
+      state: state2,
+      parent: root
+    }));
+    setState(state2);
+    return () => {
+      view?.destroy();
+      setView(void 0);
+      setState(void 0);
+    };
+  }, [
+    root,
+    model,
+    themeMode,
+    readonly,
+    editorMode
+  ]);
+  const handleKeyUp = useCallback((event) => {
+    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    switch (key) {
+      case "Enter": {
+        view?.contentDOM.focus();
+        break;
+      }
+      case "Escape": {
+        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && root?.focus();
+        break;
+      }
+    }
+  }, [
+    view,
+    editorMode
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    key: model.id,
+    ref: setRoot,
+    tabIndex: 0,
+    ...slots?.root,
+    ...editorMode !== "vim" && tabsterDOMAttribute,
+    onKeyUp: handleKeyUp
+  });
+});
+var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const slots = defaultsDeep2({}, _slots, defaultTextSlots);
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    readonly,
+    extensions: [
+      basicBundle({
+        readonly,
+        themeMode,
+        placeholder: slots?.editor?.placeholder
+      }),
+      ...extensions
+    ],
+    slots,
+    ...props
+  });
+});
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, extensions = [], slots: _slots, ...props }, forwardedRef) => {
+  const { themeMode } = useThemeContext();
+  const slots = defaultsDeep2({}, _slots, defaultMarkdownSlots);
+  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
+    ref: forwardedRef,
+    readonly,
+    extensions: [
+      markdownBundle({
+        readonly,
+        themeMode,
+        placeholder: slots?.editor?.placeholder
+      }),
+      ...extensions
+    ],
+    slots,
+    ...props
+  });
+});
+var defaultSlots = {
+  root: {
+    className: mx4("p-2", inputSurface)
+  }
+};
+var defaultTextSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: textTheme
+  }
+};
+var defaultMarkdownSlots = {
+  ...defaultSlots,
+  editor: {
+    theme: markdownTheme
+  }
+};
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
-import { useEffect, useMemo } from "react";
+// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+import get4 from "lodash.get";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import { yCollab } from "y-codemirror.next";
-import { generateName } from "@dxos/display-name";
-import { isDocAccessor } from "@dxos/echo-schema";
-import { getColorForValue } from "@dxos/react-ui-theme";
-import { YText } from "@dxos/text-model";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
-import { Annotation, Facet, StateEffect, StateField as StateField3 } from "@codemirror/state";
-import { ViewPlugin as ViewPlugin2 } from "@codemirror/view";
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+import { Annotation, Facet, StateEffect as StateEffect2, StateField as StateField6 } from "@codemirror/state";
+import { ViewPlugin as ViewPlugin4 } from "@codemirror/view";
 import * as automerge2 from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 import { next as automerge } from "@dxos/automerge/automerge";
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/amToCodemirror.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/automerge-to-codemirror.ts
 import { ChangeSet } from "@codemirror/state";
-var amToCodemirror_default = (view, selection, target, patches) => {
+var automergeToCodemirror = (view, selection, target, patches) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -818,9 +1983,9 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/codeMirrorToAm.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/translation/codemirror-to-automerge.ts
 import { next as am } from "@dxos/automerge/automerge";
-var codeMirrorToAm_default = (field, handle, transactions, state) => {
+var codemirrorToAutomerge = (field, handle, transactions, state) => {
   const { lastHeads, path } = state.field(field);
   let hasChanges = false;
   for (const tr of transactions) {
@@ -841,7 +2006,7 @@ var codeMirrorToAm_default = (field, handle, transactions, state) => {
   return newHeads ?? void 0;
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/PatchSemaphore.ts
+// packages/ui/react-ui-editor/src/hooks/automerge/PatchSemaphore.ts
 var PatchSemaphore = class {
   constructor(field) {
     this._inReconcile = false;
@@ -864,12 +2029,12 @@ var PatchSemaphore = class {
           annotations: reconcileAnnotationType.of(true)
         });
       }
-      let newHeads = codeMirrorToAm_default(this._field, handle, transactions, view.state);
+      let newHeads = codemirrorToAutomerge(this._field, handle, transactions, view.state);
       if (newHeads === null || newHeads === void 0) {
         newHeads = automerge.getHeads(handle.docSync());
       }
       const diff = automerge.equals(oldHeads, newHeads) ? [] : automerge.diff(handle.docSync(), oldHeads, newHeads);
-      amToCodemirror_default(view, selection, path, diff);
+      automergeToCodemirror(view, selection, path, diff);
       view.dispatch({
         effects: updateHeads(newHeads),
         annotations: reconcileAnnotationType.of({})
@@ -882,8 +2047,8 @@ var PatchSemaphore = class {
   }
 };
 
-// packages/ui/react-ui-editor/src/automerge/automerge-plugin/plugin.ts
-var effectType = StateEffect.define({});
+// packages/ui/react-ui-editor/src/hooks/automerge/plugin.ts
+var effectType = StateEffect2.define({});
 var updateHeads = (newHeads) => effectType.of({
   newHeads
 });
@@ -893,7 +2058,7 @@ var semaphoreFacet = Facet.define({
   combine: (values) => values.at(-1)
 });
 var automergePlugin = (handle, path) => {
-  const stateField = StateField3.define({
+  const stateField = StateField6.define({
     create: () => ({
       lastHeads: automerge2.getHeads(handle.docSync()),
       unreconciledTransactions: [],
@@ -923,7 +2088,7 @@ var automergePlugin = (handle, path) => {
     }
   });
   const semaphore = new PatchSemaphore(stateField);
-  const viewPlugin = ViewPlugin2.fromClass(class AutomergeCodemirrorViewPlugin {
+  const viewPlugin = ViewPlugin4.fromClass(class AutomergeCodemirrorViewPlugin {
     constructor(view) {
       this._handleChange = () => {
         this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
@@ -931,8 +2096,8 @@ var automergePlugin = (handle, path) => {
       this._view = view;
       handle.addListener("change", this._handleChange);
     }
-    update(update2) {
-      if (update2.transactions.length > 0 && update2.transactions.some((t) => !isReconcileTx(t))) {
+    update(update4) {
+      if (update4.transactions.length > 0 && update4.transactions.some((t) => !isReconcileTx(t))) {
         queueMicrotask(() => {
           this._view.state.facet(semaphoreFacet).reconcile(handle, this._view);
         });
@@ -953,47 +2118,8 @@ var automergePlugin = (handle, path) => {
 var reconcileAnnotationType = Annotation.define();
 var isReconcileTx = (tr) => !!tr.annotation(reconcileAnnotationType);
 
-// packages/ui/react-ui-editor/src/hooks/useCollaboration.ts
-var useCollaboration = (model, themeMode) => {
-  const { provider, peer, content } = model;
-  const extension = useMemo(() => {
-    if (content instanceof YText) {
-      return yCollab(content, provider?.awareness);
-    } else if (isDocAccessor(content)) {
-      return automergePlugin(content.handle, content.path);
-    } else {
-      return void 0;
-    }
-  }, []);
-  useEffect(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField("user", {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({
-          value: peer.id,
-          type: "color"
-        }),
-        colorLight: getColorForValue({
-          value: peer.id,
-          themeMode,
-          type: "highlight"
-        })
-      });
-    }
-  }, [
-    provider,
-    peer,
-    themeMode
-  ]);
-  return extension;
-};
-
-// packages/ui/react-ui-editor/src/hooks/useTextModel.ts
-import { useMemo as useMemo2 } from "react";
-import { getRawDoc, isActualAutomergeObject } from "@dxos/react-client/echo";
-
 // packages/ui/react-ui-editor/src/hooks/yjs/cursors.ts
-import * as random from "lib0/random";
+import * as random2 from "lib0/random";
 var cursorColors = [
   {
     color: "#30bced",
@@ -1028,7 +2154,7 @@ var cursorColors = [
     light: "#1be7ff33"
   }
 ];
-var cursorColor = cursorColors[random.uint32() % cursorColors.length];
+var cursorColor = cursorColors[random2.uint32() % cursorColors.length];
 
 // packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts
 import * as decoding from "lib0/decoding";
@@ -1036,7 +2162,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_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
+var __dxlog_file3 = "/home/circleci/project/packages/ui/react-ui-editor/src/hooks/yjs/space-provider.ts";
 var messageAwareness = 1;
 var messageQueryAwareness = 3;
 var SpaceAwarenessProvider = class extends Observable {
@@ -1073,7 +2199,7 @@ var SpaceAwarenessProvider = class extends Observable {
       removed,
       origin
     }, {
-      F: __dxlog_file,
+      F: __dxlog_file3,
       L: 67,
       S: this,
       C: (f, a) => f(...a)
@@ -1086,7 +2212,7 @@ var SpaceAwarenessProvider = class extends Observable {
   }
   _handleSpaceMessage({ payload }) {
     log("space message", payload, {
-      F: __dxlog_file,
+      F: __dxlog_file3,
       L: 79,
       S: this,
       C: (f, a) => f(...a)
@@ -1131,185 +2257,82 @@ var SpaceAwarenessProvider = class extends Observable {
 };
 
 // packages/ui/react-ui-editor/src/hooks/useTextModel.ts
+var __dxlog_file4 = "/home/circleci/project/packages/ui/react-ui-editor/src/hooks/useTextModel.ts";
 var useTextModel = ({ identity, space, text }) => {
-  const provider = useMemo2(() => {
-    if (isActualAutomergeObject(text)) {
-      return void 0;
-    }
-    if (!space || !text?.doc) {
-      return void 0;
-    }
-    return new SpaceAwarenessProvider({
+  const [model, setModel] = useState2(() => createModel({
+    identity,
+    space,
+    text
+  }));
+  useEffect3(() => {
+    setModel(createModel({
+      identity,
       space,
-      doc: text.doc,
-      channel: `yjs.awareness.${text.id}`
-    });
+      text
+    }));
   }, [
     identity,
     space,
-    text,
-    text?.doc
-  ]);
-  const content = useMemo2(() => {
-    if (isActualAutomergeObject(text)) {
-      const obj = text;
-      return getRawDoc(obj, [
-        obj.field
-      ]);
-    } else {
-      return text?.content;
-    }
-  }, [
     text
   ]);
+  return model;
+};
+var createModel = (options) => {
+  const { text } = options;
   if (isActualAutomergeObject(text)) {
-    const obj = text;
-    return {
-      id: obj.id,
-      content,
-      provider: void 0,
-      peer: identity ? {
-        id: identity.identityKey.toHex(),
-        name: identity.profile?.displayName
-      } : void 0
-    };
-  }
-  if (!text?.doc || !text?.content) {
-    return void 0;
+    return createAutomergeModel(options);
+  } else {
+    if (!text?.doc) {
+      return void 0;
+    }
+    return createYjsModel(options);
   }
+};
+var createYjsModel = ({ identity, space, text }) => {
+  invariant3(text?.doc && text?.content, void 0, {
+    F: __dxlog_file4,
+    L: 81,
+    S: void 0,
+    A: [
+      "text?.doc && text?.content",
+      ""
+    ]
+  });
+  const provider = space ? new SpaceAwarenessProvider({
+    space,
+    doc: text.doc,
+    channel: `yjs.awareness.${text.id}`
+  }) : void 0;
   return {
     id: text.doc.guid,
     content: text.content,
-    provider,
+    text: () => text.content.toString(),
+    ranges: [],
+    extension: yCollab(text.content, provider?.awareness),
+    awareness: provider?.awareness,
     peer: identity ? {
       id: identity.identityKey.toHex(),
       name: identity.profile?.displayName
     } : void 0
   };
 };
-
-// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
-var EditorModes = [
-  "default",
-  "vim"
-];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, extensions = [], slots, editorMode }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const tabsterDOMAttribute = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const [parent, setParent] = useState(null);
-  const [state, setState] = useState();
-  const [view, setView] = useState();
-  useImperativeHandle(forwardedRef, () => ({
-    editor: parent,
-    state,
-    view
-  }), [
-    view,
-    state,
-    parent
-  ]);
-  const collaboration = useCollaboration(model, themeMode);
-  useEffect2(() => {
-    if (!parent) {
-      return;
-    }
-    const initialText = isDocAccessor2(model.content) ? get3(model.content.handle.docSync(), model.content.path) : model.content?.toString();
-    const state2 = EditorState2.create({
-      doc: initialText,
-      extensions: [
-        // TODO(burdon): Factor out VIM mode?
-        editorMode === "vim" && vim(),
-        // Replication.
-        collaboration,
-        // Theme.
-        slots?.editor?.theme && EditorView5.theme(slots?.editor?.theme),
-        // Custom.
-        ...extensions
-      ].filter(Boolean)
-    });
-    setState(state2);
-    view?.destroy();
-    setView(new EditorView5({
-      state: state2,
-      parent
-    }));
-    return () => {
-      view?.destroy();
-      setView(void 0);
-      setState(void 0);
-    };
-  }, [
-    parent,
-    model.content,
-    themeMode,
-    editorMode
-  ]);
-  const handleKeyUp = useCallback((event) => {
-    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
-    switch (key) {
-      case "Enter": {
-        view?.contentDOM.focus();
-        break;
-      }
-      case "Escape": {
-        editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
-        break;
-      }
-    }
-  }, [
-    view,
-    editorMode
+var createAutomergeModel = ({ identity, text }) => {
+  const obj = text;
+  const doc = getRawDoc(obj, [
+    obj.field
   ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    key: model.id,
-    ref: setParent,
-    tabIndex: 0,
-    ...slots?.root,
-    ...editorMode !== "vim" && tabsterDOMAttribute,
-    onKeyUp: handleKeyUp
-  });
-});
-var TextEditor = /* @__PURE__ */ forwardRef(({ extensions: _extensions, slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const extensions = [
-    ..._extensions ?? [],
-    basicBundle({
-      themeMode,
-      placeholder: slots?.editor?.placeholder
-    })
-  ];
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    extensions,
-    slots: defaultsDeep({}, slots, {
-      editor: {
-        theme: basicTheme
-      }
-    }),
-    ...props
-  });
-});
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ extensions: _extensions, slots, ...props }, forwardedRef) => {
-  const { themeMode } = useThemeContext();
-  const extensions = [
-    ..._extensions ?? [],
-    markdownBundle({
-      themeMode
-    })
-  ];
-  return /* @__PURE__ */ React.createElement(BaseTextEditor, {
-    ref: forwardedRef,
-    extensions,
-    slots: defaultsDeep({}, slots, {
-      editor: {
-        theme: markdownTheme
-      }
-    }),
-    ...props
-  });
-});
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get4(doc.handle.docSync(), doc.path),
+    ranges: [],
+    extension: automergePlugin(doc.handle, doc.path),
+    peer: identity ? {
+      id: identity.identityKey.toHex(),
+      name: identity.profile?.displayName
+    } : void 0
+  };
+};
 export {
   BaseTextEditor,
   Doc,
@@ -1318,34 +2341,39 @@ export {
   SpaceAwarenessProvider,
   TextEditor,
   TextKind,
-  YText2 as YText,
+  YText,
   YXmlFragment,
+  autocomplete,
   basicBundle,
-  basicTheme,
-  chalky,
-  coral,
-  createHyperlinkTooltip,
+  blast,
+  code2 as code,
+  codeTheme,
+  comments,
   cursorColor,
-  cyan,
-  highlightBackground,
-  hyperLinkExtension,
-  hyperlinkDecoration,
-  hyperlinkStyle,
-  hyperlinkWidget,
-  invalid,
-  ivory,
-  malibu,
+  defaultMarkdownSlots,
+  defaultOptions,
+  defaultSlots,
+  defaultTextSlots,
+  defaultTheme,
+  demo,
+  highlight,
+  highlightDecorations,
+  highlightStateField,
+  image,
+  link,
+  listener2 as listener,
   markdownBundle,
   markdownHighlightStyle,
+  markdownTags,
+  markdownTagsExtensions,
   markdownTheme,
-  onChangeExtension,
-  sage,
-  stone,
+  mention,
+  table,
   tags2 as tags,
-  tooltipBackground,
-  useCollaboration,
-  useTextModel,
-  violet,
-  whiskey
+  tasklist,
+  textTheme,
+  tooltip,
+  useHighlights,
+  useTextModel
 };
 //# sourceMappingURL=index.mjs.map