@ioca/react 1.4.80 → 1.4.81

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

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":["Button","Icon"],"sources":["../../../../packages/components/editor/controls.tsx"],"sourcesContent":["import {\n\tClearAllRound,\n\tFormatBoldRound,\n\tFormatItalicRound,\n\tFormatUnderlinedRound,\n\tRedoRound,\n\tStrikethroughSRound,\n\tUndoRound,\n} from \"@ricons/material\";\nimport { Fragment } from \"react/jsx-runtime\";\nimport xss from \"xss\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\n\nconst { escapeAttrValue } = xss as unknown as {\n\tescapeAttrValue: (value: string) => string;\n};\n\nexport const exec = (a, b?, c?) => {\n\tif (typeof document === \"undefined\") return;\n\treturn document.execCommand(a, b, c);\n};\n\nexport const xssOptions = {\n\tonIgnoreTagAttr: function (tag, name, value) {\n\t\tif ([\"data-\", \"style\"].includes(name.substr(0, 5))) {\n\t\t\treturn name + '=\"' + escapeAttrValue(value) + '\"';\n\t\t}\n\t},\n};\n\nconst fnMap = {\n\tbold: {\n\t\ticon: <FormatBoldRound />,\n\t\tonClick: () => exec(\"bold\"),\n\t\ttip: \"粗体\",\n\t},\n\titalic: {\n\t\ticon: <FormatItalicRound />,\n\t\tonClick: () => exec(\"italic\"),\n\t\ttip: \"斜体\",\n\t},\n\tunderline: {\n\t\ticon: <FormatUnderlinedRound />,\n\t\tonClick: () => exec(\"underline\"),\n\t\ttip: \"下划线\",\n\t},\n\tstrike: {\n\t\ticon: <StrikethroughSRound />,\n\t\tonClick: () => exec(\"strikeThrough\"),\n\t\ttip: \"删除线\",\n\t},\n\tredo: {\n\t\ticon: <RedoRound />,\n\t\tonClick: () => exec(\"redo\"),\n\t\ttip: \"重做\",\n\t},\n\tundo: {\n\t\ticon: <UndoRound />,\n\t\tonClick: () => exec(\"undo\"),\n\t\ttip: \"撤销\",\n\t},\n\t// color: {\n\t// \ticon: <FormatColorTextRound />,\n\t// \tonClick: () => exec(\"foreColor\", false, \"\"),\n\t// },\n\t// backColor: {\n\t// \ticon: <FormatColorFillRound />,\n\t// \tonClick: () => exec(\"backColor\", false, \"\"),\n\t// },\n\tclear: {\n\t\ticon: <ClearAllRound />,\n\t\tonClick: () => exec(\"removeFormat\"),\n\t\ttip: \"清除格式\",\n\t},\n};\n\nconst aliasMap = {\n\tsimple: [\"undo\", \"redo\", \"bold\", \"italic\", \"underline\", \"strike\", \"clear\"],\n\tall: Object.keys(fnMap),\n};\n\nexport default function getControls(fns, options) {\n\tconst { controlBtnProps } = options;\n\tconst keys = typeof fns === \"string\" ? aliasMap[fns] : fns;\n\n\treturn keys.map((k) => {\n\t\tif (fnMap[k]) {\n\t\t\tconst { icon, render, tip, onClick } = fnMap[k];\n\n\t\t\tif (render) {\n\t\t\t\treturn render(options);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Button key={k} {...controlBtnProps} onClick={onClick}>\n\t\t\t\t\t<Icon icon={icon} />\n\t\t\t\t\t{tip && <span className='i-editor-control-tip'>{tip}</span>}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t}\n\t\treturn <Fragment key={k} />;\n\t});\n}\n"],"mappings":";;;;;;AAcA,MAAM,EAAE,oBAAoB;AAI5B,MAAa,QAAQ,GAAG,GAAI,MAAO;AAClC,KAAI,OAAO,aAAa,YAAa;AACrC,QAAO,SAAS,YAAY,GAAG,GAAG,EAAE;;AAGrC,MAAa,aAAa,EACzB,iBAAiB,SAAU,KAAK,MAAM,OAAO;AAC5C,KAAI,CAAC,SAAS,QAAQ,CAAC,SAAS,KAAK,OAAO,GAAG,EAAE,CAAC,CACjD,QAAO,OAAO,QAAO,gBAAgB,MAAM,GAAG;GAGhD;AAED,MAAM,QAAQ;CACb,MAAM;EACL,MAAM,oBAAC,iBAAD,EAAmB,CAAA;EACzB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CACD,QAAQ;EACP,MAAM,oBAAC,mBAAD,EAAqB,CAAA;EAC3B,eAAe,KAAK,SAAS;EAC7B,KAAK;EACL;CACD,WAAW;EACV,MAAM,oBAAC,uBAAD,EAAyB,CAAA;EAC/B,eAAe,KAAK,YAAY;EAChC,KAAK;EACL;CACD,QAAQ;EACP,MAAM,oBAAC,qBAAD,EAAuB,CAAA;EAC7B,eAAe,KAAK,gBAAgB;EACpC,KAAK;EACL;CACD,MAAM;EACL,MAAM,oBAAC,WAAD,EAAa,CAAA;EACnB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CACD,MAAM;EACL,MAAM,oBAAC,WAAD,EAAa,CAAA;EACnB,eAAe,KAAK,OAAO;EAC3B,KAAK;EACL;CASD,OAAO;EACN,MAAM,oBAAC,eAAD,EAAiB,CAAA;EACvB,eAAe,KAAK,eAAe;EACnC,KAAK;EACL;CACD;AAED,MAAM,WAAW;CAChB,QAAQ;EAAC;EAAQ;EAAQ;EAAQ;EAAU;EAAa;EAAU;EAAQ;CAC1E,KAAK,OAAO,KAAK,MAAM;CACvB;AAED,SAAwB,YAAY,KAAK,SAAS;CACjD,MAAM,EAAE,oBAAoB;AAG5B,SAFa,OAAO,QAAQ,WAAW,SAAS,OAAO,KAE3C,KAAK,MAAM;AACtB,MAAI,MAAM,IAAI;GACb,MAAM,EAAE,MAAM,QAAQ,KAAK,YAAY,MAAM;AAE7C,OAAI,OACH,QAAO,OAAO,QAAQ;AAGvB,UACC,qBAACA,gBAAD;IAAgB,GAAI;IAA0B;cAA9C,CACC,oBAACC,cAAD,EAAY,MAAQ,CAAA,EACnB,OAAO,oBAAC,QAAD;KAAM,WAAU;eAAwB;KAAW,CAAA,CACnD;MAHI,EAGJ;;AAGX,SAAO,oBAAC,UAAD,EAAoB,EAAL,EAAK;GAC1B"}
+{"version":3,"file":"controls.js","sources":["../../../../packages/components/editor/controls.tsx"],"sourcesContent":["import {\n\tClearAllRound,\n\tFormatBoldRound,\n\tFormatItalicRound,\n\tFormatUnderlinedRound,\n\tRedoRound,\n\tStrikethroughSRound,\n\tUndoRound,\n} from \"@ricons/material\";\nimport { Fragment } from \"react/jsx-runtime\";\nimport xss from \"xss\";\nimport Button from \"../button\";\nimport Icon from \"../icon\";\n\nconst { escapeAttrValue } = xss as unknown as {\n\tescapeAttrValue: (value: string) => string;\n};\n\nexport const exec = (a, b?, c?) => {\n\tif (typeof document === \"undefined\") return;\n\treturn document.execCommand(a, b, c);\n};\n\nexport const xssOptions = {\n\tonIgnoreTagAttr: function (tag, name, value) {\n\t\tif ([\"data-\", \"style\"].includes(name.substr(0, 5))) {\n\t\t\treturn name + '=\"' + escapeAttrValue(value) + '\"';\n\t\t}\n\t},\n};\n\nconst fnMap = {\n\tbold: {\n\t\ticon: <FormatBoldRound />,\n\t\tonClick: () => exec(\"bold\"),\n\t\ttip: \"粗体\",\n\t},\n\titalic: {\n\t\ticon: <FormatItalicRound />,\n\t\tonClick: () => exec(\"italic\"),\n\t\ttip: \"斜体\",\n\t},\n\tunderline: {\n\t\ticon: <FormatUnderlinedRound />,\n\t\tonClick: () => exec(\"underline\"),\n\t\ttip: \"下划线\",\n\t},\n\tstrike: {\n\t\ticon: <StrikethroughSRound />,\n\t\tonClick: () => exec(\"strikeThrough\"),\n\t\ttip: \"删除线\",\n\t},\n\tredo: {\n\t\ticon: <RedoRound />,\n\t\tonClick: () => exec(\"redo\"),\n\t\ttip: \"重做\",\n\t},\n\tundo: {\n\t\ticon: <UndoRound />,\n\t\tonClick: () => exec(\"undo\"),\n\t\ttip: \"撤销\",\n\t},\n\t// color: {\n\t// \ticon: <FormatColorTextRound />,\n\t// \tonClick: () => exec(\"foreColor\", false, \"\"),\n\t// },\n\t// backColor: {\n\t// \ticon: <FormatColorFillRound />,\n\t// \tonClick: () => exec(\"backColor\", false, \"\"),\n\t// },\n\tclear: {\n\t\ticon: <ClearAllRound />,\n\t\tonClick: () => exec(\"removeFormat\"),\n\t\ttip: \"清除格式\",\n\t},\n};\n\nconst aliasMap = {\n\tsimple: [\"undo\", \"redo\", \"bold\", \"italic\", \"underline\", \"strike\", \"clear\"],\n\tall: Object.keys(fnMap),\n};\n\nexport default function getControls(fns, options) {\n\tconst { controlBtnProps } = options;\n\tconst keys = typeof fns === \"string\" ? aliasMap[fns] : fns;\n\n\treturn keys.map((k) => {\n\t\tif (fnMap[k]) {\n\t\t\tconst { icon, render, tip, onClick } = fnMap[k];\n\n\t\t\tif (render) {\n\t\t\t\treturn render(options);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<Button key={k} {...controlBtnProps} onClick={onClick}>\n\t\t\t\t\t<Icon icon={icon} />\n\t\t\t\t\t{tip && <span className='i-editor-control-tip'>{tip}</span>}\n\t\t\t\t</Button>\n\t\t\t);\n\t\t}\n\t\treturn <Fragment key={k} />;\n\t});\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

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

@@ -1,88 +1,80 @@
-import getControls, { exec, xssOptions } from "./controls.js";
-import classNames from "classnames";
-import { useImperativeHandle, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import xss from "xss";
-//#region packages/components/editor/editor.tsx
+import { jsxs, jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useRef, useImperativeHandle } from 'react';
+import xss from 'xss';
+import getControls, { xssOptions, exec } from './controls.js';
+
 const Editor = (props) => {
-	const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
-	const editorRef = useRef(null);
-	const controlBtnProps = {
-		square: true,
-		flat: true,
-		size: "small"
-	};
-	const handlePaste = async (e) => {
-		onPaste?.(e);
-		if (richPaste) return;
-		e.preventDefault();
-		exec("insertText", false, e.clipboardData.getData("text/plain"));
-	};
-	const handleKeyDown = (e) => {
-		onKeyDown?.(e);
-		switch (e.key) {
-			case "Tab":
-				e.preventDefault();
-				exec("insertHTML", false, "	");
-				break;
-			case "Enter":
-				e.preventDefault();
-				exec("insertLineBreak");
-				if (!editorRef.current) return;
-				editorRef.current.scrollBy({
-					top: 20,
-					left: -1e3
-				});
-				if (!autosize) return;
-				editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
-				break;
-			default: break;
-		}
-	};
-	useImperativeHandle(ref, () => {
-		return {
-			input: editorRef.current,
-			setValue(html) {
-				if (!editorRef.current) return;
-				const safeHtml = xss(html, xssOptions);
-				editorRef.current.innerHTML = safeHtml;
-			},
-			getSafeValue() {
-				return xss(editorRef.current?.innerHTML ?? "", xssOptions);
-			}
-		};
-	});
-	const handleInput = (e) => {
-		let html = editorRef.current?.innerHTML ?? "";
-		if (["<br>", "\n"].includes(html) && editorRef.current) {
-			html = "";
-			editorRef.current.innerHTML = html;
-		}
-		onInput?.(html, e);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("i-editor", className, { "i-editor-borderless": !border }),
-		style: {
-			...style,
-			[autosize ? "minHeight" : "height"]: height,
-			width
-		},
-		children: [controls !== "none" && /* @__PURE__ */ jsx("div", {
-			className: "i-editor-controls",
-			children: getControls(controls, { controlBtnProps })
-		}), /* @__PURE__ */ jsx("div", {
-			ref: editorRef,
-			className: "i-editor-content",
-			"data-placeholder": placeholder,
-			contentEditable: true,
-			onPaste: handlePaste,
-			onInput: handleInput,
-			onKeyDown: handleKeyDown,
-			...restProps
-		})]
-	});
+    const { ref, width, height = "10em", placeholder, autosize, border = true, richPaste, controls = "simple", className, style, onInput, onPaste, onKeyDown, ...restProps } = props;
+    const editorRef = useRef(null);
+    const controlBtnProps = {
+        square: true,
+        flat: true,
+        size: "small",
+    };
+    const handlePaste = async (e) => {
+        onPaste?.(e);
+        if (richPaste)
+            return;
+        e.preventDefault();
+        const text = e.clipboardData.getData("text/plain");
+        exec("insertText", false, text);
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        switch (e.key) {
+            case "Tab":
+                e.preventDefault();
+                exec("insertHTML", false, "&#09;");
+                break;
+            case "Enter":
+                e.preventDefault();
+                exec("insertLineBreak");
+                if (!editorRef.current)
+                    return;
+                editorRef.current.scrollBy({
+                    top: 20,
+                    left: -1e3,
+                });
+                if (!autosize)
+                    return;
+                editorRef.current.style.height = `${editorRef.current.scrollHeight}px`;
+                break;
+        }
+    };
+    useImperativeHandle(ref, () => {
+        return {
+            input: editorRef.current,
+            setValue(html) {
+                if (!editorRef.current)
+                    return;
+                const safeHtml = xss(html, xssOptions);
+                editorRef.current.innerHTML = safeHtml;
+            },
+            getSafeValue() {
+                const html = editorRef.current?.innerHTML ?? "";
+                return xss(html, xssOptions);
+            },
+        };
+    });
+    const handleInput = (e) => {
+        let html = editorRef.current?.innerHTML ?? "";
+        if (["<br>", "\n"].includes(html) && editorRef.current) {
+            html = "";
+            editorRef.current.innerHTML = html;
+        }
+        onInput?.(html, e);
+    };
+    return (jsxs("div", { className: classNames("i-editor", className, {
+            "i-editor-borderless": !border,
+        }), style: {
+            ...style,
+            [autosize ? "minHeight" : "height"]: height,
+            width,
+        }, children: [controls !== "none" && (jsx("div", { className: 'i-editor-controls', children: getControls(controls, {
+                    controlBtnProps,
+                }) })), jsx("div", { ref: editorRef, className: 'i-editor-content', "data-placeholder": placeholder, contentEditable: true, onPaste: handlePaste, onInput: handleInput, onKeyDown: handleKeyDown, ...restProps })] }));
 };
-//#endregion
-export { Editor as default };
 
-//# sourceMappingURL=editor.js.map
+export { Editor as default };
+//# sourceMappingURL=editor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"editor.js","names":[],"sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useImperativeHandle, useRef } from \"react\";\nimport xss from \"xss\";\nimport { IButton } from \"../button/type\";\nimport getControls, { exec, xssOptions } from \"./controls\";\nimport \"./index.css\";\nimport { IEditor } from \"./type\";\n\nconst Editor = (props: IEditor) => {\n\tconst {\n\t\tref,\n\t\twidth,\n\t\theight = \"10em\",\n\t\tplaceholder,\n\t\tautosize,\n\t\tborder = true,\n\t\trichPaste,\n\t\tcontrols = \"simple\",\n\t\tclassName,\n\t\tstyle,\n\t\tonInput,\n\t\tonPaste,\n\t\tonKeyDown,\n\t\t...restProps\n\t} = props;\n\tconst editorRef = useRef<HTMLDivElement>(null);\n\tconst controlBtnProps: IButton = {\n\t\tsquare: true,\n\t\tflat: true,\n\t\tsize: \"small\",\n\t};\n\n\tconst handlePaste = async (e) => {\n\t\tonPaste?.(e);\n\n\t\tif (richPaste) return;\n\t\te.preventDefault();\n\t\tconst text = e.clipboardData.getData(\"text/plain\");\n\t\texec(\"insertText\", false, text);\n\t};\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Tab\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertHTML\", false, \"&#09;\");\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertLineBreak\");\n\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\teditorRef.current.scrollBy({\n\t\t\t\t\ttop: 20,\n\t\t\t\t\tleft: -1000,\n\t\t\t\t});\n\n\t\t\t\tif (!autosize) return;\n\t\t\t\teditorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\n\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tinput: editorRef.current,\n\t\t\tsetValue(html) {\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\tconst safeHtml = xss(html, xssOptions);\n\n\t\t\t\teditorRef.current.innerHTML = safeHtml;\n\t\t\t},\n\t\t\tgetSafeValue() {\n\t\t\t\tconst html = editorRef.current?.innerHTML ?? \"\";\n\n\t\t\t\treturn xss(html, xssOptions);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst handleInput = (e) => {\n\t\tlet html = editorRef.current?.innerHTML ?? \"\";\n\n\t\tif ([\"<br>\", \"\\n\"].includes(html) && editorRef.current) {\n\t\t\thtml = \"\";\n\t\t\teditorRef.current.innerHTML = html;\n\t\t}\n\n\t\tonInput?.(html, e);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-editor\", className, {\n\t\t\t\t\"i-editor-borderless\": !border,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\t[autosize ? \"minHeight\" : \"height\"]: height,\n\t\t\t\twidth,\n\t\t\t}}\n\t\t>\n\t\t\t{controls !== \"none\" && (\n\t\t\t\t<div className='i-editor-controls'>\n\t\t\t\t\t{getControls(controls, {\n\t\t\t\t\t\tcontrolBtnProps,\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tclassName='i-editor-content'\n\t\t\t\tdata-placeholder={placeholder}\n\t\t\t\tcontentEditable\n\t\t\t\tonPaste={handlePaste}\n\t\t\t\tonInput={handleInput}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Editor;\n"],"mappings":""}
+{"version":3,"file":"editor.js","sources":["../../../../packages/components/editor/editor.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useImperativeHandle, useRef } from \"react\";\nimport xss from \"xss\";\nimport { IButton } from \"../button/type\";\nimport getControls, { exec, xssOptions } from \"./controls\";\nimport \"./index.css\";\nimport { IEditor } from \"./type\";\n\nconst Editor = (props: IEditor) => {\n\tconst {\n\t\tref,\n\t\twidth,\n\t\theight = \"10em\",\n\t\tplaceholder,\n\t\tautosize,\n\t\tborder = true,\n\t\trichPaste,\n\t\tcontrols = \"simple\",\n\t\tclassName,\n\t\tstyle,\n\t\tonInput,\n\t\tonPaste,\n\t\tonKeyDown,\n\t\t...restProps\n\t} = props;\n\tconst editorRef = useRef<HTMLDivElement>(null);\n\tconst controlBtnProps: IButton = {\n\t\tsquare: true,\n\t\tflat: true,\n\t\tsize: \"small\",\n\t};\n\n\tconst handlePaste = async (e) => {\n\t\tonPaste?.(e);\n\n\t\tif (richPaste) return;\n\t\te.preventDefault();\n\t\tconst text = e.clipboardData.getData(\"text/plain\");\n\t\texec(\"insertText\", false, text);\n\t};\n\n\tconst handleKeyDown = (e) => {\n\t\tonKeyDown?.(e);\n\n\t\tswitch (e.key) {\n\t\t\tcase \"Tab\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertHTML\", false, \"&#09;\");\n\t\t\t\tbreak;\n\t\t\tcase \"Enter\":\n\t\t\t\te.preventDefault();\n\t\t\t\texec(\"insertLineBreak\");\n\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\teditorRef.current.scrollBy({\n\t\t\t\t\ttop: 20,\n\t\t\t\t\tleft: -1000,\n\t\t\t\t});\n\n\t\t\t\tif (!autosize) return;\n\t\t\t\teditorRef.current.style.height = `${editorRef.current.scrollHeight}px`;\n\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tuseImperativeHandle(ref, () => {\n\t\treturn {\n\t\t\tinput: editorRef.current,\n\t\t\tsetValue(html) {\n\t\t\t\tif (!editorRef.current) return;\n\t\t\t\tconst safeHtml = xss(html, xssOptions);\n\n\t\t\t\teditorRef.current.innerHTML = safeHtml;\n\t\t\t},\n\t\t\tgetSafeValue() {\n\t\t\t\tconst html = editorRef.current?.innerHTML ?? \"\";\n\n\t\t\t\treturn xss(html, xssOptions);\n\t\t\t},\n\t\t};\n\t});\n\n\tconst handleInput = (e) => {\n\t\tlet html = editorRef.current?.innerHTML ?? \"\";\n\n\t\tif ([\"<br>\", \"\\n\"].includes(html) && editorRef.current) {\n\t\t\thtml = \"\";\n\t\t\teditorRef.current.innerHTML = html;\n\t\t}\n\n\t\tonInput?.(html, e);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-editor\", className, {\n\t\t\t\t\"i-editor-borderless\": !border,\n\t\t\t})}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\t[autosize ? \"minHeight\" : \"height\"]: height,\n\t\t\t\twidth,\n\t\t\t}}\n\t\t>\n\t\t\t{controls !== \"none\" && (\n\t\t\t\t<div className='i-editor-controls'>\n\t\t\t\t\t{getControls(controls, {\n\t\t\t\t\t\tcontrolBtnProps,\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<div\n\t\t\t\tref={editorRef}\n\t\t\t\tclassName='i-editor-content'\n\t\t\t\tdata-placeholder={placeholder}\n\t\t\t\tcontentEditable\n\t\t\t\tonPaste={handlePaste}\n\t\t\t\tonInput={handleInput}\n\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t{...restProps}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default Editor;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
-import Editor from "./editor.js";
-//#region packages/components/editor/index.tsx
-var editor_default = Editor;
-//#endregion
-export { editor_default as default };
+import Editor from './editor.js';
 
-//# sourceMappingURL=index.js.map
+
+
+export { Editor as default };
+//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/editor/index.tsx"],"sourcesContent":["import Editor from \"./editor\";\n\nexport default Editor;\n"],"mappings":";;AAEA,IAAA,iBAAe"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/flex/flex.js

@@ -1,29 +1,28 @@
-import classNames from "classnames";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/flex/flex.tsx
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+
 const Flex = (props) => {
-	const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
-	const gridColumns = useMemo(() => {
-		if (!columns) return;
-		if (typeof columns === "number") return `repeat(${columns}, 1fr)`;
-		return columns;
-	}, [columns]);
-	return /* @__PURE__ */ jsx(Component, {
-		...restProps,
-		style: {
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			flexDirection: direction,
-			flexWrap: wrap === true ? "wrap" : wrap,
-			gridTemplateColumns: gridColumns,
-			...style
-		},
-		className: classNames(className, { [columns ? "grid" : "flex"]: true })
-	});
+    const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
+    const gridColumns = useMemo(() => {
+        if (!columns)
+            return;
+        if (typeof columns === "number")
+            return `repeat(${columns}, 1fr)`;
+        return columns;
+    }, [columns]);
+    return (jsx(Component, { ...restProps, style: {
+            alignItems: align,
+            justifyContent: justify,
+            gap,
+            flexDirection: direction,
+            flexWrap: wrap === true ? "wrap" : wrap,
+            gridTemplateColumns: gridColumns,
+            ...style,
+        }, className: classNames(className, {
+            [columns ? "grid" : "flex"]: true,
+        }) }));
 };
-//#endregion
-export { Flex as default };
 
-//# sourceMappingURL=flex.js.map
+export { Flex as default };
+//# sourceMappingURL=flex.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"flex.js","names":[],"sources":["../../../../packages/components/flex/flex.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport \"./index.css\";\nimport { IFlex } from \"./type\";\n\nconst Flex: React.FC<IFlex> = (props: IFlex) => {\n\tconst {\n\t\tas: Component = \"div\" as any,\n\t\talign,\n\t\tjustify,\n\t\tdirection,\n\t\twrap,\n\t\tgap,\n\t\tcolumns,\n\t\tclassName,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\") return `repeat(${columns}, 1fr)`;\n\n\t\treturn columns;\n\t}, [columns]);\n\n\treturn (\n\t\t<Component\n\t\t\t{...restProps}\n\t\t\tstyle={{\n\t\t\t\talignItems: align,\n\t\t\t\tjustifyContent: justify,\n\t\t\t\tgap,\n\t\t\t\tflexDirection: direction,\n\t\t\t\tflexWrap: wrap === true ? \"wrap\" : wrap,\n\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t[columns ? \"grid\" : \"flex\"]: true,\n\t\t\t})}\n\t\t/>\n\t);\n};\n\nexport default Flex;\n"],"mappings":""}
+{"version":3,"file":"flex.js","sources":["../../../../packages/components/flex/flex.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { useMemo } from \"react\";\nimport \"./index.css\";\nimport { IFlex } from \"./type\";\n\nconst Flex: React.FC<IFlex> = (props: IFlex) => {\n\tconst {\n\t\tas: Component = \"div\" as any,\n\t\talign,\n\t\tjustify,\n\t\tdirection,\n\t\twrap,\n\t\tgap,\n\t\tcolumns,\n\t\tclassName,\n\t\tstyle,\n\t\t...restProps\n\t} = props;\n\n\tconst gridColumns = useMemo(() => {\n\t\tif (!columns) return;\n\n\t\tif (typeof columns === \"number\") return `repeat(${columns}, 1fr)`;\n\n\t\treturn columns;\n\t}, [columns]);\n\n\treturn (\n\t\t<Component\n\t\t\t{...restProps}\n\t\t\tstyle={{\n\t\t\t\talignItems: align,\n\t\t\t\tjustifyContent: justify,\n\t\t\t\tgap,\n\t\t\t\tflexDirection: direction,\n\t\t\t\tflexWrap: wrap === true ? \"wrap\" : wrap,\n\t\t\t\tgridTemplateColumns: gridColumns as any,\n\t\t\t\t...style,\n\t\t\t}}\n\t\t\tclassName={classNames(className, {\n\t\t\t\t[columns ? \"grid\" : \"flex\"]: true,\n\t\t\t})}\n\t\t/>\n\t);\n};\n\nexport default Flex;\n"],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,IAAI,GAAoB,CAAC,KAAY,KAAI;AAC9C,IAAA,MAAM,EACL,EAAE,EAAE,SAAS,GAAG,KAAY,EAC5B,KAAK,EACL,OAAO,EACP,SAAS,EACT,IAAI,EACJ,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACZ,GAAG,KAAK;AAET,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,OAAO;YAAE;QAEd,IAAI,OAAO,OAAO,KAAK,QAAQ;YAAE,OAAO,CAAA,OAAA,EAAU,OAAO,CAAA,MAAA,CAAQ;AAEjE,QAAA,OAAO,OAAO;AACf,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,QACCA,GAAA,CAAC,SAAS,OACL,SAAS,EACb,KAAK,EAAE;AACN,YAAA,UAAU,EAAE,KAAK;AACjB,YAAA,cAAc,EAAE,OAAO;YACvB,GAAG;AACH,YAAA,aAAa,EAAE,SAAS;YACxB,QAAQ,EAAE,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,IAAI;AACvC,YAAA,mBAAmB,EAAE,WAAkB;AACvC,YAAA,GAAG,KAAK;AACR,SAAA,EACD,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAChC,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;SACjC,CAAC,EAAA,CACD;AAEJ;;;;"}

package/lib/es/components/flex/index.js

@@ -1,7 +1,6 @@
-import Flex from "./flex.js";
-//#region packages/components/flex/index.tsx
-var flex_default = Flex;
-//#endregion
-export { flex_default as default };
+import Flex from './flex.js';
 
-//# sourceMappingURL=index.js.map
+
+
+export { Flex as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/flex/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/flex/index.tsx"],"sourcesContent":["import Flex from \"./flex\";\n\nexport default Flex;\n"],"mappings":";;AAEA,IAAA,eAAe"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/form/context.js

@@ -1,7 +1,6 @@
-import { createContext } from "react";
-//#region packages/components/form/context.tsx
+import { createContext } from 'react';
+
 const Context = createContext({});
-//#endregion
-export { Context as default };
 
-//# sourceMappingURL=context.js.map
+export { Context as default };
+//# sourceMappingURL=context.js.map

package/lib/es/components/form/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../packages/components/form/context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { IFormInstance } from \"./useForm\";\n\nconst Context = createContext({} as IFormInstance);\n\nexport default Context;\n"],"mappings":";;AAGA,MAAM,UAAU,cAAc,EAAE,CAAkB"}
+{"version":3,"file":"context.js","sources":["../../../../packages/components/form/context.tsx"],"sourcesContent":["import { createContext } from \"react\";\nimport { IFormInstance } from \"./useForm\";\n\nconst Context = createContext({} as IFormInstance);\n\nexport default Context;\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO,GAAG,aAAa,CAAC,EAAmB;;;;"}

package/lib/es/components/form/field.js

@@ -1,69 +1,69 @@
-import Context from "./context.js";
-import { Children, cloneElement, isValidElement, useContext, useEffect, useMemo, useState } from "react";
-import PubSub from "/Users/iann/codes/ioca-react/node_modules/.pnpm/pubsub-js@1.9.5/node_modules/pubsub-js/src/pubsub.js";
-//#region packages/components/form/field.tsx
+import PubSub from 'pubsub-js';
+import { useState, useContext, useMemo, Children, isValidElement, cloneElement, useEffect } from 'react';
+import Context from './context.js';
+
 function Field(props) {
-	const { name, required, children } = props;
-	const [fieldValue, setFieldValue] = useState(void 0);
-	const [fieldStatus, setFieldStatus] = useState("normal");
-	const [fieldMessage, setFieldMessage] = useState(void 0);
-	const form = useContext(Context);
-	const { id } = form;
-	const handleChange = (v) => {
-		if (!name) return;
-		form.set(name, v);
-		PubSub.publish(`${id}:change`, {
-			name,
-			value: v
-		});
-	};
-	const hijackChildren = useMemo(() => {
-		return Children.map(children, (node) => {
-			if (!isValidElement(node)) return null;
-			const { onChange } = node.props;
-			return cloneElement(node, {
-				value: fieldValue,
-				status: fieldStatus,
-				message: fieldMessage,
-				required,
-				onChange: (...args) => {
-					handleChange(args[0]);
-					onChange?.(...args);
-					setFieldStatus("normal");
-					setFieldMessage(void 0);
-				}
-			});
-		});
-	}, [
-		children,
-		fieldValue,
-		fieldStatus,
-		fieldMessage,
-		required
-	]);
-	useEffect(() => {
-		if (!name) return;
-		PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
-			setFieldValue(v);
-		});
-		PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
-			if (v?.value !== void 0) setFieldValue(v.value);
-			if (v?.status) setFieldStatus(v.status);
-			if ("message" in (v ?? {})) setFieldMessage(v.message);
-		});
-		Promise.resolve().then(() => {
-			form.set(name, form.cacheData[name] ?? void 0);
-		});
-		return () => {
-			PubSub.unsubscribe(`${id}:set:${name}`);
-			PubSub.unsubscribe(`${id}:invalid:${name}`);
-			form.delete(name);
-		};
-	}, [name, children]);
-	if (!name) return children;
-	return hijackChildren;
+    const { name, required, children } = props;
+    const [fieldValue, setFieldValue] = useState(undefined);
+    const [fieldStatus, setFieldStatus] = useState("normal");
+    const [fieldMessage, setFieldMessage] = useState(undefined);
+    const form = useContext(Context);
+    const { id } = form;
+    const handleChange = (v) => {
+        if (!name)
+            return;
+        form.set(name, v);
+        PubSub.publish(`${id}:change`, {
+            name,
+            value: v,
+        });
+    };
+    const hijackChildren = useMemo(() => {
+        return Children.map(children, (node) => {
+            if (!isValidElement(node))
+                return null;
+            const { onChange } = node.props;
+            return cloneElement(node, {
+                value: fieldValue,
+                status: fieldStatus,
+                message: fieldMessage,
+                required,
+                onChange: (...args) => {
+                    handleChange(args[0]);
+                    onChange?.(...args);
+                    setFieldStatus("normal");
+                    setFieldMessage(undefined);
+                },
+            });
+        });
+    }, [children, fieldValue, fieldStatus, fieldMessage, required]);
+    useEffect(() => {
+        if (!name)
+            return;
+        PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
+            setFieldValue(v);
+        });
+        PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
+            if (v?.value !== undefined)
+                setFieldValue(v.value);
+            if (v?.status)
+                setFieldStatus(v.status);
+            if ("message" in (v ?? {}))
+                setFieldMessage(v.message);
+        });
+        Promise.resolve().then(() => {
+            form.set(name, form.cacheData[name] ?? undefined);
+        });
+        return () => {
+            PubSub.unsubscribe(`${id}:set:${name}`);
+            PubSub.unsubscribe(`${id}:invalid:${name}`);
+            form.delete(name);
+        };
+    }, [name, children]);
+    if (!name)
+        return children;
+    return hijackChildren;
 }
