@ioca/react 1.5.5 → 1.5.6

package/lib/index.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { debounce, uid, throttle, title } from 'radash';
 import { useState, useRef, useCallback, useEffect, useMemo, Children, cloneElement, createElement, isValidElement, Fragment as Fragment$1, useTransition, forwardRef, useLayoutEffect, memo, createContext, useContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, ClearAllRound, UndoRound, RedoRound, StrikethroughSRound, FormatUnderlinedRound, FormatItalicRound, FormatBoldRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
+import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, UndoRound, RedoRound, FormatBoldRound, FormatItalicRound, FormatUnderlinedRound, StrikethroughSRound, ClearAllRound, PlayArrowRound, PauseRound, StopRound, VolumeDownRound, VolumeOffRound, FullscreenRound, FullscreenExitRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, KeyboardDoubleArrowUpRound, SyncAltRound, VisibilityRound, VisibilityOffRound, MoreHorizRound, SearchRound, CheckRound, UnfoldMoreRound, CalendarMonthTwotone, AccessTimeRound, InfoOutlined, KeyboardArrowDownRound, ListAltRound, DriveFolderUploadOutlined, PlusSharp } from '@ricons/material';
 import { createRoot } from 'react-dom/client';
 import { createPortal } from 'react-dom';
 import xss from 'xss';
@@ -1867,57 +1867,67 @@ 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];
 }
 
 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('"', """)
@@ -1968,14 +1978,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();
@@ -2005,6 +2012,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) {
@@ -2062,11 +2123,15 @@ const Memtion = (props) => {
     if (!visible || !rect || !options?.length) {
         return null;
     }
-    return (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
+    const content = (jsx(List$1, { className: "i-editor-memtion", type: "option", style: {
             position: "fixed",
             top: rect.bottom,
             left: rect.left,
         }, children: options.map((option, i) => (jsx(List$1.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);
 
@@ -2081,18 +2146,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;
@@ -2112,18 +2187,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 = () => {
@@ -2155,22 +2230,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();
@@ -2207,7 +2278,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)
@@ -2224,9 +2295,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) {
@@ -2238,6 +2307,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);
@@ -2258,9 +2332,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) => {
@@ -2301,7 +2373,7 @@ const Editor = (props) => {
             ...style,
             [autosize ? "minHeight" : "height"]: height,
             width,
-        }, children: [!hideControl && (jsx("div", { className: "i-editor-controls", children: controls })), memtion && (jsx(Memtion$1, { 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$1, { 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 })] }));
 };
 
 const Flex = (props) => {
@@ -3939,7 +4011,7 @@ const displayValue = (config) => {
 };
 
 const Select = (props) => {
-    const { ref, type = "text", name, label, value = "", placeholder, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
+    const { ref, type = "text", name, label, value = "", placeholder, required, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, hideArrow, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
     const [filterValue, setFilterValue] = useState("");
     const [selectedValue, setSelectedValue] = useState(value);
     const [active, setActive] = useState(false);
@@ -4006,11 +4078,11 @@ const Select = (props) => {
     const text = message ?? tip;
     return (jsxs("label", { className: classNames("i-input-label", className, {
             "i-input-inline": labelInline,
-        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
+        }), style: style, children: [label && (jsxs("span", { className: "i-input-label-text", children: [required && jsx("span", { className: "error", children: "*" }), label] })), jsx(Popup, { position: "bottom", arrow: false, fitSize: true, offset: 0, ...popupProps, visible: active, trigger: "none", onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: selectedValue, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
                         [`i-input-${status}`]: status !== "normal",
                         "i-input-borderless": !border,
                         "i-input-focus": active,
-                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: 'hidden', value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
+                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: "hidden", value: selectedValue, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
                                 "i-select-multiple": multiple,
                             }), children: displayValue({
                                 options: formattedOptions,
@@ -4018,7 +4090,7 @@ const Select = (props) => {
                                 multiple,
                                 maxDisplay,
                                 onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: 'i-input i-select', placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
+                            }) })) : (jsx("input", { className: "i-input i-select", placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? filterValue : displayLabel, className: "i-input i-select", placeholder: displayLabel || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: !hideArrow, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: "i-input-message", children: text })] }));
 };
 
 const ColorMethods = {
@@ -4051,7 +4123,7 @@ const Handle = (props) => {
 };
 
 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);
@@ -4093,11 +4165,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 })) }) }));
 }
 
 const Dates = (props) => {
@@ -5093,7 +5165,7 @@ const Tabs = ((props) => {
             const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
             const isLine = type === "line";
             setBarStyle({
-                height: !vertical && isLine ? ".25em" : offsetHeight,
+                height: !vertical && isLine ? ".25em" : ".8em",
                 width: vertical && isLine ? ".25em" : offsetWidth,
                 transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
             });

package/lib/types/components/editor/type.d.ts

@@ -20,7 +20,7 @@ interface IEditor extends Omit<HTMLAttributes<HTMLDivElement>, "onInput" | "onCh
     width?: string | number;
     height?: string | number;
     autosize?: boolean;
-    mode?: "rich" | "plaintext";
+    mode?: "rich" | "plaintext" | "plaintextOnMemtion";
     hideControl?: boolean;
     addtionControls?: IEditorAddtionControl[];
     memtion?: IEditorMemtion;

package/lib/types/components/picker/type.d.ts

@@ -27,8 +27,10 @@ interface ITimePicker extends BaseInput, IInput {
     renderItem?: (number: number, active: boolean, unit: "hour" | "minute" | "second") => ReactNode;
     popupProps?: IPopup;
 }
-interface IColorPicker extends ColorPickerProps {
+interface IColorPicker extends Omit<ColorPickerProps, "value" | "onChange"> {
     value?: any;
+    label?: ReactNode;
+    required?: boolean;
     type?: "HEX" | "RGB" | "HSB";
     children?: ReactNode;
     popupProps?: IPopup;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ioca/react",
-    "version": "1.5.05",
+    "version": "1.5.06",
     "type": "module",
     "scripts": {
         "dev": "vite",