@withwiz/block-editor 0.1.0

package/dist/chunk-CJGZUEQO.js

@@ -0,0 +1,270 @@
+import {
+  ImageUploadField
+} from "./chunk-G6J2DCC5.js";
+
+// src/components/BlockRenderer.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BlockRenderer({ block, updateBlock, addSubItem, removeSubItem, onImageUploaded }) {
+  var _a, _b, _c, _d, _e;
+  const { id, type } = block;
+  const inp = (field, placeholder, style) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      className: "be-input",
+      value: block[field] || "",
+      onChange: (e) => updateBlock(id, field, e.target.value),
+      placeholder,
+      style
+    }
+  );
+  const ta = (field, placeholder, style) => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: "be-textarea",
+      value: block[field] || "",
+      onChange: (e) => updateBlock(id, field, e.target.value),
+      placeholder,
+      style
+    }
+  );
+  const iInp = (index, field, placeholder, style) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "be-input",
+        value: ((_b2 = (_a2 = block.items) == null ? void 0 : _a2[index]) == null ? void 0 : _b2[field]) || "",
+        onChange: (e) => updateBlock(id, `items.${index}.${field}`, e.target.value),
+        placeholder,
+        style
+      }
+    );
+  };
+  const iTa = (index, field, placeholder, style) => {
+    var _a2, _b2;
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "be-textarea",
+        value: ((_b2 = (_a2 = block.items) == null ? void 0 : _a2[index]) == null ? void 0 : _b2[field]) || "",
+        onChange: (e) => updateBlock(id, `items.${index}.${field}`, e.target.value),
+        placeholder,
+        style
+      }
+    );
+  };
+  const imgUp = (field, className) => {
+    const src = block[field] || "";
+    return /* @__PURE__ */ jsx(
+      ImageUploadField,
+      {
+        blockId: id,
+        field,
+        src,
+        className,
+        onUploadComplete: (bid, f, url) => updateBlock(bid, f, url),
+        onKeyTracked: onImageUploaded,
+        onClear: (bid, f) => updateBlock(bid, f, "")
+      }
+    );
+  };
+  switch (type) {
+    case "lead":
+      return ta("text", "\uAE30\uC0AC\uC758 \uCCAB \uBB38\uB2E8\uC785\uB2C8\uB2E4. \uD575\uC2EC \uB0B4\uC6A9\uC744 1~2\uBB38\uC7A5\uC73C\uB85C \uC694\uC57D\uD574 \uC8FC\uC138\uC694.", { fontStyle: block.text ? "normal" : "italic" });
+    case "paragraph":
+      return ta("text", "\uBCF8\uBB38 \uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694.");
+    case "subheading":
+      return inp("text", "\uBCF8\uBB38\uC744 \uB098\uB204\uB294 \uC911\uAC04 \uC81C\uBAA9");
+    case "subheading-label":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        inp("en", "\uC704\uC5D0 \uC791\uAC8C \uD45C\uC2DC\uB420 \uBD80\uC81C (\uC608: Behind the Scene)", { fontSize: 11, marginBottom: 4 }),
+        inp("text", "\uC18C\uC81C\uBAA9")
+      ] });
+    case "divider":
+      return /* @__PURE__ */ jsx("div", { style: { height: 1, background: "var(--be-border, #ddd)", margin: "4px 0" } });
+    case "spacer":
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--be-text-dim, #999)" }, children: "\uC5EC\uBC31 \uD06C\uAE30" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "be-input",
+            value: block.size || "medium",
+            onChange: (e) => updateBlock(id, "size", e.target.value),
+            style: { width: "auto", padding: "4px 8px", fontSize: 11 },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "small", children: "\uC791\uAC8C (16px)" }),
+              /* @__PURE__ */ jsx("option", { value: "medium", children: "\uBCF4\uD1B5 (32px)" }),
+              /* @__PURE__ */ jsx("option", { value: "large", children: "\uD06C\uAC8C (56px)" })
+            ]
+          }
+        )
+      ] });
+    case "img-full":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        imgUp("src"),
+        inp("cap", "\uCEA1\uC158 (\uC120\uD0DD)", { fontSize: 11 })
+      ] });
+    case "img-inline":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginBottom: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 10, color: "var(--be-text-dim, #999)" }, children: "\uC0AC\uC774\uC988" }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              className: "be-input",
+              value: block.size || "full",
+              onChange: (e) => updateBlock(id, "size", e.target.value),
+              style: { width: "auto", padding: "4px 8px", fontSize: 10 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "full", children: "\uC804\uCCB4 (100%)" }),
+                /* @__PURE__ */ jsx("option", { value: "medium", children: "\uC911\uAC04 (70%)" }),
+                /* @__PURE__ */ jsx("option", { value: "small", children: "\uC791\uAC8C (50%)" })
+              ]
+            }
+          )
+        ] }),
+        imgUp("src"),
+        inp("cap", "\uCEA1\uC158 (\uC120\uD0DD)", { fontSize: 11 })
+      ] });
+    case "img-pair":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "be-img-pair-grid", children: [
+          imgUp("src1", "small"),
+          imgUp("src2", "small")
+        ] }),
+        inp("cap", "\uCEA1\uC158 (\uC120\uD0DD)", { fontSize: 11 })
+      ] });
+    case "gallery":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "be-img-gallery-grid", children: [
+          imgUp("src1", "square"),
+          imgUp("src2", "square"),
+          imgUp("src3", "square")
+        ] }),
+        inp("cap", "\uCEA1\uC158 (\uC120\uD0DD)", { fontSize: 11 })
+      ] });
+    case "img-text":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        imgUp("src", "portrait"),
+        inp("name", "\uC774\uB984", { fontSize: 11, marginBottom: 3 }),
+        inp("role", "\uC9C1\uD568", { fontSize: 11, marginBottom: 3 }),
+        ta("bio", "\uC18C\uAC1C", { minHeight: 40 })
+      ] });
+    case "quote":
+      return /* @__PURE__ */ jsxs("div", { className: "be-quote-area", children: [
+        ta("text", "\uAC15\uC870\uD558\uACE0 \uC2F6\uC740 \uB9D0, \uC778\uD130\uBDF0 \uB0B4\uC6A9 \uB4F1", { minHeight: 40 }),
+        inp("attr", "\uCD9C\uCC98 (\uC608: \u2014 \uC9C0\uC6B0\uC601 \uC608\uC220\uAC10\uB3C5)", { fontSize: 11, marginTop: 4 })
+      ] });
+    case "quote-large":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        ta("text", "\uD398\uC774\uC9C0 \uC911\uC559\uC5D0 \uD06C\uAC8C \uD45C\uC2DC\uB429\uB2C8\uB2E4. \uAC00\uC7A5 \uC778\uC0C1\uC801\uC778 \uD55C\uB9C8\uB514\uB97C \uB123\uC5B4\uC8FC\uC138\uC694.", { minHeight: 40, textAlign: "center" }),
+        inp("attr", "\uCD9C\uCC98", { fontSize: 11, marginTop: 4, textAlign: "center" })
+      ] });
+    case "stats":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        (_a = block.items) == null ? void 0 : _a.map((_, i) => {
+          var _a2, _b2, _c2, _d2;
+          return /* @__PURE__ */ jsxs("div", { className: "be-stats-row", children: [
+            /* @__PURE__ */ jsx("input", { className: "be-kv-key", value: ((_b2 = (_a2 = block.items) == null ? void 0 : _a2[i]) == null ? void 0 : _b2.num) || "", onChange: (e) => updateBlock(id, `items.${i}.num`, e.target.value), placeholder: "\uC22B\uC790" }),
+            /* @__PURE__ */ jsx("input", { className: "be-kv-value", value: ((_d2 = (_c2 = block.items) == null ? void 0 : _c2[i]) == null ? void 0 : _d2.label) || "", onChange: (e) => updateBlock(id, `items.${i}.label`, e.target.value), placeholder: "\uB77C\uBCA8" }),
+            /* @__PURE__ */ jsx("button", { className: "be-kv-delete", onClick: () => removeSubItem(id, i), children: "\xD7" })
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsx("button", { className: "be-add-row-btn", onClick: () => addSubItem(id, "stats"), children: "+ \uD56D\uBAA9 \uCD94\uAC00" })
+      ] });
+    case "infobox":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        inp("label", "\uBC15\uC2A4 \uB77C\uBCA8", { fontSize: 10, letterSpacing: 1, marginBottom: 6 }),
+        (_b = block.items) == null ? void 0 : _b.map((_, i) => {
+          var _a2, _b2, _c2, _d2;
+          return /* @__PURE__ */ jsxs("div", { className: "be-kv-row", children: [
+            /* @__PURE__ */ jsx("input", { className: "be-kv-key", value: ((_b2 = (_a2 = block.items) == null ? void 0 : _a2[i]) == null ? void 0 : _b2.k) || "", onChange: (e) => updateBlock(id, `items.${i}.k`, e.target.value), placeholder: "\uD56D\uBAA9\uBA85" }),
+            /* @__PURE__ */ jsx("input", { className: "be-kv-value", value: ((_d2 = (_c2 = block.items) == null ? void 0 : _c2[i]) == null ? void 0 : _d2.v) || "", onChange: (e) => updateBlock(id, `items.${i}.v`, e.target.value), placeholder: "\uB0B4\uC6A9" }),
+            /* @__PURE__ */ jsx("button", { className: "be-kv-delete", onClick: () => removeSubItem(id, i), children: "\xD7" })
+          ] }, i);
+        }),
+        /* @__PURE__ */ jsx("button", { className: "be-add-row-btn", onClick: () => addSubItem(id, "infobox"), children: "+ \uD56D\uBAA9 \uCD94\uAC00" })
+      ] });
+    case "callout":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        inp("title", "\uC81C\uBAA9 (\uC120\uD0DD)", { fontSize: 11, marginBottom: 4 }),
+        ta("text", "\uAC15\uC870 \uB0B4\uC6A9...")
+      ] });
+    case "numcards":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        (_c = block.items) == null ? void 0 : _c.map((_, i) => /* @__PURE__ */ jsxs("div", { className: "be-subitem-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "be-subitem-header", children: [
+            /* @__PURE__ */ jsxs("span", { className: "be-subitem-label", children: [
+              "\uCE74\uB4DC ",
+              String(i + 1).padStart(2, "0")
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "be-kv-delete", onClick: () => removeSubItem(id, i), children: "\xD7" })
+          ] }),
+          iInp(i, "title", "\uC81C\uBAA9", { fontSize: 11, margin: "4px 0 3px" }),
+          iTa(i, "desc", "\uC124\uBA85", { minHeight: 36 })
+        ] }, i)),
+        /* @__PURE__ */ jsx("button", { className: "be-add-row-btn", onClick: () => addSubItem(id, "numcards"), children: "+ \uCE74\uB4DC \uCD94\uAC00" })
+      ] });
+    case "qa":
+      return /* @__PURE__ */ jsxs("div", { className: "be-quote-area", children: [
+        inp("q", "\uC9C8\uBB38", { fontSize: 12, marginBottom: 4 }),
+        ta("a", "\uB2F5\uBCC0")
+      ] });
+    case "press-list":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        (_d = block.items) == null ? void 0 : _d.map((_, i) => /* @__PURE__ */ jsxs("div", { className: "be-subitem-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "be-subitem-header", children: [
+            /* @__PURE__ */ jsxs("span", { className: "be-subitem-label", children: [
+              "\uBCF4\uB3C4 ",
+              i + 1
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "be-kv-delete", onClick: () => removeSubItem(id, i), children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "be-subitem-2col", children: [
+            iInp(i, "src", "\uB9E4\uCCB4\uBA85", { fontSize: 10 }),
+            iInp(i, "date", "\uBCF4\uB3C4\uC77C", { fontSize: 10 })
+          ] }),
+          iInp(i, "title", "\uAE30\uC0AC \uC81C\uBAA9", { fontSize: 11, marginBottom: 3 }),
+          iInp(i, "ex", "\uC694\uC57D", { fontSize: 10, marginBottom: 3 }),
+          iInp(i, "link", "\uC6D0\uBB38 URL", { fontSize: 10 })
+        ] }, i)),
+        /* @__PURE__ */ jsx("button", { className: "be-add-row-btn", onClick: () => addSubItem(id, "press-list"), children: "+ \uBCF4\uB3C4 \uCD94\uAC00" })
+      ] });
+    case "timeline":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        (_e = block.items) == null ? void 0 : _e.map((_, i) => /* @__PURE__ */ jsxs("div", { className: "be-timeline-card", children: [
+          /* @__PURE__ */ jsxs("div", { className: "be-subitem-header", children: [
+            /* @__PURE__ */ jsxs("span", { className: "be-subitem-label", children: [
+              "Step ",
+              i + 1
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "be-kv-delete", onClick: () => removeSubItem(id, i), children: "\xD7" })
+          ] }),
+          iInp(i, "date", "\uB0A0\uC9DC/\uC2DC\uAE30", { fontSize: 10, margin: "4px 0 3px" }),
+          iInp(i, "title", "\uC81C\uBAA9", { fontSize: 11, marginBottom: 3 }),
+          iInp(i, "desc", "\uC124\uBA85 (\uC120\uD0DD)", { fontSize: 10 })
+        ] }, i)),
+        /* @__PURE__ */ jsx("button", { className: "be-add-row-btn", onClick: () => addSubItem(id, "timeline"), children: "+ \uB2E8\uACC4 \uCD94\uAC00" })
+      ] });
+    case "video":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        inp("url", "YouTube URL (\uC608: https://www.youtube.com/embed/...)", { fontSize: 11, marginBottom: 4 }),
+        inp("cap", "\uCEA1\uC158 (\uC120\uD0DD)", { fontSize: 11 })
+      ] });
+    case "cta":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        ta("text", "\uD589\uB3D9\uC744 \uC720\uB3C4\uD558\uB294 \uBA54\uC2DC\uC9C0", { minHeight: 36 }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 4 }, children: [
+          inp("label", "\uBC84\uD2BC \uD14D\uC2A4\uD2B8", { fontSize: 11, flex: 1 }),
+          inp("url", "\uBC84\uD2BC \uB9C1\uD06C URL", { fontSize: 11, flex: 2 })
+        ] })
+      ] });
+    default:
+      return null;
+  }
+}
+
+export {
+  BlockRenderer
+};

