@x-plat/design-system 0.11.0 → 0.12.0

package/dist/components/Editor/index.js

@@ -17,6 +17,109 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// src/components/Editor/highlight.ts
+var CODE_LANGUAGES = [
+  { value: "plain", label: "\uC5C6\uC74C" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "json", label: "JSON" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "python", label: "Python" },
+  { value: "sql", label: "SQL" },
+  { value: "bash", label: "Bash" }
+];
+var KEYWORDS = {
+  plain: [],
+  javascript: "const let var function return if else for while class new this import export from default async await try catch throw typeof instanceof null undefined true false break continue switch case do delete in of yield".split(" "),
+  typescript: "const let var function return if else for while class new this import export from default async await try catch throw typeof instanceof null undefined true false break continue switch case do delete in of yield interface type enum implements extends public private protected readonly as satisfies keyof infer never unknown any".split(" "),
+  json: ["true", "false", "null"],
+  html: [],
+  css: [],
+  python: "def class return if elif else for while import from as try except finally raise with lambda None True False and or not in is pass break continue global nonlocal yield async await".split(" "),
+  sql: "SELECT FROM WHERE INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE ALTER DROP JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER HAVING LIMIT OFFSET AS AND OR NOT NULL DISTINCT UNION INDEX PRIMARY KEY FOREIGN REFERENCES DEFAULT".split(" "),
+  bash: "if then else fi for while do done case esac function return export local echo cd ls rm cp mv mkdir sudo source set unset exit".split(" ")
+};
+var LINE_COMMENT = {
+  javascript: "//",
+  typescript: "//",
+  css: "",
+  python: "#",
+  sql: "--",
+  bash: "#"
+};
+var escape = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var wrap = (cls, text) => `<span class="tok-${cls}">${escape(text)}</span>`;
+var highlight = (code, lang) => {
+  if (lang === "plain" || !code) return escape(code);
+  const keywords = new Set(KEYWORDS[lang]);
+  const lineComment = LINE_COMMENT[lang];
+  const caseInsensitive = lang === "sql";
+  let out = "";
+  let i = 0;
+  while (i < code.length) {
+    const rest = code.slice(i);
+    if ((lang === "javascript" || lang === "typescript" || lang === "css") && rest.startsWith("/*")) {
+      const end = code.indexOf("*/", i + 2);
+      const stop = end === -1 ? code.length : end + 2;
+      out += wrap("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    if (lineComment && rest.startsWith(lineComment)) {
+      const nl = code.indexOf("\n", i);
+      const stop = nl === -1 ? code.length : nl;
+      out += wrap("comment", code.slice(i, stop));
+      i = stop;
+      continue;
+    }
+    const q = rest[0];
+    if (q === '"' || q === "'" || q === "`") {
+      let j = 1;
+      while (j < rest.length) {
+        if (rest[j] === "\\") {
+          j += 2;
+          continue;
+        }
+        if (rest[j] === q) {
+          j += 1;
+          break;
+        }
+        if (rest[j] === "\n" && q !== "`") break;
+        j += 1;
+      }
+      out += wrap("string", rest.slice(0, j));
+      i += j;
+      continue;
+    }
+    const num = /^\d+(\.\d+)?/.exec(rest);
+    if (num && !/[\w$]/.test(code[i - 1] ?? "")) {
+      out += wrap("number", num[0]);
+      i += num[0].length;
+      continue;
+    }
+    const word = /^[A-Za-z_$][\w$]*/.exec(rest);
+    if (word) {
+      const w = word[0];
+      const hit = caseInsensitive ? keywords.has(w.toUpperCase()) : keywords.has(w);
+      out += hit ? wrap("keyword", w) : escape(w);
+      i += w.length;
+      continue;
+    }
+    if (lang === "html" && rest.startsWith("<")) {
+      const tag = /^<\/?[A-Za-z][\w-]*/.exec(rest);
+      if (tag) {
+        out += wrap("keyword", tag[0]);
+        i += tag[0].length;
+        continue;
+      }
+    }
+    out += escape(code[i]);
+    i += 1;
+  }
+  return out;
+};
+
 // src/components/Editor/Editor.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR = [
@@ -25,14 +128,27 @@ var DEFAULT_TOOLBAR = [
   "underline",
   "strikethrough",
   "code",
-  "heading",
+  "heading-1",
+  "heading-2",
+  "heading-3",
   "list",
   "ordered-list",
   "blockquote",
   "code-block",
   "link",
   "image",
-  "divider"
+  "divider",
+  "checklist",
+  "table",
+  "align-left",
+  "align-center",
+  "align-right",
+  "highlight",
+  "superscript",
+  "subscript",
+  "clear-format",
+  "undo",
+  "redo"
 ];
 var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "p",
@@ -61,11 +177,41 @@ var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "img",
   "hr",
   "span",
-  "div"
+  "div",
+  "sub",
+  "sup",
+  "mark",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td"
 ]);
 var ALLOWED_ATTRS = {
   a: ["href", "target", "rel"],
-  img: ["src", "alt"]
+  img: ["src", "alt", "width"],
+  // 정렬·체크리스트는 클래스로만 표현한다. style 을 열면 붙여넣기로 아무 CSS 나 들어온다
+  p: ["class"],
+  h1: ["class"],
+  h2: ["class"],
+  h3: ["class"],
+  h4: ["class"],
+  h5: ["class"],
+  h6: ["class"],
+  ul: ["class"],
+  ol: ["class"],
+  li: ["class", "data-checked"],
+  blockquote: ["class"],
+  div: ["class"],
+  span: ["class"],
+  pre: ["class"],
+  code: ["class"],
+  mark: ["class"],
+  table: ["class"],
+  td: ["class"],
+  th: ["class"],
+  tr: ["class"]
 };
 var DROP_WITH_CONTENT = /* @__PURE__ */ new Set([
   "script",
@@ -118,7 +264,9 @@ var escapeHtml = (text) => {
 };
 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: "heading-1", label: "\uC81C\uBAA9 1", hint: "\uAC00\uC7A5 \uD070 \uC81C\uBAA9" },
+  { key: "heading-2", label: "\uC81C\uBAA9 2", hint: "" },
+  { key: "heading-3", label: "\uC81C\uBAA9 3", hint: "" },
   { 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: "" },
@@ -161,6 +309,8 @@ var Editor = (props) => {
     el.innerHTML = sanitizeHtml(value || "");
     if (!el.firstChild) el.innerHTML = "<p><br></p>";
     lastEmittedRef.current = null;
+    historyRef.current = [{ html: el.innerHTML, caret: 0 }];
+    historyIdxRef.current = 0;
     updateEmpty();
   }, [value]);
   const updateEmpty = () => {
@@ -205,6 +355,17 @@ var Editor = (props) => {
       if (document.queryCommandState("insertOrderedList")) next.add("ordered-list");
       const block = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
       if (block) next.add(`block:${block}`);
+      if (document.queryCommandState("superscript")) next.add("superscript");
+      if (document.queryCommandState("subscript")) next.add("subscript");
+    } catch {
+    }
+    try {
+      const blockEl = currentBlock();
+      if (blockEl?.classList.contains("align-center")) next.add("align:center");
+      else if (blockEl?.classList.contains("align-right")) next.add("align:right");
+      else if (blockEl) next.add("align:left");
+      if (blockEl?.closest("mark")) next.add("highlight");
+      if (blockEl?.closest("ul.checklist")) next.add("checklist");
     } catch {
     }
     setActiveFormats(next);
@@ -218,6 +379,122 @@ var Editor = (props) => {
   const setBlock = (tag) => {
     exec("formatBlock", tag);
   };
+  const toggleBlock = (tag) => {
+    const current = String(document.queryCommandValue("formatBlock") || "").toLowerCase();
+    setBlock(current === tag ? "p" : tag);
+  };
+  const historyRef = React.useRef([]);
+  const historyIdxRef = React.useRef(-1);
+  const lastPushAtRef = React.useRef(0);
+  const isRestoringRef = React.useRef(false);
+  const caretOffset = (rootEl) => {
+    const el = rootEl ?? editorRef.current;
+    const sel = window.getSelection();
+    if (!el || !sel || sel.rangeCount === 0 || !el.contains(sel.anchorNode)) return 0;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.selectNodeContents(el);
+    range.setEnd(sel.getRangeAt(0).endContainer, sel.getRangeAt(0).endOffset);
+    return range.toString().length;
+  };
+  const setCaretOffset = (offset, rootEl) => {
+    const el = rootEl ?? editorRef.current;
+    if (!el) return;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    let remaining = offset;
+    let node = null;
+    while (node = walker.nextNode()) {
+      const len = node.textContent?.length ?? 0;
+      if (remaining <= len) {
+        const range = document.createRange();
+        range.setStart(node, remaining);
+        range.collapse(true);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        return;
+      }
+      remaining -= len;
+    }
+    placeCaretAtEnd(el);
+  };
+  const pushHistory = (force = false) => {
+    const el = editorRef.current;
+    if (!el || isRestoringRef.current) return;
+    const html = el.innerHTML;
+    const hist = historyRef.current;
+    const cur = hist[historyIdxRef.current];
+    if (cur && cur.html === html) return;
+    const now = Date.now();
+    const coalesce = !force && cur && now - lastPushAtRef.current < 500;
+    lastPushAtRef.current = now;
+    if (coalesce) {
+      hist[historyIdxRef.current] = { html, caret: caretOffset() };
+      return;
+    }
+    hist.length = historyIdxRef.current + 1;
+    hist.push({ html, caret: caretOffset() });
+    if (hist.length > 200) hist.shift();
+    historyIdxRef.current = hist.length - 1;
+  };
+  const applySnapshot = (snap) => {
+    const el = editorRef.current;
+    if (!el) return;
+    isRestoringRef.current = true;
+    el.innerHTML = snap.html;
+    setCaretOffset(snap.caret);
+    isRestoringRef.current = false;
+    lastEmittedRef.current = el.innerHTML;
+    onChange?.(el.innerHTML);
+    updateEmpty();
+    updateActiveFormats();
+  };
+  const undo = () => {
+    pushHistory(true);
+    if (historyIdxRef.current <= 0) return;
+    historyIdxRef.current -= 1;
+    applySnapshot(historyRef.current[historyIdxRef.current]);
+  };
+  const redo = () => {
+    if (historyIdxRef.current >= historyRef.current.length - 1) return;
+    historyIdxRef.current += 1;
+    applySnapshot(historyRef.current[historyIdxRef.current]);
+  };
+  const langOf = (pre) => {
+    const cls = Array.from(pre.classList).find((c) => c.startsWith("lang-"));
+    return cls?.slice(5) ?? "plain";
+  };
+  const [codeLang, setCodeLang] = React.useState("plain");
+  const highlightRafRef = React.useRef(0);
+  const rehighlight = (pre) => {
+    if (composingRef.current) return;
+    const code = pre.querySelector("code");
+    if (!code) return;
+    const lang = langOf(pre);
+    const text = code.textContent || "";
+    const next = highlight(text, lang);
+    if (code.innerHTML === next) return;
+    const caret = caretOffset(code);
+    isRestoringRef.current = true;
+    code.innerHTML = next;
+    setCaretOffset(caret, code);
+    isRestoringRef.current = false;
+  };
+  const scheduleHighlight = () => {
+    const pre = closestPre();
+    if (!pre) return;
+    cancelAnimationFrame(highlightRafRef.current);
+    highlightRafRef.current = requestAnimationFrame(() => rehighlight(pre));
+  };
+  const changeCodeLang = (lang) => {
+    const pre = closestPre();
+    if (!pre) return;
+    pushHistory(true);
+    Array.from(pre.classList).filter((c) => c.startsWith("lang-")).forEach((c) => pre.classList.remove(c));
+    if (lang !== "plain") pre.classList.add(`lang-${lang}`);
+    setCodeLang(lang);
+    rehighlight(pre);
+    handleInput();
+  };
   const closestPre = () => {
     const sel = window.getSelection();
     const node = sel?.anchorNode;
@@ -226,6 +503,7 @@ var Editor = (props) => {
     return el?.closest("pre") ?? null;
   };
   const insertCodeBlock = () => {
+    pushHistory(true);
     const el = editorRef.current;
     const sel = window.getSelection();
     if (!el || !sel || sel.rangeCount === 0) return;
@@ -308,7 +586,167 @@ var Editor = (props) => {
     sel.addRange(r2);
     editorRef.current?.focus();
   };
+  const clearFormat = () => {
+    exec("removeFormat");
+    exec("unlink");
+    setBlock("p");
+  };
+  const indentList = (outdent) => {
+    exec(outdent ? "outdent" : "indent");
+  };
+  const inListItem = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !editorRef.current?.contains(node)) return false;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return !!el?.closest("li");
+  };
+  const currentBlock = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    const root = editorRef.current;
+    if (!node || !root?.contains(node)) return null;
+    let el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    while (el && el !== root && !/^(P|H[1-6]|LI|BLOCKQUOTE|PRE|DIV|TD|TH)$/.test(el.tagName)) {
+      el = el.parentElement;
+    }
+    return el && el !== root ? el : null;
+  };
+  const setAlign = (align) => {
+    const block = currentBlock();
+    if (!block) return;
+    pushHistory(true);
+    block.classList.remove("align-left", "align-center", "align-right");
+    if (align !== "left") block.classList.add(`align-${align}`);
+    handleInput();
+  };
+  const toggleChecklist = () => {
+    pushHistory(true);
+    const block = currentBlock();
+    const list = block?.closest("ul");
+    if (list?.classList.contains("checklist")) {
+      list.classList.remove("checklist");
+      list.querySelectorAll("li").forEach((li) => li.removeAttribute("data-checked"));
+      handleInput();
+      return;
+    }
+    if (list) {
+      list.classList.add("checklist");
+      list.querySelectorAll("li").forEach((li) => li.setAttribute("data-checked", "false"));
+      handleInput();
+      return;
+    }
+    exec("insertUnorderedList");
+    const made = currentBlock()?.closest("ul");
+    if (made) {
+      made.classList.add("checklist");
+      made.querySelectorAll("li").forEach((li) => li.setAttribute("data-checked", "false"));
+    }
+    handleInput();
+  };
+  const handleEditorClick = (e) => {
+    if (readOnly) return;
+    const target = e.target;
+    const li = target.closest?.("li");
+    if (!li || !li.closest("ul.checklist")) return;
+    const rect = li.getBoundingClientRect();
+    if (e.clientX - rect.left > 20) return;
+    e.preventDefault();
+    pushHistory(true);
+    li.setAttribute("data-checked", li.getAttribute("data-checked") === "true" ? "false" : "true");
+    handleInput();
+  };
+  const toggleHighlight = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+    pushHistory(true);
+    const range = sel.getRangeAt(0);
+    const node = sel.anchorNode;
+    const el = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement;
+    const existing = el?.closest("mark");
+    if (existing) {
+      const parent = existing.parentNode;
+      while (existing.firstChild) parent?.insertBefore(existing.firstChild, existing);
+      parent?.removeChild(existing);
+      handleInput();
+      return;
+    }
+    const mark = document.createElement("mark");
+    try {
+      range.surroundContents(mark);
+    } catch {
+      const frag = range.extractContents();
+      mark.appendChild(frag);
+      range.insertNode(mark);
+    }
+    handleInput();
+  };
+  const insertTable = (cols = 3, rows = 2) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    pushHistory(true);
+    const table = document.createElement("table");
+    const thead = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    for (let c = 0; c < cols; c++) {
+      const th = document.createElement("th");
+      th.innerHTML = "<br>";
+      headRow.appendChild(th);
+    }
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    for (let r2 = 0; r2 < rows; r2++) {
+      const tr = document.createElement("tr");
+      for (let c = 0; c < cols; c++) {
+        const td = document.createElement("td");
+        td.innerHTML = "<br>";
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    const range = sel.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(table);
+    ensureParagraphAfter(table);
+    const first = table.querySelector("th");
+    if (first) placeCaretAtEnd(first);
+    handleInput();
+  };
+  const moveTableCell = (backwards) => {
+    const block = currentBlock();
+    const cell = block?.closest("td, th");
+    if (!cell) return false;
+    const table = cell.closest("table");
+    if (!table) return false;
+    const cells = Array.from(table.querySelectorAll("td, th"));
+    const i = cells.indexOf(cell);
+    const next = cells[i + (backwards ? -1 : 1)];
+    if (next) {
+      placeCaretAtEnd(next);
+      return true;
+    }
+    if (!backwards) {
+      pushHistory(true);
+      const lastRow = table.querySelector("tbody")?.lastElementChild;
+      if (lastRow) {
+        const tr = document.createElement("tr");
+        for (let c = 0; c < lastRow.children.length; c++) {
+          const td = document.createElement("td");
+          td.innerHTML = "<br>";
+          tr.appendChild(td);
+        }
+        lastRow.after(tr);
+        placeCaretAtEnd(tr.firstElementChild);
+        handleInput();
+        return true;
+      }
+    }
+    return false;
+  };
   const insertDivider = () => {
+    pushHistory(true);
     exec("insertHorizontalRule");
     const el = editorRef.current;
     if (el && el.lastElementChild?.tagName === "HR") {
@@ -401,8 +839,14 @@ var Editor = (props) => {
       case "paragraph":
         setBlock("p");
         break;
-      case "heading":
-        setBlock("h2");
+      case "heading-1":
+        toggleBlock("h1");
+        break;
+      case "heading-2":
+        toggleBlock("h2");
+        break;
+      case "heading-3":
+        toggleBlock("h3");
         break;
       case "list":
         exec("insertUnorderedList");
@@ -495,6 +939,8 @@ var Editor = (props) => {
     if (!el) return;
     const html = el.innerHTML;
     lastEmittedRef.current = html;
+    pushHistory();
+    scheduleHighlight();
     onChange?.(html);
     updateEmpty();
     updateActiveFormats();
@@ -548,6 +994,15 @@ var Editor = (props) => {
         return;
       }
     }
+    if (e.key === "Tab" && moveTableCell(e.shiftKey)) {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Tab" && inListItem()) {
+      e.preventDefault();
+      indentList(e.shiftKey);
+      return;
+    }
     if (slashOpen) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -571,6 +1026,21 @@ var Editor = (props) => {
         return;
       }
     }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      if (e.shiftKey) redo();
+      else undo();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "v") {
+      plainPasteRef.current = true;
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "y") {
+      e.preventDefault();
+      redo();
+      return;
+    }
     if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
       const k = e.key.toLowerCase();
       if (k === "b") {
@@ -604,10 +1074,16 @@ var Editor = (props) => {
       }
     }
   };
+  const plainPasteRef = React.useRef(false);
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
     const text = e.clipboardData.getData("text/plain");
+    if (plainPasteRef.current) {
+      plainPasteRef.current = false;
+      insertTextAtCaret(text);
+      return;
+    }
     if (closestPre()) {
       insertTextAtCaret(text);
       return;
@@ -634,9 +1110,11 @@ var Editor = (props) => {
   };
   const handleSelectionUpdate = () => {
     updateActiveFormats();
+    const pre = closestPre();
+    setCodeLang(pre ? langOf(pre) : "plain");
   };
   const onToolbarAction = (item) => {
-    if (closestPre() && item !== "code-block") return;
+    if (closestPre() && !["code-block", "undo", "redo"].includes(item)) return;
     switch (item) {
       case "bold":
         exec("bold");
@@ -665,8 +1143,14 @@ var Editor = (props) => {
         handleInput();
         break;
       }
-      case "heading":
-        setBlock("h2");
+      case "heading-1":
+        toggleBlock("h1");
+        break;
+      case "heading-2":
+        toggleBlock("h2");
+        break;
+      case "heading-3":
+        toggleBlock("h3");
         break;
       case "list":
         exec("insertUnorderedList");
@@ -689,6 +1173,39 @@ var Editor = (props) => {
       case "divider":
         insertDivider();
         break;
+      case "checklist":
+        toggleChecklist();
+        break;
+      case "align-left":
+        setAlign("left");
+        break;
+      case "align-center":
+        setAlign("center");
+        break;
+      case "align-right":
+        setAlign("right");
+        break;
+      case "highlight":
+        toggleHighlight();
+        break;
+      case "superscript":
+        exec("superscript");
+        break;
+      case "subscript":
+        exec("subscript");
+        break;
+      case "table":
+        insertTable();
+        break;
+      case "clear-format":
+        clearFormat();
+        break;
+      case "undo":
+        undo();
+        break;
+      case "redo":
+        redo();
+        break;
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-editor", isFocused && "focused", readOnly && "readonly"), children: [
@@ -697,7 +1214,10 @@ var Editor = (props) => {
       {
         items: toolbar,
         active: activeFormats,
-        onAction: onToolbarAction
+        onAction: onToolbarAction,
+        codeLang,
+        inCodeBlock: activeFormats.has("block:pre"),
+        onCodeLangChange: changeCodeLang
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "lib-xplat-editor__content", style: { minHeight }, children: [
@@ -715,6 +1235,7 @@ var Editor = (props) => {
           className: "lib-xplat-editor__editable",
           onInput: handleInput,
           onKeyDown: handleKeyDown,
+          onClick: handleEditorClick,
           onKeyUp: handleSelectionUpdate,
           onMouseUp: handleSelectionUpdate,
           onPaste: handlePaste,
@@ -756,14 +1277,27 @@ var TOOLBAR_LABEL = {
   underline: "U",
   strikethrough: "S",
   code: "<>",
-  heading: "H",
+  "heading-1": "H1",
+  "heading-2": "H2",
+  "heading-3": "H3",
   list: "\u2022",
   "ordered-list": "1.",
   blockquote: "\u275D",
   "code-block": "[ ]",
   link: "\u{1F517}",
   image: "\u{1F5BC}",
-  divider: "\u2014"
+  divider: "\u2014",
+  checklist: "\u2611",
+  "align-left": "\u21E4",
+  "align-center": "\u2194",
+  "align-right": "\u21E5",
+  highlight: "\u{1F58D}",
+  superscript: "x\xB2",
+  subscript: "x\u2082",
+  table: "\u25A6",
+  "clear-format": "\u232B",
+  undo: "\u21B6",
+  redo: "\u21B7"
 };
 var TOOLBAR_TITLE = {
   bold: "\uAD75\uAC8C (\u2318B)",
@@ -771,36 +1305,74 @@ var TOOLBAR_TITLE = {
   underline: "\uBC11\uC904 (\u2318U)",
   strikethrough: "\uCDE8\uC18C\uC120",
   code: "\uC778\uB77C\uC778 \uCF54\uB4DC",
-  heading: "\uC81C\uBAA9",
+  "heading-1": "\uC81C\uBAA9 1",
+  "heading-2": "\uC81C\uBAA9 2",
+  "heading-3": "\uC81C\uBAA9 3",
   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"
+  divider: "\uAD6C\uBD84\uC120",
+  checklist: "\uCCB4\uD06C\uB9AC\uC2A4\uD2B8",
+  "align-left": "\uC67C\uCABD \uC815\uB82C",
+  "align-center": "\uAC00\uC6B4\uB370 \uC815\uB82C",
+  "align-right": "\uC624\uB978\uCABD \uC815\uB82C",
+  highlight: "\uD615\uAD11\uD39C",
+  superscript: "\uC704 \uCCA8\uC790",
+  subscript: "\uC544\uB798 \uCCA8\uC790",
+  table: "\uD45C \uC0BD\uC785",
+  "clear-format": "\uC11C\uC2DD \uC9C0\uC6B0\uAE30",
+  undo: "\uB418\uB3CC\uB9AC\uAE30 (\u2318Z)",
+  redo: "\uB2E4\uC2DC\uD558\uAE30 (\u2318\u21E7Z)"
 };
 var isActive = (item, active) => {
-  if (item === "heading") return active.has("block:h1") || active.has("block:h2") || active.has("block:h3");
+  if (item === "heading-1") return active.has("block:h1");
+  if (item === "heading-2") return active.has("block:h2");
+  if (item === "heading-3") return active.has("block:h3");
   if (item === "blockquote") return active.has("block:blockquote");
   if (item === "code-block") return active.has("block:pre");
+  if (item === "align-left") return active.has("align:left");
+  if (item === "align-center") return active.has("align:center");
+  if (item === "align-right") return active.has("align:right");
   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);
+var EditorToolbar = ({
+  items,
+  active,
+  onAction,
+  codeLang,
+  inCodeBlock,
+  onCodeLangChange
+}) => {
+  return /* @__PURE__ */ jsxs("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]
       },
-      children: TOOLBAR_LABEL[item]
-    },
-    item
-  )) });
+      item
+    )),
+    inCodeBlock && /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: "lib-xplat-editor__lang",
+        value: codeLang,
+        "aria-label": "\uCF54\uB4DC \uC5B8\uC5B4",
+        onMouseDown: (e) => e.stopPropagation(),
+        onChange: (e) => onCodeLangChange(e.target.value),
+        children: CODE_LANGUAGES.map((l) => /* @__PURE__ */ jsx("option", { value: l.value, children: l.label }, l.value))
+      }
+    )
+  ] });
 };
 var SlashMenu = ({ position, items, activeIndex, onSelect, onClose }) => {
   React.useEffect(() => {