@withwiz/block-editor 0.1.0

package/dist/chunk-EERQYNER.js

@@ -0,0 +1,123 @@
+// src/blocks/built-in.ts
+function empty(type, id) {
+  const b = { type, id };
+  switch (type) {
+    case "lead":
+    case "paragraph":
+      b.text = "";
+      break;
+    case "subheading":
+      b.text = "";
+      break;
+    case "subheading-label":
+      b.en = "";
+      b.text = "";
+      break;
+    case "divider":
+      break;
+    case "spacer":
+      b.size = "medium";
+      break;
+    case "img-full":
+      b.src = "";
+      b.cap = "";
+      break;
+    case "img-inline":
+      b.src = "";
+      b.cap = "";
+      b.size = "full";
+      break;
+    case "img-pair":
+      b.src1 = "";
+      b.src2 = "";
+      b.cap = "";
+      break;
+    case "gallery":
+      b.src1 = "";
+      b.src2 = "";
+      b.src3 = "";
+      b.cap = "";
+      break;
+    case "img-text":
+      b.src = "";
+      b.name = "";
+      b.role = "";
+      b.bio = "";
+      break;
+    case "quote":
+    case "quote-large":
+      b.text = "";
+      b.attr = "";
+      break;
+    case "stats":
+      b.items = [{ num: "", label: "" }, { num: "", label: "" }, { num: "", label: "" }];
+      break;
+    case "infobox":
+      b.label = "";
+      b.items = [{ k: "", v: "" }];
+      break;
+    case "callout":
+      b.title = "";
+      b.text = "";
+      break;
+    case "numcards":
+      b.items = [{ title: "", desc: "" }];
+      break;
+    case "qa":
+      b.q = "";
+      b.a = "";
+      break;
+    case "press-list":
+      b.items = [{ src: "", date: "", title: "", ex: "", link: "" }];
+      break;
+    case "timeline":
+      b.items = [{ date: "", title: "", desc: "" }];
+      break;
+    case "video":
+      b.url = "";
+      b.cap = "";
+      break;
+    case "cta":
+      b.text = "";
+      b.label = "";
+      b.url = "";
+      break;
+  }
+  return b;
+}
+function createEmptyBlock(type, id) {
+  return empty(type, id);
+}
+var BUILT_IN_BLOCKS = [
+  { type: "lead", label: "\uB9AC\uB4DC \uB2E8\uB77D", icon: "\u2761", desc: "\uAE30\uC0AC \uB3C4\uC785\uBD80. \uD575\uC2EC \uB0B4\uC6A9\uC744 \uC694\uC57D\uD558\uB294 \uCCAB \uBB38\uB2E8", createEmpty: (id) => empty("lead", id) },
+  { type: "paragraph", label: "\uC77C\uBC18 \uB2E8\uB77D", icon: "\xB6", desc: "\uBCF8\uBB38 \uD14D\uC2A4\uD2B8", createEmpty: (id) => empty("paragraph", id) },
+  { type: "subheading", label: "\uC18C\uC81C\uBAA9", icon: "H", desc: "\uBCF8\uBB38 \uC911\uAC04\uC5D0 \uB123\uB294 \uAD6C\uBD84 \uC81C\uBAA9", createEmpty: (id) => empty("subheading", id) },
+  { type: "subheading-label", label: "\uC18C\uC81C\uBAA9+\uBD80\uC81C", icon: "H\u2091", desc: "\uC791\uC740 \uBD80\uC81C\uAC00 \uC704\uC5D0 \uBD99\uB294 \uC18C\uC81C\uBAA9", createEmpty: (id) => empty("subheading-label", id) },
+  { type: "divider", label: "\uAD6C\uBD84\uC120", icon: "\u2014", desc: "\uB0B4\uC6A9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84", createEmpty: (id) => empty("divider", id) },
+  { type: "spacer", label: "\uC5EC\uBC31", icon: "\u2195", desc: "\uB0B4\uC6A9 \uC0AC\uC774\uC5D0 \uBE48 \uACF5\uAC04 \uCD94\uAC00. \uD06C\uAE30 \uC870\uC808 \uAC00\uB2A5", createEmpty: (id) => empty("spacer", id) },
+  { type: "img-full", label: "\uC774\uBBF8\uC9C0(\uC804\uD3ED)", icon: "\u25A3", desc: "\uD654\uBA74 \uB108\uBE44 \uAC00\uB4DD \uCC44\uC6B0\uB294 \uD070 \uC0AC\uC9C4", createEmpty: (id) => empty("img-full", id) },
+  { type: "img-inline", label: "\uC774\uBBF8\uC9C0(\uBCF8\uBB38\uD3ED)", icon: "\u25A2", desc: "\uBCF8\uBB38 \uB108\uBE44\uC5D0 \uB9DE\uB294 \uC0AC\uC9C4. \uD06C\uAE30 \uC870\uC808 \uAC00\uB2A5", createEmpty: (id) => empty("img-inline", id) },
+  { type: "img-pair", label: "\uC774\uBBF8\uC9C0 2\uC7A5", icon: "\u25A5", desc: "\uB098\uB780\uD788 \uBC30\uCE58\uB418\uB294 \uC0AC\uC9C4 \uB450 \uC7A5", createEmpty: (id) => empty("img-pair", id) },
+  { type: "gallery", label: "\uAC24\uB7EC\uB9AC 3\uC7A5", icon: "\u229E", desc: "\uC815\uC0AC\uAC01\uD615 \uC0AC\uC9C4 \uC138 \uC7A5 \uB098\uB780\uD788", createEmpty: (id) => empty("gallery", id) },
+  { type: "img-text", label: "\uC778\uBB3C \uC18C\uAC1C", icon: "\u263A", desc: "\uC778\uBB3C \uC0AC\uC9C4 + \uC774\uB984, \uC9C1\uD568, \uC18C\uAC1C\uAE00", createEmpty: (id) => empty("img-text", id) },
+  { type: "quote", label: "\uC778\uC6A9\uBB38", icon: '"', desc: "\uC778\uD130\uBDF0, \uB300\uC0AC \uB4F1 \uAC15\uC870\uD560 \uB9D0", createEmpty: (id) => empty("quote", id) },
+  { type: "quote-large", label: "\uC778\uC6A9\uBB38(\uB300\uD615)", icon: "\u275D", desc: "\uD398\uC774\uC9C0 \uC911\uC559\uC5D0 \uD06C\uAC8C \uD45C\uC2DC\uB418\uB294 \uC778\uC6A9", createEmpty: (id) => empty("quote-large", id) },
+  { type: "stats", label: "\uC22B\uC790 \uD558\uC774\uB77C\uC774\uD2B8", icon: "#", desc: "\uAC15\uC870\uD560 \uC22B\uC790 (\uC608: \uACF5\uC5F0 3\uD68C, \uAD00\uAC1D 1,200\uBA85)", createEmpty: (id) => empty("stats", id) },
+  { type: "infobox", label: "\uC815\uBCF4 \uBC15\uC2A4", icon: "\u2630", desc: "\uD56D\uBAA9\uBCC4 \uC815\uBCF4", createEmpty: (id) => empty("infobox", id) },
+  { type: "callout", label: "\uAC15\uC870 \uBC15\uC2A4", icon: "!", desc: "\uB3C5\uC790\uC5D0\uAC8C \uC548\uB0B4\uD560 \uC911\uC694 \uC0AC\uD56D", createEmpty: (id) => empty("callout", id) },
+  { type: "numcards", label: "\uB118\uBC84 \uCE74\uB4DC", icon: "\u2460", desc: "01, 02, 03 \uC21C\uC11C\uB85C \uC815\uB9AC\uD558\uB294 \uC548\uB0B4 \uCE74\uB4DC", createEmpty: (id) => empty("numcards", id) },
+  { type: "qa", label: "Q&A", icon: "Q", desc: "\uC9C8\uBB38\uACFC \uB2F5\uBCC0 \uD615\uC2DD\uC758 \uC778\uD130\uBDF0", createEmpty: (id) => empty("qa", id) },
+  { type: "press-list", label: "\uBCF4\uB3C4 \uBAA9\uB85D", icon: "\u270E", desc: "\uC5B8\uB860 \uBCF4\uB3C4 \uAE30\uC0AC \uBAA9\uB85D (\uB9E4\uCCB4\uBA85, \uC81C\uBAA9, \uB9C1\uD06C)", createEmpty: (id) => empty("press-list", id) },
+  { type: "timeline", label: "\uD0C0\uC784\uB77C\uC778", icon: "\u2193", desc: "\uC2DC\uAC04 \uC21C\uC11C\uB300\uB85C \uC815\uB9AC\uD558\uB294 \uC77C\uC815/\uACFC\uC815", createEmpty: (id) => empty("timeline", id) },
+  { type: "video", label: "\uC601\uC0C1", icon: "\u25B6", desc: "YouTube \uC601\uC0C1 \uC0BD\uC785", createEmpty: (id) => empty("video", id) },
+  { type: "cta", label: "CTA \uBC84\uD2BC", icon: "\u2192", desc: "\uD589\uB3D9 \uC720\uB3C4 \uBC84\uD2BC", createEmpty: (id) => empty("cta", id) }
+];
+function getBlockDef(type) {
+  return BUILT_IN_BLOCKS.find((d) => d.type === type);
+}
+
+export {
+  createEmptyBlock,
+  BUILT_IN_BLOCKS,
+  getBlockDef
+};