-//#endregion
-export { Field as default };
 
-//# sourceMappingURL=field.js.map
+export { Field as default };
+//# sourceMappingURL=field.js.map

package/lib/es/components/form/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst [fieldValue, setFieldValue] = useState<any>(undefined);\n\tconst [fieldStatus, setFieldStatus] = useState(\"normal\");\n\tconst [fieldMessage, setFieldMessage] = useState<any>(undefined);\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue: fieldValue,\n\t\t\t\tstatus: fieldStatus,\n\t\t\t\tmessage: fieldMessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tsetFieldStatus(\"normal\");\n\t\t\t\t\tsetFieldMessage(undefined);\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, fieldValue, fieldStatus, fieldMessage, required]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (evt, v) => {\n\t\t\tsetFieldValue(v);\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {\n\t\t\tif (v?.value !== undefined) setFieldValue(v.value);\n\t\t\tif (v?.status) setFieldStatus(v.status);\n\t\t\tif (\"message\" in (v ?? {})) setFieldMessage(v.message);\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tform.set(name, form.cacheData[name] ?? undefined);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tform.delete(name);\n\t\t};\n\t}, [name, children]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"mappings":";;;;AAaA,SAAS,MAAM,OAAe;CAC7B,MAAM,EAAE,MAAM,UAAU,aAAa;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAAc,KAAA,EAAU;CAC5D,MAAM,CAAC,aAAa,kBAAkB,SAAS,SAAS;CACxD,MAAM,CAAC,cAAc,mBAAmB,SAAc,KAAA,EAAU;CAChE,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,EAAE,OAAO;CAEf,MAAM,gBAAgB,MAAM;AAC3B,MAAI,CAAC,KAAM;AAEX,OAAK,IAAI,MAAM,EAAE;AACjB,SAAO,QAAQ,GAAG,GAAG,UAAU;GAC9B;GACA,OAAO;GACP,CAAC;;CAGH,MAAM,iBAAiB,cAAc;AACpC,SAAO,SAAS,IAAI,WAAW,SAAS;AACvC,OAAI,CAAC,eAAe,KAAK,CAAE,QAAO;GAElC,MAAM,EAAE,aAAa,KAAK;AAE1B,UAAO,aAAa,MAAM;IACzB,OAAO;IACP,QAAQ;IACR,SAAS;IACT;IACA,WAAW,GAAG,SAAS;AACtB,kBAAa,KAAK,GAAG;AACrB,gBAAW,GAAG,KAAK;AACnB,oBAAe,SAAS;AACxB,qBAAgB,KAAA,EAAU;;IAE3B,CAAQ;IACR;IACA;EAAC;EAAU;EAAY;EAAa;EAAc;EAAS,CAAC;AAE/D,iBAAgB;AACf,MAAI,CAAC,KAAM;AAEX,SAAO,UAAU,GAAG,GAAG,OAAO,SAAS,KAAK,MAAM;AACjD,iBAAc,EAAE;IACf;AACF,SAAO,UAAU,GAAG,GAAG,WAAW,SAAS,KAAK,MAAM;AACrD,OAAI,GAAG,UAAU,KAAA,EAAW,eAAc,EAAE,MAAM;AAClD,OAAI,GAAG,OAAQ,gBAAe,EAAE,OAAO;AACvC,OAAI,cAAc,KAAK,EAAE,EAAG,iBAAgB,EAAE,QAAQ;IACrD;AAEF,UAAQ,SAAS,CAAC,WAAW;AAC5B,QAAK,IAAI,MAAM,KAAK,UAAU,SAAS,KAAA,EAAU;IAChD;AAEF,eAAa;AACZ,UAAO,YAAY,GAAG,GAAG,OAAO,OAAO;AACvC,UAAO,YAAY,GAAG,GAAG,WAAW,OAAO;AAC3C,QAAK,OAAO,KAAK;;IAEhB,CAAC,MAAM,SAAS,CAAC;AAEpB,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO"}
+{"version":3,"file":"field.js","sources":["../../../../packages/components/form/field.tsx"],"sourcesContent":["import PubSub from \"pubsub-js\";\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from \"react\";\nimport Context from \"./context\";\nimport { IField } from \"./type\";\n\nfunction Field(props: IField) {\n\tconst { name, required, children } = props;\n\tconst [fieldValue, setFieldValue] = useState<any>(undefined);\n\tconst [fieldStatus, setFieldStatus] = useState(\"normal\");\n\tconst [fieldMessage, setFieldMessage] = useState<any>(undefined);\n\tconst form = useContext(Context);\n\tconst { id } = form;\n\n\tconst handleChange = (v) => {\n\t\tif (!name) return;\n\n\t\tform.set(name, v);\n\t\tPubSub.publish(`${id}:change`, {\n\t\t\tname,\n\t\t\tvalue: v,\n\t\t});\n\t};\n\n\tconst hijackChildren = useMemo(() => {\n\t\treturn Children.map(children, (node) => {\n\t\t\tif (!isValidElement(node)) return null;\n\n\t\t\tconst { onChange } = node.props as any;\n\n\t\t\treturn cloneElement(node, {\n\t\t\t\tvalue: fieldValue,\n\t\t\t\tstatus: fieldStatus,\n\t\t\t\tmessage: fieldMessage,\n\t\t\t\trequired,\n\t\t\t\tonChange: (...args) => {\n\t\t\t\t\thandleChange(args[0]);\n\t\t\t\t\tonChange?.(...args);\n\t\t\t\t\tsetFieldStatus(\"normal\");\n\t\t\t\t\tsetFieldMessage(undefined);\n\t\t\t\t},\n\t\t\t} as any);\n\t\t});\n\t}, [children, fieldValue, fieldStatus, fieldMessage, required]);\n\n\tuseEffect(() => {\n\t\tif (!name) return;\n\n\t\tPubSub.subscribe(`${id}:set:${name}`, (evt, v) => {\n\t\t\tsetFieldValue(v);\n\t\t});\n\t\tPubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {\n\t\t\tif (v?.value !== undefined) setFieldValue(v.value);\n\t\t\tif (v?.status) setFieldStatus(v.status);\n\t\t\tif (\"message\" in (v ?? {})) setFieldMessage(v.message);\n\t\t});\n\n\t\tPromise.resolve().then(() => {\n\t\t\tform.set(name, form.cacheData[name] ?? undefined);\n\t\t});\n\n\t\treturn () => {\n\t\t\tPubSub.unsubscribe(`${id}:set:${name}`);\n\t\t\tPubSub.unsubscribe(`${id}:invalid:${name}`);\n\t\t\tform.delete(name);\n\t\t};\n\t}, [name, children]);\n\n\tif (!name) return children;\n\n\treturn hijackChildren;\n}\n\nexport default Field;\n"],"names":[],"mappings":"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"}