@reiwuzen/blocky-react 1.0.0

package/dist/index.cjs

@@ -0,0 +1,706 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Block: () => Block,
+  BlockList: () => BlockList,
+  BlockTypeSwitcher: () => BlockTypeSwitcher,
+  DragHandle: () => DragHandle,
+  EditableContent: () => EditableContent,
+  Editor: () => Editor,
+  FormatToolbar: () => FormatToolbar,
+  domToNodes: () => domToNodes,
+  nodesToHtml: () => nodesToHtml,
+  useActiveBlockId: () => useActiveBlockId,
+  useBlockKeyboard: () => useBlockKeyboard,
+  useBlocks: () => useBlocks,
+  useEditor: () => useEditor,
+  useEditorActions: () => useEditorActions,
+  useSelection: () => useSelection
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/editor.tsx
+var import_react6 = require("react");
+var import_blocky5 = require("@reiwuzen/blocky");
+
+// src/store/editor-store.ts
+var import_zustand = require("zustand");
+var import_blocky = require("@reiwuzen/blocky");
+function createEditorStore(config = {}) {
+  return (0, import_zustand.create)((set, get) => ({
+    blocks: config.initialBlocks ?? [],
+    activeBlockId: null,
+    setBlocks: (blocks) => {
+      set({ blocks });
+      config.onChange?.(blocks);
+    },
+    updateBlock: (block) => {
+      const blocks = get().blocks.map((b) => b.id === block.id ? block : b);
+      set({ blocks });
+      config.onChange?.(blocks);
+    },
+    insertAfter: (afterId, type = "paragraph") => {
+      const result = (0, import_blocky.insertBlockAfter)(get().blocks, afterId, type);
+      if (!result.ok) return null;
+      const { blocks, newId } = result.value;
+      set({ blocks, activeBlockId: newId });
+      config.onChange?.(blocks);
+      return newId;
+    },
+    removeBlock: (id) => {
+      const { blocks, prevId } = (0, import_blocky.deleteBlock)(get().blocks, id);
+      set({ blocks, activeBlockId: prevId });
+      config.onChange?.(blocks);
+      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 });
+      config.onChange?.(blocks);
+    },
+    move: (id, direction) => {
+      (0, import_blocky.moveBlock)(get().blocks, id, direction).match(
+        (blocks) => {
+          set({ blocks });
+          config.onChange?.(blocks);
+        },
+        () => {
+        }
+      );
+    },
+    setActiveBlockId: (id) => set({ activeBlockId: id })
+  }));
+}
+
+// src/components/blockList.tsx
+var import_react5 = require("react");
+
+// src/hooks/useEditor.ts
+var import_react = require("react");
+var import_zustand2 = require("zustand");
+function useEditor(selector) {
+  const store = (0, import_react.useContext)(EditorContext);
+  if (!store) throw new Error("useEditor must be used inside <Editor />");
+  return (0, import_zustand2.useStore)(store, selector);
+}
+function useBlocks() {
+  return useEditor((s) => s.blocks);
+}
+function useActiveBlockId() {
+  return useEditor((s) => s.activeBlockId);
+}
+function useEditorActions() {
+  const setBlocks = useEditor((s) => s.setBlocks);
+  const updateBlock = useEditor((s) => s.updateBlock);
+  const insertBlockAfter2 = useEditor((s) => s.insertAfter);
+  const removeBlock = useEditor((s) => s.removeBlock);
+  const duplicateBlock2 = useEditor((s) => s.duplicate);
+  const moveBlock2 = useEditor((s) => s.move);
+  const setActiveBlockId = useEditor((s) => s.setActiveBlockId);
+  return (0, import_react.useMemo)(() => ({
+    setBlocks,
+    updateBlock,
+    insertBlockAfter: insertBlockAfter2,
+    removeBlock,
+    duplicateBlock: duplicateBlock2,
+    moveBlock: moveBlock2,
+    setActiveBlockId
+  }), [
+    setBlocks,
+    updateBlock,
+    insertBlockAfter2,
+    removeBlock,
+    duplicateBlock2,
+    moveBlock2,
+    setActiveBlockId
+  ]);
+}
+
+// src/components/block.tsx
+var import_react4 = require("react");
+
+// 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 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 = insertBlockAfter2(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, insertBlockAfter2, 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();
+  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 }] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "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)
+    }
+  );
+}
+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("");
+}
+function nodesToHtml(nodes) {
+  return nodes.map((n) => {
+    if (n.type === "code") return `<code><span>${esc(n.text)}</span></code>`;
+    if (n.type === "equation") return `<span class="blocky-equation">${esc(n.latex)}</span>`;
+    let inner = `<span>${esc(n.text)}</span>`;
+    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;
+  }).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: "" }];
+}
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/components/drag/DragHandle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DragHandle({ blockId, onDragStart }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "blocky-drag-handle",
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", blockId);
+        onDragStart(blockId);
+      },
+      title: "Drag to reorder",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "2", cy: "2", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "2", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "2", cy: "8", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "8", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "2", cy: "14", r: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "8", cy: "14", r: "1.5" })
+      ] })
+    }
+  );
+}
+
+// src/components/toolbar/BlockTypeSwitcher.tsx
+var import_blocky3 = require("@reiwuzen/blocky");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var BLOCK_TYPES = [
+  { type: "paragraph", label: "Text" },
+  { type: "heading1", label: "H1" },
+  { type: "heading2", label: "H2" },
+  { type: "heading3", label: "H3" },
+  { type: "bullet", label: "Bullet" },
+  { type: "number", label: "Number" },
+  { type: "todo", label: "Todo" },
+  { type: "code", label: "Code" },
+  { type: "equation", label: "Equation" }
+];
+function BlockTypeSwitcher({ block, onClose }) {
+  const { updateBlock } = useEditorActions();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "blocky-type-switcher", children: BLOCK_TYPES.map(({ type, label }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      className: `blocky-type-option ${block.type === type ? "blocky-type-option--active" : ""}`,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        (0, import_blocky3.changeBlockType)(block, type).match(
+          (b) => {
+            updateBlock(b);
+            onClose();
+          },
+          () => {
+          }
+        );
+      },
+      children: label
+    },
+    type
+  )) });
+}
+
+// src/components/toolbar/FormatToolbar.tsx
+var import_react3 = 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 { updateBlock } = useEditorActions();
+  (0, import_react3.useEffect)(() => {
+    const onSelectionChange = () => {
+      const sel = window.getSelection();
+      if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+        setPos(null);
+        return;
+      }
+      const range = sel.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      setPos({
+        top: rect.top + window.scrollY - 44,
+        left: rect.left + window.scrollX + rect.width / 2
+      });
+    };
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => document.removeEventListener("selectionchange", onSelectionChange);
+  }, []);
+  if (!pos) return null;
+  const applyFormat = (fn) => {
+    const sel = window.getSelection();
+    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(
+      (nodeSel) => fn(block.content, nodeSel).match(
+        (content) => updateBlock({ ...block, content }),
+        () => {
+        }
+      ),
+      () => {
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ref,
+      className: "blocky-format-toolbar",
+      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)("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" })
+      ]
+    }
+  );
+}
+
+// src/components/block.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Block({
+  block,
+  isActive,
+  editable,
+  onFocus,
+  onDragStart,
+  onDrop,
+  blockRefs,
+  hydratedBlocks
+}) {
+  const [showSwitcher, setShowSwitcher] = (0, import_react4.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react4.useState)(false);
+  const { updateBlock } = useEditorActions();
+  const { className, placeholder } = blockMeta(block);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `blocky-block-row ${isDragOver ? "blocky-drag-over" : ""}`,
+      onDragOver: (e) => {
+        e.preventDefault();
+        setIsDragOver(true);
+      },
+      onDragLeave: () => setIsDragOver(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setIsDragOver(false);
+        const dragId = e.dataTransfer.getData("text/plain");
+        if (dragId !== block.id) onDrop(dragId, block.id);
+      },
+      children: [
+        editable && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "blocky-gutter", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DragHandle, { blockId: block.id, onDragStart }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              className: "blocky-type-btn",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setShowSwitcher((v) => !v);
+              },
+              title: "Change block type",
+              children: "\u229E"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "blocky-block-wrapper", children: [
+          block.type === "bullet" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "blocky-bullet-marker", children: "\u2022" }),
+          block.type === "number" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "blocky-number-marker", children: "1." }),
+          block.type === "todo" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              className: "blocky-todo-checkbox",
+              checked: !!block.meta.checked,
+              onChange: () => {
+                import("@reiwuzen/blocky").then(({ toggleTodo }) => {
+                  toggleTodo(block).match(
+                    (b) => updateBlock(b),
+                    () => {
+                    }
+                  );
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            EditableContent,
+            {
+              block,
+              className,
+              placeholder,
+              editable,
+              onFocus,
+              blockRefs,
+              hydratedBlocks
+            }
+          ),
+          editable && isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FormatToolbar, { block }),
+          editable && showSwitcher && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BlockTypeSwitcher, { block, onClose: () => setShowSwitcher(false) })
+        ] })
+      ]
+    }
+  );
+}
+function blockMeta(block) {
+  switch (block.type) {
+    case "heading1":
+      return { className: "blocky-h1", placeholder: "Heading 1" };
+    case "heading2":
+      return { className: "blocky-h2", placeholder: "Heading 2" };
+    case "heading3":
+      return { className: "blocky-h3", placeholder: "Heading 3" };
+    case "bullet":
+      return { className: "blocky-list-content", placeholder: "List item" };
+    case "number":
+      return { className: "blocky-list-content", placeholder: "List item" };
+    case "todo":
+      return { className: "blocky-list-content", placeholder: "To-do" };
+    case "code":
+      return { className: "blocky-code-content", placeholder: "" };
+    case "equation":
+      return { className: "blocky-equation-content", placeholder: "LaTeX" };
+    default:
+      return { className: "blocky-paragraph", placeholder: "Type something..." };
+  }
+}
+
+// src/components/blockList.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function BlockList({ editable, blockRefs, hydratedBlocks }) {
+  const blocks = useBlocks();
+  const activeBlockId = useActiveBlockId();
+  const { setBlocks, setActiveBlockId } = useEditorActions();
+  const handleDrop = (0, import_react5.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;
+    const next = [...blocks];
+    const [moved] = next.splice(from, 1);
+    next.splice(to, 0, moved);
+    setBlocks(next);
+  }, [blocks, setBlocks]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "blocky-block-list", children: blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    Block,
+    {
+      block,
+      isActive: block.id === activeBlockId,
+      editable,
+      onFocus: setActiveBlockId,
+      onDragStart: setActiveBlockId,
+      onDrop: handleDrop,
+      blockRefs,
+      hydratedBlocks
+    },
+    block.id
+  )) });
+}
+
+// src/components/editor.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var EditorContext = (0, import_react6.createContext)(null);
+function Editor({
+  blocks: seedBlocks,
+  onChange,
+  editable = true,
+  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)(
+    () => createEditorStore({ initialBlocks: seedBlocks }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  (0, import_react6.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(
+        (b) => state.setBlocks([b]),
+        () => {
+        }
+      );
+    }
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    const wasEditable = prevEditable.current;
+    prevEditable.current = editable;
+    if (!wasEditable || editable) return;
+    const storeBlocks = store.getState().blocks;
+    const serialized = storeBlocks.map((block) => {
+      const el = blockRefs.current.get(block.id);
+      if (!el) return block;
+      let content;
+      if (block.type === "code") content = [{ type: "code", text: el.textContent ?? "" }];
+      else if (block.type === "equation") content = [{ type: "equation", latex: el.textContent ?? "" }];
+      else content = domToNodes(el);
+      return { ...block, content };
+    });
+    onChange?.(serialized);
+  }, [editable, onChange, store]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EditorContext.Provider, { value: store, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: `blocky-editor ${!editable ? "blocky-editor--readonly" : ""} ${className ?? ""}`,
+      "data-placeholder": placeholder,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        BlockList,
+        {
+          editable,
+          blockRefs,
+          hydratedBlocks
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useSelection.ts
+var import_react7 = require("react");
+var import_blocky6 = require("@reiwuzen/blocky");
+function useSelection(block) {
+  return (0, import_react7.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);
+    return result.ok ? result.value : null;
+  }, [block]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Block,
+  BlockList,
+  BlockTypeSwitcher,
+  DragHandle,
+  EditableContent,
+  Editor,
+  FormatToolbar,
+  domToNodes,
+  nodesToHtml,
+  useActiveBlockId,
+  useBlockKeyboard,
+  useBlocks,
+  useEditor,
+  useEditorActions,
+  useSelection
+});