package/dist/chunk-G6J2DCC5.js

@@ -0,0 +1,77 @@
+import {
+  useImageDropZone
+} from "./chunk-QR225IXX.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N3ETBM74.js";
+
+// src/components/ImageUploadField.tsx
+import { useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ImageUploadField({
+  blockId,
+  field,
+  src,
+  className,
+  onUploadComplete,
+  onKeyTracked,
+  onClear
+}) {
+  const inputRef = useRef(null);
+  const drop = useImageDropZone({
+    onUpload: (result) => onUploadComplete(blockId, field, result.url),
+    onKeyTracked
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        style: { display: "none" },
+        onChange: async (e) => {
+          await drop.handleFileInput(e.target.files);
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        className: `be-img-upload ${src ? "has-image" : ""} ${className || ""}${drop.isDragOver ? " is-drag-over" : ""}${drop.isUploading ? " is-uploading" : ""}${drop.isResizing ? " is-resizing" : ""}`,
+        onClick: () => {
+          var _a;
+          return !src && !drop.isUploading && !drop.isResizing && ((_a = inputRef.current) == null ? void 0 : _a.click());
+        }
+      }, drop.dragHandlers), {
+        children: [
+          drop.isResizing ? /* @__PURE__ */ jsx("div", { className: "be-upload-spinner", children: "\uC774\uBBF8\uC9C0 \uCD5C\uC801\uD654 \uC911..." }) : drop.isUploading ? /* @__PURE__ */ jsx("div", { className: "be-upload-spinner", children: "\uC5C5\uB85C\uB4DC \uC911..." }) : drop.isDragOver ? /* @__PURE__ */ jsx("div", { className: "be-drag-hint", children: "\uC5EC\uAE30\uC5D0 \uB193\uC73C\uC138\uC694" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "be-img-upload-text", children: "+ \uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC" }),
+            /* @__PURE__ */ jsx("span", { className: "be-img-upload-hint", children: "JPG, PNG, WebP, GIF / 10MB \uCD08\uACFC \uC2DC \uC790\uB3D9 \uCD5C\uC801\uD654" })
+          ] }),
+          src && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("img", { src, alt: "" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "be-img-remove-btn",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onClear(blockId, field);
+                },
+                children: "\xD7"
+              }
+            )
+          ] })
+        ]
+      })
+    ),
+    drop.error && /* @__PURE__ */ jsx("div", { className: "be-error", children: drop.error })
+  ] });
+}
+
+export {
+  ImageUploadField
+};

