@owomark/react 0.1.0

package/dist/index.js

@@ -0,0 +1,908 @@
+// src/OwoMarkEditor.tsx
+import {
+  useRef as useRef3,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  forwardRef,
+  useCallback
+} from "react";
+import { getThemeClassName } from "@owomark/view";
+
+// src/editor/EditorBlock.tsx
+import { memo as memo3, useMemo } from "react";
+import { BLOCK_TYPE_TO_CLASS, BQ_STEP, buildBlockquoteBarsBoxShadow } from "@owomark/core";
+
+// src/editor/EditorDecorator.tsx
+import { memo as memo2 } from "react";
+import { TOKEN_TO_CLASS } from "@owomark/core";
+
+// src/editor/EditorLeaf.tsx
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+var EditorLeaf = memo(function EditorLeaf2({ text }) {
+  return /* @__PURE__ */ jsx("span", { "data-owo-leaf": "true", children: text });
+});
+
+// src/editor/EditorDecorator.tsx
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var EditorDecorator = memo2(function EditorDecorator2({ decorator }) {
+  const cls = TOKEN_TO_CLASS[decorator.type] || "";
+  const leaves = decorator.leaves.map((leaf, i) => /* @__PURE__ */ jsx2(EditorLeaf, { text: leaf.text }, i));
+  if (cls) {
+    return /* @__PURE__ */ jsx2("span", { className: cls, "data-owo-token": decorator.type, children: leaves });
+  }
+  return /* @__PURE__ */ jsx2(Fragment, { children: leaves });
+});
+
+// src/editor/EditorBlock.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function buildBlockquoteBarsStyle(depth) {
+  const shadow = buildBlockquoteBarsBoxShadow(depth);
+  if (!shadow) return void 0;
+  return {
+    paddingLeft: `${depth * BQ_STEP}px`,
+    boxShadow: shadow
+  };
+}
+var EditorBlock = memo3(
+  function EditorBlock2({ block, blockIndex }) {
+    const className = BLOCK_TYPE_TO_CLASS[block.type] || "owo-block-paragraph";
+    const headingLevel = block.type === "heading" ? block.headingLevel : void 0;
+    const bqStyle = useMemo(
+      () => block.type === "blockquote" ? buildBlockquoteBarsStyle(block.depth) : void 0,
+      [block.type, block.depth]
+    );
+    const hasContent = block.decorators.length > 0 && block.decorators.some((d) => d.leaves.some((l) => l.text.length > 0));
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        "data-owo-block": blockIndex,
+        "data-block-id": block.id,
+        className,
+        style: bqStyle,
+        ...headingLevel ? { "data-owo-heading": headingLevel } : {},
+        children: hasContent ? block.decorators.map((dec, i) => /* @__PURE__ */ jsx3(EditorDecorator, { decorator: dec }, i)) : /* @__PURE__ */ jsx3("br", {})
+      }
+    );
+  },
+  (prev, next) => prev.block === next.block && prev.blockIndex === next.blockIndex
+);
+
+// src/slash/SlashMenu.tsx
+import {
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useState,
+  memo as memo4
+} from "react";
+
+// src/slash/caret-position.ts
+var MENU_GAP = 4;
+function getCaretRect() {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0).cloneRange();
+  range.collapse(true);
+  const rect = range.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0 && rect.top === 0) return null;
+  return { top: rect.top, left: rect.left, bottom: rect.bottom };
+}
+function computeMenuPosition(caret, menuHeight, menuWidth) {
+  const viewportHeight = window.innerHeight;
+  const viewportWidth = window.innerWidth;
+  let top;
+  if (caret.bottom + MENU_GAP + menuHeight <= viewportHeight) {
+    top = caret.bottom + MENU_GAP;
+  } else {
+    top = caret.top - MENU_GAP - menuHeight;
+  }
+  let left = caret.left;
+  if (left + menuWidth > viewportWidth - 8) {
+    left = viewportWidth - menuWidth - 8;
+  }
+  if (left < 8) left = 8;
+  return { top: Math.max(0, top), left };
+}
+
+// src/slash/SlashMenu.tsx
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var MENU_MAX_HEIGHT = 320;
+var MENU_WIDTH = 280;
+var SlashMenu = memo4(function SlashMenu2({
+  state,
+  onSelect,
+  onDismiss
+}) {
+  const menuRef = useRef(null);
+  const [position, setPosition] = useState(null);
+  useLayoutEffect(() => {
+    if (!state.active && !state.pending) {
+      setPosition(null);
+      return;
+    }
+    let frameId = 0;
+    const updatePosition = () => {
+      const caret = getCaretRect();
+      if (!caret) return false;
+      setPosition(computeMenuPosition(caret, MENU_MAX_HEIGHT, MENU_WIDTH));
+      return true;
+    };
+    if (!updatePosition()) {
+      frameId = window.requestAnimationFrame(() => {
+        updatePosition();
+      });
+    }
+    return () => {
+      if (frameId) {
+        window.cancelAnimationFrame(frameId);
+      }
+    };
+  }, [state.active, state.pending, state.query]);
+  useEffect(() => {
+    if (!state.active && !state.pending || !menuRef.current) return;
+    const selected = menuRef.current.querySelector('[data-selected="true"]');
+    if (selected) {
+      selected.scrollIntoView({ block: "nearest" });
+    }
+  }, [state.active, state.pending, state.selectedIndex]);
+  useEffect(() => {
+    if (!state.active) return;
+    function handlePointerDown(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onDismiss();
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [state.active, onDismiss]);
+  if (!state.active && !state.pending || !position) return null;
+  const groups = groupByCategory(state.filteredCommands);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "owo-slash-menu",
+      role: "listbox",
+      style: {
+        position: "fixed",
+        top: position.top,
+        left: position.left,
+        width: MENU_WIDTH,
+        maxHeight: MENU_MAX_HEIGHT,
+        overflow: "auto",
+        zIndex: 9999
+      },
+      children: [
+        state.pending && /* @__PURE__ */ jsx4("div", { className: "owo-slash-menu__pending", children: "Executing..." }),
+        groups.map(({ category, commands }) => /* @__PURE__ */ jsxs("div", { className: "owo-slash-menu__group", children: [
+          category && /* @__PURE__ */ jsx4("div", { className: "owo-slash-menu__category", children: category }),
+          commands.map((cmd) => {
+            const globalIndex = state.filteredCommands.indexOf(cmd);
+            const isSelected = globalIndex === state.selectedIndex;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `owo-slash-menu__item${isSelected ? " owo-slash-menu__item--selected" : ""}`,
+                role: "option",
+                "aria-selected": isSelected,
+                "data-selected": isSelected ? "true" : void 0,
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  onSelect(globalIndex);
+                },
+                children: [
+                  cmd.icon && /* @__PURE__ */ jsx4("span", { className: "owo-slash-menu__icon", children: cmd.icon }),
+                  /* @__PURE__ */ jsxs("div", { className: "owo-slash-menu__content", children: [
+                    /* @__PURE__ */ jsx4("span", { className: "owo-slash-menu__label", children: cmd.label }),
+                    cmd.shortcut && /* @__PURE__ */ jsx4("span", { className: "owo-slash-menu__shortcut", children: cmd.shortcut }),
+                    cmd.description && /* @__PURE__ */ jsx4("span", { className: "owo-slash-menu__desc", children: cmd.description })
+                  ] })
+                ]
+              },
+              cmd.id
+            );
+          })
+        ] }, category))
+      ]
+    }
+  );
+});
+function groupByCategory(commands) {
+  const groups = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const cmd of commands) {
+    const cat = cmd.category ?? "";
+    let group = seen.get(cat);
+    if (!group) {
+      group = { category: cat, commands: [] };
+      seen.set(cat, group);
+      groups.push(group);
+    }
+    group.commands.push(cmd);
+  }
+  return groups;
+}
+
+// src/useOwoMarkCore.ts
+import {
+  useRef as useRef2,
+  useState as useState2,
+  useLayoutEffect as useLayoutEffect2
+} from "react";
+import {
+  createOwoMarkCore,
+  readSelection,
+  restoreSelection,
+  invalidateBlockCache,
+  virtualToLinear
+} from "@owomark/core";
+function useOwoMarkCore(options) {
+  const { initialMarkdown, readOnly = false } = options;
+  const containerRef = useRef2(null);
+  const coreRef = useRef2(null);
+  const composingRef = useRef2(false);
+  const pendingSelectionRef = useRef2(null);
+  const onCompositionStateChangeRef = useRef2(options.onCompositionStateChange);
+  onCompositionStateChangeRef.current = options.onCompositionStateChange;
+  if (!coreRef.current) {
+    coreRef.current = createOwoMarkCore({ initialMarkdown });
+  }
+  const core = coreRef.current;
+  const [doc, setDoc] = useState2(() => core.getDocument());
+  const [slashState, setSlashState] = useState2(() => core.getSlashState());
+  useLayoutEffect2(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const root = el;
+    root.contentEditable = readOnly ? "false" : "true";
+    root.setAttribute("role", "textbox");
+    root.setAttribute("aria-multiline", "true");
+    root.setAttribute("aria-label", "Markdown editor");
+    root.classList.add("owo-editor-root");
+    root.style.whiteSpace = "pre-wrap";
+    root.style.wordBreak = "break-word";
+    root.style.outline = "none";
+    const unsubDoc = core.onDocumentChange((newDoc, newSelection) => {
+      if (composingRef.current) return;
+      setDoc(newDoc);
+      pendingSelectionRef.current = newSelection;
+    });
+    const unsubComp = core.onCompositionStateChange((active) => {
+      composingRef.current = active;
+      onCompositionStateChangeRef.current?.(active);
+    });
+    const unsubSlash = core.onSlashStateChange((s) => setSlashState(s));
+    function syncEmptyAttr() {
+      const d = core.getDocument();
+      const empty = d.blocks.length === 0 || d.blocks.length === 1 && d.blocks[0].raw === "";
+      if (empty) root.setAttribute("data-owo-empty", "true");
+      else root.removeAttribute("data-owo-empty");
+    }
+    syncEmptyAttr();
+    let compositionJustEnded = false;
+    let pendingNativeSync = false;
+    function syncFromDOM() {
+      const parts = [];
+      for (const child of root.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          const el2 = child;
+          if (el2.hasAttribute("data-owo-block")) {
+            if (parts.length > 0) parts.push("\n");
+            parts.push(el2.textContent ?? "");
+          }
+        }
+      }
+      const textContent = parts.join("");
+      if (textContent !== core.getMarkdown()) {
+        const sel = readSelection(root);
+        core.syncText(textContent, sel);
+        syncEmptyAttr();
+      }
+    }
+    function onBeforeInput(e) {
+      if (core.getComposition().active) return;
+      const sel = readSelection(root);
+      const result = core.applyBeforeInput(
+        { inputType: e.inputType, data: e.data },
+        sel
+      );
+      if (result.action === "handled") {
+        e.preventDefault();
+        syncEmptyAttr();
+      } else if (result.action === "allow-native") {
+        pendingNativeSync = true;
+      }
+    }
+    function onInput() {
+      if (core.getComposition().active) return;
+      if (compositionJustEnded) {
+        compositionJustEnded = false;
+        syncFromDOM();
+      } else if (pendingNativeSync) {
+        pendingNativeSync = false;
+        syncFromDOM();
+      }
+    }
+    function onKeyDown(e) {
+      if (core.getComposition().active) return;
+      const sel = readSelection(root);
+      const result = core.applyKeyDown(
+        {
+          key: e.key,
+          ctrlKey: e.ctrlKey,
+          metaKey: e.metaKey,
+          altKey: e.altKey,
+          shiftKey: e.shiftKey
+        },
+        sel
+      );
+      if (result.action === "handled") {
+        e.preventDefault();
+        syncEmptyAttr();
+      }
+    }
+    function onPaste(e) {
+      e.preventDefault();
+      const raw = e.clipboardData?.getData("text/plain") ?? "";
+      const sel = readSelection(root);
+      core.applyPaste({ text: raw }, sel);
+      syncEmptyAttr();
+    }
+    function onCompositionStart() {
+      const sel = readSelection(root);
+      core.handleCompositionStart(sel);
+    }
+    function onCompositionUpdate() {
+      core.handleCompositionUpdate();
+    }
+    function onCompositionEnd() {
+      const sel = readSelection(root);
+      core.handleCompositionEnd(sel);
+      compositionJustEnded = true;
+      requestAnimationFrame(() => {
+        if (compositionJustEnded) {
+          compositionJustEnded = false;
+          syncFromDOM();
+        }
+      });
+    }
+    function onSelectionChange() {
+      const sel = readSelection(root);
+      if (sel) core.updateSelection(sel);
+    }
+    root.addEventListener("beforeinput", onBeforeInput);
+    root.addEventListener("input", onInput);
+    root.addEventListener("compositionstart", onCompositionStart);
+    root.addEventListener("compositionupdate", onCompositionUpdate);
+    root.addEventListener("compositionend", onCompositionEnd);
+    root.addEventListener("keydown", onKeyDown);
+    root.addEventListener("paste", onPaste);
+    const onDocSelectionChange = () => onSelectionChange();
+    root.ownerDocument.addEventListener("selectionchange", onDocSelectionChange);
+    return () => {
+      unsubDoc();
+      unsubComp();
+      unsubSlash();
+      root.removeEventListener("beforeinput", onBeforeInput);
+      root.removeEventListener("input", onInput);
+      root.removeEventListener("compositionstart", onCompositionStart);
+      root.removeEventListener("compositionupdate", onCompositionUpdate);
+      root.removeEventListener("compositionend", onCompositionEnd);
+      root.removeEventListener("keydown", onKeyDown);
+      root.removeEventListener("paste", onPaste);
+      root.ownerDocument.removeEventListener("selectionchange", onDocSelectionChange);
+      core.destroy();
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    const el = containerRef.current;
+    if (!el || !pendingSelectionRef.current) return;
+    const linearSel = virtualToLinear(doc, pendingSelectionRef.current);
+    invalidateBlockCache(el);
+    restoreSelection(el, linearSel);
+    pendingSelectionRef.current = null;
+  }, [doc]);
+  return { core, doc, slashState, containerRef };
+}
+
+// src/config.ts
+var DEFAULT_EDITOR_CONFIG = {
+  indentMode: "auto",
+  enableSideAnnotation: true,
+  enableMath: true,
+  enableMarkdownSandbox: true,
+  markdownSandbox: {
+    outerFenceTicks: 4
+  },
+  theme: "light"
+};
+function resolveEditorConfig(config) {
+  return {
+    ...DEFAULT_EDITOR_CONFIG,
+    ...config,
+    markdownSandbox: {
+      ...DEFAULT_EDITOR_CONFIG.markdownSandbox,
+      ...config?.markdownSandbox
+    }
+  };
+}
+function deriveProcessorOptions(config) {
+  return {
+    enableSideAnnotation: config.enableSideAnnotation,
+    enableMath: config.enableMath,
+    enableMarkdownSandbox: config.enableMarkdownSandbox,
+    markdownSandbox: config.markdownSandbox
+  };
+}
+
+// src/OwoMarkEditor.tsx
+import "@owomark/view/style.css";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var OwoMarkEditor = forwardRef(
+  function OwoMarkEditor2(props, ref) {
+    const {
+      value,
+      defaultValue,
+      onChange,
+      onSelectionChange,
+      onCompositionStateChange,
+      onScroll,
+      readOnly = false,
+      placeholder,
+      className,
+      theme: themeProp = "light",
+      themeClassName,
+      commandsRef,
+      coreRef: externalCoreRef,
+      controller,
+      indentMode: indentModeProp = "auto",
+      ariaLabel,
+      config: configProp
+    } = props;
+    const resolved = resolveEditorConfig(configProp);
+    const indentMode = configProp ? resolved.indentMode : indentModeProp;
+    const theme = configProp ? resolved.theme : themeProp;
+    const enableSideAnnotation = resolved.enableSideAnnotation;
+    const enableMath = resolved.enableMath;
+    const isControlled = value !== void 0;
+    const lastExternalValue = useRef3(value ?? defaultValue ?? "");
+    const suppressOnChange = useRef3(false);
+    const { core, doc, slashState, containerRef } = useOwoMarkCore({
+      initialMarkdown: lastExternalValue.current,
+      readOnly,
+      onCompositionStateChange
+    });
+    const handleSlashSelect = useCallback((index) => {
+      core.executeSlashCommand(index);
+    }, [core]);
+    const handleSlashDismiss = useCallback(() => {
+      core.dismissSlashMenu();
+    }, [core]);
+    useEffect2(() => {
+      if (typeof externalCoreRef === "function") externalCoreRef(core);
+      else if (externalCoreRef && typeof externalCoreRef === "object") {
+        externalCoreRef.current = core;
+      }
+      return () => {
+        if (typeof externalCoreRef === "function") externalCoreRef(null);
+        else if (externalCoreRef && typeof externalCoreRef === "object") {
+          externalCoreRef.current = null;
+        }
+      };
+    }, [core, externalCoreRef]);
+    useEffect2(() => {
+      const unsub = core.onChange((markdown) => {
+        if (suppressOnChange.current) return;
+        lastExternalValue.current = markdown;
+        onChange?.(markdown);
+      });
+      return unsub;
+    }, [core, onChange]);
+    useEffect2(() => {
+      if (!onSelectionChange) return;
+      return core.onSelectionChange(onSelectionChange);
+    }, [core, onSelectionChange]);
+    useEffect2(() => {
+      if (!controller) return;
+      return controller.connectEditor(core);
+    }, [core, controller]);
+    useEffect2(() => {
+      if (!isControlled) return;
+      if (value === lastExternalValue.current) return;
+      suppressOnChange.current = true;
+      core.setMarkdown(value);
+      lastExternalValue.current = value;
+      suppressOnChange.current = false;
+    }, [core, value, isControlled]);
+    useEffect2(() => {
+      core.setIndentMode(indentMode);
+    }, [core, indentMode]);
+    useEffect2(() => {
+      core.setEnableSideAnnotation(enableSideAnnotation);
+    }, [core, enableSideAnnotation]);
+    useEffect2(() => {
+      core.setEnableMath(enableMath);
+    }, [core, enableMath]);
+    useEffect2(() => {
+      if (containerRef.current && ariaLabel) {
+        containerRef.current.setAttribute("aria-label", ariaLabel);
+      }
+    }, [ariaLabel, containerRef]);
+    useEffect2(() => {
+      if (containerRef.current) {
+        containerRef.current.contentEditable = readOnly ? "false" : "true";
+        if (readOnly) {
+          containerRef.current.setAttribute("aria-readonly", "true");
+        } else {
+          containerRef.current.removeAttribute("aria-readonly");
+        }
+      }
+    }, [readOnly, containerRef]);
+    useImperativeHandle(commandsRef, () => ({
+      focus: () => containerRef.current?.focus(),
+      undo: () => core.dispatch("undo"),
+      redo: () => core.dispatch("redo"),
+      toggleBold: () => core.dispatch("toggleBold"),
+      toggleItalic: () => core.dispatch("toggleItalic"),
+      insertLink: (url) => core.dispatch("insertLink", url),
+      insertCodeFence: (language) => core.dispatch("insertCodeFence", language),
+      insertMath: () => core.dispatch("insertMath"),
+      insertSideAnnotation: (type) => core.dispatch("insertSideAnnotation", type),
+      getMarkdown: () => core.getMarkdown(),
+      setMarkdown: (markdown) => core.setMarkdown(markdown),
+      replaceMarkdown: (markdown, selection) => core.replaceMarkdown(markdown, selection)
+    }), [core, containerRef]);
+    const themeClass = getThemeClassName(theme);
+    const combinedClassName = [
+      themeClass,
+      themeClassName,
+      className
+    ].filter(Boolean).join(" ");
+    const setRefs = useCallback((el) => {
+      containerRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    }, [ref, containerRef]);
+    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(
+        "div",
+        {
+          ref: setRefs,
+          className: combinedClassName,
+          "data-placeholder": placeholder,
+          onScroll,
+          suppressContentEditableWarning: true,
+          children: doc.blocks.map((block, i) => /* @__PURE__ */ jsx5(EditorBlock, { block, blockIndex: i }, block.id))
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        SlashMenu,
+        {
+          state: slashState,
+          onSelect: handleSlashSelect,
+          onDismiss: handleSlashDismiss
+        }
+      )
+    ] });
+  }
+);
+
+// src/OwoMarkPreview.tsx
+import { useRef as useRef4, useEffect as useEffect3 } from "react";
+import {
+  createOwoMarkPreviewEngine
+} from "@owomark/view";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function isController(store) {
+  return typeof store.updateVisibleBlockIds === "function";
+}
+var OwoMarkPreview = function OwoMarkPreview2(props) {
+  const {
+    state,
+    className,
+    strategy,
+    themeKey,
+    registry,
+    viewportFirst,
+    ariaLabel,
+    renderBlock,
+    onContentUpdate
+  } = props;
+  const onContentUpdateRef = useRef4(onContentUpdate);
+  onContentUpdateRef.current = onContentUpdate;
+  const renderBlockRef = useRef4(renderBlock);
+  renderBlockRef.current = renderBlock;
+  const hasRenderBlock = !!renderBlock;
+  const containerRef = useRef4(null);
+  const engineRef = useRef4(null);
+  useEffect3(() => {
+    if (!containerRef.current) return;
+    const engineOptions = {
+      strategy,
+      themeKey,
+      registry,
+      viewportFirst,
+      renderBlock: hasRenderBlock ? (block, ctx) => renderBlockRef.current(block, ctx) : void 0,
+      onContentUpdate: () => onContentUpdateRef.current?.()
+    };
+    const engine = createOwoMarkPreviewEngine(engineOptions);
+    engine.mount(containerRef.current);
+    engineRef.current = engine;
+    const currentState = state.getState();
+    void engine.update(currentState);
+    return () => {
+      engine.destroy();
+      engineRef.current = null;
+    };
+  }, [strategy, themeKey, registry, viewportFirst, hasRenderBlock]);
+  useEffect3(() => {
+    const unsub = state.subscribe((newState) => {
+      const engine = engineRef.current;
+      if (engine) {
+        void engine.update(newState);
+      }
+    });
+    return unsub;
+  }, [state]);
+  useEffect3(() => {
+    const container = containerRef.current;
+    if (!viewportFirst || !container || !isController(state)) return;
+    const controller = state;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = /* @__PURE__ */ new Set();
+        for (const id of controller.getState().visibleBlockIds) {
+          visible.add(id);
+        }
+        for (const entry of entries) {
+          const blockId = entry.target.getAttribute("data-block-id");
+          if (!blockId) continue;
+          if (entry.isIntersecting) {
+            visible.add(blockId);
+          } else {
+            visible.delete(blockId);
+          }
+        }
+        controller.updateVisibleBlockIds([...visible]);
+      },
+      { root: container, rootMargin: "200px 0px" }
+    );
+    const wrappers = container.querySelectorAll("[data-block-id]");
+    for (const wrapper of wrappers) {
+      observer.observe(wrapper);
+    }
+    const mutation = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        for (const node of m.addedNodes) {
+          if (node instanceof HTMLElement && node.hasAttribute("data-block-id")) {
+            observer.observe(node);
+          }
+        }
+      }
+    });
+    mutation.observe(container, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      mutation.disconnect();
+    };
+  }, [viewportFirst, state]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      role: "document",
+      "aria-label": ariaLabel ?? "Preview",
+      "aria-live": "polite"
+    }
+  );
+};
+
+// src/useOwoMarkSharedState.ts
+import { useRef as useRef5, useSyncExternalStore, useCallback as useCallback2 } from "react";
+import {
+  createSharedStateStore
+} from "@owomark/core";
+function useOwoMarkSharedState(options) {
+  const controllerRef = useRef5(null);
+  if (!controllerRef.current) {
+    controllerRef.current = createSharedStateStore(options);
+  }
+  return controllerRef.current;
+}
+function useSharedStateSnapshot(controller) {
+  const subscribe = useCallback2(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    [controller]
+  );
+  const getSnapshot = useCallback2(() => controller.getState(), [controller]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/useBlockContext.ts
+import { useState as useState3, useEffect as useEffect5 } from "react";
+function useBlockContext(core) {
+  const [blockContext, setBlockContext] = useState3(
+    () => core.getBlockContext()
+  );
+  useEffect5(() => {
+    setBlockContext(core.getBlockContext());
+    return core.onBlockContextChange((ctx) => {
+      setBlockContext(ctx);
+    });
+  }, [core]);
+  return blockContext;
+}
+
+// src/index.ts
+import { getThemeClassName as getThemeClassName2, THEME_LIGHT_CLASS, THEME_DARK_CLASS } from "@owomark/view";
+
+// src/useVirtualList.ts
+import { useState as useState4, useCallback as useCallback3, useRef as useRef6, useEffect as useEffect6, useMemo as useMemo2 } from "react";
+import {
+  buildVirtualRows,
+  computeVisibleRange
+} from "@owomark/core";
+function useVirtualList(options) {
+  const { blocks, containerRef, overscan = 5, charsPerLine = 80 } = options;
+  const heightCacheRef = useRef6(/* @__PURE__ */ new Map());
+  const [scrollTop, setScrollTop] = useState4(0);
+  const [viewportHeight, setViewportHeight] = useState4(0);
+  const [heightCacheVersion, setHeightCacheVersion] = useState4(0);
+  const rafRef = useRef6(0);
+  const [container, setContainer] = useState4(null);
+  useEffect6(() => {
+    setContainer(containerRef.current);
+  });
+  useEffect6(() => {
+    if (!container) return;
+    setViewportHeight(container.clientHeight);
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setViewportHeight(entry.contentRect.height);
+      }
+    });
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [container]);
+  useEffect6(() => {
+    if (!container) return;
+    const onScroll = () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        setScrollTop(container.scrollTop);
+      });
+    };
+    container.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", onScroll);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, [container]);
+  const rows = useMemo2(
+    () => buildVirtualRows(blocks, heightCacheRef.current, charsPerLine),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [blocks, charsPerLine, heightCacheVersion]
+  );
+  const visibleRange = useMemo2(
+    () => computeVisibleRange(rows, scrollTop, viewportHeight, overscan),
+    [rows, scrollTop, viewportHeight, overscan]
+  );
+  const updateBlockHeight = useCallback3((blockId, height) => {
+    const cache = heightCacheRef.current;
+    if (cache.get(blockId) !== height) {
+      cache.set(blockId, height);
+      setHeightCacheVersion((v) => v + 1);
+    }
+  }, []);
+  const isBlockVisible = useCallback3(
+    (blockIndex) => blockIndex >= visibleRange.startIndex && blockIndex <= visibleRange.endIndex,
+    [visibleRange]
+  );
+  const invalidateAllHeights = useCallback3(() => {
+    heightCacheRef.current.clear();
+    setHeightCacheVersion((v) => v + 1);
+  }, []);
+  return {
+    visibleRange,
+    rows,
+    totalHeight: visibleRange.totalHeight,
+    updateBlockHeight,
+    isBlockVisible,
+    invalidateAllHeights
+  };
+}
+
+// src/MdxSkeleton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function MdxSkeleton({ height, lines = 3, className, style }) {
+  const combinedStyle = {
+    ...style,
+    ...height != null ? { height, minHeight: height } : {}
+  };
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: `owo-mdx-skeleton-block ${className ?? ""}`,
+      style: combinedStyle,
+      "aria-hidden": "true",
+      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx7("div", { className: "owo-mdx-skeleton owo-mdx-skeleton-line" }, i))
+    }
+  );
+}
+
+// src/MdxComponentShell.tsx
+import {
+  useRef as useRef7,
+  useState as useState5,
+  useEffect as useEffect7,
+  useCallback as useCallback4
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var componentHeightCache = /* @__PURE__ */ new Map();
+var DEFAULT_ESTIMATED_HEIGHT = 80;
+function MdxComponentShell({ name, children }) {
+  const containerRef = useRef7(null);
+  const [ready, setReady] = useState5(false);
+  const estimatedHeight = componentHeightCache.get(name) ?? DEFAULT_ESTIMATED_HEIGHT;
+  useEffect7(() => {
+    const id = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  const measureHeight = useCallback4(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const h = el.getBoundingClientRect().height;
+    if (h > 0) {
+      componentHeightCache.set(name, h);
+    }
+  }, [name]);
+  useEffect7(() => {
+    const el = containerRef.current;
+    if (!el || !ready) return;
+    measureHeight();
+    const ro = new ResizeObserver(() => measureHeight());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ready, measureHeight]);
+  if (!ready) {
+    return /* @__PURE__ */ jsx8(MdxSkeleton, { height: estimatedHeight });
+  }
+  return /* @__PURE__ */ jsx8("div", { ref: containerRef, children });
+}
+function wrapWithShell(name, Component) {
+  function ShellWrapped(props) {
+    return /* @__PURE__ */ jsx8(MdxComponentShell, { name, children: /* @__PURE__ */ jsx8(Component, { ...props }) });
+  }
+  ShellWrapped.displayName = `MdxShell(${name})`;
+  return ShellWrapped;
+}
+function clearComponentHeightCache() {
+  componentHeightCache.clear();
+}
+export {
+  DEFAULT_EDITOR_CONFIG,
+  EditorBlock,
+  EditorDecorator,
+  EditorLeaf,
+  MdxComponentShell,
+  MdxSkeleton,
+  OwoMarkEditor,
+  OwoMarkPreview,
+  SlashMenu,
+  THEME_DARK_CLASS,
+  THEME_LIGHT_CLASS,
+  clearComponentHeightCache,
+  computeMenuPosition,
+  deriveProcessorOptions,
+  getCaretRect,
+  getThemeClassName2 as getThemeClassName,
+  resolveEditorConfig,
+  useBlockContext,
+  useOwoMarkCore,
+  useOwoMarkSharedState,
+  useSharedStateSnapshot,
+  useVirtualList,
+  wrapWithShell
+};