@reiwuzen/blocky-react 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -49,7 +49,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/editor.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_blocky5 = require("@reiwuzen/blocky");
 
 // src/store/editor-store.ts
@@ -68,8 +68,8 @@ function createEditorStore(config = {}) {
       set({ blocks });
       config.onChange?.(blocks);
     },
-    insertAfter: (afterId, type = "paragraph") => {
-      const result = (0, import_blocky.insertBlockAfter)(get().blocks, afterId, type);
+    createBlockAfter: (afterId, type = "paragraph") => {
+      const result = (0, import_blocky.createBlockAfter)(get().blocks, afterId, type);
       if (!result.ok) return null;
       const { blocks, newId } = result.value;
       set({ blocks, activeBlockId: newId });
@@ -83,15 +83,10 @@ function createEditorStore(config = {}) {
       return prevId;
     },
     duplicate: (id) => {
-      const block = get().blocks.find((b) => b.id === id);
-      if (!block) return;
-      const dup = (0, import_blocky.duplicateBlock)(block, crypto.randomUUID());
-      const result = (0, import_blocky.insertBlockAfter)(get().blocks, id, block.type);
-      if (!result.ok) return;
-      const blocks = result.value.blocks.map(
-        (b) => b.id === result.value.newId ? dup : b
-      );
-      set({ blocks, activeBlockId: dup.id });
+      const res = (0, import_blocky.duplicateBlockAfter)(get().blocks, id);
+      if (res == null) return;
+      const blocks = [...res.value.blocks];
+      set({ blocks, activeBlockId: res.value.newFocusId });
       config.onChange?.(blocks);
     },
     move: (id, direction) => {
@@ -109,7 +104,7 @@ function createEditorStore(config = {}) {
 }
 
 // src/components/blockList.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/hooks/useEditor.ts
 var import_react = require("react");
@@ -128,7 +123,7 @@ function useActiveBlockId() {
 function useEditorActions() {
   const setBlocks = useEditor((s) => s.setBlocks);
   const updateBlock = useEditor((s) => s.updateBlock);
-  const insertBlockAfter2 = useEditor((s) => s.insertAfter);
+  const createBlockAfter2 = useEditor((s) => s.createBlockAfter);
   const removeBlock = useEditor((s) => s.removeBlock);
   const duplicateBlock2 = useEditor((s) => s.duplicate);
   const moveBlock2 = useEditor((s) => s.move);
@@ -136,7 +131,7 @@ function useEditorActions() {
   return (0, import_react.useMemo)(() => ({
     setBlocks,
     updateBlock,
-    insertBlockAfter: insertBlockAfter2,
+    createBlockAfter: createBlockAfter2,
     removeBlock,
     duplicateBlock: duplicateBlock2,
     moveBlock: moveBlock2,
@@ -144,7 +139,7 @@ function useEditorActions() {
   }), [
     setBlocks,
     updateBlock,
-    insertBlockAfter2,
+    createBlockAfter2,
     removeBlock,
     duplicateBlock2,
     moveBlock2,
@@ -153,13 +148,16 @@ function useEditorActions() {
 }
 
 // src/components/block.tsx
-var import_react4 = require("react");
+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 { insertBlockAfter: insertBlockAfter2, removeBlock, updateBlock } = useEditorActions();
+  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;
@@ -172,7 +170,7 @@ function useBlockKeyboard({ block, onFocus }) {
           (0, import_blocky2.splitBlock)(fresh, nodeIndex, offset).match(
             ([original, newBlock]) => {
               updateBlock(original);
-              const newId = insertBlockAfter2(fresh.id, "paragraph");
+              const newId = createBlockAfter2(fresh.id, "paragraph");
               if (newId) {
                 updateBlock({ ...newBlock, id: newId });
                 onFocus(newId);
@@ -232,63 +230,79 @@ function useBlockKeyboard({ block, onFocus }) {
         }
       );
     }
-  }, [block.id, blocks, insertBlockAfter2, removeBlock, updateBlock, onFocus]);
+  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
 }
 
 // src/components/blocks/editableContent.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function EditableContent({
-  block,
-  className,
-  placeholder,
-  editable,
-  onFocus,
-  blockRefs,
-  hydratedBlocks
-}) {
-  const { updateBlock } = useEditorActions();
-  const blocks = useBlocks();
+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 });
-  const initialText = getInitialText(block.content);
-  const handleInput = (e) => {
-    const el = e.currentTarget;
-    const text = el.textContent ?? "";
-    updateBlock({ ...block, content: [{ type: "text", text }] });
-  };
+  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
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
+    StaticSpan,
     {
-      "data-block-id": block.id,
-      className: `blocky-block-content ${className ?? ""}`,
-      "data-placeholder": placeholder,
-      contentEditable: editable,
-      suppressContentEditableWarning: true,
-      ref: (el) => {
-        if (!el) return;
-        blockRefs.current.set(block.id, el);
-        if (hydratedBlocks.current.has(block.id)) return;
-        el.innerHTML = nodesToHtml(block.content);
-        hydratedBlocks.current.add(block.id);
-      },
-      onInput: handleInput,
-      onKeyDown: handleKeyDown,
-      onFocus: () => onFocus(block.id)
+      blockId: block.id,
+      className: className ?? "",
+      placeholder: placeholder ?? "",
+      editable,
+      initialHtml,
+      blockRefs,
+      keyDownRef,
+      focusRef
     }
   );
 }
-function getInitialText(nodes) {
-  return nodes.map((n) => {
-    if (n.type === "text") return n.text;
-    if (n.type === "code") return n.text;
-    if (n.type === "equation") return n.latex;
-    return "";
-  }).join("");
-}
+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 nodesToHtml(nodes) {
   return nodes.map((n) => {
-    if (n.type === "code") return `<code><span>${esc(n.text)}</span></code>`;
+    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 = `<span>${esc(n.text)}</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>`;
@@ -409,14 +423,14 @@ function BlockTypeSwitcher({ block, onClose }) {
 }
 
 // src/components/toolbar/FormatToolbar.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_blocky4 = require("@reiwuzen/blocky");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function FormatToolbar({ block }) {
-  const ref = (0, import_react3.useRef)(null);
-  const [pos, setPos] = (0, import_react3.useState)(null);
+  const ref = (0, import_react4.useRef)(null);
+  const [pos, setPos] = (0, import_react4.useState)(null);
   const { updateBlock } = useEditorActions();
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const onSelectionChange = () => {
       const sel = window.getSelection();
       if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
@@ -482,8 +496,8 @@ function Block({
   blockRefs,
   hydratedBlocks
 }) {
-  const [showSwitcher, setShowSwitcher] = (0, import_react4.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react4.useState)(false);
+  const [showSwitcher, setShowSwitcher] = (0, import_react5.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react5.useState)(false);
   const { updateBlock } = useEditorActions();
   const { className, placeholder } = blockMeta(block);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -545,8 +559,7 @@ function Block({
               placeholder,
               editable,
               onFocus,
-              blockRefs,
-              hydratedBlocks
+              blockRefs
             }
           ),
           editable && isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormatToolbar, { block }),
@@ -585,7 +598,7 @@ function BlockList({ editable, blockRefs, hydratedBlocks }) {
   const blocks = useBlocks();
   const activeBlockId = useActiveBlockId();
   const { setBlocks, setActiveBlockId } = useEditorActions();
-  const handleDrop = (0, import_react5.useCallback)((dragId, dropId) => {
+  const handleDrop = (0, import_react6.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;
@@ -612,7 +625,7 @@ function BlockList({ editable, blockRefs, hydratedBlocks }) {
 
 // src/components/editor.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var EditorContext = (0, import_react6.createContext)(null);
+var EditorContext = (0, import_react7.createContext)(null);
 function Editor({
   blocks: seedBlocks,
   onChange,
@@ -620,15 +633,15 @@ function Editor({
   className,
   placeholder = "Start writing..."
 }) {
-  const blockRefs = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
-  const hydratedBlocks = (0, import_react6.useRef)(/* @__PURE__ */ new Set());
-  const prevEditable = (0, import_react6.useRef)(editable);
-  const store = (0, import_react6.useMemo)(
+  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)(
     () => createEditorStore({ initialBlocks: seedBlocks }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     const state = store.getState();
     if (seedBlocks && seedBlocks.length > 0) {
       state.setBlocks(seedBlocks);
@@ -640,7 +653,7 @@ function Editor({
       );
     }
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const wasEditable = prevEditable.current;
     prevEditable.current = editable;
     if (!wasEditable || editable) return;
@@ -674,10 +687,10 @@ function Editor({
 }
 
 // src/hooks/useSelection.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_blocky6 = require("@reiwuzen/blocky");
 function useSelection(block) {
-  return (0, import_react7.useCallback)(() => {
+  return (0, import_react8.useCallback)(() => {
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
     const start = Math.min(sel.anchorOffset, sel.focusOffset);

package/dist/index.d.cts

@@ -8,7 +8,7 @@ type EditorStore = {
     activeBlockId: string | null;
     setBlocks: (blocks: AnyBlock[]) => void;
     updateBlock: (block: AnyBlock) => void;
-    insertAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
+    createBlockAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
     removeBlock: (id: string) => string;
     duplicate: (id: string) => void;
     move: (id: string, direction: "up" | "down") => void;
@@ -54,10 +54,15 @@ type Props$3 = {
     placeholder?: string;
     editable: boolean;
     onFocus: (id: string) => void;
-    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
-    hydratedBlocks: React.MutableRefObject<Set<string>>;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
 };
-declare function EditableContent({ block, className, placeholder, editable, onFocus, blockRefs, hydratedBlocks, }: Props$3): react_jsx_runtime.JSX.Element;
+/**
+ * The inner span is wrapped in a memo that NEVER re-renders after mount.
+ * React.memo(() => true) tells React "props didn't change, skip re-render".
+ * 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 nodesToHtml(nodes: Node[]): string;
 declare function domToNodes(el: HTMLElement): Node[];
 
@@ -84,7 +89,7 @@ declare function useActiveBlockId(): string | null;
 declare function useEditorActions(): {
     setBlocks: (blocks: _reiwuzen_blocky.AnyBlock[]) => void;
     updateBlock: (block: _reiwuzen_blocky.AnyBlock) => void;
-    insertBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
+    createBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
     removeBlock: (id: string) => string;
     duplicateBlock: (id: string) => void;
     moveBlock: (id: string, direction: "up" | "down") => void;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ type EditorStore = {
     activeBlockId: string | null;
     setBlocks: (blocks: AnyBlock[]) => void;
     updateBlock: (block: AnyBlock) => void;
-    insertAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
+    createBlockAfter: (afterId: string, type?: AnyBlock["type"]) => string | null;
     removeBlock: (id: string) => string;
     duplicate: (id: string) => void;
     move: (id: string, direction: "up" | "down") => void;
@@ -54,10 +54,15 @@ type Props$3 = {
     placeholder?: string;
     editable: boolean;
     onFocus: (id: string) => void;
-    blockRefs: React.MutableRefObject<Map<string, HTMLSpanElement>>;
-    hydratedBlocks: React.MutableRefObject<Set<string>>;
+    blockRefs: React.RefObject<Map<string, HTMLSpanElement>>;
 };
-declare function EditableContent({ block, className, placeholder, editable, onFocus, blockRefs, hydratedBlocks, }: Props$3): react_jsx_runtime.JSX.Element;
+/**
+ * The inner span is wrapped in a memo that NEVER re-renders after mount.
+ * React.memo(() => true) tells React "props didn't change, skip re-render".
+ * 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 nodesToHtml(nodes: Node[]): string;
 declare function domToNodes(el: HTMLElement): Node[];
 
@@ -84,7 +89,7 @@ declare function useActiveBlockId(): string | null;
 declare function useEditorActions(): {
     setBlocks: (blocks: _reiwuzen_blocky.AnyBlock[]) => void;
     updateBlock: (block: _reiwuzen_blocky.AnyBlock) => void;
-    insertBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
+    createBlockAfter: (afterId: string, type?: _reiwuzen_blocky.AnyBlock["type"]) => string | null;
     removeBlock: (id: string) => string;
     duplicateBlock: (id: string) => void;
     moveBlock: (id: string, direction: "up" | "down") => void;

package/dist/index.js

@@ -1,13 +1,13 @@
 // src/components/editor.tsx
-import { createContext, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { createContext, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef4 } from "react";
 import { createBlock } from "@reiwuzen/blocky";
 
 // src/store/editor-store.ts
 import { create } from "zustand";
 import {
-  insertBlockAfter,
+  createBlockAfter,
+  duplicateBlockAfter,
   deleteBlock,
-  duplicateBlock,
   moveBlock
 } from "@reiwuzen/blocky";
 function createEditorStore(config = {}) {
@@ -23,8 +23,8 @@ function createEditorStore(config = {}) {
       set({ blocks });
       config.onChange?.(blocks);
     },
-    insertAfter: (afterId, type = "paragraph") => {
-      const result = insertBlockAfter(get().blocks, afterId, type);
+    createBlockAfter: (afterId, type = "paragraph") => {
+      const result = createBlockAfter(get().blocks, afterId, type);
       if (!result.ok) return null;
       const { blocks, newId } = result.value;
       set({ blocks, activeBlockId: newId });
@@ -38,15 +38,10 @@ function createEditorStore(config = {}) {
       return prevId;
     },
     duplicate: (id) => {
-      const block = get().blocks.find((b) => b.id === id);
-      if (!block) return;
-      const dup = duplicateBlock(block, crypto.randomUUID());
-      const result = insertBlockAfter(get().blocks, id, block.type);
-      if (!result.ok) return;
-      const blocks = result.value.blocks.map(
-        (b) => b.id === result.value.newId ? dup : b
-      );
-      set({ blocks, activeBlockId: dup.id });
+      const res = duplicateBlockAfter(get().blocks, id);
+      if (res == null) return;
+      const blocks = [...res.value.blocks];
+      set({ blocks, activeBlockId: res.value.newFocusId });
       config.onChange?.(blocks);
     },
     move: (id, direction) => {
@@ -83,7 +78,7 @@ function useActiveBlockId() {
 function useEditorActions() {
   const setBlocks = useEditor((s) => s.setBlocks);
   const updateBlock = useEditor((s) => s.updateBlock);
-  const insertBlockAfter2 = useEditor((s) => s.insertAfter);
+  const createBlockAfter2 = useEditor((s) => s.createBlockAfter);
   const removeBlock = useEditor((s) => s.removeBlock);
   const duplicateBlock2 = useEditor((s) => s.duplicate);
   const moveBlock2 = useEditor((s) => s.move);
@@ -91,7 +86,7 @@ function useEditorActions() {
   return useMemo(() => ({
     setBlocks,
     updateBlock,
-    insertBlockAfter: insertBlockAfter2,
+    createBlockAfter: createBlockAfter2,
     removeBlock,
     duplicateBlock: duplicateBlock2,
     moveBlock: moveBlock2,
@@ -99,7 +94,7 @@ function useEditorActions() {
   }), [
     setBlocks,
     updateBlock,
-    insertBlockAfter2,
+    createBlockAfter2,
     removeBlock,
     duplicateBlock2,
     moveBlock2,
@@ -110,6 +105,9 @@ 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 {
@@ -121,7 +119,7 @@ import {
   outdentBlock
 } from "@reiwuzen/blocky";
 function useBlockKeyboard({ block, onFocus }) {
-  const { insertBlockAfter: insertBlockAfter2, removeBlock, updateBlock } = useEditorActions();
+  const { createBlockAfter: createBlockAfter2, removeBlock, updateBlock } = useEditorActions();
   const blocks = useBlocks();
   return useCallback((e) => {
     const fresh = blocks.find((b) => b.id === block.id) ?? block;
@@ -134,7 +132,7 @@ function useBlockKeyboard({ block, onFocus }) {
           splitBlock(fresh, nodeIndex, offset).match(
             ([original, newBlock]) => {
               updateBlock(original);
-              const newId = insertBlockAfter2(fresh.id, "paragraph");
+              const newId = createBlockAfter2(fresh.id, "paragraph");
               if (newId) {
                 updateBlock({ ...newBlock, id: newId });
                 onFocus(newId);
@@ -194,63 +192,79 @@ function useBlockKeyboard({ block, onFocus }) {
         }
       );
     }
-  }, [block.id, blocks, insertBlockAfter2, removeBlock, updateBlock, onFocus]);
+  }, [block.id, blocks, createBlockAfter2, removeBlock, updateBlock, onFocus]);
 }
 
 // src/components/blocks/editableContent.tsx
 import { jsx } from "react/jsx-runtime";
-function EditableContent({
-  block,
-  className,
-  placeholder,
-  editable,
-  onFocus,
-  blockRefs,
-  hydratedBlocks
-}) {
-  const { updateBlock } = useEditorActions();
-  const blocks = useBlocks();
+function EditableContent(props) {
+  const { block, className, placeholder, editable, onFocus, blockRefs } = props;
+  const keyDownRef = useRef(() => {
+  });
+  const focusRef = useRef(() => {
+  });
   const handleKeyDown = useBlockKeyboard({ block, onFocus });
-  const initialText = getInitialText(block.content);
-  const handleInput = (e) => {
-    const el = e.currentTarget;
-    const text = el.textContent ?? "";
-    updateBlock({ ...block, content: [{ type: "text", text }] });
-  };
+  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
+  );
   return /* @__PURE__ */ jsx(
-    "span",
+    StaticSpan,
     {
-      "data-block-id": block.id,
-      className: `blocky-block-content ${className ?? ""}`,
-      "data-placeholder": placeholder,
-      contentEditable: editable,
-      suppressContentEditableWarning: true,
-      ref: (el) => {
-        if (!el) return;
-        blockRefs.current.set(block.id, el);
-        if (hydratedBlocks.current.has(block.id)) return;
-        el.innerHTML = nodesToHtml(block.content);
-        hydratedBlocks.current.add(block.id);
-      },
-      onInput: handleInput,
-      onKeyDown: handleKeyDown,
-      onFocus: () => onFocus(block.id)
+      blockId: block.id,
+      className: className ?? "",
+      placeholder: placeholder ?? "",
+      editable,
+      initialHtml,
+      blockRefs,
+      keyDownRef,
+      focusRef
     }
   );
 }
-function getInitialText(nodes) {
-  return nodes.map((n) => {
-    if (n.type === "text") return n.text;
-    if (n.type === "code") return n.text;
-    if (n.type === "equation") return n.latex;
-    return "";
-  }).join("");
-}
+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 nodesToHtml(nodes) {
   return nodes.map((n) => {
-    if (n.type === "code") return `<code><span>${esc(n.text)}</span></code>`;
+    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 = `<span>${esc(n.text)}</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>`;
@@ -371,11 +385,11 @@ function BlockTypeSwitcher({ block, onClose }) {
 }
 
 // src/components/toolbar/FormatToolbar.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef as useRef2, 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 = useRef(null);
+  const ref = useRef2(null);
   const [pos, setPos] = useState(null);
   const { updateBlock } = useEditorActions();
   useEffect(() => {
@@ -507,8 +521,7 @@ function Block({
               placeholder,
               editable,
               onFocus,
-              blockRefs,
-              hydratedBlocks
+              blockRefs
             }
           ),
           editable && isActive && /* @__PURE__ */ jsx5(FormatToolbar, { block }),
@@ -582,10 +595,10 @@ function Editor({
   className,
   placeholder = "Start writing..."
 }) {
-  const blockRefs = useRef3(/* @__PURE__ */ new Map());
-  const hydratedBlocks = useRef3(/* @__PURE__ */ new Set());
-  const prevEditable = useRef3(editable);
-  const store = useMemo2(
+  const blockRefs = useRef4(/* @__PURE__ */ new Map());
+  const hydratedBlocks = useRef4(/* @__PURE__ */ new Set());
+  const prevEditable = useRef4(editable);
+  const store = useMemo3(
     () => createEditorStore({ initialBlocks: seedBlocks }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reiwuzen/blocky-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React UI layer for @reiwuzen/blocky — composable block editor components.",
   "author": "Rei WuZen",
   "license": "ISC",
@@ -30,7 +30,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@reiwuzen/blocky": "^1.2.0",
+    "@reiwuzen/blocky": "^1.3.0",
     "zustand": "^5.0.0"
   },
   "devDependencies": {