@ioca/react 1.5.5 → 1.5.6

package/lib/es/components/editor/controls.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { ClearAllRound, UndoRound, RedoRound, StrikethroughSRound, FormatUnderlinedRound, FormatItalicRound, FormatBoldRound } from '@ricons/material';
+import { UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound } from '@ricons/material';
 import Button from '../button/button.js';
 import Icon from '../icon/icon.js';
 
@@ -26,52 +26,30 @@ const xssOptions = {
 const handleMouseDown = (e) => {
     e.preventDefault();
 };
-const fnMap = {
-    bold: {
-        icon: jsx(FormatBoldRound, {}),
-        onClick: () => exec("bold"),
-    },
-    italic: {
-        icon: jsx(FormatItalicRound, {}),
-        onClick: () => exec("italic"),
-    },
-    underline: {
+const defaultControls = [
+    { key: "undo", icon: jsx(UndoRound, {}), onClick: () => exec("undo") },
+    { key: "redo", icon: jsx(RedoRound, {}), onClick: () => exec("redo") },
+    { key: "bold", icon: jsx(FormatBoldRound, {}), onClick: () => exec("bold") },
+    { key: "italic", icon: jsx(FormatItalicRound, {}), onClick: () => exec("italic") },
+    {
+        key: "underline",
         icon: jsx(FormatUnderlinedRound, {}),
         onClick: () => exec("underline"),
     },
-    strike: {
+    {
+        key: "strike",
         icon: jsx(StrikethroughSRound, {}),
         onClick: () => exec("strikeThrough"),
     },
-    redo: {
-        icon: jsx(RedoRound, {}),
-        onClick: () => exec("redo"),
-    },
-    undo: {
-        icon: jsx(UndoRound, {}),
-        onClick: () => exec("undo"),
-    },
-    clear: {
+    {
+        key: "clear",
         icon: jsx(ClearAllRound, {}),
         onClick: () => exec("removeFormat"),
     },
-};
-const defaultKeys = [
-    "undo",
-    "redo",
-    "bold",
-    "italic",
-    "underline",
-    "strike",
-    "clear",
 ];
-const typedFnMap = fnMap;
 function getControls(options) {
     const { controlBtnProps, addtionControls, getSelection } = options;
-    const controls = defaultKeys.map((k) => {
-        const { icon, onClick } = typedFnMap[k];
-        return (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: onClick, children: jsx(Icon, { icon: icon }) }, k));
-    });
+    const controls = defaultControls.map(({ key, icon, onClick }) => (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: onClick, children: jsx(Icon, { icon: icon }) }, key)));
     const extControls = (addtionControls ?? []).map((item, index) => (jsx(Button, { ...controlBtnProps, onMouseDown: handleMouseDown, onClick: (e) => item.onClick?.(getSelection(), e), children: item.icon }, `addtion-${index}`)));
     return [...controls, ...extControls];
 }

package/lib/es/components/editor/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","sources":["../../../../packages/components/editor/controls.tsx"],"sourcesContent":["import {\r\n    ClearAllRound,\r\n    FormatBoldRound,\r\n    FormatItalicRound,\r\n    FormatUnderlinedRound,\r\n    RedoRound,\r\n    StrikethroughSRound,\r\n    UndoRound,\r\n} from \"@ricons/material\";\r\nimport { MouseEvent, ReactNode } from \"react\";\r\nimport { type IFilterXSSOptions } from \"xss\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Icon from \"../icon\";\r\nimport { IEditorAddtionControl } from \"./type\";\r\n\r\nexport const exec = (a, b?, c?) => {\r\n    if (typeof document === \"undefined\") return;\r\n    return document.execCommand(a, b, c);\r\n};\r\n\r\nconst escapeHtmlAttr = (value: string) =>\r\n    value\r\n        .replaceAll(\"&\", \"&amp;\")\r\n        .replaceAll('\"', \"&quot;\")\r\n        .replaceAll(\"<\", \"&lt;\")\r\n        .replaceAll(\">\", \"&gt;\");\r\n\r\nexport const xssOptions: IFilterXSSOptions = {\r\n    onIgnoreTagAttr(tag, name, value) {\r\n        if ([\"class\", \"contenteditable\"].includes(name)) {\r\n            return name + '=\"' + escapeHtmlAttr(value) + '\"';\r\n        }\r\n        if ([\"data-\", \"style\"].includes(name.substring(0, 5))) {\r\n            return name + '=\"' + escapeHtmlAttr(value) + '\"';\r\n        }\r\n    },\r\n};\r\n\r\nconst handleMouseDown = (e: MouseEvent<HTMLElement>) => {\r\n    e.preventDefault();\r\n};\r\n\r\nconst fnMap = {\r\n    bold: {\r\n        icon: <FormatBoldRound />,\r\n        onClick: () => exec(\"bold\"),\r\n    },\r\n    italic: {\r\n        icon: <FormatItalicRound />,\r\n        onClick: () => exec(\"italic\"),\r\n    },\r\n    underline: {\r\n        icon: <FormatUnderlinedRound />,\r\n        onClick: () => exec(\"underline\"),\r\n    },\r\n    strike: {\r\n        icon: <StrikethroughSRound />,\r\n        onClick: () => exec(\"strikeThrough\"),\r\n    },\r\n    redo: {\r\n        icon: <RedoRound />,\r\n        onClick: () => exec(\"redo\"),\r\n    },\r\n    undo: {\r\n        icon: <UndoRound />,\r\n        onClick: () => exec(\"undo\"),\r\n    },\r\n    clear: {\r\n        icon: <ClearAllRound />,\r\n        onClick: () => exec(\"removeFormat\"),\r\n    },\r\n};\r\n\r\nconst defaultKeys = [\r\n    \"undo\",\r\n    \"redo\",\r\n    \"bold\",\r\n    \"italic\",\r\n    \"underline\",\r\n    \"strike\",\r\n    \"clear\",\r\n] as const;\r\n\r\ntype ControlKey = (typeof defaultKeys)[number];\r\ntype ControlItem = {\r\n    icon: ReactNode;\r\n    onClick: () => void;\r\n};\r\n\r\nconst typedFnMap: Record<ControlKey, ControlItem> = fnMap;\r\n\r\nexport default function getControls(options: {\r\n    controlBtnProps: IButton;\r\n    addtionControls?: IEditorAddtionControl[];\r\n    getSelection: () => Range | null;\r\n}) {\r\n    const { controlBtnProps, addtionControls, getSelection } = options;\r\n\r\n    const controls = defaultKeys.map((k) => {\r\n        const { icon, onClick } = typedFnMap[k];\r\n\r\n        return (\r\n            <Button\r\n                key={k}\r\n                {...controlBtnProps}\r\n                onMouseDown={handleMouseDown}\r\n                onClick={onClick}\r\n            >\r\n                <Icon icon={icon} />\r\n            </Button>\r\n        );\r\n    });\r\n\r\n    const extControls = (addtionControls ?? []).map((item, index) => (\r\n        <Button\r\n            key={`addtion-${index}`}\r\n            {...controlBtnProps}\r\n            onMouseDown={handleMouseDown}\r\n            onClick={(e) => item.onClick?.(getSelection(), e)}\r\n        >\r\n            {item.icon}\r\n        </Button>\r\n    ));\r\n\r\n    return [...controls, ...extControls];\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"controls.js","sources":["../../../../packages/components/editor/controls.tsx"],"sourcesContent":["import {\r\n    ClearAllRound,\r\n    FormatBoldRound,\r\n    FormatItalicRound,\r\n    FormatUnderlinedRound,\r\n    RedoRound,\r\n    StrikethroughSRound,\r\n    UndoRound,\r\n} from \"@ricons/material\";\r\nimport { MouseEvent, ReactNode } from \"react\";\r\nimport { type IFilterXSSOptions } from \"xss\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Icon from \"../icon\";\r\nimport { IEditorAddtionControl } from \"./type\";\r\n\r\nexport const exec = (a, b?, c?) => {\r\n    if (typeof document === \"undefined\") return;\r\n    return document.execCommand(a, b, c);\r\n};\r\n\r\nconst escapeHtmlAttr = (value: string) =>\r\n    value\r\n        .replaceAll(\"&\", \"&amp;\")\r\n        .replaceAll('\"', \"&quot;\")\r\n        .replaceAll(\"<\", \"&lt;\")\r\n        .replaceAll(\">\", \"&gt;\");\r\n\r\nexport const xssOptions: IFilterXSSOptions = {\r\n    onIgnoreTagAttr(tag, name, value) {\r\n        if ([\"class\", \"contenteditable\"].includes(name)) {\r\n            return name + '=\"' + escapeHtmlAttr(value) + '\"';\r\n        }\r\n        if ([\"data-\", \"style\"].includes(name.substring(0, 5))) {\r\n            return name + '=\"' + escapeHtmlAttr(value) + '\"';\r\n        }\r\n    },\r\n};\r\n\r\nconst handleMouseDown = (e: MouseEvent<HTMLElement>) => {\r\n    e.preventDefault();\r\n};\r\n\r\ntype ControlItem = {\r\n    key: string;\n    icon: ReactNode;\r\n    onClick: () => void;\r\n};\r\n\r\nconst defaultControls: ControlItem[] = [\n    { key: \"undo\", icon: <UndoRound />, onClick: () => exec(\"undo\") },\n    { key: \"redo\", icon: <RedoRound />, onClick: () => exec(\"redo\") },\n    { key: \"bold\", icon: <FormatBoldRound />, onClick: () => exec(\"bold\") },\n    { key: \"italic\", icon: <FormatItalicRound />, onClick: () => exec(\"italic\") },\n    {\n        key: \"underline\",\n        icon: <FormatUnderlinedRound />,\n        onClick: () => exec(\"underline\"),\n    },\n    {\n        key: \"strike\",\n        icon: <StrikethroughSRound />,\n        onClick: () => exec(\"strikeThrough\"),\n    },\n    {\n        key: \"clear\",\n        icon: <ClearAllRound />,\n        onClick: () => exec(\"removeFormat\"),\n    },\n];\n\r\nexport default function getControls(options: {\r\n    controlBtnProps: IButton;\r\n    addtionControls?: IEditorAddtionControl[];\r\n    getSelection: () => Range | null;\r\n}) {\r\n    const { controlBtnProps, addtionControls, getSelection } = options;\r\n\r\n    const controls = defaultControls.map(({ key, icon, onClick }) => (\n        <Button\n            key={key}\n            {...controlBtnProps}\n            onMouseDown={handleMouseDown}\n            onClick={onClick}\n        >\n            <Icon icon={icon} />\n        </Button>\n    ));\n\r\n    const extControls = (addtionControls ?? []).map((item, index) => (\r\n        <Button\r\n            key={`addtion-${index}`}\r\n            {...controlBtnProps}\r\n            onMouseDown={handleMouseDown}\r\n            onClick={(e) => item.onClick?.(getSelection(), e)}\r\n        >\r\n            {item.icon}\r\n        </Button>\r\n    ));\r\n\r\n    return [...controls, ...extControls];\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}

package/lib/es/components/editor/editor.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import xss from 'xss';
 import getControls, { xssOptions, exec } from './controls.js';
-import Memtion, { filterMemtionOptions, getMemtionReplaceRange, insertMemtionOption, removeAdjacentMemtionTag, getMemtionText, getSelectionRect } from './memtion.js';
+import Memtion, { filterMemtionOptions, sanitizePlaintextOnMemtionHtml, getMemtionReplaceRange, insertMemtionOption, removeAdjacentMemtionTag, getMemtionText, getSelectionRect } from './memtion.js';
 
 const controlBtnProps = {
     square: true,
@@ -16,18 +16,28 @@ const Editor = (props) => {
     const selectionRef = useRef(null);
     const memtionTriggerRangeRef = useRef(null);
     const pendingMemtionRef = useRef(false);
+    const isPlaintextMode = mode === "plaintext";
+    const isRichMode = mode === "rich";
+    const isPlaintextOnMemtionMode = mode === "plaintextOnMemtion";
     const [memtionVisible, setMemtionVisible] = useState(false);
     const [memtionRect, setMemtionRect] = useState(null);
     const [memtionKeyword, setMemtionKeyword] = useState("");
     const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);
     const memtionOptions = useMemo(() => filterMemtionOptions(memtion?.options ?? [], memtionKeyword), [memtion?.options, memtionKeyword]);
     const sanitizeValue = (nextValue) => {
-        if (mode === "plaintext") {
+        if (isPlaintextMode) {
             return nextValue === "\n" ? "" : nextValue;
         }
-        const safeHtml = xss(nextValue, xssOptions);
+        const safeHtml = isPlaintextOnMemtionMode
+            ? sanitizePlaintextOnMemtionHtml(xss(nextValue, xssOptions))
+            : xss(nextValue, xssOptions);
         return safeHtml === "<br>" ? "" : safeHtml;
     };
+    const syncHeight = () => {
+        if (autosize && editorRef.current) {
+            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+        }
+    };
     const rememberSelection = () => {
         if (!editorRef.current)
             return;
@@ -47,18 +57,18 @@ const Editor = (props) => {
         if (!editorRef.current)
             return;
         const safeValue = sanitizeValue(nextValue);
-        if (mode === "plaintext") {
+        if (isPlaintextMode) {
             editorRef.current.textContent = safeValue;
             return;
         }
         editorRef.current.innerHTML = safeValue;
     };
     const getEditorValue = (sanitize = false) => {
-        if (!editorRef.current)
-            return "";
-        const nextValue = mode === "plaintext"
-            ? (editorRef.current.textContent ?? "")
-            : editorRef.current.innerHTML;
+        const nextValue = !editorRef.current
+            ? ""
+            : isPlaintextMode
+                ? (editorRef.current.textContent ?? "")
+                : editorRef.current.innerHTML;
         return sanitize ? sanitizeValue(nextValue) : nextValue;
     };
     const hideMemtion = () => {
@@ -90,22 +100,18 @@ const Editor = (props) => {
         if (e.defaultPrevented)
             return;
         e.preventDefault();
-        if (mode === "plaintext") {
-            const text = e.clipboardData.getData("text/plain");
-            exec("insertText", false, text);
-            return;
-        }
         const html = e.clipboardData.getData("text/html");
-        if (html) {
-            exec("insertHTML", false, sanitizeValue(html));
-            return;
-        }
         const text = e.clipboardData.getData("text/plain");
-        exec("insertText", false, text);
+        const pasteValue = isPlaintextMode
+            ? text
+            : html
+                ? sanitizeValue(html)
+                : text;
+        exec(isPlaintextMode ? "insertText" : "insertHTML", false, pasteValue);
     };
     const handleKeyDown = (e) => {
         onKeyDown?.(e);
-        if (mode === "rich" &&
+        if (!isPlaintextMode &&
             (e.key === "Backspace" || e.key === "Delete") &&
             removeAdjacentMemtionTag(editorRef.current, e.key)) {
             e.preventDefault();
@@ -142,7 +148,7 @@ const Editor = (props) => {
         switch (e.key) {
             case "Tab":
                 e.preventDefault();
-                exec(mode === "plaintext" ? "insertText" : "insertHTML", false, mode === "plaintext" ? "\t" : "&#09;");
+                exec(isRichMode ? "insertHTML" : "insertText", false, isRichMode ? "&#09;" : "\t");
                 break;
             case "Enter":
                 if (!onEnter)
@@ -159,9 +165,7 @@ const Editor = (props) => {
         if (getEditorValue(true) === nextValue)
             return;
         setEditorValue(nextValue);
-        if (autosize) {
-            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-        }
+        syncHeight();
     }, [autosize, mode, value]);
     useEffect(() => {
         if (!memtionOptions.length) {
@@ -173,6 +177,11 @@ const Editor = (props) => {
     const handleInput = (e) => {
         const rawValue = getEditorValue();
         let nextValue = sanitizeValue(rawValue);
+        if (isPlaintextOnMemtionMode &&
+            rawValue !== nextValue &&
+            editorRef.current) {
+            setEditorValue(nextValue);
+        }
         if (!nextValue && rawValue && editorRef.current) {
             nextValue = "";
             setEditorValue(nextValue);
@@ -193,9 +202,7 @@ const Editor = (props) => {
                 setMemtionVisible(true);
             }
         }
-        if (autosize && editorRef.current) {
-            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-        }
+        syncHeight();
         onChange?.(nextValue, e);
     };
     const handleFocus = (e) => {
@@ -236,7 +243,7 @@ const Editor = (props) => {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: mode === "plaintext" ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
+        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion, { visible: memtionVisible, rect: memtionRect, options: memtionOptions, activeIndex: memtionActiveIndex, onActiveChange: setMemtionActiveIndex, onSelect: insertMemtion })), jsx("div", { ref: handleRef, className: "i-editor-content", "data-placeholder": placeholder, contentEditable: isPlaintextMode ? "plaintext-only" : true, onFocus: handleFocus, onBlur: handleBlur, onMouseUp: handleMouseUp, onPaste: handlePaste, onInput: handleInput, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, ...restProps })] }));
 };
 
 export { Editor as default };

package/lib/es/components/editor/editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor.js","sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\nimport xss from \"xss\";\r\nimport { IButton } from \"../button/type\";\r\nimport getControls, { exec, xssOptions } from \"./controls\";\r\nimport \"./index.css\";\r\nimport Memtion, {\r\n    filterMemtionOptions,\r\n    getMemtionReplaceRange,\r\n    getMemtionText,\r\n    getSelectionRect,\r\n    insertMemtionOption,\r\n    removeAdjacentMemtionTag,\r\n} from \"./memtion\";\r\nimport { IEditor, IEditorMemtionOption } from \"./type\";\r\n\r\nconst controlBtnProps: IButton = {\r\n    square: true,\r\n    flat: true,\r\n    size: \"small\",\r\n};\r\n\r\nconst Editor = (props: IEditor) => {\r\n    const {\r\n        ref,\r\n        value = \"\",\r\n        width,\r\n        height = \"10em\",\r\n        placeholder,\r\n        autosize,\r\n        border = true,\r\n        mode = \"rich\",\r\n        hideControl,\r\n        addtionControls,\r\n        memtion,\r\n        className,\r\n        style,\r\n        onChange,\r\n        onEnter,\r\n        onFocus,\r\n        onBlur,\r\n        onPaste,\r\n        onMouseUp,\r\n        onKeyUp,\r\n        onKeyDown,\r\n        ...restProps\r\n    } = props;\r\n    const editorRef = useRef<HTMLDivElement>(null);\r\n    const selectionRef = useRef<Range | null>(null);\r\n    const memtionTriggerRangeRef = useRef<Range | null>(null);\r\n    const pendingMemtionRef = useRef(false);\r\n    const [memtionVisible, setMemtionVisible] = useState(false);\r\n    const [memtionRect, setMemtionRect] = useState<DOMRect | null>(null);\r\n    const [memtionKeyword, setMemtionKeyword] = useState(\"\");\r\n    const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);\r\n    const memtionOptions = useMemo(\r\n        () => filterMemtionOptions(memtion?.options ?? [], memtionKeyword),\r\n        [memtion?.options, memtionKeyword],\r\n    );\r\n\r\n    const sanitizeValue = (nextValue: string) => {\r\n        if (mode === \"plaintext\") {\r\n            return nextValue === \"\\n\" ? \"\" : nextValue;\r\n        }\r\n\r\n        const safeHtml = xss(nextValue, xssOptions);\r\n\r\n        return safeHtml === \"<br>\" ? \"\" : safeHtml;\r\n    };\r\n\r\n    const rememberSelection = () => {\r\n        if (!editorRef.current) return;\r\n\r\n        const selection = window.getSelection();\r\n        if (!selection?.rangeCount) return;\r\n\r\n        const range = selection.getRangeAt(0);\r\n        const container = range.commonAncestorContainer;\r\n        const parent =\r\n            container.nodeType === Node.ELEMENT_NODE\r\n                ? (container as Element)\r\n                : container.parentElement;\r\n\r\n        if (!parent || !editorRef.current.contains(parent)) return;\r\n\r\n        selectionRef.current = range.cloneRange();\r\n    };\r\n\r\n    const setEditorValue = (nextValue: string) => {\r\n        if (!editorRef.current) return;\r\n\r\n        const safeValue = sanitizeValue(nextValue);\r\n\r\n        if (mode === \"plaintext\") {\r\n            editorRef.current.textContent = safeValue;\r\n            return;\r\n        }\r\n\r\n        editorRef.current.innerHTML = safeValue;\r\n    };\r\n\r\n    const getEditorValue = (sanitize = false) => {\r\n        if (!editorRef.current) return \"\";\r\n\r\n        const nextValue =\r\n            mode === \"plaintext\"\r\n                ? (editorRef.current.textContent ?? \"\")\r\n                : editorRef.current.innerHTML;\r\n\r\n        return sanitize ? sanitizeValue(nextValue) : nextValue;\r\n    };\r\n\r\n    const hideMemtion = () => {\r\n        pendingMemtionRef.current = false;\r\n        memtionTriggerRangeRef.current = null;\r\n        setMemtionVisible(false);\r\n        setMemtionRect(null);\r\n        setMemtionKeyword(\"\");\r\n        setMemtionActiveIndex(0);\r\n    };\r\n\r\n    const insertMemtion = (option: IEditorMemtionOption) => {\r\n        const replaceRange = getMemtionReplaceRange(\r\n            memtionTriggerRangeRef.current,\r\n            selectionRef.current,\r\n        );\r\n\r\n        const range = insertMemtionOption({\r\n            editor: editorRef.current,\r\n            range: replaceRange,\r\n            mode,\r\n            memtion,\r\n            option,\r\n            sanitizeValue,\r\n        });\r\n\r\n        if (!range || !editorRef.current) return;\r\n\r\n        selectionRef.current = range.cloneRange();\r\n        hideMemtion();\r\n        editorRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n    };\r\n\r\n    const handlePaste = (e) => {\r\n        onPaste?.(e);\r\n\r\n        if (e.defaultPrevented) return;\r\n\r\n        e.preventDefault();\r\n\r\n        if (mode === \"plaintext\") {\r\n            const text = e.clipboardData.getData(\"text/plain\");\r\n            exec(\"insertText\", false, text);\r\n            return;\r\n        }\r\n\r\n        const html = e.clipboardData.getData(\"text/html\");\r\n        if (html) {\r\n            exec(\"insertHTML\", false, sanitizeValue(html));\r\n            return;\r\n        }\r\n\r\n        const text = e.clipboardData.getData(\"text/plain\");\r\n        exec(\"insertText\", false, text);\r\n    };\r\n\r\n    const handleKeyDown = (e) => {\r\n        onKeyDown?.(e);\r\n\r\n        if (\r\n            mode === \"rich\" &&\r\n            (e.key === \"Backspace\" || e.key === \"Delete\") &&\r\n            removeAdjacentMemtionTag(editorRef.current, e.key)\r\n        ) {\r\n            e.preventDefault();\r\n            rememberSelection();\r\n            editorRef.current?.dispatchEvent(\r\n                new Event(\"input\", { bubbles: true }),\r\n            );\r\n            return;\r\n        }\r\n\r\n        const memtionKey = memtion?.key ?? \"@\";\r\n        if (memtionVisible && e.key === \" \") {\r\n            hideMemtion();\r\n        }\r\n\r\n        if (memtionVisible && memtionOptions.length) {\r\n            switch (e.key) {\r\n                case \"ArrowDown\":\r\n                    e.preventDefault();\r\n                    setMemtionActiveIndex((index) =>\r\n                        index + 1 >= memtionOptions.length ? 0 : index + 1,\r\n                    );\r\n                    return;\r\n                case \"ArrowUp\":\r\n                    e.preventDefault();\r\n                    setMemtionActiveIndex((index) =>\r\n                        index - 1 < 0 ? memtionOptions.length - 1 : index - 1,\r\n                    );\r\n                    return;\r\n                case \"Enter\":\r\n                    e.preventDefault();\r\n                    insertMemtion(memtionOptions[memtionActiveIndex]);\r\n                    return;\r\n                default:\r\n                    break;\r\n            }\r\n        }\r\n\r\n        if (memtion && e.key === memtionKey) {\r\n            rememberSelection();\r\n            memtionTriggerRangeRef.current =\r\n                selectionRef.current?.cloneRange() ?? null;\r\n            pendingMemtionRef.current = true;\r\n        }\r\n\r\n        switch (e.key) {\r\n            case \"Tab\":\r\n                e.preventDefault();\r\n                exec(\r\n                    mode === \"plaintext\" ? \"insertText\" : \"insertHTML\",\r\n                    false,\r\n                    mode === \"plaintext\" ? \"\\t\" : \"&#09;\",\r\n                );\r\n                break;\r\n            case \"Enter\":\r\n                if (!onEnter) break;\r\n                e.preventDefault();\r\n                onEnter(e);\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        if (!editorRef.current) return;\r\n        const nextValue = sanitizeValue(value);\r\n        if (getEditorValue(true) === nextValue) return;\r\n\r\n        setEditorValue(nextValue);\r\n\r\n        if (autosize) {\r\n            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\r\n        }\r\n    }, [autosize, mode, value]);\r\n\r\n    useEffect(() => {\r\n        if (!memtionOptions.length) {\r\n            setMemtionActiveIndex(0);\r\n            return;\r\n        }\r\n\r\n        setMemtionActiveIndex((index) =>\r\n            index >= memtionOptions.length ? 0 : index,\r\n        );\r\n    }, [memtionOptions]);\r\n\r\n    const handleInput = (e) => {\r\n        const rawValue = getEditorValue();\r\n        let nextValue = sanitizeValue(rawValue);\r\n\r\n        if (!nextValue && rawValue && editorRef.current) {\r\n            nextValue = \"\";\r\n            setEditorValue(nextValue);\r\n        }\r\n\r\n        rememberSelection();\r\n\r\n        if (memtion && (pendingMemtionRef.current || memtionVisible)) {\r\n            const memtionKey = memtion?.key ?? \"@\";\r\n            const memtionText = getMemtionText(\r\n                memtionTriggerRangeRef.current,\r\n                selectionRef.current,\r\n            );\r\n\r\n            if (!memtionText.startsWith(memtionKey) || /\\s/.test(memtionText)) {\r\n                hideMemtion();\r\n            } else {\r\n                const keyword = memtionText.slice(memtionKey.length);\r\n                pendingMemtionRef.current = false;\r\n                setMemtionRect(getSelectionRect(selectionRef.current));\r\n                setMemtionKeyword(keyword);\r\n                setMemtionActiveIndex(0);\r\n                setMemtionVisible(true);\r\n            }\r\n        }\r\n\r\n        if (autosize && editorRef.current) {\r\n            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\r\n        }\r\n\r\n        onChange?.(nextValue, e);\r\n    };\r\n\r\n    const handleFocus = (e) => {\r\n        rememberSelection();\r\n        onFocus?.(e);\r\n    };\r\n\r\n    const handleBlur = (e) => {\r\n        hideMemtion();\r\n        onBlur?.(e);\r\n    };\r\n\r\n    const handleMouseUp = (e) => {\r\n        rememberSelection();\r\n        onMouseUp?.(e);\r\n    };\r\n\r\n    const handleKeyUp = (e) => {\r\n        rememberSelection();\r\n        onKeyUp?.(e);\r\n    };\r\n\r\n    const handleRef = (node: HTMLDivElement | null) => {\r\n        editorRef.current = node;\r\n\r\n        if (typeof ref === \"function\") {\r\n            ref(node);\r\n            return;\r\n        }\r\n\r\n        if (ref) {\r\n            ref.current = node;\r\n        }\r\n    };\r\n\r\n    const getSelection = useCallback(\r\n        () => selectionRef.current?.cloneRange() ?? null,\r\n        [],\r\n    );\r\n\r\n    const controls = useMemo(\r\n        () =>\r\n            getControls({\r\n                controlBtnProps,\r\n                addtionControls,\r\n                getSelection,\r\n            }),\r\n        [addtionControls, getSelection],\r\n    );\r\n\r\n    return (\r\n        <div\r\n            className={classNames(\"i-editor\", className, {\r\n                \"i-editor-borderless\": !border,\r\n            })}\r\n            style={{\r\n                ...style,\r\n                [autosize ? \"minHeight\" : \"height\"]: height,\r\n                width,\r\n            }}\r\n        >\r\n            {!hideControl && (\r\n                <div className=\"i-editor-controls\">{controls}</div>\r\n            )}\r\n\r\n            {memtion && (\r\n                <Memtion\r\n                    visible={memtionVisible}\r\n                    rect={memtionRect}\r\n                    options={memtionOptions}\r\n                    activeIndex={memtionActiveIndex}\r\n                    onActiveChange={setMemtionActiveIndex}\r\n                    onSelect={insertMemtion}\r\n                />\r\n            )}\r\n\r\n            <div\r\n                ref={handleRef}\r\n                className=\"i-editor-content\"\r\n                data-placeholder={placeholder}\r\n                contentEditable={mode === \"plaintext\" ? \"plaintext-only\" : true}\r\n                onFocus={handleFocus}\r\n                onBlur={handleBlur}\r\n                onMouseUp={handleMouseUp}\r\n                onPaste={handlePaste}\r\n                onInput={handleInput}\r\n                onKeyUp={handleKeyUp}\r\n                onKeyDown={handleKeyDown}\r\n                {...restProps}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default Editor;\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"editor.js","sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\r\nimport xss from \"xss\";\r\nimport { IButton } from \"../button/type\";\r\nimport getControls, { exec, xssOptions } from \"./controls\";\r\nimport \"./index.css\";\r\nimport Memtion, {\r\n    filterMemtionOptions,\r\n    getMemtionReplaceRange,\r\n    getMemtionText,\r\n    getSelectionRect,\r\n    insertMemtionOption,\r\n    removeAdjacentMemtionTag,\r\n    sanitizePlaintextOnMemtionHtml,\r\n} from \"./memtion\";\r\nimport { IEditor, IEditorMemtionOption } from \"./type\";\r\n\r\nconst controlBtnProps: IButton = {\r\n    square: true,\r\n    flat: true,\r\n    size: \"small\",\r\n};\r\n\r\nconst Editor = (props: IEditor) => {\r\n    const {\r\n        ref,\r\n        value = \"\",\r\n        width,\r\n        height = \"10em\",\r\n        placeholder,\r\n        autosize,\r\n        border = true,\r\n        mode = \"rich\",\r\n        hideControl,\r\n        addtionControls,\r\n        memtion,\r\n        className,\r\n        style,\r\n        onChange,\r\n        onEnter,\r\n        onFocus,\r\n        onBlur,\r\n        onPaste,\r\n        onMouseUp,\r\n        onKeyUp,\r\n        onKeyDown,\r\n        ...restProps\r\n    } = props;\r\n    const editorRef = useRef<HTMLDivElement>(null);\r\n    const selectionRef = useRef<Range | null>(null);\r\n    const memtionTriggerRangeRef = useRef<Range | null>(null);\r\n    const pendingMemtionRef = useRef(false);\r\n    const isPlaintextMode = mode === \"plaintext\";\r\n    const isRichMode = mode === \"rich\";\r\n    const isPlaintextOnMemtionMode = mode === \"plaintextOnMemtion\";\r\n    const [memtionVisible, setMemtionVisible] = useState(false);\r\n    const [memtionRect, setMemtionRect] = useState<DOMRect | null>(null);\r\n    const [memtionKeyword, setMemtionKeyword] = useState(\"\");\r\n    const [memtionActiveIndex, setMemtionActiveIndex] = useState(0);\r\n    const memtionOptions = useMemo(\r\n        () => filterMemtionOptions(memtion?.options ?? [], memtionKeyword),\r\n        [memtion?.options, memtionKeyword],\r\n    );\r\n\r\n    const sanitizeValue = (nextValue: string) => {\r\n        if (isPlaintextMode) {\r\n            return nextValue === \"\\n\" ? \"\" : nextValue;\r\n        }\r\n\r\n        const safeHtml = isPlaintextOnMemtionMode\r\n            ? sanitizePlaintextOnMemtionHtml(xss(nextValue, xssOptions))\r\n            : xss(nextValue, xssOptions);\r\n\r\n        return safeHtml === \"<br>\" ? \"\" : safeHtml;\r\n    };\r\n\r\n    const syncHeight = () => {\r\n        if (autosize && editorRef.current) {\r\n            editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\r\n        }\r\n    };\r\n\r\n    const rememberSelection = () => {\r\n        if (!editorRef.current) return;\r\n\r\n        const selection = window.getSelection();\r\n        if (!selection?.rangeCount) return;\r\n\r\n        const range = selection.getRangeAt(0);\r\n        const container = range.commonAncestorContainer;\r\n        const parent =\r\n            container.nodeType === Node.ELEMENT_NODE\r\n                ? (container as Element)\r\n                : container.parentElement;\r\n\r\n        if (!parent || !editorRef.current.contains(parent)) return;\r\n\r\n        selectionRef.current = range.cloneRange();\r\n    };\r\n\r\n    const setEditorValue = (nextValue: string) => {\r\n        if (!editorRef.current) return;\r\n\r\n        const safeValue = sanitizeValue(nextValue);\r\n\r\n        if (isPlaintextMode) {\r\n            editorRef.current.textContent = safeValue;\r\n            return;\r\n        }\r\n\r\n        editorRef.current.innerHTML = safeValue;\r\n    };\r\n\r\n    const getEditorValue = (sanitize = false) => {\r\n        const nextValue = !editorRef.current\r\n            ? \"\"\r\n            : isPlaintextMode\r\n              ? (editorRef.current.textContent ?? \"\")\r\n              : editorRef.current.innerHTML;\r\n\r\n        return sanitize ? sanitizeValue(nextValue) : nextValue;\r\n    };\r\n\r\n    const hideMemtion = () => {\r\n        pendingMemtionRef.current = false;\r\n        memtionTriggerRangeRef.current = null;\r\n        setMemtionVisible(false);\r\n        setMemtionRect(null);\r\n        setMemtionKeyword(\"\");\r\n        setMemtionActiveIndex(0);\r\n    };\r\n\r\n    const insertMemtion = (option: IEditorMemtionOption) => {\r\n        const replaceRange = getMemtionReplaceRange(\r\n            memtionTriggerRangeRef.current,\r\n            selectionRef.current,\r\n        );\r\n\r\n        const range = insertMemtionOption({\r\n            editor: editorRef.current,\r\n            range: replaceRange,\r\n            mode,\r\n            memtion,\r\n            option,\r\n            sanitizeValue,\r\n        });\r\n\r\n        if (!range || !editorRef.current) return;\r\n\r\n        selectionRef.current = range.cloneRange();\r\n        hideMemtion();\r\n        editorRef.current.dispatchEvent(new Event(\"input\", { bubbles: true }));\r\n    };\r\n\r\n    const handlePaste = (e) => {\r\n        onPaste?.(e);\r\n\r\n        if (e.defaultPrevented) return;\r\n\r\n        e.preventDefault();\r\n\r\n        const html = e.clipboardData.getData(\"text/html\");\r\n        const text = e.clipboardData.getData(\"text/plain\");\r\n        const pasteValue = isPlaintextMode\r\n            ? text\r\n            : html\r\n              ? sanitizeValue(html)\r\n              : text;\r\n\r\n        exec(isPlaintextMode ? \"insertText\" : \"insertHTML\", false, pasteValue);\r\n    };\r\n\r\n    const handleKeyDown = (e) => {\r\n        onKeyDown?.(e);\r\n\r\n        if (\r\n            !isPlaintextMode &&\r\n            (e.key === \"Backspace\" || e.key === \"Delete\") &&\r\n            removeAdjacentMemtionTag(editorRef.current, e.key)\r\n        ) {\r\n            e.preventDefault();\r\n            rememberSelection();\r\n            editorRef.current?.dispatchEvent(\r\n                new Event(\"input\", { bubbles: true }),\r\n            );\r\n            return;\r\n        }\r\n\r\n        const memtionKey = memtion?.key ?? \"@\";\r\n        if (memtionVisible && e.key === \" \") {\r\n            hideMemtion();\r\n        }\r\n\r\n        if (memtionVisible && memtionOptions.length) {\r\n            switch (e.key) {\r\n                case \"ArrowDown\":\r\n                    e.preventDefault();\r\n                    setMemtionActiveIndex((index) =>\r\n                        index + 1 >= memtionOptions.length ? 0 : index + 1,\r\n                    );\r\n                    return;\r\n                case \"ArrowUp\":\r\n                    e.preventDefault();\r\n                    setMemtionActiveIndex((index) =>\r\n                        index - 1 < 0 ? memtionOptions.length - 1 : index - 1,\r\n                    );\r\n                    return;\r\n                case \"Enter\":\r\n                    e.preventDefault();\r\n                    insertMemtion(memtionOptions[memtionActiveIndex]);\r\n                    return;\r\n                default:\r\n                    break;\r\n            }\r\n        }\r\n\r\n        if (memtion && e.key === memtionKey) {\r\n            rememberSelection();\r\n            memtionTriggerRangeRef.current =\r\n                selectionRef.current?.cloneRange() ?? null;\r\n            pendingMemtionRef.current = true;\r\n        }\r\n\r\n        switch (e.key) {\r\n            case \"Tab\":\r\n                e.preventDefault();\r\n                exec(\r\n                    isRichMode ? \"insertHTML\" : \"insertText\",\r\n                    false,\r\n                    isRichMode ? \"&#09;\" : \"\\t\",\r\n                );\r\n                break;\r\n            case \"Enter\":\r\n                if (!onEnter) break;\r\n                e.preventDefault();\r\n                onEnter(e);\r\n                break;\r\n            default:\r\n                break;\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        if (!editorRef.current) return;\r\n        const nextValue = sanitizeValue(value);\r\n        if (getEditorValue(true) === nextValue) return;\r\n\r\n        setEditorValue(nextValue);\r\n        syncHeight();\r\n    }, [autosize, mode, value]);\r\n\r\n    useEffect(() => {\r\n        if (!memtionOptions.length) {\r\n            setMemtionActiveIndex(0);\r\n            return;\r\n        }\r\n\r\n        setMemtionActiveIndex((index) =>\r\n            index >= memtionOptions.length ? 0 : index,\r\n        );\r\n    }, [memtionOptions]);\r\n\r\n    const handleInput = (e) => {\r\n        const rawValue = getEditorValue();\r\n        let nextValue = sanitizeValue(rawValue);\r\n\r\n        if (\r\n            isPlaintextOnMemtionMode &&\r\n            rawValue !== nextValue &&\r\n            editorRef.current\r\n        ) {\r\n            setEditorValue(nextValue);\r\n        }\r\n\r\n        if (!nextValue && rawValue && editorRef.current) {\r\n            nextValue = \"\";\r\n            setEditorValue(nextValue);\r\n        }\r\n\r\n        rememberSelection();\r\n\r\n        if (memtion && (pendingMemtionRef.current || memtionVisible)) {\r\n            const memtionKey = memtion?.key ?? \"@\";\r\n            const memtionText = getMemtionText(\r\n                memtionTriggerRangeRef.current,\r\n                selectionRef.current,\r\n            );\r\n\r\n            if (!memtionText.startsWith(memtionKey) || /\\s/.test(memtionText)) {\r\n                hideMemtion();\r\n            } else {\r\n                const keyword = memtionText.slice(memtionKey.length);\r\n                pendingMemtionRef.current = false;\r\n                setMemtionRect(getSelectionRect(selectionRef.current));\r\n                setMemtionKeyword(keyword);\r\n                setMemtionActiveIndex(0);\r\n                setMemtionVisible(true);\r\n            }\r\n        }\r\n\r\n        syncHeight();\r\n\r\n        onChange?.(nextValue, e);\r\n    };\r\n\r\n    const handleFocus = (e) => {\r\n        rememberSelection();\r\n        onFocus?.(e);\r\n    };\r\n\r\n    const handleBlur = (e) => {\r\n        hideMemtion();\r\n        onBlur?.(e);\r\n    };\r\n\r\n    const handleMouseUp = (e) => {\r\n        rememberSelection();\r\n        onMouseUp?.(e);\r\n    };\r\n\r\n    const handleKeyUp = (e) => {\r\n        rememberSelection();\r\n        onKeyUp?.(e);\r\n    };\r\n\r\n    const handleRef = (node: HTMLDivElement | null) => {\r\n        editorRef.current = node;\r\n\r\n        if (typeof ref === \"function\") {\r\n            ref(node);\r\n            return;\r\n        }\r\n\r\n        if (ref) {\r\n            ref.current = node;\r\n        }\r\n    };\r\n\r\n    const getSelection = useCallback(\r\n        () => selectionRef.current?.cloneRange() ?? null,\r\n        [],\r\n    );\r\n\r\n    const controls = useMemo(\r\n        () =>\r\n            getControls({\r\n                controlBtnProps,\r\n                addtionControls,\r\n                getSelection,\r\n            }),\r\n        [addtionControls, getSelection],\r\n    );\r\n\r\n    return (\r\n        <div\r\n            className={classNames(\"i-editor\", className, {\r\n                \"i-editor-borderless\": !border,\r\n            })}\r\n            style={{\r\n                ...style,\r\n                [autosize ? \"minHeight\" : \"height\"]: height,\r\n                width,\r\n            }}\r\n        >\r\n            {!hideControl && (\r\n                <div className=\"i-editor-controls\">{controls}</div>\r\n            )}\r\n\r\n            {memtion && (\r\n                <Memtion\r\n                    visible={memtionVisible}\r\n                    rect={memtionRect}\r\n                    options={memtionOptions}\r\n                    activeIndex={memtionActiveIndex}\r\n                    onActiveChange={setMemtionActiveIndex}\r\n                    onSelect={insertMemtion}\r\n                />\r\n            )}\r\n\r\n            <div\r\n                ref={handleRef}\r\n                className=\"i-editor-content\"\r\n                data-placeholder={placeholder}\r\n                contentEditable={isPlaintextMode ? \"plaintext-only\" : true}\r\n                onFocus={handleFocus}\r\n                onBlur={handleBlur}\r\n                onMouseUp={handleMouseUp}\r\n                onPaste={handlePaste}\r\n                onInput={handleInput}\r\n                onKeyUp={handleKeyUp}\r\n                onKeyDown={handleKeyDown}\r\n                {...restProps}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default Editor;\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/es/components/editor/memtion.js

@@ -1,9 +1,42 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { memo } from 'react';
+import { createPortal } from 'react-dom';
 import { renderToStaticMarkup } from 'react-dom/server';
 import List from '../list/list.js';
 
 const MEMTION_TAG_CLASS_NAME = "i-memtion-tag";
+const blockTags = new Set([
+    "ADDRESS",
+    "ARTICLE",
+    "ASIDE",
+    "BLOCKQUOTE",
+    "DIV",
+    "DL",
+    "FIELDSET",
+    "FIGCAPTION",
+    "FIGURE",
+    "FOOTER",
+    "FORM",
+    "H1",
+    "H2",
+    "H3",
+    "H4",
+    "H5",
+    "H6",
+    "HEADER",
+    "LI",
+    "MAIN",
+    "NAV",
+    "OL",
+    "P",
+    "PRE",
+    "SECTION",
+    "TABLE",
+    "TD",
+    "TH",
+    "TR",
+    "UL",
+]);
 const escapeHtmlAttr = (value) => value
     .replaceAll("&", "&")
     .replaceAll('"', """)
@@ -54,14 +87,11 @@ const insertMemtionOption = ({ editor, range, mode, memtion, option, sanitizeVal
         const html = getInsertHtml(memtion, option, sanitizeValue);
         const fragment = nextRange.createContextualFragment(html);
         const lastNode = fragment.lastChild;
-        const spacing = document.createTextNode(" ");
         nextRange.insertNode(fragment);
         if (lastNode) {
             nextRange.setStartAfter(lastNode);
             nextRange.collapse(true);
         }
-        nextRange.insertNode(spacing);
-        nextRange.setStartAfter(spacing);
     }
     nextRange.collapse(true);
     browserSelection.removeAllRanges();
@@ -91,6 +121,60 @@ const filterMemtionOptions = (options, keyword) => {
 };
 const isMemtionTag = (node) => node instanceof HTMLElement &&
     node.classList.contains(MEMTION_TAG_CLASS_NAME);
+const appendBreak = (container) => {
+    if (!container.lastChild || container.lastChild.nodeName === "BR") {
+        return;
+    }
+    container.appendChild(document.createElement("br"));
+};
+const appendPlaintextOnMemtionNode = (container, node) => {
+    if (!node)
+        return;
+    if (node.nodeType === Node.TEXT_NODE) {
+        container.appendChild(document.createTextNode((node.textContent ?? "").replaceAll("\r", "")));
+        return;
+    }
+    if (!(node instanceof HTMLElement)) {
+        return;
+    }
+    if (isMemtionTag(node)) {
+        const tag = document.createElement("span");
+        const memtionValue = node.getAttribute("data-memtion-value");
+        tag.className = MEMTION_TAG_CLASS_NAME;
+        tag.setAttribute("contenteditable", "false");
+        if (memtionValue !== null) {
+            tag.setAttribute("data-memtion-value", memtionValue);
+        }
+        tag.innerHTML = node.innerHTML;
+        container.appendChild(tag);
+        return;
+    }
+    if (node.tagName === "BR") {
+        appendBreak(container);
+        return;
+    }
+    Array.from(node.childNodes).forEach((child) => {
+        appendPlaintextOnMemtionNode(container, child);
+    });
+    if (blockTags.has(node.tagName)) {
+        appendBreak(container);
+    }
+};
+const sanitizePlaintextOnMemtionHtml = (value) => {
+    if (typeof document === "undefined") {
+        return value;
+    }
+    const source = document.createElement("div");
+    const result = document.createElement("div");
+    source.innerHTML = value;
+    Array.from(source.childNodes).forEach((child) => {
+        appendPlaintextOnMemtionNode(result, child);
+    });
+    while (result.lastChild?.nodeName === "BR") {
+        result.lastChild.remove();
+    }
+    return result.innerHTML;
+};
 const getAdjacentMemtionTag = (range, direction) => {
     const { startContainer, startOffset } = range;
     if (startContainer.nodeType === Node.TEXT_NODE) {
@@ -148,13 +232,17 @@ const Memtion = (props) => {
     if (!visible || !rect || !options?.length) {
         return null;
     }
-    return (jsx(List, { className: "i-editor-memtion", type: "option", style: {
+    const content = (jsx(List, { className: "i-editor-memtion", type: "option", style: {
             position: "fixed",
             top: rect.bottom,
             left: rect.left,
         }, children: options.map((option, i) => (jsx(List.Item, { type: "option", active: i === activeIndex, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => onActiveChange?.(i), onClick: () => onSelect?.(option), children: option.label }, `${option.value}-${i}`))) }));
+    if (typeof document === "undefined") {
+        return content;
+    }
+    return createPortal(content, document.body);
 };
 var Memtion$1 = memo(Memtion);
 
-export { MEMTION_TAG_CLASS_NAME, Memtion$1 as default, filterMemtionOptions, getMemtionReplaceRange, getMemtionText, getSelectionRect, insertMemtionOption, removeAdjacentMemtionTag };
+export { MEMTION_TAG_CLASS_NAME, Memtion$1 as default, filterMemtionOptions, getMemtionReplaceRange, getMemtionText, getSelectionRect, insertMemtionOption, removeAdjacentMemtionTag, sanitizePlaintextOnMemtionHtml };
 //# sourceMappingURL=memtion.js.map

package/lib/es/components/editor/memtion.js.map

@@ -1 +1 @@
-{"version":3,"file":"memtion.js","sources":["../../../../packages/components/editor/memtion.tsx"],"sourcesContent":["import { memo, ReactNode } from \"react\";\r\nimport { renderToStaticMarkup } from \"react-dom/server\";\r\nimport List from \"../list\";\r\nimport { IEditorMemtion, IEditorMemtionOption } from \"./type\";\r\n\r\nexport const MEMTION_TAG_CLASS_NAME = \"i-memtion-tag\";\r\n\nconst escapeHtmlAttr = (value: string) =>\n    value\n        .replaceAll(\"&\", \"&amp;\")\n        .replaceAll('\"', \"&quot;\")\n        .replaceAll(\"<\", \"&lt;\")\n        .replaceAll(\">\", \"&gt;\");\n\r\ninterface IMemtionProps {\r\n    visible?: boolean;\r\n    rect?: DOMRect | null;\r\n    options?: IEditorMemtionOption[];\r\n    activeIndex?: number;\r\n    onActiveChange?: (index: number) => void;\r\n    onSelect?: (option: IEditorMemtionOption) => void;\r\n}\r\n\r\ninterface IInsertMemtionOptionParams {\r\n    editor: HTMLDivElement | null;\r\n    range: Range | null;\r\n    mode: \"rich\" | \"plaintext\";\r\n    memtion?: IEditorMemtion;\r\n    option: IEditorMemtionOption;\r\n    sanitizeValue: (value: string) => string;\r\n}\r\n\r\nconst getInsertNode = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => memtion?.insert?.(option) ?? option.value;\r\n\r\nconst getInsertText = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (typeof nextNode === \"string\" || typeof nextNode === \"number\") {\r\n        return `${String(nextNode)} `;\r\n    }\r\n\r\n    return `${String(option.value)} `;\r\n};\r\n\r\nconst getInsertHtml = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n    sanitizeValue: (value: string) => string,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (nextNode === null || nextNode === undefined || nextNode === false) {\r\n        return \"\";\r\n    }\r\n\r\n    const content = sanitizeValue(\r\n        renderToStaticMarkup(<>{nextNode as ReactNode}</>),\r\n    );\r\n\r\n    return `<span class=\"${MEMTION_TAG_CLASS_NAME}\" contenteditable=\"false\" data-memtion-value=\"${escapeHtmlAttr(String(option.value))}\">${content}</span>`;\n};\r\n\r\nexport const getSelectionRect = (range: Range | null) => {\r\n    if (!range) return null;\r\n\r\n    const rect = range.getBoundingClientRect();\r\n\r\n    if (rect.width || rect.height) {\r\n        return rect;\r\n    }\r\n\r\n    return range.getClientRects()[0] ?? rect;\r\n};\r\n\r\nexport const insertMemtionOption = ({\r\n    editor,\r\n    range,\r\n    mode,\r\n    memtion,\r\n    option,\r\n    sanitizeValue,\r\n}: IInsertMemtionOptionParams) => {\r\n    if (!editor || !range) return null;\r\n\r\n    const browserSelection = window.getSelection();\r\n    if (!browserSelection) return null;\r\n\r\n    const nextRange = range.cloneRange();\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n    editor.focus();\r\n    nextRange.deleteContents();\r\n\r\n    if (mode === \"plaintext\") {\r\n        const text = document.createTextNode(getInsertText(memtion, option));\r\n        nextRange.insertNode(text);\r\n        nextRange.setStartAfter(text);\r\n    } else {\r\n        const html = getInsertHtml(memtion, option, sanitizeValue);\r\n        const fragment = nextRange.createContextualFragment(html);\r\n        const lastNode = fragment.lastChild;\r\n        const spacing = document.createTextNode(\" \");\r\n\r\n        nextRange.insertNode(fragment);\r\n\r\n        if (lastNode) {\r\n            nextRange.setStartAfter(lastNode);\r\n            nextRange.collapse(true);\r\n        }\r\n\r\n        nextRange.insertNode(spacing);\r\n        nextRange.setStartAfter(spacing);\r\n    }\r\n\r\n    nextRange.collapse(true);\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n\r\n    return nextRange;\r\n};\r\n\r\nexport const getMemtionText = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return \"\";\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range.toString();\r\n};\r\n\r\nexport const getMemtionReplaceRange = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return null;\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range;\r\n};\r\n\r\nexport const filterMemtionOptions = (\r\n    options: IEditorMemtionOption[],\r\n    keyword: string,\r\n) => {\r\n    const normalizedKeyword = keyword.trim().toLowerCase();\r\n\r\n    if (!normalizedKeyword) {\r\n        return options;\r\n    }\r\n\r\n    return options.filter((option) =>\r\n        String(option.value).toLowerCase().includes(normalizedKeyword),\r\n    );\r\n};\r\n\r\nconst isMemtionTag = (node: Node | null) =>\r\n    node instanceof HTMLElement &&\r\n    node.classList.contains(MEMTION_TAG_CLASS_NAME);\r\n\r\nconst getAdjacentMemtionTag = (\r\n    range: Range,\r\n    direction: \"backward\" | \"forward\",\r\n) => {\r\n    const { startContainer, startOffset } = range;\r\n\r\n    if (startContainer.nodeType === Node.TEXT_NODE) {\r\n        const textNode = startContainer as Text;\r\n\r\n        if (direction === \"backward\" && startOffset === 0) {\r\n            return isMemtionTag(textNode.previousSibling)\r\n                ? (textNode.previousSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        if (direction === \"forward\" && startOffset === textNode.data.length) {\r\n            return isMemtionTag(textNode.nextSibling)\r\n                ? (textNode.nextSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    const element = startContainer as Element;\r\n    const targetIndex =\r\n        direction === \"backward\" ? startOffset - 1 : startOffset;\r\n    const targetNode = element.childNodes.item(targetIndex);\r\n\r\n    return isMemtionTag(targetNode) ? (targetNode as HTMLElement) : null;\r\n};\r\n\r\nexport const removeAdjacentMemtionTag = (\r\n    editor: HTMLDivElement | null,\r\n    key: \"Backspace\" | \"Delete\",\r\n) => {\r\n    if (!editor) return false;\r\n\r\n    const selection = window.getSelection();\r\n    if (!selection?.rangeCount || !selection.isCollapsed) return false;\r\n\r\n    const activeRange = selection.getRangeAt(0);\r\n    const tag = getAdjacentMemtionTag(\r\n        activeRange,\r\n        key === \"Backspace\" ? \"backward\" : \"forward\",\r\n    );\r\n\r\n    if (!tag || !tag.parentNode) return false;\r\n\r\n    const parent = tag.parentNode;\r\n    const nextSibling = tag.nextSibling;\r\n    const index = Array.prototype.indexOf.call(parent.childNodes, tag);\r\n\r\n    if (nextSibling?.nodeType === Node.TEXT_NODE) {\r\n        const textNode = nextSibling as Text;\r\n\r\n        if (textNode.data.startsWith(\" \")) {\r\n            textNode.deleteData(0, 1);\r\n\r\n            if (!textNode.data.length) {\r\n                nextSibling.remove();\r\n            }\r\n        }\r\n    }\r\n\r\n    tag.remove();\r\n\r\n    const range = document.createRange();\r\n    range.setStart(parent, Math.min(index, parent.childNodes.length));\r\n    range.collapse(true);\r\n    selection.removeAllRanges();\r\n    selection.addRange(range);\r\n    editor.focus();\r\n\r\n    return true;\r\n};\r\n\r\nconst Memtion = (props: IMemtionProps) => {\r\n    const { visible, rect, options, activeIndex, onActiveChange, onSelect } =\r\n        props;\r\n\r\n    if (!visible || !rect || !options?.length) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <List\r\n            className=\"i-editor-memtion\"\r\n            type=\"option\"\r\n            style={{\r\n                position: \"fixed\",\r\n                top: rect.bottom,\r\n                left: rect.left,\r\n            }}\r\n        >\r\n            {options.map((option, i) => (\r\n                <List.Item\r\n                    key={`${option.value}-${i}`}\r\n                    type=\"option\"\r\n                    active={i === activeIndex}\r\n                    onMouseDown={(e) => e.preventDefault()}\r\n                    onMouseEnter={() => onActiveChange?.(i)}\r\n                    onClick={() => onSelect?.(option)}\r\n                >\r\n                    {option.label}\r\n                </List.Item>\r\n            ))}\r\n        </List>\r\n    );\r\n};\r\n\r\nexport default memo(Memtion);\r\n"],"names":["_jsx","_Fragment"],"mappings":"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"}
+{"version":3,"file":"memtion.js","sources":["../../../../packages/components/editor/memtion.tsx"],"sourcesContent":["import { memo, ReactNode } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { renderToStaticMarkup } from \"react-dom/server\";\r\nimport List from \"../list\";\r\nimport { IEditorMemtion, IEditorMemtionOption } from \"./type\";\r\n\r\nexport const MEMTION_TAG_CLASS_NAME = \"i-memtion-tag\";\r\n\r\nconst blockTags = new Set([\r\n    \"ADDRESS\",\r\n    \"ARTICLE\",\r\n    \"ASIDE\",\r\n    \"BLOCKQUOTE\",\r\n    \"DIV\",\r\n    \"DL\",\r\n    \"FIELDSET\",\r\n    \"FIGCAPTION\",\r\n    \"FIGURE\",\r\n    \"FOOTER\",\r\n    \"FORM\",\r\n    \"H1\",\r\n    \"H2\",\r\n    \"H3\",\r\n    \"H4\",\r\n    \"H5\",\r\n    \"H6\",\r\n    \"HEADER\",\r\n    \"LI\",\r\n    \"MAIN\",\r\n    \"NAV\",\r\n    \"OL\",\r\n    \"P\",\r\n    \"PRE\",\r\n    \"SECTION\",\r\n    \"TABLE\",\r\n    \"TD\",\r\n    \"TH\",\r\n    \"TR\",\r\n    \"UL\",\r\n]);\r\n\r\nconst escapeHtmlAttr = (value: string) =>\r\n    value\r\n        .replaceAll(\"&\", \"&amp;\")\r\n        .replaceAll('\"', \"&quot;\")\r\n        .replaceAll(\"<\", \"&lt;\")\r\n        .replaceAll(\">\", \"&gt;\");\r\n\r\ninterface IMemtionProps {\r\n    visible?: boolean;\r\n    rect?: DOMRect | null;\r\n    options?: IEditorMemtionOption[];\r\n    activeIndex?: number;\r\n    onActiveChange?: (index: number) => void;\r\n    onSelect?: (option: IEditorMemtionOption) => void;\r\n}\r\n\r\ninterface IInsertMemtionOptionParams {\r\n    editor: HTMLDivElement | null;\r\n    range: Range | null;\r\n    mode: \"rich\" | \"plaintext\" | \"plaintextOnMemtion\";\r\n    memtion?: IEditorMemtion;\r\n    option: IEditorMemtionOption;\r\n    sanitizeValue: (value: string) => string;\r\n}\r\n\r\nconst getInsertNode = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => memtion?.insert?.(option) ?? option.value;\r\n\r\nconst getInsertText = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (typeof nextNode === \"string\" || typeof nextNode === \"number\") {\r\n        return `${String(nextNode)} `;\r\n    }\r\n\r\n    return `${String(option.value)} `;\r\n};\r\n\r\nconst getInsertHtml = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n    sanitizeValue: (value: string) => string,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (nextNode === null || nextNode === undefined || nextNode === false) {\r\n        return \"\";\r\n    }\r\n\r\n    const content = sanitizeValue(\r\n        renderToStaticMarkup(<>{nextNode as ReactNode}</>),\r\n    );\r\n\r\n    return `<span class=\"${MEMTION_TAG_CLASS_NAME}\" contenteditable=\"false\" data-memtion-value=\"${escapeHtmlAttr(String(option.value))}\">${content}</span>`;\r\n};\r\n\r\nexport const getSelectionRect = (range: Range | null) => {\r\n    if (!range) return null;\r\n\r\n    const rect = range.getBoundingClientRect();\r\n\r\n    if (rect.width || rect.height) {\r\n        return rect;\r\n    }\r\n\r\n    return range.getClientRects()[0] ?? rect;\r\n};\r\n\r\nexport const insertMemtionOption = ({\r\n    editor,\r\n    range,\r\n    mode,\r\n    memtion,\r\n    option,\r\n    sanitizeValue,\r\n}: IInsertMemtionOptionParams) => {\r\n    if (!editor || !range) return null;\r\n\r\n    const browserSelection = window.getSelection();\r\n    if (!browserSelection) return null;\r\n\r\n    const nextRange = range.cloneRange();\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n    editor.focus();\r\n    nextRange.deleteContents();\r\n\r\n    if (mode === \"plaintext\") {\r\n        const text = document.createTextNode(getInsertText(memtion, option));\r\n        nextRange.insertNode(text);\r\n        nextRange.setStartAfter(text);\r\n    } else {\r\n        const html = getInsertHtml(memtion, option, sanitizeValue);\r\n        const fragment = nextRange.createContextualFragment(html);\r\n        const lastNode = fragment.lastChild;\r\n\r\n        nextRange.insertNode(fragment);\r\n\r\n        if (lastNode) {\r\n            nextRange.setStartAfter(lastNode);\r\n            nextRange.collapse(true);\r\n        }\r\n    }\r\n\r\n    nextRange.collapse(true);\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n\r\n    return nextRange;\r\n};\r\n\r\nexport const getMemtionText = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return \"\";\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range.toString();\r\n};\r\n\r\nexport const getMemtionReplaceRange = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return null;\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range;\r\n};\r\n\r\nexport const filterMemtionOptions = (\r\n    options: IEditorMemtionOption[],\r\n    keyword: string,\r\n) => {\r\n    const normalizedKeyword = keyword.trim().toLowerCase();\r\n\r\n    if (!normalizedKeyword) {\r\n        return options;\r\n    }\r\n\r\n    return options.filter((option) =>\r\n        String(option.value).toLowerCase().includes(normalizedKeyword),\r\n    );\r\n};\r\n\r\nconst isMemtionTag = (node: Node | null) =>\r\n    node instanceof HTMLElement &&\r\n    node.classList.contains(MEMTION_TAG_CLASS_NAME);\r\n\r\nconst appendBreak = (container: HTMLElement) => {\r\n    if (!container.lastChild || container.lastChild.nodeName === \"BR\") {\r\n        return;\r\n    }\r\n\r\n    container.appendChild(document.createElement(\"br\"));\r\n};\r\n\r\nconst appendPlaintextOnMemtionNode = (\r\n    container: HTMLElement,\r\n    node: Node | null,\r\n) => {\r\n    if (!node) return;\r\n\r\n    if (node.nodeType === Node.TEXT_NODE) {\r\n        container.appendChild(\r\n            document.createTextNode(\r\n                (node.textContent ?? \"\").replaceAll(\"\\r\", \"\"),\r\n            ),\r\n        );\r\n        return;\r\n    }\r\n\r\n    if (!(node instanceof HTMLElement)) {\r\n        return;\r\n    }\r\n\r\n    if (isMemtionTag(node)) {\r\n        const tag = document.createElement(\"span\");\r\n        const memtionValue = node.getAttribute(\"data-memtion-value\");\r\n\r\n        tag.className = MEMTION_TAG_CLASS_NAME;\r\n        tag.setAttribute(\"contenteditable\", \"false\");\r\n\r\n        if (memtionValue !== null) {\r\n            tag.setAttribute(\"data-memtion-value\", memtionValue);\r\n        }\r\n\r\n        tag.innerHTML = node.innerHTML;\r\n        container.appendChild(tag);\r\n        return;\r\n    }\r\n\r\n    if (node.tagName === \"BR\") {\r\n        appendBreak(container);\r\n        return;\r\n    }\r\n\r\n    Array.from(node.childNodes).forEach((child) => {\r\n        appendPlaintextOnMemtionNode(container, child);\r\n    });\r\n\r\n    if (blockTags.has(node.tagName)) {\r\n        appendBreak(container);\r\n    }\r\n};\r\n\r\nexport const sanitizePlaintextOnMemtionHtml = (value: string) => {\r\n    if (typeof document === \"undefined\") {\r\n        return value;\r\n    }\r\n\r\n    const source = document.createElement(\"div\");\r\n    const result = document.createElement(\"div\");\r\n\r\n    source.innerHTML = value;\r\n\r\n    Array.from(source.childNodes).forEach((child) => {\r\n        appendPlaintextOnMemtionNode(result, child);\r\n    });\r\n\r\n    while (result.lastChild?.nodeName === \"BR\") {\r\n        result.lastChild.remove();\r\n    }\r\n\r\n    return result.innerHTML;\r\n};\r\n\r\nconst getAdjacentMemtionTag = (\r\n    range: Range,\r\n    direction: \"backward\" | \"forward\",\r\n) => {\r\n    const { startContainer, startOffset } = range;\r\n\r\n    if (startContainer.nodeType === Node.TEXT_NODE) {\r\n        const textNode = startContainer as Text;\r\n\r\n        if (direction === \"backward\" && startOffset === 0) {\r\n            return isMemtionTag(textNode.previousSibling)\r\n                ? (textNode.previousSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        if (direction === \"forward\" && startOffset === textNode.data.length) {\r\n            return isMemtionTag(textNode.nextSibling)\r\n                ? (textNode.nextSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    const element = startContainer as Element;\r\n    const targetIndex =\r\n        direction === \"backward\" ? startOffset - 1 : startOffset;\r\n    const targetNode = element.childNodes.item(targetIndex);\r\n\r\n    return isMemtionTag(targetNode) ? (targetNode as HTMLElement) : null;\r\n};\r\n\r\nexport const removeAdjacentMemtionTag = (\r\n    editor: HTMLDivElement | null,\r\n    key: \"Backspace\" | \"Delete\",\r\n) => {\r\n    if (!editor) return false;\r\n\r\n    const selection = window.getSelection();\r\n    if (!selection?.rangeCount || !selection.isCollapsed) return false;\r\n\r\n    const activeRange = selection.getRangeAt(0);\r\n    const tag = getAdjacentMemtionTag(\r\n        activeRange,\r\n        key === \"Backspace\" ? \"backward\" : \"forward\",\r\n    );\r\n\r\n    if (!tag || !tag.parentNode) return false;\r\n\r\n    const parent = tag.parentNode;\r\n    const nextSibling = tag.nextSibling;\r\n    const index = Array.prototype.indexOf.call(parent.childNodes, tag);\r\n\r\n    if (nextSibling?.nodeType === Node.TEXT_NODE) {\r\n        const textNode = nextSibling as Text;\r\n\r\n        if (textNode.data.startsWith(\" \")) {\r\n            textNode.deleteData(0, 1);\r\n\r\n            if (!textNode.data.length) {\r\n                nextSibling.remove();\r\n            }\r\n        }\r\n    }\r\n\r\n    tag.remove();\r\n\r\n    const range = document.createRange();\r\n    range.setStart(parent, Math.min(index, parent.childNodes.length));\r\n    range.collapse(true);\r\n    selection.removeAllRanges();\r\n    selection.addRange(range);\r\n    editor.focus();\r\n\r\n    return true;\r\n};\r\n\r\nconst Memtion = (props: IMemtionProps) => {\r\n    const { visible, rect, options, activeIndex, onActiveChange, onSelect } =\r\n        props;\r\n\r\n    if (!visible || !rect || !options?.length) {\r\n        return null;\r\n    }\r\n\r\n    const content = (\r\n        <List\r\n            className=\"i-editor-memtion\"\r\n            type=\"option\"\r\n            style={{\r\n                position: \"fixed\",\r\n                top: rect.bottom,\r\n                left: rect.left,\r\n            }}\r\n        >\r\n            {options.map((option, i) => (\r\n                <List.Item\r\n                    key={`${option.value}-${i}`}\r\n                    type=\"option\"\r\n                    active={i === activeIndex}\r\n                    onMouseDown={(e) => e.preventDefault()}\r\n                    onMouseEnter={() => onActiveChange?.(i)}\r\n                    onClick={() => onSelect?.(option)}\r\n                >\r\n                    {option.label}\r\n                </List.Item>\r\n            ))}\r\n        </List>\r\n    );\r\n\r\n    if (typeof document === \"undefined\") {\r\n        return content;\r\n    }\r\n\r\n    return createPortal(content, document.body);\r\n};\r\n\r\nexport default memo(Memtion);\r\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/lib/es/components/picker/colors/index.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ColorsPanel from '@rc-component/color-picker';
 import { useState, useEffect } from 'react';
+import InputContainer from '../../input/container.js';
 import Popup from '../../popup/popup.js';
 import Footer, { ColorMethods } from './footer.js';
 import Handle from './handle.js';
 
 function ColorPicker(props) {
-    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, } = props;
+    const { value, type = "HEX", disabledAlpha, children, usePanel, handle = "both", placeholder = "Colors", popupProps, onChange, label, required, ...restProps } = props;
     const [colorType, setColorType] = useState(type);
     const [colorValue, setColorValue] = useState(value);
     const [syncValue, setSyncValue] = useState(value);
@@ -48,11 +49,11 @@ function ColorPicker(props) {
         }
     }, [popupProps?.visible]);
     if (usePanel) {
-        return jsx(ColorsPanel, { ...props });
+        return (jsx(InputContainer, { label: label, required: required, children: jsx(ColorsPanel, { ...restProps, value: value, onChange: onChange }) }));
     }
-    return (jsx(Popup, { trigger: 'click', touchable: true, position: 'bottom', ...popupProps, visible: visible, content: jsx(ColorsPanel, { value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
-                return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
-            }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }));
+    return (jsx(InputContainer, { label: label, required: required, children: jsx(Popup, { trigger: "click", touchable: true, position: "bottom", ...popupProps, visible: visible, content: jsx(ColorsPanel, { ...restProps, value: syncValue, disabledAlpha: disabledAlpha, panelRender: (panel) => {
+                    return (jsxs(Fragment, { children: [panel, jsx(Footer, { value: colorValue, type: colorType, onTypeChange: handleTypeChange, onChange: handleValueChange, onOk: handleOk })] }));
+                }, onChange: handleChange, onChangeComplete: handleComplete }), onVisibleChange: handleVisibleChange, children: children ?? (jsx(Handle, { color: value, handle: handle, placeholder: placeholder })) }) }));
 }
 
 export { ColorPicker as default };