@buildingbite/blocks 0.1.0

package/dist/index.js

@@ -0,0 +1,2514 @@
+'use strict';
+
+var React9 = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React9__default = /*#__PURE__*/_interopDefault(React9);
+
+// src/BlockEditor.tsx
+
+// src/types/blocks.ts
+function createEmptyParagraphBlock() {
+  return {
+    id: generateBlockId(),
+    type: "paragraph",
+    content: [{ text: "" }]
+  };
+}
+function generateBlockId() {
+  return `block_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+}
+function textNodesToPlainText(nodes) {
+  return nodes.map((node) => node.text).join("");
+}
+function generatePreviewFromBlocks(blocks, maxLength = 150) {
+  const textParts = [];
+  for (const block of blocks) {
+    if (textParts.join(" ").length >= maxLength) break;
+    switch (block.type) {
+      case "paragraph":
+      case "heading":
+      case "quote":
+        textParts.push(textNodesToPlainText(block.content));
+        break;
+      case "dialogue":
+        for (const line of block.lines) {
+          textParts.push(`${line.speaker}: ${textNodesToPlainText(line.content)}`);
+        }
+        break;
+      case "list":
+        textParts.push(textNodesToPlainText(block.content));
+        break;
+    }
+  }
+  const fullText = textParts.join(" ").replace(/\s+/g, " ").trim();
+  return fullText.slice(0, maxLength);
+}
+function countBlocksCharacters(blocks) {
+  let count = 0;
+  for (const block of blocks) {
+    switch (block.type) {
+      case "paragraph":
+      case "heading":
+      case "quote":
+        count += textNodesToPlainText(block.content).length;
+        break;
+      case "dialogue":
+        for (const line of block.lines) {
+          count += line.speaker.length + textNodesToPlainText(line.content).length;
+        }
+        break;
+      case "list":
+        count += textNodesToPlainText(block.content).length;
+        break;
+    }
+  }
+  return count;
+}
+var menuItems = [
+  {
+    type: "paragraph",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Type, { size: 20 }),
+    label: "\uBCF8\uBB38",
+    description: "\uC77C\uBC18 \uD14D\uC2A4\uD2B8",
+    category: "basic"
+  },
+  {
+    type: "heading",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { size: 20 }),
+    label: "\uC81C\uBAA9",
+    description: "\uC139\uC158 \uC81C\uBAA9",
+    category: "basic"
+  },
+  {
+    type: "quote",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { size: 20 }),
+    label: "\uC778\uC6A9\uBB38",
+    description: "\uC778\uC6A9 \uD14D\uC2A4\uD2B8",
+    category: "basic"
+  },
+  {
+    type: "list",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { size: 20 }),
+    label: "\uBAA9\uB85D",
+    description: "\uAE00\uBA38\uB9AC \uBAA9\uB85D",
+    category: "basic"
+  },
+  {
+    type: "divider",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 20 }),
+    label: "\uAD6C\uBD84\uC120",
+    description: "\uC139\uC158 \uAD6C\uBD84",
+    category: "basic"
+  },
+  {
+    type: "image",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { size: 20 }),
+    label: "\uC774\uBBF8\uC9C0",
+    description: "\uB2E8\uC77C \uC774\uBBF8\uC9C0",
+    category: "basic"
+  },
+  {
+    type: "image-gallery",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 }),
+    label: "\uC774\uBBF8\uC9C0 \uAC24\uB7EC\uB9AC",
+    description: "\uC5EC\uB7EC \uC774\uBBF8\uC9C0 \uADF8\uB9AC\uB4DC/\uC2AC\uB77C\uC774\uB4DC",
+    category: "advanced"
+  },
+  {
+    type: "link-card",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { size: 20 }),
+    label: "\uB9C1\uD06C \uCE74\uB4DC",
+    description: "OG \uBBF8\uB9AC\uBCF4\uAE30 \uCE74\uB4DC",
+    category: "advanced"
+  },
+  {
+    type: "link-embed",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Youtube, { size: 20 }),
+    label: "\uC784\uBCA0\uB4DC",
+    description: "YouTube, Twitter \uB4F1",
+    category: "advanced"
+  },
+  {
+    type: "dialogue",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { size: 20 }),
+    label: "\uB300\uC0AC",
+    description: "\uCE90\uB9AD\uD130 \uB300\uD654",
+    category: "advanced"
+  }
+];
+function BlockMenu({ position, onClose, onSelect }) {
+  const menuRef = React9.useRef(null);
+  React9.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+  const handleSelect = (item) => {
+    onSelect(item.type);
+  };
+  const adjustedPosition = {
+    x: Math.min(position.x, typeof window !== "undefined" ? window.innerWidth - 280 : position.x),
+    y: Math.min(position.y, typeof window !== "undefined" ? window.innerHeight - 400 : position.y)
+  };
+  const basicItems = menuItems.filter((item) => item.category === "basic");
+  const advancedItems = menuItems.filter((item) => item.category === "advanced");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "fixed z-50 bg-white rounded-xl shadow-xl border border-gray-200 py-2 w-64 max-h-96 overflow-y-auto",
+      style: {
+        left: adjustedPosition.x,
+        top: adjustedPosition.y
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-400 uppercase", children: "\uBE14\uB85D \uCD94\uAC00" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y divide-gray-100", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-1 text-xs text-gray-400", children: "\uAE30\uBCF8" }),
+            basicItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handleSelect(item),
+                className: "w-full px-3 py-2 flex items-center gap-3 hover:bg-gray-50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: item.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: item.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: item.description })
+                  ] })
+                ]
+              },
+              item.type
+            ))
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-1 text-xs text-gray-400", children: "\uACE0\uAE09" }),
+            advancedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => handleSelect(item),
+                className: "w-full px-3 py-2 flex items-center gap-3 hover:bg-gray-50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500", children: item.icon }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: item.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: item.description })
+                  ] })
+                ]
+              },
+              item.type
+            ))
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var EditorContext = React9.createContext(null);
+function EditorProvider({ services, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(EditorContext.Provider, { value: services, children });
+}
+function useEditorServices() {
+  const context = React9.useContext(EditorContext);
+  if (!context) {
+    throw new Error("useEditorServices must be used within an EditorProvider");
+  }
+  return context;
+}
+function useOptionalEditorServices() {
+  return React9.useContext(EditorContext);
+}
+function DefaultImage({
+  src,
+  alt,
+  fill,
+  width,
+  height,
+  className,
+  style
+}) {
+  if (fill) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt,
+        className,
+        style: {
+          ...style,
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      alt,
+      width,
+      height,
+      className,
+      style
+    }
+  );
+}
+function textNodesToHtml(nodes) {
+  return nodes.map((node) => {
+    let html = node.text;
+    html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    if (node.bold) html = `<strong>${html}</strong>`;
+    if (node.italic) html = `<em>${html}</em>`;
+    if (node.underline) html = `<u>${html}</u>`;
+    if (node.strikethrough) html = `<s>${html}</s>`;
+    if (node.link) html = `<a href="${node.link}" class="text-blue-600 underline">${html}</a>`;
+    return html;
+  }).join("");
+}
+function htmlToTextNodes(html) {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const text = div.textContent || "";
+  return [{ text }];
+}
+function TextBlockEditor({ block, onUpdate, onMergeWithPrevious, onSplitBlock, onPasteBlocks, onDeleteEmptyBlock, onFocusPrevious, onFocusNext, isOnlyBlock }) {
+  const editorRef = React9.useRef(null);
+  const [uploading, setUploading] = React9.useState(false);
+  const isComposingRef = React9.useRef(false);
+  const lastContentRef = React9.useRef("");
+  const services = useEditorServices();
+  const ImageComponent = services.ImageComponent || DefaultImage;
+  const isCursorAtStart = React9.useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return false;
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed) return false;
+    const editor = editorRef.current;
+    if (!editor) return false;
+    if (range.startOffset === 0) {
+      const startNode = range.startContainer;
+      if (startNode === editor || startNode === editor.firstChild) {
+        return true;
+      }
+      if (startNode.nodeType === Node.TEXT_NODE) {
+        let node = startNode;
+        while (node.previousSibling === null && node.parentNode && node.parentNode !== editor) {
+          node = node.parentNode;
+        }
+        if (node.previousSibling === null) return true;
+      }
+    }
+    return false;
+  }, []);
+  const isCursorAtEnd = React9.useCallback(() => {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return false;
+    const range = selection.getRangeAt(0);
+    if (!range.collapsed) return false;
+    const editor = editorRef.current;
+    if (!editor) return false;
+    const endNode = range.endContainer;
+    const endOffset = range.endOffset;
+    if (endNode.nodeType === Node.TEXT_NODE) {
+      if (endOffset !== endNode.textContent?.length) return false;
+      let node = endNode;
+      while (node.nextSibling === null && node.parentNode && node.parentNode !== editor) {
+        node = node.parentNode;
+      }
+      if (node.nextSibling === null) return true;
+    } else if (endNode === editor) {
+      return endOffset === editor.childNodes.length;
+    }
+    return false;
+  }, []);
+  if (block.type === "image") {
+    const imageBlock = block;
+    const handleUpload = async (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      try {
+        setUploading(true);
+        const url = await services.uploadImage(file, "editor");
+        onUpdate({
+          image: { ...imageBlock.image, url }
+        });
+      } catch (error) {
+        console.error("Image upload error:", error);
+        alert("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+      } finally {
+        setUploading(false);
+      }
+    };
+    const handleRemove = () => {
+      onUpdate({ image: { url: "", alt: "", caption: "" } });
+    };
+    const handleAlignmentChange = (alignment) => {
+      onUpdate({ alignment });
+    };
+    if (!imageBlock.image.url) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col items-center justify-center w-full h-40 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 hover:bg-gray-50 transition-colors", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "file",
+            accept: "image/*",
+            onChange: handleUpload,
+            className: "hidden",
+            disabled: uploading
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 border-2 border-gray-400 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC5C5\uB85C\uB4DC \uC911..." })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 24, className: "mx-auto mb-2 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC" })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `relative ${imageBlock.alignment === "full-width" ? "w-full" : "max-w-md"} ${imageBlock.alignment === "left" ? "mr-auto" : imageBlock.alignment === "right" ? "ml-auto" : "mx-auto"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ImageComponent,
+              {
+                src: imageBlock.image.url,
+                alt: imageBlock.image.alt || "",
+                fill: true,
+                className: "object-contain rounded-lg"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleRemove,
+                className: "absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("left"),
+            className: `p-1.5 rounded ${imageBlock.alignment === "left" ? "bg-gray-200" : "hover:bg-gray-100"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("center"),
+            className: `p-1.5 rounded ${imageBlock.alignment === "center" ? "bg-gray-200" : "hover:bg-gray-100"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("right"),
+            className: `p-1.5 rounded ${imageBlock.alignment === "right" ? "bg-gray-200" : "hover:bg-gray-100"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("full-width"),
+            className: `p-1.5 rounded ${imageBlock.alignment === "full-width" ? "bg-gray-200" : "hover:bg-gray-100"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, { size: 14 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: imageBlock.image.caption || "",
+          onChange: (e) => onUpdate({ image: { ...imageBlock.image, caption: e.target.value } }),
+          placeholder: "\uCEA1\uC158 (\uC120\uD0DD)",
+          className: "w-full text-center text-sm text-gray-500 border-none outline-none"
+        }
+      )
+    ] });
+  }
+  const isListBlock = block.type === "list";
+  const textBlock = block;
+  const content = textBlock.content;
+  React9.useEffect(() => {
+    if (editorRef.current && !isComposingRef.current) {
+      const html = textNodesToHtml(content);
+      const currentHtml = editorRef.current.innerHTML;
+      if (html !== lastContentRef.current && currentHtml !== html) {
+        editorRef.current.innerHTML = html || "";
+        lastContentRef.current = html;
+      }
+    }
+  }, [content]);
+  const handlePaste = React9.useCallback((e) => {
+    const text = e.clipboardData.getData("text/plain");
+    const lines = text.split("\n");
+    if (lines.length <= 1 || !onPasteBlocks) return;
+    e.preventDefault();
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    const editor = editorRef.current;
+    if (!editor) return;
+    if (!range.collapsed) {
+      range.deleteContents();
+    }
+    const beforeRange = document.createRange();
+    beforeRange.setStart(editor, 0);
+    beforeRange.setEnd(range.startContainer, range.startOffset);
+    const beforeText = beforeRange.toString();
+    const afterRange = document.createRange();
+    afterRange.setStart(range.endContainer, range.endOffset);
+    afterRange.setEnd(editor, editor.childNodes.length);
+    const afterText = afterRange.toString();
+    const firstLineText = beforeText + lines[0];
+    const firstLineHtml = textNodesToHtml([{ text: firstLineText }]);
+    editor.innerHTML = firstLineHtml;
+    lastContentRef.current = firstLineHtml;
+    onPasteBlocks(
+      [{ text: firstLineText }],
+      lines.slice(1, -1),
+      [{ text: lines[lines.length - 1] + afterText }]
+    );
+  }, [onPasteBlocks]);
+  const handleKeyDown = React9.useCallback((e) => {
+    if (e.key === "Delete" || e.key === "Backspace") {
+      const sel = window.getSelection();
+      if (sel && !sel.isCollapsed && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const editor = editorRef.current;
+        if (editor && (!editor.contains(range.startContainer) || !editor.contains(range.endContainer))) {
+          return;
+        }
+      }
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "b") {
+      e.preventDefault();
+      document.execCommand("bold");
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "i") {
+      e.preventDefault();
+      document.execCommand("italic");
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "u") {
+      e.preventDefault();
+      document.execCommand("underline");
+      return;
+    }
+    if (e.key === "ArrowUp" && onFocusPrevious && isCursorAtStart()) {
+      e.preventDefault();
+      onFocusPrevious();
+      return;
+    }
+    if (e.key === "ArrowDown" && onFocusNext && isCursorAtEnd()) {
+      e.preventDefault();
+      onFocusNext();
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey && onSplitBlock) {
+      if (isComposingRef.current) return;
+      e.preventDefault();
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const range = selection.getRangeAt(0);
+      const editor = editorRef.current;
+      if (!editor) return;
+      if (!range.collapsed) {
+        range.deleteContents();
+      }
+      const beforeRange = document.createRange();
+      beforeRange.setStart(editor, 0);
+      beforeRange.setEnd(range.startContainer, range.startOffset);
+      const afterRange = document.createRange();
+      afterRange.setStart(range.endContainer, range.endOffset);
+      afterRange.setEnd(editor, editor.childNodes.length);
+      const beforeText = beforeRange.toString();
+      const afterText = afterRange.toString();
+      const beforeHtml = textNodesToHtml([{ text: beforeText }]);
+      editor.innerHTML = beforeHtml;
+      lastContentRef.current = beforeHtml;
+      onSplitBlock(
+        [{ text: beforeText }],
+        [{ text: afterText }]
+      );
+    } else if (e.key === "Backspace" && onMergeWithPrevious) {
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const range = selection.getRangeAt(0);
+      if (range.collapsed && range.startOffset === 0) {
+        const editor = editorRef.current;
+        if (editor && (range.startContainer === editor.firstChild || range.startContainer === editor)) {
+          e.preventDefault();
+          onMergeWithPrevious();
+        }
+      }
+    } else if (e.key === "Delete" && onDeleteEmptyBlock) {
+      const editor = editorRef.current;
+      const text = editor?.textContent || "";
+      if (text.length === 0) {
+        e.preventDefault();
+        onDeleteEmptyBlock();
+      }
+    }
+  }, [onSplitBlock, onMergeWithPrevious, onDeleteEmptyBlock, onFocusPrevious, onFocusNext, isCursorAtStart, isCursorAtEnd]);
+  const handleInput = React9.useCallback(() => {
+    if (editorRef.current) {
+      const html = editorRef.current.innerHTML;
+      const nodes = htmlToTextNodes(html);
+      lastContentRef.current = textNodesToHtml(nodes);
+      onUpdate({ content: nodes });
+    }
+  }, [onUpdate]);
+  const handleCompositionStart = React9.useCallback(() => {
+    isComposingRef.current = true;
+  }, []);
+  const handleCompositionEnd = React9.useCallback(() => {
+    isComposingRef.current = false;
+  }, []);
+  const getBlockStyle = () => {
+    switch (block.type) {
+      case "heading":
+        const headingBlock = block;
+        switch (headingBlock.level) {
+          case 1:
+            return "text-3xl font-bold";
+          case 2:
+            return "text-2xl font-semibold";
+          case 3:
+            return "text-xl font-semibold";
+          default:
+            return "text-2xl font-semibold";
+        }
+      case "quote":
+        return "border-l-4 border-gray-300 pl-4 text-gray-600 italic";
+      default:
+        return "text-base";
+    }
+  };
+  const getPlaceholder = () => {
+    switch (block.type) {
+      case "heading":
+        return "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694...";
+      case "quote":
+        return "\uC778\uC6A9\uBB38\uC744 \uC785\uB825\uD558\uC138\uC694...";
+      case "list":
+        return "\uBAA9\uB85D \uD56D\uBAA9...";
+      default:
+        return isOnlyBlock ? "\uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694..." : "";
+    }
+  };
+  if (isListBlock) {
+    const listBlock = block;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 select-none text-gray-500 mt-0.5", children: listBlock.listType === "ordered" ? "1." : "\u2022" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onPaste: handlePaste,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd,
+          "data-placeholder": getPlaceholder(),
+          className: "flex-1 outline-none min-h-[1.5em] empty:before:content-[attr(data-placeholder)] empty:before:text-gray-300"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: editorRef,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      "data-placeholder": getPlaceholder(),
+      className: `outline-none min-h-[1.5em] ${getBlockStyle()} empty:before:content-[attr(data-placeholder)] empty:before:text-gray-300`
+    }
+  );
+}
+function ImageGalleryEditor({ block, onUpdate }) {
+  const [uploading, setUploading] = React9.useState(false);
+  const services = useEditorServices();
+  const ImageComponent = services.ImageComponent || DefaultImage;
+  const handleUpload = async (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    try {
+      setUploading(true);
+      const uploadedImages = [];
+      for (const file of Array.from(files)) {
+        const url = await services.uploadImage(file, "gallery");
+        uploadedImages.push({
+          url,
+          alt: "",
+          caption: ""
+        });
+      }
+      onUpdate({
+        images: [...block.images, ...uploadedImages]
+      });
+    } catch (error) {
+      console.error("Image upload error:", error);
+      alert("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleRemoveImage = (index) => {
+    const newImages = block.images.filter((_, i) => i !== index);
+    onUpdate({ images: newImages });
+  };
+  const handleLayoutChange = (layout) => {
+    onUpdate({ layout });
+  };
+  const handleColumnsChange = (columns) => {
+    onUpdate({ columns });
+  };
+  const handleImageCaptionChange = (index, caption) => {
+    const newImages = [...block.images];
+    newImages[index] = { ...newImages[index], caption };
+    onUpdate({ images: newImages });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 bg-gray-100 rounded-lg p-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleLayoutChange("grid"),
+            className: `p-2 rounded flex items-center gap-1 text-sm ${block.layout === "grid" ? "bg-white shadow" : "hover:bg-gray-200"}`,
+            title: "\uADF8\uB9AC\uB4DC",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid, { size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uADF8\uB9AC\uB4DC" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleLayoutChange("horizontal-scroll"),
+            className: `p-2 rounded flex items-center gap-1 text-sm ${block.layout === "horizontal-scroll" ? "bg-white shadow" : "hover:bg-gray-200"}`,
+            title: "\uAC00\uB85C \uC2A4\uD06C\uB864",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoveHorizontal, { size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uAC00\uB85C \uC2A4\uD06C\uB864" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleLayoutChange("masonry"),
+            className: `p-2 rounded flex items-center gap-1 text-sm ${block.layout === "masonry" ? "bg-white shadow" : "hover:bg-gray-200"}`,
+            title: "\uB9E4\uC18C\uB2C8",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutGrid, { size: 16 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uB9E4\uC18C\uB2C8" })
+            ]
+          }
+        )
+      ] }),
+      (block.layout === "grid" || block.layout === "masonry") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC5F4:" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: block.columns || 2,
+            onChange: (e) => handleColumnsChange(parseInt(e.target.value)),
+            className: "px-2 py-1 border border-gray-200 rounded text-sm",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 2, children: "2\uC5F4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 3, children: "3\uC5F4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 4, children: "4\uC5F4" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    block.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `grid gap-2 ${block.layout === "horizontal-scroll" ? "grid-flow-col auto-cols-[200px] overflow-x-auto pb-2" : block.columns === 2 ? "grid-cols-2" : block.columns === 3 ? "grid-cols-3" : "grid-cols-4"}`,
+        children: block.images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative aspect-square", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ImageComponent,
+              {
+                src: image.url,
+                alt: image.alt || "",
+                fill: true,
+                className: "object-cover rounded-lg"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => handleRemoveImage(index),
+                className: "absolute top-1 right-1 p-1 bg-red-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: image.caption || "",
+              onChange: (e) => handleImageCaptionChange(index, e.target.value),
+              placeholder: "\uCEA1\uC158",
+              className: "w-full mt-1 px-2 py-1 text-xs border border-gray-200 rounded"
+            }
+          )
+        ] }, index))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400 hover:bg-gray-50 transition-colors", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "file",
+          accept: "image/*",
+          multiple: true,
+          onChange: handleUpload,
+          className: "hidden",
+          disabled: uploading
+        }
+      ),
+      uploading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 border-2 border-gray-400 border-t-transparent rounded-full animate-spin mx-auto mb-2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC5C5\uB85C\uB4DC \uC911..." })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 24, className: "mx-auto mb-2 text-gray-400" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC774\uBBF8\uC9C0 \uCD94\uAC00 (\uC5EC\uB7EC \uAC1C \uC120\uD0DD \uAC00\uB2A5)" })
+      ] })
+    ] })
+  ] });
+}
+function LinkCardEditor({ block, onUpdate }) {
+  const [urlInput, setUrlInput] = React9.useState(block.url || "");
+  const [loading, setLoading] = React9.useState(false);
+  const [error, setError] = React9.useState(null);
+  const services = useEditorServices();
+  const ImageComponent = services.ImageComponent || DefaultImage;
+  const fetchOGData = async (url) => {
+    try {
+      setLoading(true);
+      setError(null);
+      const ogData = await services.fetchOGData(url);
+      onUpdate({ url, ogData });
+    } catch (err) {
+      console.error("OG fetch error:", err);
+      setError("\uB9C1\uD06C \uC815\uBCF4\uB97C \uAC00\uC838\uC62C \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      onUpdate({ url, ogData: void 0 });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (urlInput.trim()) {
+      fetchOGData(urlInput.trim());
+    }
+  };
+  const handleRefresh = () => {
+    if (block.url) {
+      fetchOGData(block.url);
+    }
+  };
+  if (!block.url || !block.ogData && !loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { size: 18, className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "url",
+              value: urlInput,
+              onChange: (e) => setUrlInput(e.target.value),
+              placeholder: "https://example.com",
+              className: "w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200",
+              disabled: loading
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: loading || !urlInput.trim(),
+            className: "px-4 py-2.5 bg-gray-900 text-white rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 18, className: "animate-spin" }) : "\uD655\uC778"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: block.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "block border border-gray-200 rounded-lg overflow-hidden hover:border-gray-300 transition-colors",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          block.ogData?.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-40 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ImageComponent,
+            {
+              src: block.ogData.image,
+              alt: "",
+              fill: true,
+              className: "object-cover"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4", children: [
+            block.ogData?.siteName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mb-1", children: block.ogData.siteName }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-gray-900 line-clamp-2 mb-1", children: block.ogData?.title || block.url }),
+            block.ogData?.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 line-clamp-2", children: block.ogData.description }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-2 text-xs text-gray-400", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: 12 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: new URL(block.url).hostname })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: handleRefresh,
+          disabled: loading,
+          className: "flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 14, className: loading ? "animate-spin" : "" }),
+            "\uC0C8\uB85C\uACE0\uCE68"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setUrlInput("");
+            onUpdate({ url: "", ogData: void 0 });
+          },
+          className: "text-sm text-red-500 hover:text-red-600",
+          children: "\uBCC0\uACBD"
+        }
+      )
+    ] })
+  ] });
+}
+function extractYouTubeId(url) {
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+    /youtube\.com\/shorts\/([^&\n?#]+)/
+  ];
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1];
+  }
+  return null;
+}
+function detectEmbedType(url) {
+  if (url.includes("youtube.com") || url.includes("youtu.be")) {
+    return "youtube";
+  }
+  if (url.includes("twitter.com") || url.includes("x.com")) {
+    return "twitter";
+  }
+  return "generic";
+}
+function LinkEmbedEditor({ block, onUpdate }) {
+  const [urlInput, setUrlInput] = React9.useState(block.url || "");
+  const [error, setError] = React9.useState(null);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const url = urlInput.trim();
+    if (!url) return;
+    const embedType = detectEmbedType(url);
+    setError(null);
+    if (embedType === "youtube") {
+      const videoId = extractYouTubeId(url);
+      if (videoId) {
+        onUpdate({ url, embedType, videoId });
+      } else {
+        setError("\uC62C\uBC14\uB978 YouTube URL\uC774 \uC544\uB2D9\uB2C8\uB2E4.");
+      }
+    } else if (embedType === "twitter") {
+      onUpdate({ url, embedType });
+    } else {
+      onUpdate({ url, embedType: "generic" });
+    }
+  };
+  const renderEmbed = () => {
+    switch (block.embedType) {
+      case "youtube":
+        if (block.videoId) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full aspect-video rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              src: `https://www.youtube.com/embed/${block.videoId}`,
+              title: "YouTube video",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true,
+              className: "absolute inset-0 w-full h-full"
+            }
+          ) });
+        }
+        break;
+      case "twitter":
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-lg p-4 bg-gray-50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Twitter, { size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Twitter \uC784\uBCA0\uB4DC" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 truncate", children: block.url })
+        ] });
+      case "generic":
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-lg p-4 bg-gray-50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "\uC678\uBD80 \uB9C1\uD06C" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600 truncate", children: block.url })
+        ] });
+    }
+    return null;
+  };
+  if (!block.url) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Youtube, { size: 18, className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "url",
+              value: urlInput,
+              onChange: (e) => setUrlInput(e.target.value),
+              placeholder: "YouTube, Twitter URL\uC744 \uC785\uB825\uD558\uC138\uC694",
+              className: "w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: !urlInput.trim(),
+            className: "px-4 py-2.5 bg-gray-900 text-white rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "\uD655\uC778"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-500", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-xs text-gray-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Youtube, { size: 14 }),
+          " YouTube"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Twitter, { size: 14 }),
+          " Twitter/X"
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    renderEmbed(),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          setUrlInput("");
+          onUpdate({ url: "", videoId: void 0 });
+        },
+        className: "text-sm text-red-500 hover:text-red-600",
+        children: "\uBCC0\uACBD"
+      }
+    ) })
+  ] });
+}
+var BUBBLE_COLORS = [
+  "#FEE500",
+  // 카카오 노란색
+  "#A8D8EA",
+  // 하늘색
+  "#FFB7B2",
+  // 연분홍
+  "#BAFFC9",
+  // 연두색
+  "#E2D1F9",
+  // 연보라
+  "#FFFFFF"
+  // 흰색
+];
+function DialogueEditor({ block, onUpdate }) {
+  const fileInputRefs = React9.useRef([]);
+  const [uploadingIndices, setUploadingIndices] = React9.useState(/* @__PURE__ */ new Set());
+  const [characters, setCharacters] = React9.useState([]);
+  const [showProfileMenu, setShowProfileMenu] = React9.useState(null);
+  const services = useEditorServices();
+  const ImageComponent = services.ImageComponent || DefaultImage;
+  React9.useEffect(() => {
+    if (services.getCharacters) {
+      services.getCharacters().then(setCharacters).catch(console.error);
+    }
+  }, [services]);
+  React9.useEffect(() => {
+    if (showProfileMenu === null) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (!target.closest(".profile-menu-container")) {
+        setShowProfileMenu(null);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [showProfileMenu]);
+  const handleSelectCharacter = (index, character) => {
+    handleUpdateLine(index, {
+      speaker: character.name,
+      profileImage: character.profileImage || void 0,
+      speakerColor: character.defaultColor
+    });
+    setShowProfileMenu(null);
+  };
+  const handleAddLine = () => {
+    const newLine = {
+      speaker: "",
+      content: [{ text: "" }],
+      speakerColor: block.style === "chat" ? "#FEE500" : void 0,
+      alignment: "left"
+    };
+    onUpdate({
+      lines: [...block.lines, newLine]
+    });
+  };
+  const handleRemoveLine = (index) => {
+    if (block.lines.length <= 1) return;
+    const newLines = block.lines.filter((_, i) => i !== index);
+    onUpdate({ lines: newLines });
+  };
+  const handleUpdateLine = (index, updates) => {
+    const newLines = block.lines.map(
+      (line, i) => i === index ? { ...line, ...updates } : line
+    );
+    onUpdate({ lines: newLines });
+  };
+  const handleSpeakerChange = (index, speaker) => {
+    const existingLine = block.lines.find(
+      (line, i) => i !== index && line.speaker.trim().toLowerCase() === speaker.trim().toLowerCase() && line.speaker.trim() !== ""
+    );
+    if (existingLine && speaker.trim() !== "") {
+      handleUpdateLine(index, {
+        speaker,
+        profileImage: existingLine.profileImage,
+        speakerColor: existingLine.speakerColor
+      });
+    } else {
+      handleUpdateLine(index, { speaker });
+    }
+  };
+  const handleContentChange = (index, text) => {
+    handleUpdateLine(index, { content: [{ text }] });
+  };
+  const handleColorChange = (index, color) => {
+    handleUpdateLine(index, { speakerColor: color || void 0 });
+  };
+  const handleAlignmentChange = (index, alignment) => {
+    handleUpdateLine(index, { alignment });
+  };
+  const handleProfileImageUpload = async (index, file) => {
+    setUploadingIndices((prev) => new Set(prev).add(index));
+    try {
+      const url = await services.uploadImage(file, "profile");
+      handleUpdateLine(index, { profileImage: url });
+    } catch (error) {
+      console.error("Profile image upload error:", error);
+      alert("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setUploadingIndices((prev) => {
+        const next = new Set(prev);
+        next.delete(index);
+        return next;
+      });
+    }
+  };
+  const handleRemoveProfileImage = (index) => {
+    handleUpdateLine(index, { profileImage: void 0 });
+  };
+  const handleStyleChange = (style) => {
+    const updatedLines = block.lines.map((line) => ({
+      ...line,
+      speakerColor: style === "chat" ? line.speakerColor || "#FEE500" : void 0,
+      alignment: style === "chat" ? line.alignment || "left" : void 0
+    }));
+    onUpdate({ style, lines: updatedLines });
+  };
+  const getLineText = (nodes) => {
+    return nodes.map((node) => node.text).join("");
+  };
+  const renderChatEditor = (line, index) => {
+    const isUploading = uploadingIndices.has(index);
+    const isRight = line.alignment === "right";
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-gray-50 rounded-lg space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 bg-gray-200 rounded p-0.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => handleAlignmentChange(index, "left"),
+              className: `p-1 rounded ${!isRight ? "bg-white shadow" : "hover:bg-gray-300"}`,
+              title: "\uC67C\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => handleAlignmentChange(index, "right"),
+              className: `p-1 rounded ${isRight ? "bg-white shadow" : "hover:bg-gray-300"}`,
+              title: "\uC624\uB978\uCABD \uC815\uB82C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: line.speaker,
+            onChange: (e) => handleSpeakerChange(index, e.target.value),
+            placeholder: "\uD654\uC790 \uC774\uB984",
+            className: "flex-1 px-2 py-1 text-sm font-medium border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-gray-200"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: BUBBLE_COLORS.map((color) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleColorChange(index, color),
+            className: `w-5 h-5 rounded-full border-2 transition-transform ${line.speakerColor === color ? "border-gray-600 scale-110" : "border-gray-300"}`,
+            style: { backgroundColor: color },
+            title: color
+          },
+          color
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleRemoveLine(index),
+            disabled: block.lines.length <= 1,
+            className: "p-1 text-gray-400 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed",
+            title: "\uB300\uC0AC \uC0AD\uC81C",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-start gap-2 ${isRight ? "flex-row-reverse" : ""}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 relative profile-menu-container", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              ref: (el) => {
+                fileInputRefs.current[index] = el;
+              },
+              onChange: (e) => {
+                const file = e.target.files?.[0];
+                if (file) handleProfileImageUpload(index, file);
+                e.target.value = "";
+                setShowProfileMenu(null);
+              },
+              className: "hidden"
+            }
+          ),
+          isUploading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 16, className: "text-gray-400 animate-spin" }) }) : line.profileImage ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-10 h-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ImageComponent,
+              {
+                src: line.profileImage,
+                alt: line.speaker || "\uD504\uB85C\uD544",
+                fill: true,
+                className: "rounded-full object-cover cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => handleRemoveProfileImage(index),
+                className: "absolute -top-1 -right-1 p-0.5 bg-red-500 text-white rounded-full hover:bg-red-600 z-10",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 10 })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setShowProfileMenu(showProfileMenu === index ? null : index),
+              className: "w-10 h-10 flex items-center justify-center bg-gray-200 rounded-full hover:bg-gray-300 transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { size: 16, className: "text-gray-400" })
+            }
+          ),
+          showProfileMenu === index && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full mt-1 left-0 z-50 bg-white border border-gray-200 rounded-lg shadow-lg py-1 min-w-[160px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => {
+                  fileInputRefs.current[index]?.click();
+                },
+                className: "w-full flex items-center gap-2 px-3 py-2 hover:bg-gray-100 text-left text-sm",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { size: 16, className: "text-gray-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uD504\uB85C\uD544 \uC0AC\uC9C4 \uC124\uC815" })
+                ]
+              }
+            ),
+            characters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 my-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1 text-xs text-gray-500", children: "\uCE90\uB9AD\uD130 \uC120\uD0DD" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-40 overflow-y-auto", children: characters.map((char) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => handleSelectCharacter(index, char),
+                  className: "w-full flex items-center gap-2 px-3 py-1.5 hover:bg-gray-100 text-left",
+                  children: [
+                    char.profileImage ? /* @__PURE__ */ jsxRuntime.jsx(
+                      ImageComponent,
+                      {
+                        src: char.profileImage,
+                        alt: char.name,
+                        width: 20,
+                        height: 20,
+                        className: "rounded-full object-cover"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold",
+                        style: { backgroundColor: char.defaultColor },
+                        children: char.name.charAt(0).toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm truncate flex-1", children: char.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "w-3 h-3 rounded-full border border-gray-300 flex-shrink-0",
+                        style: { backgroundColor: char.defaultColor }
+                      }
+                    )
+                  ]
+                },
+                char.id
+              )) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `flex-1 px-3 py-2 rounded-lg ${isRight ? "ml-8" : "mr-8"}`,
+            style: { backgroundColor: line.speakerColor || "#FEE500" },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "textarea",
+              {
+                value: getLineText(line.content),
+                onChange: (e) => handleContentChange(index, e.target.value),
+                placeholder: "\uB300\uC0AC\uB97C \uC785\uB825\uD558\uC138\uC694...",
+                rows: 2,
+                className: "w-full bg-transparent text-sm resize-none focus:outline-none",
+                style: { color: isLightColor(line.speakerColor || "#FEE500") ? "#000" : "#fff" }
+              }
+            )
+          }
+        )
+      ] })
+    ] }, index);
+  };
+  const renderSimpleEditor = (line, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        value: line.speaker,
+        onChange: (e) => handleSpeakerChange(index, e.target.value),
+        placeholder: "\uD654\uC790",
+        className: "w-24 px-2 py-1.5 text-sm font-bold border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-gray-200"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        value: getLineText(line.content),
+        onChange: (e) => handleContentChange(index, e.target.value),
+        placeholder: "\uB300\uC0AC\uB97C \uC785\uB825\uD558\uC138\uC694...",
+        rows: 1,
+        className: "flex-1 px-2 py-1.5 text-sm border border-gray-200 rounded focus:outline-none focus:ring-2 focus:ring-gray-200 resize-none"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => handleRemoveLine(index),
+        disabled: block.lines.length <= 1,
+        className: "p-1 text-gray-400 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed",
+        title: "\uB300\uC0AC \uC0AD\uC81C",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+      }
+    )
+  ] }, index);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "\uC2A4\uD0C0\uC77C:" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 bg-gray-100 rounded-lg p-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleStyleChange("chat"),
+            className: `p-1.5 rounded flex items-center gap-1 text-sm ${block.style === "chat" ? "bg-white shadow" : "hover:bg-gray-200"}`,
+            title: "\uCC44\uD305 \uC2A4\uD0C0\uC77C",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uCC44\uD305" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => handleStyleChange("play"),
+            className: `p-1.5 rounded flex items-center gap-1 text-sm ${block.style === "play" ? "bg-white shadow" : "hover:bg-gray-200"}`,
+            title: "\uD76C\uADF9 \uC2A4\uD0C0\uC77C",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Theater, { size: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uD76C\uADF9" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: block.lines.map(
+      (line, index) => block.style === "chat" ? renderChatEditor(line, index) : renderSimpleEditor(line, index)
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleAddLine,
+        className: "w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-400 hover:border-gray-400 hover:text-gray-500 transition-colors flex items-center justify-center gap-1",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "\uB300\uC0AC \uCD94\uAC00" })
+        ]
+      }
+    )
+  ] });
+}
+function isLightColor(hexColor) {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness > 128;
+}
+function DividerEditor({ block, onUpdate }) {
+  const [uploading, setUploading] = React9.useState(false);
+  const services = useEditorServices();
+  const ImageComponent = services.ImageComponent || DefaultImage;
+  const handleVariantChange = (variant) => {
+    const alignment = variant === "line" ? void 0 : block.alignment || "center";
+    onUpdate({ variant, customImage: variant === "custom-image" ? block.customImage : void 0, alignment });
+  };
+  const handleAlignmentChange = (alignment) => {
+    onUpdate({ alignment });
+  };
+  const handleImageUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    try {
+      setUploading(true);
+      const url = await services.uploadImage(file, "divider");
+      onUpdate({ variant: "custom-image", customImage: url, alignment: block.alignment || "center" });
+    } catch (error) {
+      console.error("Image upload error:", error);
+      alert("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4.");
+    } finally {
+      setUploading(false);
+    }
+  };
+  const handleRemoveImage = () => {
+    onUpdate({ variant: "line", customImage: void 0, alignment: void 0 });
+  };
+  const renderDivider = () => {
+    const alignClass = block.alignment === "left" ? "justify-start" : block.alignment === "right" ? "justify-end" : "justify-center";
+    switch (block.variant) {
+      case "line":
+        return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-black" });
+      case "short-line":
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${alignClass}`, children: /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-black w-1/5" }) });
+      case "dots":
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${alignClass} gap-2`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 bg-black rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 bg-black rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 bg-black rounded-full" })
+        ] });
+      case "custom-image":
+        if (block.customImage) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${alignClass}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-12 h-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ImageComponent,
+            {
+              src: block.customImage,
+              alt: "\uAD6C\uBD84\uC120",
+              fill: true,
+              className: "object-contain"
+            }
+          ) }) });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-black" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "border-t border-black" });
+    }
+  };
+  const showAlignment = block.variant !== "line";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-0.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleVariantChange("line"),
+            className: `px-2 py-1 rounded text-xs transition-colors ${block.variant === "line" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uC9C1\uC120",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleVariantChange("short-line"),
+            className: `px-2 py-1 rounded text-xs transition-colors ${block.variant === "short-line" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uC9E7\uC740 \uC120",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-3 border-t border-current" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleVariantChange("dots"),
+            className: `px-2 py-1 rounded text-xs transition-colors ${block.variant === "dots" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uC810",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: `px-2 py-1 rounded text-xs transition-colors cursor-pointer ${block.variant === "custom-image" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uCEE4\uC2A4\uD140 \uC774\uBBF8\uC9C0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "file",
+                  accept: "image/*",
+                  onChange: handleImageUpload,
+                  className: "hidden",
+                  disabled: uploading
+                }
+              ),
+              uploading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3.5 h-3.5 border border-gray-400 border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { size: 14 })
+            ]
+          }
+        )
+      ] }),
+      showAlignment && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center bg-gray-100 rounded-lg p-0.5 ml-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("left"),
+            className: `px-1.5 py-1 rounded text-xs transition-colors ${block.alignment === "left" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uC67C\uCABD",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignLeft, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("center"),
+            className: `px-1.5 py-1 rounded text-xs transition-colors ${!block.alignment || block.alignment === "center" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uAC00\uC6B4\uB370",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignCenter, { size: 12 })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleAlignmentChange("right"),
+            className: `px-1.5 py-1 rounded text-xs transition-colors ${block.alignment === "right" ? "bg-white shadow text-gray-900" : "text-gray-500 hover:text-gray-700"}`,
+            title: "\uC624\uB978\uCABD",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlignRight, { size: 12 })
+          }
+        )
+      ] })
+    ] }),
+    block.variant === "custom-image" && block.customImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleRemoveImage,
+        className: "text-xs text-gray-400 hover:text-red-500 flex items-center gap-1",
+        title: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\uC774\uBBF8\uC9C0 \uC81C\uAC70" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4", children: renderDivider() })
+  ] });
+}
+function BlockItem({
+  block,
+  blockIndex,
+  onUpdate,
+  onDelete,
+  onAddBlock,
+  onMergeWithPrevious,
+  onSplitBlock,
+  onPasteBlocks,
+  onDeleteEmptyBlock,
+  onFocusPrevious,
+  onFocusNext,
+  isOnlyBlock,
+  isSelected,
+  onSelect
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: block.id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const renderBlockContent = () => {
+    switch (block.type) {
+      case "paragraph":
+      case "heading":
+      case "quote":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TextBlockEditor,
+          {
+            block,
+            onUpdate,
+            onMergeWithPrevious,
+            onSplitBlock,
+            onPasteBlocks,
+            onDeleteEmptyBlock,
+            onFocusPrevious,
+            onFocusNext,
+            isOnlyBlock
+          }
+        );
+      case "list":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TextBlockEditor,
+          {
+            block,
+            onUpdate,
+            onMergeWithPrevious,
+            onSplitBlock,
+            onPasteBlocks,
+            onDeleteEmptyBlock,
+            onFocusPrevious,
+            onFocusNext,
+            isOnlyBlock
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ jsxRuntime.jsx(TextBlockEditor, { block, onUpdate });
+      case "image-gallery":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ImageGalleryEditor,
+          {
+            block,
+            onUpdate
+          }
+        );
+      case "link-card":
+        return /* @__PURE__ */ jsxRuntime.jsx(LinkCardEditor, { block, onUpdate });
+      case "link-embed":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          LinkEmbedEditor,
+          {
+            block,
+            onUpdate
+          }
+        );
+      case "dialogue":
+        return /* @__PURE__ */ jsxRuntime.jsx(DialogueEditor, { block, onUpdate });
+      case "divider":
+        return /* @__PURE__ */ jsxRuntime.jsx(DividerEditor, { block, onUpdate });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400", children: "Unknown block type" });
+    }
+  };
+  const setBlockRef = React9.useCallback((el) => {
+    setNodeRef(el);
+  }, [setNodeRef]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setBlockRef,
+      style,
+      className: `group relative flex items-start gap-2 ${isSelected ? "bg-blue-50 rounded" : ""}`,
+      "data-block-id": block.id,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-10 top-1 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onAddBlock,
+            className: "rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600",
+            title: "\uBE14\uB85D \uCD94\uAC00",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 18 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: renderBlockContent() }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute -right-16 top-1 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: onDelete,
+              className: "p-1 rounded hover:bg-red-50 text-gray-300 hover:text-red-500",
+              title: "\uBE14\uB85D \uC0AD\uC81C",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ...attributes,
+              ...listeners,
+              className: "p-1 rounded hover:bg-gray-100 text-gray-300 hover:text-gray-500 cursor-grab active:cursor-grabbing",
+              title: "\uB4DC\uB798\uADF8\uD558\uC5EC \uC774\uB3D9",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function findBlockElement(node, container) {
+  let current = node;
+  while (current && current !== container) {
+    if (current instanceof HTMLElement && current.hasAttribute("data-block-id")) {
+      return current;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function getCharacterOffsetWithin(rootEl, targetNode, targetOffset) {
+  const walker = document.createTreeWalker(rootEl, NodeFilter.SHOW_TEXT, null);
+  let offset = 0;
+  let node;
+  while (node = walker.nextNode()) {
+    if (node === targetNode) {
+      return offset + targetOffset;
+    }
+    offset += node.textContent?.length || 0;
+  }
+  return offset;
+}
+function getCrossBlockSelection(blocks, containerEl) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return null;
+  const range = sel.getRangeAt(0);
+  const startBlockEl = findBlockElement(range.startContainer, containerEl);
+  const endBlockEl = findBlockElement(range.endContainer, containerEl);
+  if (!startBlockEl || !endBlockEl) return null;
+  const startBlockId = startBlockEl.getAttribute("data-block-id");
+  const endBlockId = endBlockEl.getAttribute("data-block-id");
+  if (!startBlockId || !endBlockId) return null;
+  if (startBlockId === endBlockId) return null;
+  const startBlockIndex = blocks.findIndex((b) => b.id === startBlockId);
+  const endBlockIndex = blocks.findIndex((b) => b.id === endBlockId);
+  if (startBlockIndex === -1 || endBlockIndex === -1) return null;
+  const startEditable = startBlockEl.querySelector('[contenteditable="true"]');
+  const endEditable = endBlockEl.querySelector('[contenteditable="true"]');
+  const startOffset = startEditable ? getCharacterOffsetWithin(startEditable, range.startContainer, range.startOffset) : 0;
+  const endOffset = endEditable ? getCharacterOffsetWithin(endEditable, range.endContainer, range.endOffset) : 0;
+  return {
+    startBlockId,
+    startBlockIndex,
+    startOffset,
+    endBlockId,
+    endBlockIndex,
+    endOffset
+  };
+}
+function BlockEditor({
+  initialBlocks = [],
+  onChange,
+  onCharCountChange
+}) {
+  const [blocks, setBlocks] = React9.useState(
+    initialBlocks.length > 0 ? initialBlocks : [createEmptyParagraphBlock()]
+  );
+  const [showBlockMenu, setShowBlockMenu] = React9.useState(false);
+  const [blockMenuPosition, setBlockMenuPosition] = React9.useState({ x: 0, y: 0 });
+  const [insertIndex, setInsertIndex] = React9.useState(0);
+  const [selectedBlocks, setSelectedBlocks] = React9.useState(/* @__PURE__ */ new Set());
+  const [lastSelectedIndex, setLastSelectedIndex] = React9.useState(null);
+  const blockRefs = React9__default.default.useRef(/* @__PURE__ */ new Map());
+  const editorContainerRef = React9.useRef(null);
+  const pendingFocusRef = React9.useRef(null);
+  const selStartRef = React9.useRef(null);
+  const focusBlockById = React9.useCallback((blockId, position = "start") => {
+    setTimeout(() => {
+      const blockEl = blockRefs.current.get(blockId);
+      if (!blockEl) return;
+      const editable = blockEl.querySelector('[contenteditable="true"]');
+      if (editable) {
+        editable.focus();
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (position === "end" && editable.lastChild) {
+          const lastChild = editable.lastChild;
+          if (lastChild.nodeType === Node.TEXT_NODE) {
+            range.setStart(lastChild, lastChild.textContent?.length || 0);
+          } else {
+            range.setStartAfter(lastChild);
+          }
+        } else {
+          range.setStart(editable, 0);
+        }
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      } else {
+        const input = blockEl.querySelector('input:not([type="file"]), textarea');
+        if (input) {
+          input.focus();
+          try {
+            if (position === "end") {
+              input.selectionStart = input.selectionEnd = input.value.length;
+            } else {
+              input.selectionStart = input.selectionEnd = 0;
+            }
+          } catch (e) {
+          }
+        }
+      }
+    }, 0);
+  }, []);
+  const focusBlock = React9.useCallback((index, position = "start") => {
+    const targetBlock = blocks[index];
+    if (!targetBlock) return;
+    setTimeout(() => {
+      const blockEl = blockRefs.current.get(targetBlock.id);
+      if (!blockEl) return;
+      const editable = blockEl.querySelector('[contenteditable="true"]');
+      if (editable) {
+        editable.focus();
+        const range = document.createRange();
+        const selection = window.getSelection();
+        if (position === "end" && editable.lastChild) {
+          const lastChild = editable.lastChild;
+          if (lastChild.nodeType === Node.TEXT_NODE) {
+            range.setStart(lastChild, lastChild.textContent?.length || 0);
+          } else {
+            range.setStartAfter(lastChild);
+          }
+        } else {
+          range.setStart(editable, 0);
+        }
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      } else {
+        const input = blockEl.querySelector('input:not([type="file"]), textarea');
+        if (input) {
+          input.focus();
+          try {
+            if (position === "end") {
+              input.selectionStart = input.selectionEnd = input.value.length;
+            } else {
+              input.selectionStart = input.selectionEnd = 0;
+            }
+          } catch (e) {
+          }
+        }
+      }
+    }, 0);
+  }, [blocks]);
+  React9.useEffect(() => {
+    if (pendingFocusRef.current) {
+      const { blockId, position } = pendingFocusRef.current;
+      pendingFocusRef.current = null;
+      focusBlockById(blockId, position);
+    }
+  }, [blocks, focusBlockById]);
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 8
+      }
+    }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  React9.useEffect(() => {
+    onChange(blocks);
+    if (onCharCountChange) {
+      onCharCountChange(countBlocksCharacters(blocks));
+    }
+  }, [blocks]);
+  const handleUpdateBlock = React9.useCallback(
+    (id, updates) => {
+      setBlocks(
+        (prev) => prev.map(
+          (block) => block.id === id ? { ...block, ...updates } : block
+        )
+      );
+    },
+    []
+  );
+  const handleDeleteBlock = React9.useCallback((id) => {
+    setBlocks((prev) => {
+      const filtered = prev.filter((block) => block.id !== id);
+      if (filtered.length === 0) {
+        return [createEmptyParagraphBlock()];
+      }
+      return filtered;
+    });
+  }, []);
+  const handleShowBlockMenu = React9.useCallback(
+    (e, index) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = e.target.getBoundingClientRect();
+      setBlockMenuPosition({ x: rect.left, y: rect.bottom + 5 });
+      setInsertIndex(index);
+      setShowBlockMenu(true);
+    },
+    []
+  );
+  const handleAddBlock = React9.useCallback(
+    (type) => {
+      let newBlock;
+      const id = generateBlockId();
+      switch (type) {
+        case "paragraph":
+          newBlock = {
+            id,
+            type: "paragraph",
+            content: [{ text: "" }]
+          };
+          break;
+        case "heading":
+          newBlock = {
+            id,
+            type: "heading",
+            level: 2,
+            content: [{ text: "" }]
+          };
+          break;
+        case "quote":
+          newBlock = {
+            id,
+            type: "quote",
+            content: [{ text: "" }]
+          };
+          break;
+        case "list":
+          newBlock = {
+            id,
+            type: "list",
+            listType: "unordered",
+            content: [{ text: "" }]
+          };
+          break;
+        case "divider":
+          newBlock = { id, type: "divider", variant: "line" };
+          break;
+        case "image":
+          newBlock = {
+            id,
+            type: "image",
+            image: { url: "" },
+            alignment: "center"
+          };
+          break;
+        case "image-gallery":
+          newBlock = {
+            id,
+            type: "image-gallery",
+            images: [],
+            layout: "grid",
+            columns: 2
+          };
+          break;
+        case "link-card":
+          newBlock = { id, type: "link-card", url: "" };
+          break;
+        case "link-embed":
+          newBlock = {
+            id,
+            type: "link-embed",
+            url: "",
+            embedType: "youtube"
+          };
+          break;
+        case "dialogue":
+          newBlock = {
+            id,
+            type: "dialogue",
+            lines: [{ speaker: "", content: [{ text: "" }] }],
+            style: "chat"
+          };
+          break;
+        default:
+          return;
+      }
+      setBlocks((prev) => {
+        const newBlocks = [...prev];
+        newBlocks.splice(insertIndex + 1, 0, newBlock);
+        return newBlocks;
+      });
+      setShowBlockMenu(false);
+    },
+    [insertIndex]
+  );
+  const handleMergeWithPrevious = React9.useCallback((index) => {
+    if (index <= 0) return;
+    const currentBlock = blocks[index];
+    const previousBlock = blocks[index - 1];
+    if (!currentBlock || !previousBlock) return;
+    const isTextType = (t) => t === "paragraph" || t === "heading" || t === "quote" || t === "list";
+    if (!isTextType(currentBlock.type) || !isTextType(previousBlock.type)) return;
+    const prevBlockId = previousBlock.id;
+    setBlocks((prev) => {
+      const merged = [...prev];
+      const prevContent = prev[index - 1].content;
+      const currContent = prev[index].content;
+      merged[index - 1] = {
+        ...prev[index - 1],
+        content: [...prevContent, ...currContent]
+      };
+      merged.splice(index, 1);
+      return merged;
+    });
+    pendingFocusRef.current = { blockId: prevBlockId, position: "end" };
+  }, [blocks]);
+  const handleDeleteEmptyBlock = React9.useCallback((index) => {
+    if (index <= 0) return;
+    const prevBlockId = blocks[index - 1]?.id;
+    if (!prevBlockId) return;
+    setBlocks((prev) => {
+      if (prev.length <= 1) return prev;
+      const newBlocks = [...prev];
+      newBlocks.splice(index, 1);
+      return newBlocks;
+    });
+    pendingFocusRef.current = { blockId: prevBlockId, position: "end" };
+  }, [blocks]);
+  const handleSplitBlock = React9.useCallback(
+    (index, beforeText, afterText) => {
+      const newBlockId = generateBlockId();
+      setBlocks((prev) => {
+        const newBlocks = [...prev];
+        const currentBlock = newBlocks[index];
+        newBlocks[index] = {
+          ...currentBlock,
+          content: beforeText
+        };
+        let newBlock;
+        if (currentBlock.type === "list") {
+          newBlock = {
+            id: newBlockId,
+            type: "list",
+            listType: currentBlock.listType,
+            content: afterText.length > 0 ? afterText : [{ text: "" }]
+          };
+        } else {
+          newBlock = {
+            id: newBlockId,
+            type: "paragraph",
+            content: afterText.length > 0 ? afterText : [{ text: "" }]
+          };
+        }
+        newBlocks.splice(index + 1, 0, newBlock);
+        return newBlocks;
+      });
+      setTimeout(() => {
+        focusBlockById(newBlockId, "start");
+      }, 10);
+    },
+    [focusBlockById]
+  );
+  const handlePasteBlocks = React9.useCallback(
+    (index, beforeText, pastedLines, afterText) => {
+      const lastBlockId = generateBlockId();
+      setBlocks((prev) => {
+        const newBlocks = [...prev];
+        const currentBlock = newBlocks[index];
+        newBlocks[index] = {
+          ...currentBlock,
+          content: beforeText
+        };
+        const middleBlocks = pastedLines.map((line) => ({
+          id: generateBlockId(),
+          type: "paragraph",
+          content: [{ text: line }]
+        }));
+        const lastBlock = {
+          id: lastBlockId,
+          type: "paragraph",
+          content: afterText
+        };
+        newBlocks.splice(index + 1, 0, ...middleBlocks, lastBlock);
+        return newBlocks;
+      });
+      setTimeout(() => {
+        focusBlockById(lastBlockId, "end");
+      }, 10);
+    },
+    [focusBlockById]
+  );
+  const handleDragEnd = React9.useCallback((event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setBlocks((prev) => {
+        const oldIndex = prev.findIndex((block) => block.id === active.id);
+        const newIndex = prev.findIndex((block) => block.id === over.id);
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const newBlocks = [...prev];
+          const [removed] = newBlocks.splice(oldIndex, 1);
+          newBlocks.splice(newIndex, 0, removed);
+          return newBlocks;
+        }
+        return prev;
+      });
+    }
+  }, []);
+  const handleBlockSelect = React9.useCallback((index, e) => {
+    const target = e.target;
+    if (target.closest('[contenteditable="true"]') || target.closest("input") || target.closest("textarea")) {
+      if (selectedBlocks.size > 0) {
+        setSelectedBlocks(/* @__PURE__ */ new Set());
+      }
+      setLastSelectedIndex(index);
+      return;
+    }
+    if (e.shiftKey && lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      const newSelected = /* @__PURE__ */ new Set();
+      for (let i = start; i <= end; i++) {
+        newSelected.add(blocks[i].id);
+      }
+      setSelectedBlocks(newSelected);
+    } else if (e.metaKey || e.ctrlKey) {
+      const newSelected = new Set(selectedBlocks);
+      if (newSelected.has(blocks[index].id)) {
+        newSelected.delete(blocks[index].id);
+      } else {
+        newSelected.add(blocks[index].id);
+      }
+      setSelectedBlocks(newSelected);
+      setLastSelectedIndex(index);
+    } else {
+      setSelectedBlocks(/* @__PURE__ */ new Set());
+      setLastSelectedIndex(index);
+    }
+  }, [blocks, selectedBlocks, lastSelectedIndex]);
+  const handleDeleteSelected = React9.useCallback(() => {
+    if (selectedBlocks.size === 0) return;
+    setBlocks((prev) => {
+      const filtered = prev.filter((block) => !selectedBlocks.has(block.id));
+      if (filtered.length === 0) {
+        return [createEmptyParagraphBlock()];
+      }
+      return filtered;
+    });
+    setSelectedBlocks(/* @__PURE__ */ new Set());
+  }, [selectedBlocks]);
+  const handleCrossBlockDelete = React9.useCallback((crossSel, insertChar) => {
+    const { startBlockIndex, endBlockIndex, startOffset, endOffset } = crossSel;
+    setBlocks((prev) => {
+      const startBlock = prev[startBlockIndex];
+      const endBlock = prev[endBlockIndex];
+      let beforeText = "";
+      if (startBlock.type === "paragraph" || startBlock.type === "heading" || startBlock.type === "quote" || startBlock.type === "list") {
+        const fullText = startBlock.content.map((n) => n.text).join("");
+        beforeText = fullText.slice(0, startOffset);
+      }
+      let afterText = "";
+      if (endBlock.type === "paragraph" || endBlock.type === "heading" || endBlock.type === "quote" || endBlock.type === "list") {
+        const fullText = endBlock.content.map((n) => n.text).join("");
+        afterText = fullText.slice(endOffset);
+      }
+      const mergedText = beforeText + (insertChar || "") + afterText;
+      const mergedBlock = {
+        ...startBlock,
+        content: [{ text: mergedText }]
+      };
+      const newBlocks = [
+        ...prev.slice(0, startBlockIndex),
+        mergedBlock,
+        ...prev.slice(endBlockIndex + 1)
+      ];
+      if (newBlocks.length === 0) {
+        return [createEmptyParagraphBlock()];
+      }
+      return newBlocks;
+    });
+    const cursorPos = startOffset + (insertChar?.length || 0);
+    setTimeout(() => {
+      const blockEl = blockRefs.current.get(crossSel.startBlockId);
+      if (!blockEl) return;
+      const editable = blockEl.querySelector('[contenteditable="true"]');
+      if (!editable) return;
+      editable.focus();
+      requestAnimationFrame(() => {
+        const walker = document.createTreeWalker(editable, NodeFilter.SHOW_TEXT, null);
+        let offset = 0;
+        let targetNode = null;
+        let targetOffset = 0;
+        let node;
+        while (node = walker.nextNode()) {
+          const len = node.textContent?.length || 0;
+          if (offset + len >= cursorPos) {
+            targetNode = node;
+            targetOffset = cursorPos - offset;
+            break;
+          }
+          offset += len;
+        }
+        if (targetNode) {
+          const range = document.createRange();
+          range.setStart(targetNode, targetOffset);
+          range.collapse(true);
+          const sel = window.getSelection();
+          sel?.removeAllRanges();
+          sel?.addRange(range);
+        }
+      });
+    }, 0);
+  }, []);
+  React9.useEffect(() => {
+    const container = editorContainerRef.current;
+    const handleKeyDown = (e) => {
+      if (selectedBlocks.size > 0 && (e.key === "Delete" || e.key === "Backspace")) {
+        const activeEl = document.activeElement;
+        if (!activeEl?.closest('[contenteditable="true"]') && !(activeEl instanceof HTMLInputElement) && !(activeEl instanceof HTMLTextAreaElement)) {
+          e.preventDefault();
+          handleDeleteSelected();
+          return;
+        }
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && !e.isComposing && container) {
+        const crossSel = getCrossBlockSelection(blocks, container);
+        if (crossSel) {
+          e.preventDefault();
+          handleCrossBlockDelete(crossSel);
+          return;
+        }
+      }
+      if (e.key === "Escape" && selectedBlocks.size > 0) {
+        setSelectedBlocks(/* @__PURE__ */ new Set());
+      }
+    };
+    const handleBeforeInput = (e) => {
+      if (!container) return;
+      const crossSel = getCrossBlockSelection(blocks, container);
+      if (crossSel) {
+        if ((e.inputType === "insertText" || e.inputType === "insertCompositionText") && !e.isComposing && e.data) {
+          e.preventDefault();
+          handleCrossBlockDelete(crossSel, e.data);
+        } else if (e.inputType.startsWith("delete")) {
+          e.preventDefault();
+          handleCrossBlockDelete(crossSel);
+        } else {
+          e.preventDefault();
+        }
+        return;
+      }
+      if (e.target === container) {
+        e.preventDefault();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    if (container) {
+      container.addEventListener("beforeinput", handleBeforeInput);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (container) {
+        container.removeEventListener("beforeinput", handleBeforeInput);
+      }
+    };
+  }, [selectedBlocks, handleDeleteSelected, blocks, handleCrossBlockDelete]);
+  React9.useEffect(() => {
+    const container = editorContainerRef.current;
+    if (!container) return;
+    let docMoveHandler = null;
+    let docUpHandler = null;
+    const handleMouseDown = (e) => {
+      const target = e.target;
+      const editable = target.closest('[contenteditable="true"]');
+      if (!editable || editable === container) return;
+      if (e.shiftKey && selStartRef.current) {
+        const caretRange = document.caretRangeFromPoint(e.clientX, e.clientY);
+        if (!caretRange) return;
+        const caretBlockEl = findBlockElement(caretRange.startContainer, container);
+        if (!caretBlockEl) return;
+        const caretBlockId = caretBlockEl.getAttribute("data-block-id");
+        if (caretBlockId && caretBlockId !== selStartRef.current.blockId) {
+          e.preventDefault();
+          const sel = window.getSelection();
+          if (sel) {
+            try {
+              sel.setBaseAndExtent(
+                selStartRef.current.node,
+                selStartRef.current.offset,
+                caretRange.startContainer,
+                caretRange.startOffset
+              );
+            } catch (_) {
+            }
+          }
+        }
+        return;
+      }
+      requestAnimationFrame(() => {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) return;
+        const range = sel.getRangeAt(0);
+        const blockEl = findBlockElement(range.startContainer, container);
+        if (!blockEl) return;
+        selStartRef.current = {
+          blockId: blockEl.getAttribute("data-block-id"),
+          node: range.startContainer,
+          offset: range.startOffset
+        };
+      });
+      docMoveHandler = (moveE) => {
+        if (!selStartRef.current) return;
+        const caretRange = document.caretRangeFromPoint(moveE.clientX, moveE.clientY);
+        if (!caretRange) return;
+        const caretBlockEl = findBlockElement(caretRange.startContainer, container);
+        if (!caretBlockEl) return;
+        const caretBlockId = caretBlockEl.getAttribute("data-block-id");
+        if (!caretBlockId || caretBlockId === selStartRef.current.blockId) return;
+        requestAnimationFrame(() => {
+          if (!selStartRef.current) return;
+          const sel = window.getSelection();
+          if (!sel) return;
+          try {
+            sel.setBaseAndExtent(
+              selStartRef.current.node,
+              selStartRef.current.offset,
+              caretRange.startContainer,
+              caretRange.startOffset
+            );
+          } catch (_) {
+          }
+        });
+      };
+      docUpHandler = () => {
+        if (docMoveHandler) document.removeEventListener("mousemove", docMoveHandler);
+        if (docUpHandler) document.removeEventListener("mouseup", docUpHandler);
+        docMoveHandler = null;
+        docUpHandler = null;
+      };
+      document.addEventListener("mousemove", docMoveHandler);
+      document.addEventListener("mouseup", docUpHandler);
+    };
+    container.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      container.removeEventListener("mousedown", handleMouseDown);
+      if (docMoveHandler) document.removeEventListener("mousemove", docMoveHandler);
+      if (docUpHandler) document.removeEventListener("mouseup", docUpHandler);
+    };
+  }, []);
+  React9.useEffect(() => {
+    const container = editorContainerRef.current;
+    if (!container) return;
+    const handleSelectionChange = () => {
+      container.querySelectorAll("[data-cross-selected]").forEach((el) => {
+        el.removeAttribute("data-cross-selected");
+      });
+      const crossSel = getCrossBlockSelection(blocks, container);
+      if (!crossSel) return;
+      const minIdx = Math.min(crossSel.startBlockIndex, crossSel.endBlockIndex);
+      const maxIdx = Math.max(crossSel.startBlockIndex, crossSel.endBlockIndex);
+      for (let i = minIdx; i <= maxIdx; i++) {
+        const wrapper = blockRefs.current.get(blocks[i].id);
+        if (wrapper) {
+          wrapper.setAttribute("data-cross-selected", "true");
+        }
+      }
+    };
+    document.addEventListener("selectionchange", handleSelectionChange);
+    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+  }, [blocks]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "block-editor relative select-text", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        [data-cross-selected] [contenteditable]:empty::after {
+          content: '\\00a0';
+          background-color: rgb(191 219 254);
+          border-radius: 1px;
+        }
+      ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.DndContext,
+      {
+        sensors,
+        collisionDetection: core.closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          sortable.SortableContext,
+          {
+            items: blocks.map((b) => b.id),
+            strategy: sortable.verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: editorContainerRef,
+                contentEditable: true,
+                suppressContentEditableWarning: true,
+                className: "space-y-1 selection:bg-blue-200 outline-none",
+                children: blocks.map((block, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    contentEditable: false,
+                    ref: (el) => {
+                      if (el) blockRefs.current.set(block.id, el);
+                      else blockRefs.current.delete(block.id);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      BlockItem,
+                      {
+                        block,
+                        blockIndex: index,
+                        onUpdate: (updates) => handleUpdateBlock(block.id, updates),
+                        onDelete: () => handleDeleteBlock(block.id),
+                        onAddBlock: (e) => {
+                          if (e) {
+                            handleShowBlockMenu(e, index);
+                          } else {
+                            setInsertIndex(index);
+                            setShowBlockMenu(true);
+                            setBlockMenuPosition({ x: 100, y: 100 });
+                          }
+                        },
+                        onMergeWithPrevious: index > 0 ? () => handleMergeWithPrevious(index) : void 0,
+                        onSplitBlock: (before, after) => handleSplitBlock(index, before, after),
+                        onPasteBlocks: (before, lines, after) => handlePasteBlocks(index, before, lines, after),
+                        onDeleteEmptyBlock: index > 0 ? () => handleDeleteEmptyBlock(index) : void 0,
+                        onFocusPrevious: index > 0 ? () => focusBlock(index - 1, "end") : void 0,
+                        onFocusNext: index < blocks.length - 1 ? () => focusBlock(index + 1, "start") : void 0,
+                        isOnlyBlock: blocks.length === 1,
+                        isSelected: selectedBlocks.has(block.id),
+                        onSelect: (e) => handleBlockSelect(index, e)
+                      }
+                    )
+                  },
+                  block.id
+                ))
+              }
+            )
+          }
+        )
+      }
+    ),
+    showBlockMenu && /* @__PURE__ */ jsxRuntime.jsx(
+      BlockMenu,
+      {
+        position: blockMenuPosition,
+        onClose: () => setShowBlockMenu(false),
+        onSelect: handleAddBlock
+      }
+    )
+  ] });
+}
+
+exports.BlockEditor = BlockEditor;
+exports.BlockMenu = BlockMenu;
+exports.DefaultImage = DefaultImage;
+exports.DialogueEditor = DialogueEditor;
+exports.DividerEditor = DividerEditor;
+exports.EditorProvider = EditorProvider;
+exports.ImageGalleryEditor = ImageGalleryEditor;
+exports.LinkCardEditor = LinkCardEditor;
+exports.LinkEmbedEditor = LinkEmbedEditor;
+exports.TextBlockEditor = TextBlockEditor;
+exports.countBlocksCharacters = countBlocksCharacters;
+exports.createEmptyParagraphBlock = createEmptyParagraphBlock;
+exports.generateBlockId = generateBlockId;
+exports.generatePreviewFromBlocks = generatePreviewFromBlocks;
+exports.textNodesToPlainText = textNodesToPlainText;
+exports.useEditorServices = useEditorServices;
+exports.useOptionalEditorServices = useOptionalEditorServices;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map