@x-plat/design-system 0.10.0 → 0.11.0

package/dist/components/Dropdown/index.cjs

@@ -35,7 +35,7 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
@@ -132,6 +132,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react3 = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  import_react3.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -152,14 +176,18 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react3.default.useState(false);
-  const [mounted, setMounted] = import_react3.default.useState(false);
-  const [visible, setVisible] = import_react3.default.useState(false);
-  const triggerRef = import_react3.default.useRef(null);
-  const menuRef = import_react3.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react4.default.useState(false);
+  const [mounted, setMounted] = import_react4.default.useState(false);
+  const [visible, setVisible] = import_react4.default.useState(false);
+  const triggerRef = import_react4.default.useRef(null);
+  const menuRef = import_react4.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react3.default.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  import_react4.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);

package/dist/components/Dropdown/index.js

@@ -1,5 +1,5 @@
 // src/components/Dropdown/Dropdown.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
@@ -96,6 +96,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React3 from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -116,14 +140,18 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [mounted, setMounted] = React3.useState(false);
-  const [visible, setVisible] = React3.useState(false);
-  const triggerRef = React3.useRef(null);
-  const menuRef = React3.useRef(null);
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [mounted, setMounted] = React4.useState(false);
+  const [visible, setVisible] = React4.useState(false);
+  const triggerRef = React4.useRef(null);
+  const menuRef = React4.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React3.useEffect(() => {
+  useEscapeKey(isOpen, () => {
+    setIsOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  });
+  React4.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);

package/dist/components/Editor/index.cjs

@@ -103,6 +103,15 @@ var ALLOWED_ATTRS = {
   a: ["href", "target", "rel"],
   img: ["src", "alt"]
 };
+var DROP_WITH_CONTENT = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "noscript",
+  "iframe",
+  "object",
+  "embed",
+  "template"
+]);
 var sanitizeHtml = (input) => {
   const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
   const root = doc.body.firstElementChild;
@@ -111,6 +120,10 @@ var sanitizeHtml = (input) => {
     const children = Array.from(node.children);
     for (const child of children) {
       const tag = child.tagName.toLowerCase();
+      if (DROP_WITH_CONTENT.has(tag)) {
+        node.removeChild(child);
+        continue;
+      }
       if (!ALLOWED_TAGS.has(tag)) {
         while (child.firstChild) node.insertBefore(child.firstChild, child);
         node.removeChild(child);
@@ -175,12 +188,16 @@ var Editor = (props) => {
   const [linkOpen, setLinkOpen] = import_react.default.useState(false);
   const [linkValue, setLinkValue] = import_react.default.useState("");
   const [linkPos, setLinkPos] = import_react.default.useState({ top: 0, left: 0 });
+  const lastEmittedRef = import_react.default.useRef(null);
   import_react.default.useEffect(() => {
-    if (!editorRef.current) return;
-    if (editorRef.current.innerHTML !== value) {
-      editorRef.current.innerHTML = sanitizeHtml(value || "");
-      updateEmpty();
-    }
+    const el = editorRef.current;
+    if (!el) return;
+    if (value === lastEmittedRef.current) return;
+    if (el.innerHTML === value) return;
+    el.innerHTML = sanitizeHtml(value || "");
+    if (!el.firstChild) el.innerHTML = "<p><br></p>";
+    lastEmittedRef.current = null;
+    updateEmpty();
   }, [value]);
   const updateEmpty = () => {
     const el = editorRef.current;
@@ -196,10 +213,19 @@ var Editor = (props) => {
     }
   };
   const restoreSelection = () => {
-    if (!lastRangeRef.current) return;
+    const range = lastRangeRef.current;
+    if (!range) return;
+    if (!editorRef.current?.contains(range.startContainer)) {
+      lastRangeRef.current = null;
+      return;
+    }
     const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(lastRangeRef.current);
+    try {
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    } catch {
+      lastRangeRef.current = null;
+    }
   };
   const updateActiveFormats = () => {
     if (!editorRef.current) return;
@@ -228,6 +254,96 @@ var Editor = (props) => {
   const setBlock = (tag) => {
     exec("formatBlock", tag);
   };
+  const closestPre = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !editorRef.current?.contains(node)) return null;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return el?.closest("pre") ?? null;
+  };
+  const insertCodeBlock = () => {
+    const el = editorRef.current;
+    const sel = window.getSelection();
+    if (!el || !sel || sel.rangeCount === 0) return;
+    const existing = closestPre();
+    if (existing) {
+      const p = document.createElement("p");
+      p.textContent = existing.textContent || "";
+      if (!p.textContent) p.innerHTML = "<br>";
+      existing.replaceWith(p);
+      placeCaretAtEnd(p);
+      handleInput();
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const frag = range.cloneContents();
+    const holder = document.createElement("div");
+    holder.appendChild(frag);
+    const BLOCK = /^(p|div|h[1-6]|li|blockquote|pre|tr)$/i;
+    const linesOf = (node) => {
+      const out = [];
+      let cur = "";
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          cur += child.textContent || "";
+        } else if (child.nodeName === "BR") {
+          out.push(cur);
+          cur = "";
+        } else if (BLOCK.test(child.nodeName)) {
+          if (cur) {
+            out.push(cur);
+            cur = "";
+          }
+          const sub = linesOf(child);
+          out.push(...sub.length > 0 ? sub : [""]);
+        } else {
+          cur += linesOf(child).join("\n");
+        }
+      }
+      if (cur) out.push(cur);
+      return out;
+    };
+    const text = linesOf(holder).join("\n").replace(/\n+$/, "");
+    const pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.textContent = text || "";
+    pre.appendChild(code);
+    range.deleteContents();
+    range.insertNode(pre);
+    ensureParagraphAfter(pre);
+    placeCaretAtEnd(code);
+    handleInput();
+  };
+  const insertTextAtCaret = (text) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    range.deleteContents();
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    handleInput();
+  };
+  const ensureParagraphAfter = (node) => {
+    const next = node.nextElementSibling;
+    if (next && next.tagName === "P") return;
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    node.after(p);
+  };
+  const placeCaretAtEnd = (node) => {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const r2 = document.createRange();
+    r2.selectNodeContents(node);
+    r2.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(r2);
+    editorRef.current?.focus();
+  };
   const insertDivider = () => {
     exec("insertHorizontalRule");
     const el = editorRef.current;
@@ -274,7 +390,9 @@ var Editor = (props) => {
     const range = sel.getRangeAt(0);
     slashStartRangeRef.current = range.cloneRange();
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl = editorRef.current;
+    if (!editorEl) return;
+    const editorRect = editorEl.getBoundingClientRect();
     setSlashPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -332,7 +450,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "divider":
         insertDivider();
@@ -350,7 +468,9 @@ var Editor = (props) => {
     if (!sel || sel.rangeCount === 0) return;
     const range = sel.getRangeAt(0);
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl2 = editorRef.current;
+    if (!editorEl2) return;
+    const editorRect = editorEl2.getBoundingClientRect();
     setLinkPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -383,13 +503,13 @@ var Editor = (props) => {
     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")]
+      [/^###$/, () => setBlock("h3")],
+      [/^##$/, () => setBlock("h2")],
+      [/^#$/, () => setBlock("h1")],
+      [/^-$/, () => exec("insertUnorderedList")],
+      [/^\*$/, () => exec("insertUnorderedList")],
+      [/^1\.$/, () => exec("insertOrderedList")],
+      [/^>$/, () => setBlock("blockquote")]
     ];
     for (const [re, fn] of patterns) {
       if (re.test(text)) {
@@ -409,7 +529,9 @@ var Editor = (props) => {
     if (composingRef.current) return;
     const el = editorRef.current;
     if (!el) return;
-    onChange?.(el.innerHTML);
+    const html = el.innerHTML;
+    lastEmittedRef.current = html;
+    onChange?.(html);
     updateEmpty();
     updateActiveFormats();
     if (slashOpen) {
@@ -437,6 +559,31 @@ var Editor = (props) => {
   };
   const handleKeyDown = (e) => {
     if (readOnly) return;
+    if (composingRef.current || e.nativeEvent.isComposing || e.keyCode === 229) return;
+    const pre = closestPre();
+    if (pre && !slashOpen) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        const text = pre.textContent || "";
+        if (text.endsWith("\n\n")) {
+          e.preventDefault();
+          const code = pre.querySelector("code") ?? pre;
+          code.textContent = text.replace(/\n\n$/, "");
+          ensureParagraphAfter(pre);
+          const next = pre.nextElementSibling;
+          if (next) placeCaretAtEnd(next);
+          handleInput();
+          return;
+        }
+        e.preventDefault();
+        insertTextAtCaret("\n");
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        insertTextAtCaret("  ");
+        return;
+      }
+    }
     if (slashOpen) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -483,6 +630,7 @@ var Editor = (props) => {
         return;
       }
     }
+    if (pre) return;
     if (enableSlashCommand && e.key === "/") {
       setTimeout(openSlashMenu, 0);
     }
@@ -495,8 +643,12 @@ var Editor = (props) => {
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
-    const html = e.clipboardData.getData("text/html");
     const text = e.clipboardData.getData("text/plain");
+    if (closestPre()) {
+      insertTextAtCaret(text);
+      return;
+    }
+    const html = e.clipboardData.getData("text/html");
     const clean = html ? sanitizeHtml(html) : escapeHtml(text);
     document.execCommand("insertHTML", false, clean);
     handleInput();
@@ -520,6 +672,7 @@ var Editor = (props) => {
     updateActiveFormats();
   };
   const onToolbarAction = (item) => {
+    if (closestPre() && item !== "code-block") return;
     switch (item) {
       case "bold":
         exec("bold");
@@ -561,7 +714,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "link":
         openLinkEditor();
@@ -591,6 +744,10 @@ var Editor = (props) => {
           ref: editorRef,
           contentEditable: !readOnly,
           suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-readonly": readOnly || void 0,
+          "aria-label": placeholder,
           className: "lib-xplat-editor__editable",
           onInput: handleInput,
           onKeyDown: handleKeyDown,