@reiwuzen/blocky-react 1.0.2 → 1.0.3

package/dist/index.cjs

@@ -49,8 +49,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/editor.tsx
-var import_react7 = require("react");
-var import_blocky5 = require("@reiwuzen/blocky");
+var import_react5 = require("react");
+var import_blocky4 = require("@reiwuzen/blocky");
 
 // src/store/editor-store.ts
 var import_zustand = require("zustand");
@@ -104,7 +104,7 @@ function createEditorStore(config = {}) {
 }
 
 // src/components/blockList.tsx
-var import_react6 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/useEditor.ts
 var import_react = require("react");
@@ -148,216 +148,122 @@ function useEditorActions() {
 }
 
 // src/components/block.tsx
-var import_react5 = require("react");
-
-// src/components/blocks/editableContent.tsx
-var import_react3 = __toESM(require("react"), 1);
-
-// src/hooks/useBlockKeyboard.ts
-var import_react2 = require("react");
-var import_blocky2 = require("@reiwuzen/blocky");
-function useBlockKeyboard({ block, onFocus }) {
-  const { createBlockAfter: createBlockAfter2, removeBlock, updateBlock } = useEditorActions();
-  const blocks = useBlocks();
-  return (0, import_react2.useCallback)((e) => {
-    const fresh = blocks.find((b) => b.id === block.id) ?? block;
-    const sel = window.getSelection();
-    const flat = sel?.anchorOffset ?? 0;
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      (0, import_blocky2.flatToPosition)(fresh, flat).match(
-        ({ nodeIndex, offset }) => {
-          (0, import_blocky2.splitBlock)(fresh, nodeIndex, offset).match(
-            ([original, newBlock]) => {
-              updateBlock(original);
-              const newId = createBlockAfter2(fresh.id, "paragraph");
-              if (newId) {
-                updateBlock({ ...newBlock, id: newId });
-                onFocus(newId);
-                setTimeout(() => {
-                  document.querySelector(`[data-block-id="${newId}"]`)?.focus();
-                }, 0);
-              }
-            },
-            () => {
-            }
-          );
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === "Backspace" && flat === 0) {
-      const index = blocks.findIndex((b) => b.id === fresh.id);
-      if (index === 0) return;
-      const prev = blocks[index - 1];
-      if (prev.type === "code" || prev.type === "equation") return;
-      e.preventDefault();
-      (0, import_blocky2.mergeBlocks)(prev, fresh).match(
-        (merged) => {
-          updateBlock(merged);
-          removeBlock(fresh.id);
-          onFocus(merged.id);
-          setTimeout(() => {
-            document.querySelector(`[data-block-id="${merged.id}"]`)?.focus();
-          }, 0);
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === " ") {
-      (0, import_blocky2.applyMarkdownTransform)(fresh, flat).match(
-        ({ block: transformed, converted }) => {
-          if (converted) {
-            e.preventDefault();
-            updateBlock(transformed);
-          }
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const fn = e.shiftKey ? import_blocky2.outdentBlock : import_blocky2.indentBlock;
-      fn(fresh).match(
-        (b) => updateBlock(b),
-        () => {
-        }
-      );
-    }
-  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
-}
+var import_react3 = require("react");
 
 // src/components/blocks/editableContent.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function EditableContent(props) {
-  const { block, className, placeholder, editable, onFocus, blockRefs } = props;
-  const keyDownRef = (0, import_react3.useRef)(() => {
-  });
-  const focusRef = (0, import_react3.useRef)(() => {
-  });
-  const handleKeyDown = useBlockKeyboard({ block, onFocus });
-  keyDownRef.current = handleKeyDown;
-  focusRef.current = () => onFocus(block.id);
-  const initialHtml = (0, import_react3.useMemo)(
-    () => nodesToHtml(block.content),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-    // computed once at mount from the seed blocks
-  );
+function EditableContent({
+  block,
+  className,
+  editable,
+  blockRefs
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StaticSpan,
+    "div",
     {
-      blockId: block.id,
-      className: className ?? "",
-      placeholder: placeholder ?? "",
-      editable,
-      initialHtml,
-      blockRefs,
-      keyDownRef,
-      focusRef
+      className: `blocky-content ${className ?? ""}`,
+      contentEditable: editable,
+      suppressContentEditableWarning: true,
+      ref: (el) => {
+        if (!el) return;
+        blockRefs.current.set(block.id, el);
+      },
+      children: block.content.map((node, i) => {
+        const { classString, dataAttrs } = nodeToAttrs(node);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: classString,
+            ...parseDataAttrs(dataAttrs),
+            children: node.type === "equation" ? node.latex : node.text
+          },
+          i
+        );
+      })
     }
   );
 }
-var StaticSpan = import_react3.default.memo(
-  function StaticSpan2({
-    blockId,
-    className,
-    placeholder,
-    editable,
-    initialHtml,
-    blockRefs,
-    keyDownRef,
-    focusRef
-  }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        "data-block-id": blockId,
-        className: `blocky-block-content ${className}`,
-        "data-placeholder": placeholder,
-        contentEditable: editable,
-        suppressContentEditableWarning: true,
-        ref: (el) => {
-          if (!el) return;
-          blockRefs.current.set(blockId, el);
-          if (el.dataset.hydrated) return;
-          el.innerHTML = initialHtml;
-          el.dataset.hydrated = "1";
-        },
-        onKeyDown: (e) => keyDownRef.current(e),
-        onFocus: () => focusRef.current()
-      }
-    );
-  },
-  () => true
-  // never re-render — DOM belongs to the browser
-);
+function nodeToAttrs(n) {
+  const classes = [];
+  const data = [];
+  if (n.type === "code") classes.push("blocky-code");
+  if (n.type === "equation") classes.push("blocky-equation");
+  if (n.type === "text") {
+    if (n.bold) classes.push("blocky-bold");
+    if (n.italic) classes.push("blocky-italic");
+    if (n.underline) classes.push("blocky-underline");
+    if (n.strikethrough) classes.push("blocky-strike");
+    if (n.highlighted) classes.push(`blocky-highlight-${n.highlighted}`);
+    if (n.color) classes.push(`blocky-color-${n.color}`);
+    if (n.link) {
+      data.push(`data-link="${escAttr(n.link)}"`);
+    }
+  }
+  if (n.type === "equation") {
+    data.push(`data-latex="${escAttr(n.latex)}"`);
+  }
+  return {
+    classString: classes.join(" "),
+    dataAttrs: data.join(" ")
+  };
+}
 function nodesToHtml(nodes) {
   return nodes.map((n) => {
-    if (n.type === "code") return `<code>${esc(n.text)}</code>`;
-    if (n.type === "equation") return `<span class="blocky-equation">${esc(n.latex)}</span>`;
-    let inner = esc(n.text);
-    if (n.bold) inner = `<strong>${inner}</strong>`;
-    if (n.italic) inner = `<em>${inner}</em>`;
-    if (n.underline) inner = `<u>${inner}</u>`;
-    if (n.strikethrough) inner = `<s>${inner}</s>`;
-    if (n.highlighted) inner = `<mark class="blocky-highlight-${n.highlighted}">${inner}</mark>`;
-    if (n.color) inner = `<span class="blocky-color-${n.color}">${inner}</span>`;
-    if (n.link) inner = `<a href="${n.link}">${inner}</a>`;
-    return inner;
+    if (n.type === "equation") {
+      return `<span class="blocky-equation">${esc(n.latex)}</span>`;
+    }
+    if (n.type === "code") {
+      return `<span class="blocky-code">${esc(n.text)}</span>`;
+    }
+    if (n.type === "text") {
+      const classes = [];
+      if (n.bold) classes.push("blocky-bold");
+      if (n.italic) classes.push("blocky-italic");
+      if (n.underline) classes.push("blocky-underline");
+      if (n.strikethrough) classes.push("blocky-strike");
+      if (n.highlighted) classes.push(`blocky-highlight-${n.highlighted}`);
+      if (n.color) classes.push(`blocky-color-${n.color}`);
+      if (n.link) classes.push("blocky-link");
+      const linkAttr = n.link ? ` data-link="${escAttr(n.link)}"` : "";
+      const classAttr = classes.length > 0 ? ` class="${classes.join(" ")}"` : "";
+      return `<span${classAttr}${linkAttr}>${esc(n.text)}</span>`;
+    }
+    return "";
   }).join("");
 }
 function domToNodes(el) {
   const nodes = [];
-  const walk = (node, formats = {}) => {
-    if (node.nodeType === window.Node.TEXT_NODE) {
-      const text = node.textContent ?? "";
-      if (!text) return;
-      nodes.push({ type: "text", text, ...formats });
-      return;
-    }
-    if (!(node instanceof HTMLElement)) return;
-    const tag = node.tagName.toLowerCase();
-    const inherited = { ...formats };
-    if (tag === "strong" || tag === "b") inherited.bold = true;
-    if (tag === "em" || tag === "i") inherited.italic = true;
-    if (tag === "u") inherited.underline = true;
-    if (tag === "s") inherited.strikethrough = true;
-    if (tag === "a") inherited.link = node.getAttribute("href") ?? void 0;
-    if (tag === "mark") {
-      inherited.highlighted = node.className.includes("green") ? "green" : "yellow";
-    }
-    if (tag === "code") {
-      nodes.push({ type: "code", text: node.innerText });
-      return;
-    }
-    if (tag === "span" && node.classList.contains("blocky-equation")) {
-      nodes.push({ type: "equation", latex: node.innerText });
-      return;
-    }
-    node.childNodes.forEach((child) => walk(child, inherited));
-  };
-  el.childNodes.forEach((child) => walk(child));
-  const merged = [];
-  for (const node of nodes) {
-    const prev = merged[merged.length - 1];
-    if (prev && node.type === "text" && prev.type === "text" && JSON.stringify({ ...prev, text: "" }) === JSON.stringify({ ...node, text: "" })) {
-      prev.text += node.text;
-    } else {
-      merged.push({ ...node });
-    }
-  }
-  return merged.length > 0 ? merged : [{ type: "text", text: "" }];
+  el.querySelectorAll("span").forEach((span) => {
+    const text = span.innerText ?? "";
+    const node = {
+      type: span.classList.contains("blocky-equation") ? "equation" : span.classList.contains("blocky-code") ? "code" : "text",
+      text
+    };
+    if (span.classList.contains("blocky-bold")) node.bold = true;
+    if (span.classList.contains("blocky-italic")) node.italic = true;
+    if (span.classList.contains("blocky-underline")) node.underline = true;
+    if (span.classList.contains("blocky-strike")) node.strikethrough = true;
+    if (span.dataset.link) node.link = span.dataset.link;
+    if (span.dataset.latex) node.latex = span.dataset.latex;
+    nodes.push(node);
+  });
+  return nodes.length ? nodes : [{ type: "text", text: "" }];
 }
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function parseDataAttrs(dataAttrs) {
+  const obj = {};
+  dataAttrs.split(" ").forEach((pair) => {
+    if (!pair) return;
+    const [k, v] = pair.split("=");
+    obj[k] = v?.replace(/"/g, "") ?? "";
+  });
+  return obj;
+}
 
 // src/components/drag/DragHandle.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -386,7 +292,7 @@ function DragHandle({ blockId, onDragStart }) {
 }
 
 // src/components/toolbar/BlockTypeSwitcher.tsx
-var import_blocky3 = require("@reiwuzen/blocky");
+var import_blocky2 = require("@reiwuzen/blocky");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var BLOCK_TYPES = [
   { type: "paragraph", label: "Text" },
@@ -407,7 +313,7 @@ function BlockTypeSwitcher({ block, onClose }) {
       className: `blocky-type-option ${block.type === type ? "blocky-type-option--active" : ""}`,
       onMouseDown: (e) => {
         e.preventDefault();
-        (0, import_blocky3.changeBlockType)(block, type).match(
+        (0, import_blocky2.changeBlockType)(block, type).match(
           (b) => {
             updateBlock(b);
             onClose();
@@ -423,14 +329,14 @@ function BlockTypeSwitcher({ block, onClose }) {
 }
 
 // src/components/toolbar/FormatToolbar.tsx
-var import_react4 = require("react");
-var import_blocky4 = require("@reiwuzen/blocky");
+var import_react2 = require("react");
+var import_blocky3 = require("@reiwuzen/blocky");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function FormatToolbar({ block }) {
-  const ref = (0, import_react4.useRef)(null);
-  const [pos, setPos] = (0, import_react4.useState)(null);
+  const ref = (0, import_react2.useRef)(null);
+  const [pos, setPos] = (0, import_react2.useState)(null);
   const { updateBlock } = useEditorActions();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const onSelectionChange = () => {
       const sel = window.getSelection();
       if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
@@ -453,7 +359,7 @@ function FormatToolbar({ block }) {
     if (!sel) return;
     const start = Math.min(sel.anchorOffset, sel.focusOffset);
     const end = Math.max(sel.anchorOffset, sel.focusOffset);
-    (0, import_blocky4.flatToSelection)(block, start, end).match(
+    (0, import_blocky3.flatToSelection)(block, start, end).match(
       (nodeSel) => fn(block.content, nodeSel).match(
         (content) => updateBlock({ ...block, content }),
         () => {
@@ -471,14 +377,14 @@ function FormatToolbar({ block }) {
       style: { top: pos.top, left: pos.left },
       onMouseDown: (e) => e.preventDefault(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn", onMouseDown: () => applyFormat(import_blocky4.toggleBold), children: "B" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--italic", onMouseDown: () => applyFormat(import_blocky4.toggleItalic), children: "I" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--underline", onMouseDown: () => applyFormat(import_blocky4.toggleUnderline), children: "U" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--strike", onMouseDown: () => applyFormat(import_blocky4.toggleStrikethrough), children: "S" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn", onMouseDown: () => applyFormat(import_blocky3.toggleBold), children: "B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--italic", onMouseDown: () => applyFormat(import_blocky3.toggleItalic), children: "I" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--underline", onMouseDown: () => applyFormat(import_blocky3.toggleUnderline), children: "U" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--strike", onMouseDown: () => applyFormat(import_blocky3.toggleStrikethrough), children: "S" }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "blocky-toolbar-divider" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--highlight", onMouseDown: () => applyFormat((n, s) => (0, import_blocky4.toggleHighlight)(n, s, "yellow")), children: "H" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--red", onMouseDown: () => applyFormat((n, s) => (0, import_blocky4.toggleColor)(n, s, "red")), children: "A" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--blue", onMouseDown: () => applyFormat((n, s) => (0, import_blocky4.toggleColor)(n, s, "blue")), children: "A" })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--highlight", onMouseDown: () => applyFormat((n, s) => (0, import_blocky3.toggleHighlight)(n, s, "yellow")), children: "H" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--red", onMouseDown: () => applyFormat((n, s) => (0, import_blocky3.toggleColor)(n, s, "red")), children: "A" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--blue", onMouseDown: () => applyFormat((n, s) => (0, import_blocky3.toggleColor)(n, s, "blue")), children: "A" })
       ]
     }
   );
@@ -496,8 +402,8 @@ function Block({
   blockRefs,
   hydratedBlocks
 }) {
-  const [showSwitcher, setShowSwitcher] = (0, import_react5.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react5.useState)(false);
+  const [showSwitcher, setShowSwitcher] = (0, import_react3.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react3.useState)(false);
   const { updateBlock } = useEditorActions();
   const { className, placeholder } = blockMeta(block);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -559,7 +465,8 @@ function Block({
               placeholder,
               editable,
               onFocus,
-              blockRefs
+              blockRefs,
+              hydratedBlocks
             }
           ),
           editable && isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormatToolbar, { block }),
@@ -598,7 +505,7 @@ function BlockList({ editable, blockRefs, hydratedBlocks }) {
   const blocks = useBlocks();
   const activeBlockId = useActiveBlockId();
   const { setBlocks, setActiveBlockId } = useEditorActions();
-  const handleDrop = (0, import_react6.useCallback)((dragId, dropId) => {
+  const handleDrop = (0, import_react4.useCallback)((dragId, dropId) => {
     const from = blocks.findIndex((b) => b.id === dragId);
     const to = blocks.findIndex((b) => b.id === dropId);
     if (from === -1 || to === -1) return;
@@ -625,7 +532,7 @@ function BlockList({ editable, blockRefs, hydratedBlocks }) {
 
 // src/components/editor.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var EditorContext = (0, import_react7.createContext)(null);
+var EditorContext = (0, import_react5.createContext)(null);
 function Editor({
   blocks: seedBlocks,
   onChange,
@@ -633,27 +540,27 @@ function Editor({
   className,
   placeholder = "Start writing..."
 }) {
-  const blockRefs = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-  const hydratedBlocks = (0, import_react7.useRef)(/* @__PURE__ */ new Set());
-  const prevEditable = (0, import_react7.useRef)(editable);
-  const store = (0, import_react7.useMemo)(
+  const blockRefs = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const hydratedBlocks = (0, import_react5.useRef)(/* @__PURE__ */ new Set());
+  const prevEditable = (0, import_react5.useRef)(editable);
+  const store = (0, import_react5.useMemo)(
     () => createEditorStore({ initialBlocks: seedBlocks }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
     const state = store.getState();
     if (seedBlocks && seedBlocks.length > 0) {
       state.setBlocks(seedBlocks);
     } else if (state.blocks.length === 0) {
-      (0, import_blocky5.createBlock)("paragraph").match(
+      (0, import_blocky4.createBlock)("paragraph").match(
         (b) => state.setBlocks([b]),
         () => {
         }
       );
     }
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const wasEditable = prevEditable.current;
     prevEditable.current = editable;
     if (!wasEditable || editable) return;
@@ -687,18 +594,98 @@ function Editor({
 }
 
 // src/hooks/useSelection.ts
-var import_react8 = require("react");
-var import_blocky6 = require("@reiwuzen/blocky");
+var import_react6 = require("react");
+var import_blocky5 = require("@reiwuzen/blocky");
 function useSelection(block) {
-  return (0, import_react8.useCallback)(() => {
+  return (0, import_react6.useCallback)(() => {
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
     const start = Math.min(sel.anchorOffset, sel.focusOffset);
     const end = Math.max(sel.anchorOffset, sel.focusOffset);
-    const result = (0, import_blocky6.flatToSelection)(block, start, end);
+    const result = (0, import_blocky5.flatToSelection)(block, start, end);
     return result.ok ? result.value : null;
   }, [block]);
 }
+
+// src/hooks/useBlockKeyboard.ts
+var import_react7 = require("react");
+var import_blocky6 = require("@reiwuzen/blocky");
+function useBlockKeyboard({ block, onFocus }) {
+  const { createBlockAfter: createBlockAfter2, removeBlock, updateBlock } = useEditorActions();
+  const blocks = useBlocks();
+  return (0, import_react7.useCallback)((e) => {
+    const fresh = blocks.find((b) => b.id === block.id) ?? block;
+    const sel = window.getSelection();
+    const flat = sel?.anchorOffset ?? 0;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      (0, import_blocky6.flatToPosition)(fresh, flat).match(
+        ({ nodeIndex, offset }) => {
+          (0, import_blocky6.splitBlock)(fresh, nodeIndex, offset).match(
+            ([original, newBlock]) => {
+              updateBlock(original);
+              const newId = createBlockAfter2(fresh.id, "paragraph");
+              if (newId) {
+                updateBlock({ ...newBlock, id: newId });
+                onFocus(newId);
+                setTimeout(() => {
+                  document.querySelector(`[data-block-id="${newId}"]`)?.focus();
+                }, 0);
+              }
+            },
+            () => {
+            }
+          );
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === "Backspace" && flat === 0) {
+      const index = blocks.findIndex((b) => b.id === fresh.id);
+      if (index === 0) return;
+      const prev = blocks[index - 1];
+      if (prev.type === "code" || prev.type === "equation") return;
+      e.preventDefault();
+      (0, import_blocky6.mergeBlocks)(prev, fresh).match(
+        (merged) => {
+          updateBlock(merged);
+          removeBlock(fresh.id);
+          onFocus(merged.id);
+          setTimeout(() => {
+            document.querySelector(`[data-block-id="${merged.id}"]`)?.focus();
+          }, 0);
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === " ") {
+      (0, import_blocky6.applyMarkdownTransform)(fresh, flat).match(
+        ({ block: transformed, converted }) => {
+          if (converted) {
+            e.preventDefault();
+            updateBlock(transformed);
+          }
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const fn = e.shiftKey ? import_blocky6.outdentBlock : import_blocky6.indentBlock;
+      fn(fresh).match(
+        (b) => updateBlock(b),
+        () => {
+        }
+      );
+    }
+  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Block,

package/dist/index.d.cts

@@ -43,8 +43,8 @@ type Props$4 = {
     onFocus: (id: string) => void;
     onDragStart: (id: string) => void;
     onDrop: (dragId: string, dropId: string) => void;
-    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
-    hydratedBlocks: React.MutableRefObject<Set<string>>;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
 };
 declare function Block({ block, isActive, editable, onFocus, onDragStart, onDrop, blockRefs, hydratedBlocks, }: Props$4): react_jsx_runtime.JSX.Element;
 
@@ -55,6 +55,7 @@ type Props$3 = {
     editable: boolean;
     onFocus: (id: string) => void;
     blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
 };
 /**
  * The inner span is wrapped in a memo that NEVER re-renders after mount.
@@ -62,7 +63,7 @@ type Props$3 = {
  * This means the DOM is 100% owned by the browser after first paint.
  * Keyboard handlers stay fresh via a forwarded ref (handlerRef).
  */
-declare function EditableContent(props: Props$3): react_jsx_runtime.JSX.Element;
+declare function EditableContent({ block, className, editable, blockRefs, }: Props$3): react_jsx_runtime.JSX.Element;
 declare function nodesToHtml(nodes: Node[]): string;
 declare function domToNodes(el: HTMLElement): Node[];
 

package/dist/index.d.ts

@@ -43,8 +43,8 @@ type Props$4 = {
     onFocus: (id: string) => void;
     onDragStart: (id: string) => void;
     onDrop: (dragId: string, dropId: string) => void;
-    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
-    hydratedBlocks: React.MutableRefObject<Set<string>>;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
 };
 declare function Block({ block, isActive, editable, onFocus, onDragStart, onDrop, blockRefs, hydratedBlocks, }: Props$4): react_jsx_runtime.JSX.Element;
 
@@ -55,6 +55,7 @@ type Props$3 = {
     editable: boolean;
     onFocus: (id: string) => void;
     blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
+    hydratedBlocks: React.RefObject<Set<string>>;
 };
 /**
  * The inner span is wrapped in a memo that NEVER re-renders after mount.
@@ -62,7 +63,7 @@ type Props$3 = {
  * This means the DOM is 100% owned by the browser after first paint.
  * Keyboard handlers stay fresh via a forwarded ref (handlerRef).
  */
-declare function EditableContent(props: Props$3): react_jsx_runtime.JSX.Element;
+declare function EditableContent({ block, className, editable, blockRefs, }: Props$3): react_jsx_runtime.JSX.Element;
 declare function nodesToHtml(nodes: Node[]): string;
 declare function domToNodes(el: HTMLElement): Node[];
 

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/editor.tsx
-import { createContext, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { createContext, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef3 } from "react";
 import { createBlock } from "@reiwuzen/blocky";
 
 // src/store/editor-store.ts
@@ -59,7 +59,7 @@ function createEditorStore(config = {}) {
 }
 
 // src/components/blockList.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback } from "react";
 
 // src/hooks/useEditor.ts
 import { useContext, useMemo } from "react";
@@ -105,221 +105,120 @@ function useEditorActions() {
 // src/components/block.tsx
 import { useState as useState2 } from "react";
 
-// src/components/blocks/editableContent.tsx
-import React, { useRef, useMemo as useMemo2 } from "react";
-
-// src/hooks/useBlockKeyboard.ts
-import { useCallback } from "react";
-import {
-  splitBlock,
-  mergeBlocks,
-  flatToPosition,
-  applyMarkdownTransform,
-  indentBlock,
-  outdentBlock
-} from "@reiwuzen/blocky";
-function useBlockKeyboard({ block, onFocus }) {
-  const { createBlockAfter: createBlockAfter2, removeBlock, updateBlock } = useEditorActions();
-  const blocks = useBlocks();
-  return useCallback((e) => {
-    const fresh = blocks.find((b) => b.id === block.id) ?? block;
-    const sel = window.getSelection();
-    const flat = sel?.anchorOffset ?? 0;
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      flatToPosition(fresh, flat).match(
-        ({ nodeIndex, offset }) => {
-          splitBlock(fresh, nodeIndex, offset).match(
-            ([original, newBlock]) => {
-              updateBlock(original);
-              const newId = createBlockAfter2(fresh.id, "paragraph");
-              if (newId) {
-                updateBlock({ ...newBlock, id: newId });
-                onFocus(newId);
-                setTimeout(() => {
-                  document.querySelector(`[data-block-id="${newId}"]`)?.focus();
-                }, 0);
-              }
-            },
-            () => {
-            }
-          );
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === "Backspace" && flat === 0) {
-      const index = blocks.findIndex((b) => b.id === fresh.id);
-      if (index === 0) return;
-      const prev = blocks[index - 1];
-      if (prev.type === "code" || prev.type === "equation") return;
-      e.preventDefault();
-      mergeBlocks(prev, fresh).match(
-        (merged) => {
-          updateBlock(merged);
-          removeBlock(fresh.id);
-          onFocus(merged.id);
-          setTimeout(() => {
-            document.querySelector(`[data-block-id="${merged.id}"]`)?.focus();
-          }, 0);
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === " ") {
-      applyMarkdownTransform(fresh, flat).match(
-        ({ block: transformed, converted }) => {
-          if (converted) {
-            e.preventDefault();
-            updateBlock(transformed);
-          }
-        },
-        () => {
-        }
-      );
-      return;
-    }
-    if (e.key === "Tab") {
-      e.preventDefault();
-      const fn = e.shiftKey ? outdentBlock : indentBlock;
-      fn(fresh).match(
-        (b) => updateBlock(b),
-        () => {
-        }
-      );
-    }
-  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
-}
-
 // src/components/blocks/editableContent.tsx
 import { jsx } from "react/jsx-runtime";
-function EditableContent(props) {
-  const { block, className, placeholder, editable, onFocus, blockRefs } = props;
-  const keyDownRef = useRef(() => {
-  });
-  const focusRef = useRef(() => {
-  });
-  const handleKeyDown = useBlockKeyboard({ block, onFocus });
-  keyDownRef.current = handleKeyDown;
-  focusRef.current = () => onFocus(block.id);
-  const initialHtml = useMemo2(
-    () => nodesToHtml(block.content),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-    // computed once at mount from the seed blocks
-  );
+function EditableContent({
+  block,
+  className,
+  editable,
+  blockRefs
+}) {
   return /* @__PURE__ */ jsx(
-    StaticSpan,
+    "div",
     {
-      blockId: block.id,
-      className: className ?? "",
-      placeholder: placeholder ?? "",
-      editable,
-      initialHtml,
-      blockRefs,
-      keyDownRef,
-      focusRef
+      className: `blocky-content ${className ?? ""}`,
+      contentEditable: editable,
+      suppressContentEditableWarning: true,
+      ref: (el) => {
+        if (!el) return;
+        blockRefs.current.set(block.id, el);
+      },
+      children: block.content.map((node, i) => {
+        const { classString, dataAttrs } = nodeToAttrs(node);
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classString,
+            ...parseDataAttrs(dataAttrs),
+            children: node.type === "equation" ? node.latex : node.text
+          },
+          i
+        );
+      })
     }
   );
 }
-var StaticSpan = React.memo(
-  function StaticSpan2({
-    blockId,
-    className,
-    placeholder,
-    editable,
-    initialHtml,
-    blockRefs,
-    keyDownRef,
-    focusRef
-  }) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-block-id": blockId,
-        className: `blocky-block-content ${className}`,
-        "data-placeholder": placeholder,
-        contentEditable: editable,
-        suppressContentEditableWarning: true,
-        ref: (el) => {
-          if (!el) return;
-          blockRefs.current.set(blockId, el);
-          if (el.dataset.hydrated) return;
-          el.innerHTML = initialHtml;
-          el.dataset.hydrated = "1";
-        },
-        onKeyDown: (e) => keyDownRef.current(e),
-        onFocus: () => focusRef.current()
-      }
-    );
-  },
-  () => true
-  // never re-render — DOM belongs to the browser
-);
+function nodeToAttrs(n) {
+  const classes = [];
+  const data = [];
+  if (n.type === "code") classes.push("blocky-code");
+  if (n.type === "equation") classes.push("blocky-equation");
+  if (n.type === "text") {
+    if (n.bold) classes.push("blocky-bold");
+    if (n.italic) classes.push("blocky-italic");
+    if (n.underline) classes.push("blocky-underline");
+    if (n.strikethrough) classes.push("blocky-strike");
+    if (n.highlighted) classes.push(`blocky-highlight-${n.highlighted}`);
+    if (n.color) classes.push(`blocky-color-${n.color}`);
+    if (n.link) {
+      data.push(`data-link="${escAttr(n.link)}"`);
+    }
+  }
+  if (n.type === "equation") {
+    data.push(`data-latex="${escAttr(n.latex)}"`);
+  }
+  return {
+    classString: classes.join(" "),
+    dataAttrs: data.join(" ")
+  };
+}
 function nodesToHtml(nodes) {
   return nodes.map((n) => {
-    if (n.type === "code") return `<code>${esc(n.text)}</code>`;
-    if (n.type === "equation") return `<span class="blocky-equation">${esc(n.latex)}</span>`;
-    let inner = esc(n.text);
-    if (n.bold) inner = `<strong>${inner}</strong>`;
-    if (n.italic) inner = `<em>${inner}</em>`;
-    if (n.underline) inner = `<u>${inner}</u>`;
-    if (n.strikethrough) inner = `<s>${inner}</s>`;
-    if (n.highlighted) inner = `<mark class="blocky-highlight-${n.highlighted}">${inner}</mark>`;
-    if (n.color) inner = `<span class="blocky-color-${n.color}">${inner}</span>`;
-    if (n.link) inner = `<a href="${n.link}">${inner}</a>`;
-    return inner;
+    if (n.type === "equation") {
+      return `<span class="blocky-equation">${esc(n.latex)}</span>`;
+    }
+    if (n.type === "code") {
+      return `<span class="blocky-code">${esc(n.text)}</span>`;
+    }
+    if (n.type === "text") {
+      const classes = [];
+      if (n.bold) classes.push("blocky-bold");
+      if (n.italic) classes.push("blocky-italic");
+      if (n.underline) classes.push("blocky-underline");
+      if (n.strikethrough) classes.push("blocky-strike");
+      if (n.highlighted) classes.push(`blocky-highlight-${n.highlighted}`);
+      if (n.color) classes.push(`blocky-color-${n.color}`);
+      if (n.link) classes.push("blocky-link");
+      const linkAttr = n.link ? ` data-link="${escAttr(n.link)}"` : "";
+      const classAttr = classes.length > 0 ? ` class="${classes.join(" ")}"` : "";
+      return `<span${classAttr}${linkAttr}>${esc(n.text)}</span>`;
+    }
+    return "";
   }).join("");
 }
 function domToNodes(el) {
   const nodes = [];
-  const walk = (node, formats = {}) => {
-    if (node.nodeType === window.Node.TEXT_NODE) {
-      const text = node.textContent ?? "";
-      if (!text) return;
-      nodes.push({ type: "text", text, ...formats });
-      return;
-    }
-    if (!(node instanceof HTMLElement)) return;
-    const tag = node.tagName.toLowerCase();
-    const inherited = { ...formats };
-    if (tag === "strong" || tag === "b") inherited.bold = true;
-    if (tag === "em" || tag === "i") inherited.italic = true;
-    if (tag === "u") inherited.underline = true;
-    if (tag === "s") inherited.strikethrough = true;
-    if (tag === "a") inherited.link = node.getAttribute("href") ?? void 0;
-    if (tag === "mark") {
-      inherited.highlighted = node.className.includes("green") ? "green" : "yellow";
-    }
-    if (tag === "code") {
-      nodes.push({ type: "code", text: node.innerText });
-      return;
-    }
-    if (tag === "span" && node.classList.contains("blocky-equation")) {
-      nodes.push({ type: "equation", latex: node.innerText });
-      return;
-    }
-    node.childNodes.forEach((child) => walk(child, inherited));
-  };
-  el.childNodes.forEach((child) => walk(child));
-  const merged = [];
-  for (const node of nodes) {
-    const prev = merged[merged.length - 1];
-    if (prev && node.type === "text" && prev.type === "text" && JSON.stringify({ ...prev, text: "" }) === JSON.stringify({ ...node, text: "" })) {
-      prev.text += node.text;
-    } else {
-      merged.push({ ...node });
-    }
-  }
-  return merged.length > 0 ? merged : [{ type: "text", text: "" }];
+  el.querySelectorAll("span").forEach((span) => {
+    const text = span.innerText ?? "";
+    const node = {
+      type: span.classList.contains("blocky-equation") ? "equation" : span.classList.contains("blocky-code") ? "code" : "text",
+      text
+    };
+    if (span.classList.contains("blocky-bold")) node.bold = true;
+    if (span.classList.contains("blocky-italic")) node.italic = true;
+    if (span.classList.contains("blocky-underline")) node.underline = true;
+    if (span.classList.contains("blocky-strike")) node.strikethrough = true;
+    if (span.dataset.link) node.link = span.dataset.link;
+    if (span.dataset.latex) node.latex = span.dataset.latex;
+    nodes.push(node);
+  });
+  return nodes.length ? nodes : [{ type: "text", text: "" }];
 }
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
+function escAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function parseDataAttrs(dataAttrs) {
+  const obj = {};
+  dataAttrs.split(" ").forEach((pair) => {
+    if (!pair) return;
+    const [k, v] = pair.split("=");
+    obj[k] = v?.replace(/"/g, "") ?? "";
+  });
+  return obj;
+}
 
 // src/components/drag/DragHandle.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -385,11 +284,11 @@ function BlockTypeSwitcher({ block, onClose }) {
 }
 
 // src/components/toolbar/FormatToolbar.tsx
-import { useEffect, useRef as useRef2, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleHighlight, toggleColor, flatToSelection } from "@reiwuzen/blocky";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function FormatToolbar({ block }) {
-  const ref = useRef2(null);
+  const ref = useRef(null);
   const [pos, setPos] = useState(null);
   const { updateBlock } = useEditorActions();
   useEffect(() => {
@@ -521,7 +420,8 @@ function Block({
               placeholder,
               editable,
               onFocus,
-              blockRefs
+              blockRefs,
+              hydratedBlocks
             }
           ),
           editable && isActive && /* @__PURE__ */ jsx5(FormatToolbar, { block }),
@@ -560,7 +460,7 @@ function BlockList({ editable, blockRefs, hydratedBlocks }) {
   const blocks = useBlocks();
   const activeBlockId = useActiveBlockId();
   const { setBlocks, setActiveBlockId } = useEditorActions();
-  const handleDrop = useCallback2((dragId, dropId) => {
+  const handleDrop = useCallback((dragId, dropId) => {
     const from = blocks.findIndex((b) => b.id === dragId);
     const to = blocks.findIndex((b) => b.id === dropId);
     if (from === -1 || to === -1) return;
@@ -595,10 +495,10 @@ function Editor({
   className,
   placeholder = "Start writing..."
 }) {
-  const blockRefs = useRef4(/* @__PURE__ */ new Map());
-  const hydratedBlocks = useRef4(/* @__PURE__ */ new Set());
-  const prevEditable = useRef4(editable);
-  const store = useMemo3(
+  const blockRefs = useRef3(/* @__PURE__ */ new Map());
+  const hydratedBlocks = useRef3(/* @__PURE__ */ new Set());
+  const prevEditable = useRef3(editable);
+  const store = useMemo2(
     () => createEditorStore({ initialBlocks: seedBlocks }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
@@ -649,10 +549,10 @@ function Editor({
 }
 
 // src/hooks/useSelection.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback2 } from "react";
 import { flatToSelection as flatToSelection2 } from "@reiwuzen/blocky";
 function useSelection(block) {
-  return useCallback3(() => {
+  return useCallback2(() => {
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
     const start = Math.min(sel.anchorOffset, sel.focusOffset);
@@ -661,6 +561,93 @@ function useSelection(block) {
     return result.ok ? result.value : null;
   }, [block]);
 }
+
+// src/hooks/useBlockKeyboard.ts
+import { useCallback as useCallback3 } from "react";
+import {
+  splitBlock,
+  mergeBlocks,
+  flatToPosition,
+  applyMarkdownTransform,
+  indentBlock,
+  outdentBlock
+} from "@reiwuzen/blocky";
+function useBlockKeyboard({ block, onFocus }) {
+  const { createBlockAfter: createBlockAfter2, removeBlock, updateBlock } = useEditorActions();
+  const blocks = useBlocks();
+  return useCallback3((e) => {
+    const fresh = blocks.find((b) => b.id === block.id) ?? block;
+    const sel = window.getSelection();
+    const flat = sel?.anchorOffset ?? 0;
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      flatToPosition(fresh, flat).match(
+        ({ nodeIndex, offset }) => {
+          splitBlock(fresh, nodeIndex, offset).match(
+            ([original, newBlock]) => {
+              updateBlock(original);
+              const newId = createBlockAfter2(fresh.id, "paragraph");
+              if (newId) {
+                updateBlock({ ...newBlock, id: newId });
+                onFocus(newId);
+                setTimeout(() => {
+                  document.querySelector(`[data-block-id="${newId}"]`)?.focus();
+                }, 0);
+              }
+            },
+            () => {
+            }
+          );
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === "Backspace" && flat === 0) {
+      const index = blocks.findIndex((b) => b.id === fresh.id);
+      if (index === 0) return;
+      const prev = blocks[index - 1];
+      if (prev.type === "code" || prev.type === "equation") return;
+      e.preventDefault();
+      mergeBlocks(prev, fresh).match(
+        (merged) => {
+          updateBlock(merged);
+          removeBlock(fresh.id);
+          onFocus(merged.id);
+          setTimeout(() => {
+            document.querySelector(`[data-block-id="${merged.id}"]`)?.focus();
+          }, 0);
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === " ") {
+      applyMarkdownTransform(fresh, flat).match(
+        ({ block: transformed, converted }) => {
+          if (converted) {
+            e.preventDefault();
+            updateBlock(transformed);
+          }
+        },
+        () => {
+        }
+      );
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const fn = e.shiftKey ? outdentBlock : indentBlock;
+      fn(fresh).match(
+        (b) => updateBlock(b),
+        () => {
+        }
+      );
+    }
+  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
+}
 export {
   Block,
   BlockList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reiwuzen/blocky-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React UI layer for @reiwuzen/blocky — composable block editor components.",
   "author": "Rei WuZen",
   "license": "ISC",