@x-plat/design-system 0.5.48 → 0.5.50

package/dist/components/Editor/index.js

@@ -0,0 +1,727 @@
+// src/components/Editor/Editor.tsx
+import React from "react";
+
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/Editor/Editor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = [
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "code",
+  "heading",
+  "list",
+  "ordered-list",
+  "blockquote",
+  "code-block",
+  "link",
+  "image",
+  "divider"
+];
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "br",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "code",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "strike",
+  "del",
+  "a",
+  "img",
+  "hr",
+  "span",
+  "div"
+]);
+var ALLOWED_ATTRS = {
+  a: ["href", "target", "rel"],
+  img: ["src", "alt"]
+};
+var sanitizeHtml = (input) => {
+  const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
+  const root = doc.body.firstElementChild;
+  if (!root) return "";
+  const walk = (node) => {
+    const children = Array.from(node.children);
+    for (const child of children) {
+      const tag = child.tagName.toLowerCase();
+      if (!ALLOWED_TAGS.has(tag)) {
+        while (child.firstChild) node.insertBefore(child.firstChild, child);
+        node.removeChild(child);
+        continue;
+      }
+      const allowed = ALLOWED_ATTRS[tag] || [];
+      for (const attr of Array.from(child.attributes)) {
+        if (!allowed.includes(attr.name)) {
+          child.removeAttribute(attr.name);
+        }
+        if (attr.name === "href" || attr.name === "src") {
+          const val = attr.value.trim().toLowerCase();
+          if (val.startsWith("javascript:") || val.startsWith("data:text/html")) {
+            child.removeAttribute(attr.name);
+          }
+        }
+      }
+      walk(child);
+    }
+  };
+  walk(root);
+  return root.innerHTML;
+};
+var escapeHtml = (text) => {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML.replace(/\n/g, "<br>");
+};
+var SLASH_ITEMS = [
+  { key: "paragraph", label: "\uB2E8\uB77D", hint: "\uAE30\uBCF8 \uD14D\uC2A4\uD2B8" },
+  { key: "heading", label: "\uC81C\uBAA9 1", hint: "\uD070 \uC81C\uBAA9" },
+  { key: "list", label: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", hint: "\u2022 \uD56D\uBAA9" },
+  { key: "ordered-list", label: "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D", hint: "1. \uD56D\uBAA9" },
+  { key: "blockquote", label: "\uC778\uC6A9", hint: "" },
+  { key: "code-block", label: "\uCF54\uB4DC \uBE14\uB85D", hint: "" },
+  { key: "divider", label: "\uAD6C\uBD84\uC120", hint: "\u2500" },
+  { key: "image", label: "\uC774\uBBF8\uC9C0", hint: "" }
+];
+var Editor = (props) => {
+  const {
+    value = "",
+    onChange,
+    placeholder = "\uB0B4\uC6A9\uC744 \uC785\uB825\uD558\uC138\uC694",
+    readOnly = false,
+    toolbar = DEFAULT_TOOLBAR,
+    enableSlashCommand = true,
+    enableMarkdownShortcuts = true,
+    onImageUpload,
+    minHeight = 200
+  } = props;
+  const editorRef = React.useRef(null);
+  const lastRangeRef = React.useRef(null);
+  const composingRef = React.useRef(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isEmpty, setIsEmpty] = React.useState(!value);
+  const [activeFormats, setActiveFormats] = React.useState(/* @__PURE__ */ new Set());
+  const [slashOpen, setSlashOpen] = React.useState(false);
+  const [slashFilter, setSlashFilter] = React.useState("");
+  const [slashIdx, setSlashIdx] = React.useState(0);
+  const [slashPos, setSlashPos] = React.useState({ top: 0, left: 0 });
+  const slashStartRangeRef = React.useRef(null);
+  const [linkOpen, setLinkOpen] = React.useState(false);
+  const [linkValue, setLinkValue] = React.useState("");
+  const [linkPos, setLinkPos] = React.useState({ top: 0, left: 0 });
+  React.useEffect(() => {
+    if (!editorRef.current) return;
+    if (editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = sanitizeHtml(value || "");
+      updateEmpty();
+    }
+  }, [value]);
+  const updateEmpty = () => {
+    const el = editorRef.current;
+    if (!el) return;
+    const text = el.textContent || "";
+    const childCount = el.children.length;
+    setIsEmpty(text.length === 0 && childCount <= 1);
+  };
+  const saveSelection = () => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0 && editorRef.current?.contains(sel.anchorNode)) {
+      lastRangeRef.current = sel.getRangeAt(0).cloneRange();
+    }
+  };
+  const restoreSelection = () => {
+    if (!lastRangeRef.current) return;
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(lastRangeRef.current);
+  };
+  const updateActiveFormats = () => {
+    if (!editorRef.current) return;
+    const sel = window.getSelection();
+    if (!sel || !editorRef.current.contains(sel.anchorNode)) return;
+    const next = /* @__PURE__ */ new Set();
+    try {
+      if (document.queryCommandState("bold")) next.add("bold");
+      if (document.queryCommandState("italic")) next.add("italic");
+      if (document.queryCommandState("underline")) next.add("underline");
+      if (document.queryCommandState("strikethrough")) next.add("strikethrough");
+      if (document.queryCommandState("insertUnorderedList")) next.add("list");
+      if (document.queryCommandState("insertOrderedList")) next.add("ordered-list");
+      const block = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
+      if (block) next.add(`block:${block}`);
+    } catch {
+    }
+    setActiveFormats(next);
+  };
+  const exec = (cmd, val) => {
+    document.execCommand(cmd, false, val);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  };
+  const setBlock = (tag) => {
+    exec("formatBlock", tag);
+  };
+  const insertDivider = () => {
+    exec("insertHorizontalRule");
+    const el = editorRef.current;
+    if (el && el.lastElementChild?.tagName === "HR") {
+      const p = document.createElement("p");
+      p.innerHTML = "<br>";
+      el.appendChild(p);
+      handleInput();
+    }
+  };
+  const insertImageByUrl = (url) => {
+    if (!url) return;
+    exec("insertImage", url);
+  };
+  const triggerImageUpload = async () => {
+    if (!onImageUpload) {
+      const url = window.prompt("\uC774\uBBF8\uC9C0 URL");
+      if (url) {
+        restoreSelection();
+        insertImageByUrl(url);
+      }
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      try {
+        const url = await onImageUpload(file);
+        restoreSelection();
+        insertImageByUrl(url);
+      } catch (err) {
+        console.error("\uC774\uBBF8\uC9C0 \uC5C5\uB85C\uB4DC \uC2E4\uD328:", err);
+      }
+    };
+    input.click();
+  };
+  const openSlashMenu = () => {
+    if (!enableSlashCommand) return;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    slashStartRangeRef.current = range.cloneRange();
+    const rect = range.getBoundingClientRect();
+    const editorRect = editorRef.current.getBoundingClientRect();
+    setSlashPos({
+      top: rect.bottom - editorRect.top + 4,
+      left: rect.left - editorRect.left
+    });
+    setSlashFilter("");
+    setSlashIdx(0);
+    setSlashOpen(true);
+  };
+  const closeSlashMenu = () => {
+    setSlashOpen(false);
+    setSlashFilter("");
+    setSlashIdx(0);
+    slashStartRangeRef.current = null;
+  };
+  const filteredSlashItems = React.useMemo(() => {
+    if (!slashFilter) return SLASH_ITEMS;
+    const f = slashFilter.toLowerCase();
+    return SLASH_ITEMS.filter((it) => it.label.toLowerCase().includes(f) || it.key.includes(f));
+  }, [slashFilter]);
+  const removeSlashTrigger = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType === Node.TEXT_NODE) {
+      const text = node.textContent || "";
+      const idx = text.lastIndexOf("/");
+      if (idx >= 0) {
+        node.textContent = text.slice(0, idx) + text.slice(range.startOffset);
+        const newRange = document.createRange();
+        newRange.setStart(node, idx);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+      }
+    }
+  };
+  const applySlashItem = (item) => {
+    removeSlashTrigger();
+    closeSlashMenu();
+    switch (item.key) {
+      case "paragraph":
+        setBlock("p");
+        break;
+      case "heading":
+        setBlock("h2");
+        break;
+      case "list":
+        exec("insertUnorderedList");
+        break;
+      case "ordered-list":
+        exec("insertOrderedList");
+        break;
+      case "blockquote":
+        setBlock("blockquote");
+        break;
+      case "code-block":
+        setBlock("pre");
+        break;
+      case "divider":
+        insertDivider();
+        break;
+      case "image":
+        triggerImageUpload();
+        break;
+      default:
+        break;
+    }
+  };
+  const openLinkEditor = () => {
+    saveSelection();
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const rect = range.getBoundingClientRect();
+    const editorRect = editorRef.current.getBoundingClientRect();
+    setLinkPos({
+      top: rect.bottom - editorRect.top + 4,
+      left: rect.left - editorRect.left
+    });
+    const anchor = sel.anchorNode?.parentElement?.closest("a");
+    setLinkValue(anchor?.getAttribute("href") || "");
+    setLinkOpen(true);
+  };
+  const applyLink = () => {
+    restoreSelection();
+    if (linkValue) {
+      exec("createLink", linkValue);
+      const sel = window.getSelection();
+      const anchor = sel?.anchorNode?.parentElement?.closest("a");
+      if (anchor) {
+        anchor.setAttribute("target", "_blank");
+        anchor.setAttribute("rel", "noopener noreferrer");
+      }
+    } else {
+      exec("unlink");
+    }
+    setLinkOpen(false);
+  };
+  const tryMarkdownShortcut = () => {
+    if (!enableMarkdownShortcuts) return false;
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    const node = range.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return false;
+    const text = (node.textContent || "").slice(0, range.startOffset);
+    const patterns = [
+      [/^###\s$/, () => setBlock("h3")],
+      [/^##\s$/, () => setBlock("h2")],
+      [/^#\s$/, () => setBlock("h1")],
+      [/^-\s$/, () => exec("insertUnorderedList")],
+      [/^\*\s$/, () => exec("insertUnorderedList")],
+      [/^1\.\s$/, () => exec("insertOrderedList")],
+      [/^>\s$/, () => setBlock("blockquote")]
+    ];
+    for (const [re, fn] of patterns) {
+      if (re.test(text)) {
+        node.textContent = (node.textContent || "").slice(range.startOffset);
+        const newRange = document.createRange();
+        newRange.setStart(node, 0);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        fn();
+        return true;
+      }
+    }
+    return false;
+  };
+  const handleInput = () => {
+    if (composingRef.current) return;
+    const el = editorRef.current;
+    if (!el) return;
+    onChange?.(el.innerHTML);
+    updateEmpty();
+    updateActiveFormats();
+    if (slashOpen) {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const range = sel.getRangeAt(0);
+        const node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+          const text = node.textContent || "";
+          const lastSlash = text.lastIndexOf("/", range.startOffset - 1);
+          if (lastSlash >= 0) {
+            const filter = text.slice(lastSlash + 1, range.startOffset);
+            if (filter.includes(" ") || filter.includes("\n")) {
+              closeSlashMenu();
+            } else {
+              setSlashFilter(filter);
+              setSlashIdx(0);
+            }
+          } else {
+            closeSlashMenu();
+          }
+        }
+      }
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (readOnly) return;
+    if (slashOpen) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSlashIdx((i) => Math.min(i + 1, filteredSlashItems.length - 1));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSlashIdx((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const item = filteredSlashItems[slashIdx];
+        if (item) applySlashItem(item);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeSlashMenu();
+        return;
+      }
+    }
+    if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
+      const k = e.key.toLowerCase();
+      if (k === "b") {
+        e.preventDefault();
+        exec("bold");
+        return;
+      }
+      if (k === "i") {
+        e.preventDefault();
+        exec("italic");
+        return;
+      }
+      if (k === "u") {
+        e.preventDefault();
+        exec("underline");
+        return;
+      }
+      if (k === "k") {
+        e.preventDefault();
+        openLinkEditor();
+        return;
+      }
+    }
+    if (enableSlashCommand && e.key === "/") {
+      setTimeout(openSlashMenu, 0);
+    }
+    if (enableMarkdownShortcuts && e.key === " ") {
+      if (tryMarkdownShortcut()) {
+        e.preventDefault();
+      }
+    }
+  };
+  const handlePaste = (e) => {
+    if (readOnly) return;
+    e.preventDefault();
+    const html = e.clipboardData.getData("text/html");
+    const text = e.clipboardData.getData("text/plain");
+    const clean = html ? sanitizeHtml(html) : escapeHtml(text);
+    document.execCommand("insertHTML", false, clean);
+    handleInput();
+  };
+  const handleCompositionStart = () => {
+    composingRef.current = true;
+  };
+  const handleCompositionEnd = () => {
+    composingRef.current = false;
+    handleInput();
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    updateActiveFormats();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    saveSelection();
+  };
+  const handleSelectionUpdate = () => {
+    updateActiveFormats();
+  };
+  const onToolbarAction = (item) => {
+    switch (item) {
+      case "bold":
+        exec("bold");
+        break;
+      case "italic":
+        exec("italic");
+        break;
+      case "underline":
+        exec("underline");
+        break;
+      case "strikethrough":
+        exec("strikethrough");
+        break;
+      case "code": {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+        const range = sel.getRangeAt(0);
+        const code = document.createElement("code");
+        try {
+          range.surroundContents(code);
+        } catch {
+          const frag = range.extractContents();
+          code.appendChild(frag);
+          range.insertNode(code);
+        }
+        handleInput();
+        break;
+      }
+      case "heading":
+        setBlock("h2");
+        break;
+      case "list":
+        exec("insertUnorderedList");
+        break;
+      case "ordered-list":
+        exec("insertOrderedList");
+        break;
+      case "blockquote":
+        setBlock("blockquote");
+        break;
+      case "code-block":
+        setBlock("pre");
+        break;
+      case "link":
+        openLinkEditor();
+        break;
+      case "image":
+        triggerImageUpload();
+        break;
+      case "divider":
+        insertDivider();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
+    !readOnly && /* @__PURE__ */ jsx(
+      EditorToolbar,
+      {
+        items: toolbar,
+        active: activeFormats,
+        onAction: onToolbarAction
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
+      isEmpty && !isFocused && /* @__PURE__ */ jsx("div", { className: "lib-xplat-editor__placeholder", children: placeholder }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          contentEditable: !readOnly,
+          suppressContentEditableWarning: true,
+          className: "lib-xplat-editor__editable",
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onKeyUp: handleSelectionUpdate,
+          onMouseUp: handleSelectionUpdate,
+          onPaste: handlePaste,
+          onCompositionStart: handleCompositionStart,
+          onCompositionEnd: handleCompositionEnd,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          spellCheck: true
+        }
+      ),
+      slashOpen && filteredSlashItems.length > 0 && /* @__PURE__ */ jsx(
+        SlashMenu,
+        {
+          position: slashPos,
+          items: filteredSlashItems,
+          activeIndex: slashIdx,
+          onSelect: applySlashItem,
+          onClose: closeSlashMenu
+        }
+      ),
+      linkOpen && /* @__PURE__ */ jsx(
+        LinkPopover,
+        {
+          position: linkPos,
+          value: linkValue,
+          onChange: setLinkValue,
+          onConfirm: applyLink,
+          onClose: () => setLinkOpen(false)
+        }
+      )
+    ] })
+  ] });
+};
+Editor.displayName = "Editor";
+var Editor_default = Editor;
+var TOOLBAR_LABEL = {
+  bold: "B",
+  italic: "I",
+  underline: "U",
+  strikethrough: "S",
+  code: "<>",
+  heading: "H",
+  list: "\u2022",
+  "ordered-list": "1.",
+  blockquote: "\u275D",
+  "code-block": "[ ]",
+  link: "\u{1F517}",
+  image: "\u{1F5BC}",
+  divider: "\u2014"
+};
+var TOOLBAR_TITLE = {
+  bold: "\uAD75\uAC8C (\u2318B)",
+  italic: "\uAE30\uC6B8\uC784 (\u2318I)",
+  underline: "\uBC11\uC904 (\u2318U)",
+  strikethrough: "\uCDE8\uC18C\uC120",
+  code: "\uC778\uB77C\uC778 \uCF54\uB4DC",
+  heading: "\uC81C\uBAA9",
+  list: "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D",
+  "ordered-list": "\uBC88\uD638 \uB9E4\uAE30\uAE30 \uBAA9\uB85D",
+  blockquote: "\uC778\uC6A9",
+  "code-block": "\uCF54\uB4DC \uBE14\uB85D",
+  link: "\uB9C1\uD06C (\u2318K)",
+  image: "\uC774\uBBF8\uC9C0",
+  divider: "\uAD6C\uBD84\uC120"
+};
+var isActive = (item, active) => {
+  if (item === "heading") return active.has("block:h1") || active.has("block:h2") || active.has("block:h3");
+  if (item === "blockquote") return active.has("block:blockquote");
+  if (item === "code-block") return active.has("block:pre");
+  return active.has(item);
+};
+var EditorToolbar = ({ items, active, onAction }) => {
+  return /* @__PURE__ */ jsx("div", { className: "lib-xplat-editor__toolbar", children: items.map((item) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx_default("lib-xplat-editor__toolbar-btn", isActive(item, active) && "active"),
+      title: TOOLBAR_TITLE[item],
+      onMouseDown: (e) => {
+        e.preventDefault();
+        onAction(item);
+      },
+      children: TOOLBAR_LABEL[item]
+    },
+    item
+  )) });
+};
+var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      const menu = document.querySelector(".lib-xplat-editor__slash-menu");
+      if (menu && !menu.contains(target)) onClose();
+    };
+    window.addEventListener("mousedown", handleClickOutside);
+    return () => window.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "lib-xplat-editor__slash-menu",
+      style: { top: position.top, left: position.left },
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("lib-xplat-editor__slash-item", i === activeIndex && "active"),
+          onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect(item);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "label", children: item.label }),
+            item.hint && /* @__PURE__ */ jsx("span", { className: "hint", children: item.hint })
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+};
+var LinkPopover = ({ position, value, onChange, onConfirm, onClose }) => {
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "lib-xplat-editor__link-popover",
+      style: { top: position.top, left: position.left },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "url",
+            placeholder: "https://",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onConfirm();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { type: "button", onMouseDown: (e) => {
+          e.preventDefault();
+          onConfirm();
+        }, children: "\uC801\uC6A9" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onMouseDown: (e) => {
+          e.preventDefault();
+          onClose();
+        }, children: "\uCDE8\uC18C" })
+      ]
+    }
+  );
+};
+export {
+  Editor_default as default
+};