package/dist/chunk-N3ETBM74.js

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+export {
+  __spreadValues,
+  __spreadProps
+};

package/dist/chunk-PPVXNJWI.js

@@ -0,0 +1,28 @@
+// src/core/serializer.ts
+function createSerializer(marker) {
+  const prefix = `<!-- ${marker}`;
+  function serialize(data) {
+    const json = JSON.stringify(data);
+    const encoded = typeof btoa === "function" ? btoa(encodeURIComponent(json)) : "";
+    return `
+${prefix}${encoded} -->`;
+  }
+  function deserialize(html) {
+    const idx = html.indexOf(prefix);
+    if (idx === -1) return null;
+    try {
+      const start = idx + prefix.length;
+      const end = html.indexOf(" -->", start);
+      const encoded = html.substring(start, end);
+      const json = decodeURIComponent(atob(encoded));
+      return JSON.parse(json);
+    } catch (e) {
+      return null;
+    }
+  }
+  return { serialize, deserialize };
+}
+
+export {
+  createSerializer
+};

package/dist/chunk-QR225IXX.js

@@ -0,0 +1,148 @@
+import {
+  ALLOWED_IMAGE_TYPES,
+  resizeImageIfNeeded,
+  validateImageFile
+} from "./chunk-3R3HAGQL.js";
+import {
+  useBlockEditorContext
+} from "./chunk-CYMYM7LP.js";
+
+// src/hooks/useImageDropZone.ts
+import { useState, useCallback, useRef } from "react";
+function useImageDropZone(options) {
+  const {
+    multiple = false,
+    maxFiles,
+    onUpload,
+    onKeyTracked,
+    disabled = false
+  } = options;
+  const { uploadImage, onError, autoResize, maxSizeMB } = useBlockEditorContext();
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isResizing, setIsResizing] = useState(false);
+  const [error, setError] = useState(null);
+  const dragCounterRef = useRef(0);
+  const processFiles = useCallback(
+    async (files) => {
+      if (disabled || files.length === 0) return;
+      let toProcess = multiple ? files : [files[0]];
+      if (maxFiles && toProcess.length > maxFiles) {
+        toProcess = toProcess.slice(0, maxFiles);
+        setError(`\uCD5C\uB300 ${maxFiles}\uAC1C\uAE4C\uC9C0 \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+      }
+      for (const file of toProcess) {
+        const validationError = validateImageFile(file);
+        if (validationError) {
+          setError(validationError);
+          return;
+        }
+      }
+      setError(null);
+      let resizedFiles;
+      const needsResize = autoResize && toProcess.some((f) => f.size > maxSize);
+      if (needsResize) {
+        setIsResizing(true);
+        try {
+          resizedFiles = [];
+          for (const file of toProcess) {
+            const result = await resizeImageIfNeeded(file);
+            if (result.file.size > maxSize) {
+              setError(
+                `\uC774\uBBF8\uC9C0 \uD06C\uAE30\uB97C \uC904\uC600\uC9C0\uB9CC \uC5EC\uC804\uD788 ${maxSizeMB}MB\uB97C \uCD08\uACFC\uD569\uB2C8\uB2E4. (${(result.file.size / 1024 / 1024).toFixed(1)}MB) \uB354 \uC791\uC740 \uC774\uBBF8\uC9C0\uB97C \uC0AC\uC6A9\uD574 \uC8FC\uC138\uC694.`
+              );
+              setIsResizing(false);
+              return;
+            }
+            resizedFiles.push(result.file);
+          }
+        } catch (err) {
+          const msg = err instanceof Error ? err.message : "\uC774\uBBF8\uC9C0 \uCD5C\uC801\uD654 \uC911 \uC624\uB958 \uBC1C\uC0DD";
+          setError(msg);
+          setIsResizing(false);
+          return;
+        }
+        setIsResizing(false);
+      } else {
+        resizedFiles = toProcess;
+      }
+      setIsUploading(true);
+      try {
+        for (const file of resizedFiles) {
+          const result = await uploadImage(file);
+          onUpload(result);
+          if (result.key) onKeyTracked == null ? void 0 : onKeyTracked(result.key);
+        }
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : "\uC5C5\uB85C\uB4DC \uC911 \uC624\uB958 \uBC1C\uC0DD";
+        setError(msg);
+        onError(msg);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [multiple, maxFiles, onUpload, onKeyTracked, disabled, uploadImage, onError, autoResize, maxSize, maxSizeMB]
+  );
+  const onDragEnter = useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
+    if ((_a = e.dataTransfer) == null ? void 0 : _a.types.includes("Files")) {
+      setIsDragOver(true);
+    }
+  }, []);
+  const onDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const onDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) {
+      setIsDragOver(false);
+    }
+  }, []);
+  const onDrop = useCallback(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragOver(false);
+      if (disabled) return;
+      const files = Array.from(((_a = e.dataTransfer) == null ? void 0 : _a.files) || []).filter(
+        (f) => ALLOWED_IMAGE_TYPES.includes(f.type)
+      );
+      if (files.length === 0) {
+        setError("\uC774\uBBF8\uC9C0 \uD30C\uC77C\uB9CC \uC5C5\uB85C\uB4DC\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.");
+        return;
+      }
+      processFiles(files);
+    },
+    [processFiles, disabled]
+  );
+  const handleFileInput = useCallback(
+    async (fileList) => {
+      const files = Array.from(fileList || []);
+      if (files.length > 0) {
+        await processFiles(files);
+      }
+    },
+    [processFiles]
+  );
+  return {
+    isDragOver,
+    isUploading,
+    isResizing,
+    error,
+    dragHandlers: { onDragEnter, onDragOver, onDragLeave, onDrop },
+    handleFileInput
+  };
+}
+
+export {
+  useImageDropZone
+};

package/dist/chunk-VIJV6FLT.js

@@ -0,0 +1,250 @@
+import {
+  h,
+  nl2br
+} from "./chunk-62BAOSP6.js";
+import {
+  createSerializer
+} from "./chunk-PPVXNJWI.js";
+import {
+  useBlockEditorContext
+} from "./chunk-CYMYM7LP.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N3ETBM74.js";
+
+// src/components/ArtistEditor.tsx
+import { useState, useCallback, useRef, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_MARKER = "abe-blocks:";
+function generateHtml(data) {
+  const hasText = !!data.text.trim();
+  const hasMain = !!data.mainImage;
+  const galleryImages = data.gallery.filter(Boolean);
+  const hasGallery = galleryImages.length > 0;
+  if (!hasText && !hasMain && !hasGallery) {
+    return '<div class="abe-pv-body"><div class="abe-pv-empty">\uC57D\uB825\uC744 \uC785\uB825\uD558\uBA74 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uD45C\uC2DC\uB429\uB2C8\uB2E4</div></div>';
+  }
+  let html = '<div class="abe-pv-body">';
+  if (hasText || hasMain) {
+    if (hasText && hasMain) {
+      html += '<div class="abe-pv-intro">';
+      html += `<div class="abe-pv-bio">${nl2br(data.text)}</div>`;
+      html += `<div class="abe-pv-main-img"><img src="${data.mainImage}" alt=""></div>`;
+      html += "</div>";
+    } else if (hasText) {
+      html += `<div class="abe-pv-bio" style="margin-bottom:20px">${nl2br(data.text)}</div>`;
+    } else {
+      html += `<div class="abe-pv-main-img" style="max-width:200px;margin-bottom:20px"><img src="${data.mainImage}" alt=""></div>`;
+    }
+  }
+  if (hasGallery) {
+    const n = galleryImages.length;
+    html += '<div class="abe-pv-gallery">';
+    html += '<div class="abe-pv-gallery-label">Gallery</div>';
+    html += `<div class="abe-pv-gallery-grid layout-${n}">`;
+    galleryImages.forEach((src, i) => {
+      html += `<img src="${h(src)}" alt="" class="abe-gi abe-gi-${i}">`;
+    });
+    html += "</div></div>";
+  }
+  html += "</div>";
+  return html;
+}
+function ArtistEditor({
+  content,
+  onChange,
+  onImageUploaded,
+  placeholder,
+  marker = DEFAULT_MARKER,
+  maxGallery = 5
+}) {
+  const { uploadImage, onError } = useBlockEditorContext();
+  const ser = useRef(createSerializer(marker));
+  const [data, setData] = useState(() => {
+    const existing = ser.current.deserialize(content);
+    if (existing) return existing;
+    const plainText = content ? content.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").trim() : "";
+    return { text: plainText, mainImage: "", gallery: [] };
+  });
+  const isInitialMount = useRef(true);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    const html = generateHtml(data);
+    const serialized = ser.current.serialize(data);
+    onChangeRef.current(html + serialized);
+  }, [data]);
+  const updateText = useCallback((text) => {
+    setData((prev) => __spreadProps(__spreadValues({}, prev), { text }));
+  }, []);
+  const updateMainImage = useCallback((mainImage) => {
+    setData((prev) => __spreadProps(__spreadValues({}, prev), { mainImage }));
+  }, []);
+  const updateGalleryImage = useCallback((index, src) => {
+    setData((prev) => {
+      const gallery = [...prev.gallery];
+      gallery[index] = src;
+      return __spreadProps(__spreadValues({}, prev), { gallery });
+    });
+  }, []);
+  const removeGalleryImage = useCallback((index) => {
+    setData((prev) => {
+      const gallery = prev.gallery.filter((_, i) => i !== index);
+      return __spreadProps(__spreadValues({}, prev), { gallery });
+    });
+  }, []);
+  const handleImageUpload = useCallback(
+    (target) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = async () => {
+        var _a;
+        const file = (_a = input.files) == null ? void 0 : _a[0];
+        if (!file) return;
+        try {
+          const result = await uploadImage(file);
+          if (result.url) {
+            if (target === "main") {
+              updateMainImage(result.url);
+            } else {
+              updateGalleryImage(target, result.url);
+            }
+            if (result.key) onImageUploaded == null ? void 0 : onImageUploaded(result.key);
+          }
+        } catch (e) {
+          onError("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uC911 \uC624\uB958 \uBC1C\uC0DD");
+        }
+      };
+      input.click();
+    },
+    [uploadImage, updateMainImage, updateGalleryImage, onImageUploaded, onError]
+  );
+  const handleGalleryMultiUpload = useCallback(() => {
+    const currentCount = data.gallery.filter(Boolean).length;
+    const remaining = maxGallery - currentCount;
+    if (remaining <= 0) {
+      onError(`\uAC24\uB7EC\uB9AC \uC774\uBBF8\uC9C0\uB294 \uCD5C\uB300 ${maxGallery}\uC7A5\uAE4C\uC9C0 \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`);
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.multiple = true;
+    input.onchange = async () => {
+      const files = Array.from(input.files || []).slice(0, remaining);
+      if (files.length === 0) return;
+      for (const file of files) {
+        try {
+          const result = await uploadImage(file);
+          if (result.url) {
+            setData((prev) => {
+              if (prev.gallery.filter(Boolean).length >= maxGallery) return prev;
+              return __spreadProps(__spreadValues({}, prev), { gallery: [...prev.gallery, result.url] });
+            });
+            if (result.key) onImageUploaded == null ? void 0 : onImageUploaded(result.key);
+          }
+        } catch (e) {
+          onError("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uC911 \uC624\uB958 \uBC1C\uC0DD");
+        }
+      }
+    };
+    input.click();
+  }, [data.gallery, maxGallery, uploadImage, onImageUploaded, onError]);
+  const previewHtml = generateHtml(data);
+  const galleryImages = data.gallery.filter(Boolean);
+  const galleryRemaining = maxGallery - galleryImages.length;
+  return /* @__PURE__ */ jsxs("div", { className: "abe-wrapper", children: [
+    /* @__PURE__ */ jsxs("div", { className: "abe-editor", children: [
+      /* @__PURE__ */ jsxs("div", { className: "abe-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "abe-section-label", children: "\uC57D\uB825 \uD14D\uC2A4\uD2B8" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            className: "abe-textarea",
+            value: data.text,
+            onChange: (e) => updateText(e.target.value),
+            placeholder: placeholder || "\uC57D\uB825\uC744 \uC785\uB825\uD558\uC138\uC694..."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "abe-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "abe-section-label", children: "\uB300\uD45C \uC774\uBBF8\uC9C0" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `abe-main-img-upload ${data.mainImage ? "has-image" : ""}`,
+            onClick: () => !data.mainImage && handleImageUpload("main"),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "abe-upload-text", children: [
+                "+ \uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC",
+                /* @__PURE__ */ jsx("br", {}),
+                "3:4 \uBE44\uC728 \uAD8C\uC7A5"
+              ] }),
+              data.mainImage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("img", { src: data.mainImage, alt: "" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "abe-img-remove-btn",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      updateMainImage("");
+                    },
+                    children: "\xD7"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "abe-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "abe-section-label", children: [
+          "\uCD94\uAC00 \uAC24\uB7EC\uB9AC (",
+          galleryImages.length,
+          "/",
+          maxGallery,
+          ")"
+        ] }),
+        galleryImages.length > 0 && /* @__PURE__ */ jsx("div", { className: "abe-gallery-grid", children: galleryImages.map((src, i) => /* @__PURE__ */ jsxs("div", { className: "abe-gallery-item has-image", children: [
+          /* @__PURE__ */ jsx("img", { src, alt: "" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "abe-img-remove-btn",
+              onClick: () => removeGalleryImage(i),
+              children: "\xD7"
+            }
+          )
+        ] }, i)) }),
+        galleryRemaining > 0 && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "abe-gallery-add-btn",
+            onClick: handleGalleryMultiUpload,
+            children: [
+              "+ \uC774\uBBF8\uC9C0 \uCD94\uAC00 (\uCD5C\uB300 ",
+              galleryRemaining,
+              "\uC7A5 \uC120\uD0DD \uAC00\uB2A5)"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "abe-preview", children: [
+      /* @__PURE__ */ jsx("div", { className: "abe-pv-label", children: "\uC2E4\uC2DC\uAC04 \uBBF8\uB9AC\uBCF4\uAE30" }),
+      /* @__PURE__ */ jsx("div", { className: "abe-pv-article", dangerouslySetInnerHTML: { __html: previewHtml } })
+    ] })
+  ] });
+}
+
+export {
+  ArtistEditor
+};

package/dist/components/ArtistEditor.d.ts

@@ -0,0 +1,12 @@
+interface ArtistEditorProps {
+    content: string;
+    onChange: (html: string) => void;
+    onImageUploaded?: (key: string) => void;
+    placeholder?: string;
+    /** Serialization marker (default: "abe-blocks:") */
+    marker?: string;
+    /** Max gallery images (default: 5) */
+    maxGallery?: number;
+}
+export declare function ArtistEditor({ content, onChange, onImageUploaded, placeholder, marker, maxGallery, }: ArtistEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ArtistEditor.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  ArtistEditor
+} from "../chunk-VIJV6FLT.js";
+import "../chunk-62BAOSP6.js";
+import "../chunk-PPVXNJWI.js";
+import "../chunk-CYMYM7LP.js";
+import "../chunk-N3ETBM74.js";
+export {
+  ArtistEditor
+};