@reiwuzen/blocky-react 1.0.0

package/dist/index.js

@@ -0,0 +1,667 @@
+// src/components/editor.tsx
+import { createContext, useEffect as useEffect2, useLayoutEffect, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { createBlock } from "@reiwuzen/blocky";
+
+// src/store/editor-store.ts
+import { create } from "zustand";
+import {
+  insertBlockAfter,
+  deleteBlock,
+  duplicateBlock,
+  moveBlock
+} from "@reiwuzen/blocky";
+function createEditorStore(config = {}) {
+  return 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 = 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 } = 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 = 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 });
+      config.onChange?.(blocks);
+    },
+    move: (id, direction) => {
+      moveBlock(get().blocks, id, direction).match(
+        (blocks) => {
+          set({ blocks });
+          config.onChange?.(blocks);
+        },
+        () => {
+        }
+      );
+    },
+    setActiveBlockId: (id) => set({ activeBlockId: id })
+  }));
+}
+
+// src/components/blockList.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/hooks/useEditor.ts
+import { useContext, useMemo } from "react";
+import { useStore } from "zustand";
+function useEditor(selector) {
+  const store = useContext(EditorContext);
+  if (!store) throw new Error("useEditor must be used inside <Editor />");
+  return 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 useMemo(() => ({
+    setBlocks,
+    updateBlock,
+    insertBlockAfter: insertBlockAfter2,
+    removeBlock,
+    duplicateBlock: duplicateBlock2,
+    moveBlock: moveBlock2,
+    setActiveBlockId
+  }), [
+    setBlocks,
+    updateBlock,
+    insertBlockAfter2,
+    removeBlock,
+    duplicateBlock2,
+    moveBlock2,
+    setActiveBlockId
+  ]);
+}
+
+// src/components/block.tsx
+import { useState as useState2 } 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 { insertBlockAfter: insertBlockAfter2, 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 = 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();
+      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, insertBlockAfter2, 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();
+  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__ */ 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
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DragHandle({ blockId, onDragStart }) {
+  return /* @__PURE__ */ jsx2(
+    "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__ */ jsxs("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "currentColor", children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "2", cy: "2", r: "1.5" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "2", r: "1.5" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "2", cy: "8", r: "1.5" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "1.5" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "2", cy: "14", r: "1.5" }),
+        /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "14", r: "1.5" })
+      ] })
+    }
+  );
+}
+
+// src/components/toolbar/BlockTypeSwitcher.tsx
+import { changeBlockType } from "@reiwuzen/blocky";
+import { jsx as jsx3 } from "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__ */ jsx3("div", { className: "blocky-type-switcher", children: BLOCK_TYPES.map(({ type, label }) => /* @__PURE__ */ jsx3(
+    "button",
+    {
+      className: `blocky-type-option ${block.type === type ? "blocky-type-option--active" : ""}`,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        changeBlockType(block, type).match(
+          (b) => {
+            updateBlock(b);
+            onClose();
+          },
+          () => {
+          }
+        );
+      },
+      children: label
+    },
+    type
+  )) });
+}
+
+// src/components/toolbar/FormatToolbar.tsx
+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 = useRef(null);
+  const [pos, setPos] = useState(null);
+  const { updateBlock } = useEditorActions();
+  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);
+    flatToSelection(block, start, end).match(
+      (nodeSel) => fn(block.content, nodeSel).match(
+        (content) => updateBlock({ ...block, content }),
+        () => {
+        }
+      ),
+      () => {
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      className: "blocky-format-toolbar",
+      style: { top: pos.top, left: pos.left },
+      onMouseDown: (e) => e.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn", onMouseDown: () => applyFormat(toggleBold), children: "B" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--italic", onMouseDown: () => applyFormat(toggleItalic), children: "I" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--underline", onMouseDown: () => applyFormat(toggleUnderline), children: "U" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--strike", onMouseDown: () => applyFormat(toggleStrikethrough), children: "S" }),
+        /* @__PURE__ */ jsx4("div", { className: "blocky-toolbar-divider" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--highlight", onMouseDown: () => applyFormat((n, s) => toggleHighlight(n, s, "yellow")), children: "H" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--red", onMouseDown: () => applyFormat((n, s) => toggleColor(n, s, "red")), children: "A" }),
+        /* @__PURE__ */ jsx4("button", { className: "blocky-toolbar-btn blocky-toolbar-btn--blue", onMouseDown: () => applyFormat((n, s) => toggleColor(n, s, "blue")), children: "A" })
+      ]
+    }
+  );
+}
+
+// src/components/block.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Block({
+  block,
+  isActive,
+  editable,
+  onFocus,
+  onDragStart,
+  onDrop,
+  blockRefs,
+  hydratedBlocks
+}) {
+  const [showSwitcher, setShowSwitcher] = useState2(false);
+  const [isDragOver, setIsDragOver] = useState2(false);
+  const { updateBlock } = useEditorActions();
+  const { className, placeholder } = blockMeta(block);
+  return /* @__PURE__ */ jsxs3(
+    "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__ */ jsxs3("div", { className: "blocky-gutter", children: [
+          /* @__PURE__ */ jsx5(DragHandle, { blockId: block.id, onDragStart }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              className: "blocky-type-btn",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                setShowSwitcher((v) => !v);
+              },
+              title: "Change block type",
+              children: "\u229E"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "blocky-block-wrapper", children: [
+          block.type === "bullet" && /* @__PURE__ */ jsx5("span", { className: "blocky-bullet-marker", children: "\u2022" }),
+          block.type === "number" && /* @__PURE__ */ jsx5("span", { className: "blocky-number-marker", children: "1." }),
+          block.type === "todo" && /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "checkbox",
+              className: "blocky-todo-checkbox",
+              checked: !!block.meta.checked,
+              onChange: () => {
+                import("@reiwuzen/blocky").then(({ toggleTodo }) => {
+                  toggleTodo(block).match(
+                    (b) => updateBlock(b),
+                    () => {
+                    }
+                  );
+                });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            EditableContent,
+            {
+              block,
+              className,
+              placeholder,
+              editable,
+              onFocus,
+              blockRefs,
+              hydratedBlocks
+            }
+          ),
+          editable && isActive && /* @__PURE__ */ jsx5(FormatToolbar, { block }),
+          editable && showSwitcher && /* @__PURE__ */ jsx5(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
+import { jsx as jsx6 } from "react/jsx-runtime";
+function BlockList({ editable, blockRefs, hydratedBlocks }) {
+  const blocks = useBlocks();
+  const activeBlockId = useActiveBlockId();
+  const { setBlocks, setActiveBlockId } = useEditorActions();
+  const handleDrop = useCallback2((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__ */ jsx6("div", { className: "blocky-block-list", children: blocks.map((block) => /* @__PURE__ */ jsx6(
+    Block,
+    {
+      block,
+      isActive: block.id === activeBlockId,
+      editable,
+      onFocus: setActiveBlockId,
+      onDragStart: setActiveBlockId,
+      onDrop: handleDrop,
+      blockRefs,
+      hydratedBlocks
+    },
+    block.id
+  )) });
+}
+
+// src/components/editor.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var EditorContext = createContext(null);
+function Editor({
+  blocks: seedBlocks,
+  onChange,
+  editable = true,
+  className,
+  placeholder = "Start writing..."
+}) {
+  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
+    []
+  );
+  useLayoutEffect(() => {
+    const state = store.getState();
+    if (seedBlocks && seedBlocks.length > 0) {
+      state.setBlocks(seedBlocks);
+    } else if (state.blocks.length === 0) {
+      createBlock("paragraph").match(
+        (b) => state.setBlocks([b]),
+        () => {
+        }
+      );
+    }
+  }, []);
+  useEffect2(() => {
+    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__ */ jsx7(EditorContext.Provider, { value: store, children: /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: `blocky-editor ${!editable ? "blocky-editor--readonly" : ""} ${className ?? ""}`,
+      "data-placeholder": placeholder,
+      children: /* @__PURE__ */ jsx7(
+        BlockList,
+        {
+          editable,
+          blockRefs,
+          hydratedBlocks
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useSelection.ts
+import { useCallback as useCallback3 } from "react";
+import { flatToSelection as flatToSelection2 } from "@reiwuzen/blocky";
+function useSelection(block) {
+  return useCallback3(() => {
+    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 = flatToSelection2(block, start, end);
+    return result.ok ? result.value : null;
+  }, [block]);
+}
+export {
+  Block,
+  BlockList,
+  BlockTypeSwitcher,
+  DragHandle,
+  EditableContent,
+  Editor,
+  FormatToolbar,
+  domToNodes,
+  nodesToHtml,
+  useActiveBlockId,
+  useBlockKeyboard,
+  useBlocks,
+  useEditor,
+  useEditorActions,
+  useSelection
+};