package/dist/chunk-CLC3FEL2.js

@@ -0,0 +1,313 @@
+import {
+  createEmptyBlock
+} from "./chunk-EERQYNER.js";
+import {
+  createHtmlRenderer
+} from "./chunk-62BAOSP6.js";
+import {
+  createSerializer
+} from "./chunk-PPVXNJWI.js";
+import {
+  BlockRenderer
+} from "./chunk-CJGZUEQO.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N3ETBM74.js";
+
+// src/components/BlockEditor.tsx
+import { useState, useCallback, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function isSerialized(props) {
+  return "content" in props;
+}
+function BlockEditor(props) {
+  var _a;
+  const { config, category = "", onImageUploaded, onModeChange } = props;
+  const { enableDragDrop = true, enableCategoryFilter = false } = config;
+  const serializer = useRef(createSerializer(config.marker));
+  const renderer = useRef(createHtmlRenderer(
+    config.cssPrefix,
+    (_a = config.catClasses) == null ? void 0 : _a[category]
+  ));
+  useEffect(() => {
+    var _a2;
+    renderer.current = createHtmlRenderer(config.cssPrefix, (_a2 = config.catClasses) == null ? void 0 : _a2[category]);
+  }, [category, config.cssPrefix, config.catClasses]);
+  const [blocks, setBlocksState] = useState(() => {
+    var _a2;
+    if (isSerialized(props)) {
+      const existing = serializer.current.deserialize(props.content);
+      if (existing && existing.length > 0) return existing;
+      const tpl = (_a2 = config.templates) == null ? void 0 : _a2[category];
+      if (tpl) return tpl.map((t, i) => __spreadProps(__spreadValues({}, t), { id: i }));
+      return [];
+    }
+    return props.blocks;
+  });
+  const nextId = useRef(blocks.length > 0 ? Math.max(...blocks.map((b) => b.id)) + 1 : 0);
+  const editorRef = useRef(null);
+  const isInitialMount = useRef(true);
+  const prevCategoryRef = useRef(category);
+  const onChangeRef = useRef(null);
+  if (isSerialized(props)) {
+    onChangeRef.current = props.onChange;
+  }
+  const onBlocksChangeRef = useRef(null);
+  if (!isSerialized(props)) {
+    onBlocksChangeRef.current = props.onBlocksChange;
+  }
+  const blocksRef = useRef(blocks);
+  blocksRef.current = blocks;
+  const setBlocks = useCallback((updater) => {
+    setBlocksState((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      return next;
+    });
+  }, []);
+  useEffect(() => {
+    if (!isSerialized(props)) {
+      setBlocksState(props.blocks);
+    }
+  }, [!isSerialized(props) && props.blocks]);
+  const [draggedId, setDraggedId] = useState(null);
+  const [dragOverId, setDragOverId] = useState(null);
+  const dragOverDir = useRef("below");
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    if (onChangeRef.current) {
+      const html = renderer.current.renderBlocksWrapped(blocks);
+      const data = serializer.current.serialize(blocks);
+      onChangeRef.current(html + data);
+    }
+    if (onBlocksChangeRef.current) {
+      onBlocksChangeRef.current(blocks);
+    }
+  }, [blocks, category]);
+  useEffect(() => {
+    var _a2;
+    if (prevCategoryRef.current === category) return;
+    prevCategoryRef.current = category;
+    const currentBlocks = blocksRef.current;
+    const hasContent = currentBlocks.some((b) => {
+      var _a3;
+      if (b.text || b.en || b.src || b.src1 || b.src2 || b.src3) return true;
+      if (b.name || b.bio || b.q || b.a || b.url) return true;
+      if ((_a3 = b.items) == null ? void 0 : _a3.some((it) => Object.entries(it).some(([key, val]) => key !== "k" && val))) return true;
+      return false;
+    });
+    if (!hasContent && ((_a2 = config.templates) == null ? void 0 : _a2[category])) {
+      const id = nextId.current;
+      const tpl = config.templates[category].map((t, i) => __spreadProps(__spreadValues({}, t), { id: id + i }));
+      nextId.current = id + tpl.length;
+      setBlocks(tpl);
+    }
+  }, [category, config.templates, setBlocks]);
+  const hasBlockContent = useCallback(() => {
+    return blocksRef.current.some((b) => {
+      var _a2;
+      if (b.text || b.en || b.src || b.src1 || b.src2 || b.src3) return true;
+      if (b.name || b.bio || b.q || b.a || b.url) return true;
+      if ((_a2 = b.items) == null ? void 0 : _a2.some((it) => Object.values(it).some((val) => val))) return true;
+      return false;
+    });
+  }, []);
+  const loadTemplate = useCallback(() => {
+    var _a2;
+    if (!((_a2 = config.templates) == null ? void 0 : _a2[category])) return;
+    if (hasBlockContent() && !confirm("\uD604\uC7AC \uC791\uC131 \uC911\uC778 \uB0B4\uC6A9\uC774 \uBAA8\uB450 \uCD08\uAE30\uD654\uB429\uB2C8\uB2E4. \uACC4\uC18D\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?")) return;
+    const id = nextId.current;
+    const tpl = config.templates[category].map((t, i) => __spreadProps(__spreadValues({}, t), { id: id + i }));
+    nextId.current = id + tpl.length;
+    setBlocks(tpl);
+    onModeChange == null ? void 0 : onModeChange("template");
+  }, [category, config.templates, hasBlockContent, onModeChange, setBlocks]);
+  const loadSample = useCallback(() => {
+    var _a2;
+    if (!((_a2 = config.samples) == null ? void 0 : _a2[category])) return;
+    if (hasBlockContent() && !confirm("\uD604\uC7AC \uC791\uC131 \uC911\uC778 \uB0B4\uC6A9\uC774 \uBAA8\uB450 \uCD08\uAE30\uD654\uB429\uB2C8\uB2E4. \uACC4\uC18D\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?")) return;
+    const id = nextId.current;
+    const smp = config.samples[category].map((t, i) => __spreadProps(__spreadValues({}, t), { id: id + i }));
+    nextId.current = id + smp.length;
+    setBlocks(smp);
+    onModeChange == null ? void 0 : onModeChange("sample");
+  }, [category, config.samples, hasBlockContent, onModeChange, setBlocks]);
+  const addBlock = useCallback((type) => {
+    const def = config.blocks.find((d) => d.type === type);
+    const id = nextId.current++;
+    const newBlock = def ? def.createEmpty(id) : createEmptyBlock(type, id);
+    setBlocks((prev) => [...prev, newBlock]);
+    setTimeout(() => {
+      var _a2;
+      (_a2 = editorRef.current) == null ? void 0 : _a2.scrollTo({ top: editorRef.current.scrollHeight, behavior: "smooth" });
+    }, 50);
+  }, [config.blocks, setBlocks]);
+  const removeBlock = useCallback((id) => {
+    setBlocks((prev) => prev.filter((b) => b.id !== id));
+  }, [setBlocks]);
+  const moveBlock = useCallback((id, dir) => {
+    setBlocks((prev) => {
+      const i = prev.findIndex((b) => b.id === id);
+      const ni = i + dir;
+      if (ni < 0 || ni >= prev.length) return prev;
+      const next = [...prev];
+      [next[i], next[ni]] = [next[ni], next[i]];
+      return next;
+    });
+  }, [setBlocks]);
+  const updateBlock = useCallback((id, field, value) => {
+    setBlocks(
+      (prev) => prev.map((b) => {
+        if (b.id !== id) return b;
+        const parts = field.split(".");
+        if (parts.length === 3 && parts[0] === "items") {
+          const idx = parseInt(parts[1]);
+          const key = parts[2];
+          const items = [...b.items || []];
+          items[idx] = __spreadProps(__spreadValues({}, items[idx]), { [key]: value });
+          return __spreadProps(__spreadValues({}, b), { items });
+        }
+        return __spreadProps(__spreadValues({}, b), { [field]: value });
+      })
+    );
+  }, [setBlocks]);
+  const addSubItem = useCallback((id, type) => {
+    setBlocks(
+      (prev) => prev.map((b) => {
+        if (b.id !== id) return b;
+        const items = [...b.items || []];
+        switch (type) {
+          case "stats":
+            items.push({ num: "", label: "" });
+            break;
+          case "infobox":
+            items.push({ k: "", v: "" });
+            break;
+          case "numcards":
+            items.push({ title: "", desc: "" });
+            break;
+          case "press-list":
+            items.push({ src: "", date: "", title: "", ex: "", link: "" });
+            break;
+          case "timeline":
+            items.push({ date: "", title: "", desc: "" });
+            break;
+        }
+        return __spreadProps(__spreadValues({}, b), { items });
+      })
+    );
+  }, [setBlocks]);
+  const removeSubItem = useCallback((id, idx) => {
+    setBlocks(
+      (prev) => prev.map((b) => {
+        if (b.id !== id) return b;
+        const items = [...b.items || []];
+        items.splice(idx, 1);
+        return __spreadProps(__spreadValues({}, b), { items });
+      })
+    );
+  }, [setBlocks]);
+  const handleDragStart = useCallback((e, id) => {
+    setDraggedId(id);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", String(id));
+    const el = e.target.closest(".be-block");
+    if (el) requestAnimationFrame(() => {
+      el.style.opacity = "0.4";
+    });
+  }, []);
+  const handleDragEnd = useCallback((e) => {
+    const el = e.target.closest(".be-block");
+    if (el) el.style.opacity = "";
+    setDraggedId(null);
+    setDragOverId(null);
+  }, []);
+  const handleDragOver = useCallback((e, id) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (id === draggedId) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const midY = rect.top + rect.height / 2;
+    dragOverDir.current = e.clientY < midY ? "above" : "below";
+    setDragOverId(id);
+  }, [draggedId]);
+  const handleDrop = useCallback((e, targetId) => {
+    e.preventDefault();
+    if (draggedId === null || draggedId === targetId) return;
+    setBlocks((prev) => {
+      const fromIdx = prev.findIndex((b) => b.id === draggedId);
+      const toIdx = prev.findIndex((b) => b.id === targetId);
+      if (fromIdx === -1 || toIdx === -1) return prev;
+      const next = [...prev];
+      const [moved] = next.splice(fromIdx, 1);
+      const insertIdx = dragOverDir.current === "above" ? toIdx > fromIdx ? toIdx - 1 : toIdx : toIdx > fromIdx ? toIdx : toIdx + 1;
+      next.splice(insertIdx, 0, moved);
+      return next;
+    });
+    setDraggedId(null);
+    setDragOverId(null);
+  }, [draggedId, setBlocks]);
+  const availableBlocks = enableCategoryFilter && category ? config.blocks.filter((def) => !def.cats || def.cats.includes(category)) : config.blocks;
+  const blockLabel = (type) => {
+    var _a2;
+    return ((_a2 = config.blocks.find((d) => d.type === type)) == null ? void 0 : _a2.label) || type;
+  };
+  const hasTemplates = !!(config.templates && config.templates[category]);
+  const hasSamples = !!(config.samples && config.samples[category]);
+  return /* @__PURE__ */ jsxs("div", { className: "be-blocks-section", ref: editorRef, children: [
+    (hasTemplates || hasSamples) && /* @__PURE__ */ jsxs("div", { className: "be-mode-bar", children: [
+      /* @__PURE__ */ jsx("span", { className: "be-mode-label", children: "\uCD08\uAE30\uD654" }),
+      hasTemplates && /* @__PURE__ */ jsx("button", { className: "be-mode-btn", onClick: loadTemplate, children: "\uBE48 \uD15C\uD50C\uB9BF" }),
+      hasSamples && /* @__PURE__ */ jsx("button", { className: "be-mode-btn", onClick: loadSample, children: "\uC608\uC2DC \uCF58\uD150\uCE20" }),
+      enableCategoryFilter && /* @__PURE__ */ jsx("span", { className: "be-mode-hint", children: "\uCE74\uD14C\uACE0\uB9AC\uBCC4 \uBE14\uB85D \uAD6C\uC131\uC774 \uC790\uB3D9 \uC801\uC6A9\uB429\uB2C8\uB2E4" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "be-blocks", children: blocks.map((block) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `be-block${draggedId === block.id ? " be-dragging" : ""}${dragOverId === block.id && draggedId !== block.id ? ` be-drag-over be-drag-${dragOverDir.current}` : ""}`,
+        draggable: enableDragDrop,
+        onDragStart: enableDragDrop ? (e) => handleDragStart(e, block.id) : void 0,
+        onDragEnd: enableDragDrop ? handleDragEnd : void 0,
+        onDragOver: enableDragDrop ? (e) => handleDragOver(e, block.id) : void 0,
+        onDrop: enableDragDrop ? (e) => handleDrop(e, block.id) : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "be-block-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "be-block-type", children: [
+              enableDragDrop && /* @__PURE__ */ jsx("span", { className: "be-block-drag", children: "\u283F" }),
+              blockLabel(block.type)
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "be-block-actions", children: [
+              /* @__PURE__ */ jsx("button", { className: "be-block-btn", onClick: () => moveBlock(block.id, -1), children: "\u2191" }),
+              /* @__PURE__ */ jsx("button", { className: "be-block-btn", onClick: () => moveBlock(block.id, 1), children: "\u2193" }),
+              /* @__PURE__ */ jsx("button", { className: "be-block-btn be-block-btn-del", onClick: () => removeBlock(block.id), children: "\xD7" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "be-block-body", children: /* @__PURE__ */ jsx(
+            BlockRenderer,
+            {
+              block,
+              updateBlock,
+              addSubItem,
+              removeSubItem,
+              onImageUploaded
+            }
+          ) })
+        ]
+      },
+      block.id
+    )) }),
+    blocks.length === 0 && /* @__PURE__ */ jsx("div", { className: "be-empty", children: "\uC544\uB798 \uBC84\uD2BC\uC73C\uB85C \uCF58\uD150\uCE20 \uBE14\uB85D\uC744 \uCD94\uAC00\uD558\uC138\uC694" }),
+    /* @__PURE__ */ jsx("div", { className: "be-add-bar", children: availableBlocks.map((def) => /* @__PURE__ */ jsxs("button", { className: "be-add-btn", title: def.desc, onClick: () => addBlock(def.type), children: [
+      def.icon,
+      " ",
+      def.label
+    ] }, def.type)) })
+  ] });
+}
+
+export {
+  BlockEditor
+};

package/dist/chunk-CYMYM7LP.js

@@ -0,0 +1,25 @@
+// src/context/BlockEditorProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var BlockEditorContext = createContext(null);
+function BlockEditorProvider({
+  uploadImage,
+  onError = console.error,
+  autoResize = true,
+  maxSizeMB = 10,
+  children
+}) {
+  return /* @__PURE__ */ jsx(BlockEditorContext.Provider, { value: { uploadImage, onError, autoResize, maxSizeMB }, children });
+}
+function useBlockEditorContext() {
+  const ctx = useContext(BlockEditorContext);
+  if (!ctx) {
+    throw new Error("BlockEditorProvider is required. Wrap your editor with <BlockEditorProvider>.");
+  }
+  return ctx;
+}
+
+export {
+  BlockEditorProvider,
+  useBlockEditorContext
+};