@webiny/app-website-builder 6.3.0 → 6.4.0-beta.0

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js

@@ -1,119 +1,124 @@
-import React, { useCallback, useRef, useState } from "react";
-import { cn, DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator } from "@webiny/admin-ui";
+import react, { useCallback, useRef, useState } from "react";
+import { DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator, cn } from "@webiny/admin-ui";
 import { InheritedFrom } from "../InheritanceLabel.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { BASE_BREAKPOINT } from "../../../../constants.js";
 import { UnitValue } from "./UnitValue.js";
-export const ValueSelector = props => {
-  const {
-    breakpoint
-  } = useBreakpoint();
-  const [editing, setEditing] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [inputChanged, setInputChanged] = useState(false);
-  const inputRef = useRef(null);
-  const defaultValue = editing ? "" : 0;
-  const currentValue = UnitValue.from(props.value);
-  const trackTyping = useCallback(() => {
-    setInputChanged(true);
-  }, [setInputChanged]);
-  const onEnter = () => {
-    setValue(props.value);
-    setIsOpen(false);
-  };
-  const setUnit = unit => {
-    setEditing(false);
-    currentValue.setUnit(unit);
-    props.onChange(currentValue.toString());
-  };
-  const setValue = value => {
-    const parsedValue = UnitValue.from(value);
-    if (!inputChanged) {
-      return;
-    }
-    const finalValue = parsedValue.getValue("0");
-    props.onChange(`${finalValue}${props.unit}`);
-    setInputChanged(false);
-    setTimeout(() => {
-      setEditing(false);
-    }, 20);
-  };
-  const setPreviewValue = value => {
-    setEditing(true);
-    let finalValue = "";
-    if (value !== "") {
-      const parsedValue = parseInt(value);
-      finalValue = isNaN(parsedValue) ? 0 : parsedValue;
-    }
-    props.onChangePreview(`${finalValue}${props.unit}`);
-  };
-  const onReset = () => {
-    props.onReset();
-    setIsOpen(false);
-  };
-  const classNames = cn(["cursor-pointer bg-neutral-base", "border-sm border-solid border-neutral-muted", props.overridden && props.inheritedFrom && "bg-success text-neutral-light", props.disabled && "bg-neutral-disabled text-neutral-disabled pointer-events-none", "flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs"]);
-  const label = /*#__PURE__*/React.createElement("div", {
-    className: classNames,
-    onClick: () => setIsOpen(true),
-    style: {
-      width: 45
-    }
-  }, props.value ?? 0, " ", props.isKeyword ? null : props.unit);
-  const controls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
-    text: props.label
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row space-x-sm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Input, {
-    onKeyDown: trackTyping,
-    inputRef: inputRef,
-    disabled: props.isKeyword,
-    size: "md",
-    value: props.isKeyword ? "-" : props.value ?? defaultValue,
-    onEnter: onEnter,
-    autoSelect: true,
-    onChange: value => setPreviewValue(value),
-    onBlur: e => setValue(e.target.value),
-    autoFocus: true
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-col"
-  }, /*#__PURE__*/React.createElement(Select, {
-    size: "md",
-    value: props.unit,
-    options: props.units,
-    onChange: unit => {
-      setUnit(unit);
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 20);
-    },
-    displayResetAction: false
-  }))), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: `Hit "Enter" or click outside the menu to close it.`
-  }));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col w-full"
-  }, /*#__PURE__*/React.createElement(DropdownMenu, {
-    open: isOpen,
-    onOpenChange: () => setIsOpen(false),
-    trigger: label,
-    align: "center",
-    side: "bottom",
-    className: "shadow-lg"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-sm text-sm",
-    style: {
-      width: 200
-    }
-  }, controls, BASE_BREAKPOINT === breakpoint.name ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Separator, {
-    variant: "dimmed",
-    margin: "lg"
-  }), /*#__PURE__*/React.createElement(InheritedFrom, {
-    inheritedFrom: props.inheritedFrom ?? BASE_BREAKPOINT,
-    overriddenAt: props.overridden ? breakpoint.name : null,
-    onReset: onReset
-  })))));
+const ValueSelector = (props)=>{
+    const { breakpoint } = useBreakpoint();
+    const [editing, setEditing] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [inputChanged, setInputChanged] = useState(false);
+    const inputRef = useRef(null);
+    const defaultValue = editing ? "" : 0;
+    const currentValue = UnitValue.from(props.value);
+    const trackTyping = useCallback(()=>{
+        setInputChanged(true);
+    }, [
+        setInputChanged
+    ]);
+    const onEnter = ()=>{
+        setValue(props.value);
+        setIsOpen(false);
+    };
+    const setUnit = (unit)=>{
+        setEditing(false);
+        currentValue.setUnit(unit);
+        props.onChange(currentValue.toString());
+    };
+    const setValue = (value)=>{
+        const parsedValue = UnitValue.from(value);
+        if (!inputChanged) return;
+        const finalValue = parsedValue.getValue("0");
+        props.onChange(`${finalValue}${props.unit}`);
+        setInputChanged(false);
+        setTimeout(()=>{
+            setEditing(false);
+        }, 20);
+    };
+    const setPreviewValue = (value)=>{
+        setEditing(true);
+        let finalValue = "";
+        if ("" !== value) {
+            const parsedValue = parseInt(value);
+            finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+        }
+        props.onChangePreview(`${finalValue}${props.unit}`);
+    };
+    const onReset = ()=>{
+        props.onReset();
+        setIsOpen(false);
+    };
+    const classNames = cn([
+        "cursor-pointer bg-neutral-base",
+        "border-sm border-solid border-neutral-muted",
+        props.overridden && props.inheritedFrom && "bg-success text-neutral-light",
+        props.disabled && "bg-neutral-disabled text-neutral-disabled pointer-events-none",
+        "flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs"
+    ]);
+    const label = /*#__PURE__*/ react.createElement("div", {
+        className: classNames,
+        onClick: ()=>setIsOpen(true),
+        style: {
+            width: 45
+        }
+    }, props.value ?? 0, " ", props.isKeyword ? null : props.unit);
+    const controls = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: props.label
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row space-x-sm"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Input, {
+        onKeyDown: trackTyping,
+        inputRef: inputRef,
+        disabled: props.isKeyword,
+        size: "md",
+        value: props.isKeyword ? "-" : props.value ?? defaultValue,
+        onEnter: onEnter,
+        autoSelect: true,
+        onChange: (value)=>setPreviewValue(value),
+        onBlur: (e)=>setValue(e.target.value),
+        autoFocus: true
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-col"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        size: "md",
+        value: props.unit,
+        options: props.units,
+        onChange: (unit)=>{
+            setUnit(unit);
+            setTimeout(()=>{
+                inputRef.current?.focus();
+            }, 20);
+        },
+        displayResetAction: false
+    }))), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: 'Hit "Enter" or click outside the menu to close it.'
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col w-full"
+    }, /*#__PURE__*/ react.createElement(DropdownMenu, {
+        open: isOpen,
+        onOpenChange: ()=>setIsOpen(false),
+        trigger: label,
+        align: "center",
+        side: "bottom",
+        className: "shadow-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "p-sm text-sm",
+        style: {
+            width: 200
+        }
+    }, controls, BASE_BREAKPOINT === breakpoint.name ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        variant: "dimmed",
+        margin: "lg"
+    }), /*#__PURE__*/ react.createElement(InheritedFrom, {
+        inheritedFrom: props.inheritedFrom ?? BASE_BREAKPOINT,
+        overriddenAt: props.overridden ? breakpoint.name : null,
+        onReset: onReset
+    })))));
 };
+export { ValueSelector };
 
 //# sourceMappingURL=ValueSelector.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useRef","useState","cn","DropdownMenu","FormComponentLabel","FormComponentNote","Input","Select","Separator","InheritedFrom","useBreakpoint","BASE_BREAKPOINT","UnitValue","ValueSelector","props","breakpoint","editing","setEditing","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","defaultValue","currentValue","from","value","trackTyping","onEnter","setValue","setUnit","unit","onChange","toString","parsedValue","finalValue","getValue","setTimeout","setPreviewValue","parseInt","isNaN","onChangePreview","onReset","classNames","overridden","inheritedFrom","disabled","label","createElement","className","onClick","style","width","isKeyword","controls","Fragment","text","onKeyDown","size","autoSelect","onBlur","e","target","autoFocus","options","units","current","focus","displayResetAction","open","onOpenChange","trigger","align","side","name","variant","margin","overriddenAt"],"sources":["ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"cursor-pointer bg-neutral-base\",\n        \"border-sm border-solid border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"bg-success text-neutral-light\",\n        props.disabled && \"bg-neutral-disabled text-neutral-disabled pointer-events-none\",\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"flex flex-row space-x-sm\"}>\n                <div className={\"flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"flex flex-col w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from \"react\";\nimport {\n    cn,\n    DropdownMenu,\n    FormComponentLabel,\n    FormComponentNote,\n    Input,\n    Select,\n    Separator\n} from \"@webiny/admin-ui\";\nimport { InheritedFrom } from \"~/BaseEditor/defaultConfig/Sidebar/InheritanceLabel.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { BASE_BREAKPOINT } from \"~/constants.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\ntype Option = {\n    label: string;\n    value: string;\n};\n\ninterface ValueSelectorProps {\n    label: React.ReactNode;\n    value: string;\n    unit: string;\n    isKeyword: boolean;\n    units: Option[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n    onReset: () => void;\n    inheritedFrom?: string;\n    overridden?: boolean;\n    disabled?: boolean;\n}\n\nexport const ValueSelector = (props: ValueSelectorProps) => {\n    const { breakpoint } = useBreakpoint();\n    const [editing, setEditing] = useState(false);\n    const [isOpen, setIsOpen] = useState(false);\n    const [inputChanged, setInputChanged] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const currentValue = UnitValue.from(props.value);\n\n    const trackTyping = useCallback(() => {\n        setInputChanged(true);\n    }, [setInputChanged]);\n\n    const onEnter = () => {\n        setValue(props.value);\n        setIsOpen(false);\n    };\n\n    const setUnit = (unit: string) => {\n        setEditing(false);\n        currentValue.setUnit(unit);\n        props.onChange(currentValue.toString());\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = UnitValue.from(value);\n        if (!inputChanged) {\n            return;\n        }\n        const finalValue = parsedValue.getValue(\"0\");\n        props.onChange(`${finalValue}${props.unit}`);\n\n        setInputChanged(false);\n        setTimeout(() => {\n            setEditing(false);\n        }, 20);\n    };\n\n    const setPreviewValue = (value: string) => {\n        setEditing(true);\n        let finalValue: string | number = \"\";\n        if (value !== \"\") {\n            const parsedValue = parseInt(value);\n            finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        }\n        props.onChangePreview(`${finalValue}${props.unit}`);\n    };\n\n    const onReset = () => {\n        props.onReset();\n        setIsOpen(false);\n    };\n\n    const classNames = cn([\n        \"cursor-pointer bg-neutral-base\",\n        \"border-sm border-solid border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"bg-success text-neutral-light\",\n        props.disabled && \"bg-neutral-disabled text-neutral-disabled pointer-events-none\",\n        \"flex flex-row text-sm mx-auto justify-center rounded-sm py-px px-xxs\"\n    ]);\n\n    const label = (\n        <div className={classNames} onClick={() => setIsOpen(true)} style={{ width: 45 }}>\n            {props.value ?? 0} {props.isKeyword ? null : props.unit}\n        </div>\n    );\n\n    const controls = (\n        <>\n            <FormComponentLabel text={props.label} />\n            <div className={\"flex flex-row space-x-sm\"}>\n                <div className={\"flex-col\"}>\n                    <Input\n                        onKeyDown={trackTyping}\n                        inputRef={inputRef}\n                        disabled={props.isKeyword}\n                        size={\"md\"}\n                        value={props.isKeyword ? \"-\" : (props.value ?? defaultValue)}\n                        onEnter={onEnter}\n                        autoSelect={true}\n                        onChange={value => setPreviewValue(value)}\n                        onBlur={e => setValue(e.target.value)}\n                        autoFocus={true}\n                    />\n                </div>\n                <div className={\"flex-col\"}>\n                    <Select\n                        size=\"md\"\n                        value={props.unit}\n                        options={props.units}\n                        onChange={unit => {\n                            setUnit(unit);\n                            setTimeout(() => {\n                                inputRef.current?.focus();\n                            }, 20);\n                        }}\n                        displayResetAction={false}\n                    />\n                </div>\n            </div>\n            <FormComponentNote text={`Hit \"Enter\" or click outside the menu to close it.`} />\n        </>\n    );\n\n    return (\n        <div className={\"flex flex-col w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"shadow-lg\"}\n            >\n                <div className={\"p-sm text-sm\"} style={{ width: 200 }}>\n                    {controls}\n                    {BASE_BREAKPOINT === breakpoint.name ? null : (\n                        <>\n                            <Separator variant={\"dimmed\"} margin={\"lg\"} />\n                            <InheritedFrom\n                                inheritedFrom={props.inheritedFrom ?? BASE_BREAKPOINT}\n                                overriddenAt={props.overridden ? breakpoint.name : null}\n                                onReset={onReset}\n                            />\n                        </>\n                    )}\n                </div>\n            </DropdownMenu>\n        </div>\n    );\n};\n"],"names":["ValueSelector","props","breakpoint","useBreakpoint","editing","setEditing","useState","isOpen","setIsOpen","inputChanged","setInputChanged","inputRef","useRef","defaultValue","currentValue","UnitValue","trackTyping","useCallback","onEnter","setValue","setUnit","unit","value","parsedValue","finalValue","setTimeout","setPreviewValue","parseInt","isNaN","onReset","classNames","cn","label","controls","FormComponentLabel","Input","e","Select","FormComponentNote","DropdownMenu","BASE_BREAKPOINT","Separator","InheritedFrom"],"mappings":";;;;;;AAkCO,MAAMA,gBAAgB,CAACC;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC;IACvB,MAAM,CAACC,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,QAAQC,UAAU,GAAGF,SAAS;IACrC,MAAM,CAACG,cAAcC,gBAAgB,GAAGJ,SAAS;IACjD,MAAMK,WAAWC,OAAgC;IAEjD,MAAMC,eAAeT,UAAU,KAAK;IAEpC,MAAMU,eAAeC,UAAU,IAAI,CAACd,MAAM,KAAK;IAE/C,MAAMe,cAAcC,YAAY;QAC5BP,gBAAgB;IACpB,GAAG;QAACA;KAAgB;IAEpB,MAAMQ,UAAU;QACZC,SAASlB,MAAM,KAAK;QACpBO,UAAU;IACd;IAEA,MAAMY,UAAU,CAACC;QACbhB,WAAW;QACXS,aAAa,OAAO,CAACO;QACrBpB,MAAM,QAAQ,CAACa,aAAa,QAAQ;IACxC;IAEA,MAAMK,WAAW,CAACG;QACd,MAAMC,cAAcR,UAAU,IAAI,CAACO;QACnC,IAAI,CAACb,cACD;QAEJ,MAAMe,aAAaD,YAAY,QAAQ,CAAC;QACxCtB,MAAM,QAAQ,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;QAE3CS,gBAAgB;QAChBe,WAAW;YACPpB,WAAW;QACf,GAAG;IACP;IAEA,MAAMqB,kBAAkB,CAACJ;QACrBjB,WAAW;QACX,IAAImB,aAA8B;QAClC,IAAIF,AAAU,OAAVA,OAAc;YACd,MAAMC,cAAcI,SAASL;YAC7BE,aAAaI,MAAML,eAAe,IAAIA;QAC1C;QACAtB,MAAM,eAAe,CAAC,GAAGuB,aAAavB,MAAM,IAAI,EAAE;IACtD;IAEA,MAAM4B,UAAU;QACZ5B,MAAM,OAAO;QACbO,UAAU;IACd;IAEA,MAAMsB,aAAaC,GAAG;QAClB;QACA;QACA9B,MAAM,UAAU,IAAIA,MAAM,aAAa,IAAI;QAC3CA,MAAM,QAAQ,IAAI;QAClB;KACH;IAED,MAAM+B,QAAQ,WAARA,GACF,oBAAC;QAAI,WAAWF;QAAY,SAAS,IAAMtB,UAAU;QAAO,OAAO;YAAE,OAAO;QAAG;OAC1EP,MAAM,KAAK,IAAI,GAAE,KAAEA,MAAM,SAAS,GAAG,OAAOA,MAAM,IAAI;IAI/D,MAAMgC,WAAW,WAAXA,GACF,wDACI,oBAACC,oBAAkBA;QAAC,MAAMjC,MAAM,KAAK;sBACrC,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACkC,OAAKA;QACF,WAAWnB;QACX,UAAUL;QACV,UAAUV,MAAM,SAAS;QACzB,MAAM;QACN,OAAOA,MAAM,SAAS,GAAG,MAAOA,MAAM,KAAK,IAAIY;QAC/C,SAASK;QACT,YAAY;QACZ,UAAUI,CAAAA,QAASI,gBAAgBJ;QACnC,QAAQc,CAAAA,IAAKjB,SAASiB,EAAE,MAAM,CAAC,KAAK;QACpC,WAAW;uBAGnB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAK;QACL,OAAOpC,MAAM,IAAI;QACjB,SAASA,MAAM,KAAK;QACpB,UAAUoB,CAAAA;YACND,QAAQC;YACRI,WAAW;gBACPd,SAAS,OAAO,EAAE;YACtB,GAAG;QACP;QACA,oBAAoB;wBAIhC,oBAAC2B,mBAAiBA;QAAC,MAAM;;IAIjC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,cAAYA;QACT,MAAMhC;QACN,cAAc,IAAMC,UAAU;QAC9B,SAASwB;QACT,OAAM;QACN,MAAK;QACL,WAAW;qBAEX,oBAAC;QAAI,WAAW;QAAgB,OAAO;YAAE,OAAO;QAAI;OAC/CC,UACAO,oBAAoBtC,WAAW,IAAI,GAAG,OAAO,WAAP,GACnC,wDACI,oBAACuC,WAASA;QAAC,SAAS;QAAU,QAAQ;sBACtC,oBAACC,eAAaA;QACV,eAAezC,MAAM,aAAa,IAAIuC;QACtC,cAAcvC,MAAM,UAAU,GAAGC,WAAW,IAAI,GAAG;QACnD,SAAS2B;;AAQzC"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js

@@ -1,51 +1,46 @@
 import { useCallback } from "react";
 import { useStyles } from "./useStyles.js";
 import { UnitValue } from "./UnitValue.js";
-export const useStyleValue = (elementId, propertyName, defaultValue) => {
-  const {
-    styles,
-    onChange,
-    onPreviewChange,
-    inheritanceMap,
-    store
-  } = useStyles(elementId);
-  const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? "");
-  const {
-    overridden,
-    inheritedFrom
-  } = inheritanceMap[propertyName] ?? {};
-  const onValueChange = useCallback(value => {
-    onChange(({
-      styles
-    }) => {
-      styles.set(propertyName, value);
-    });
-  }, [elementId, propertyName]);
-  const onValueChangePreview = useCallback(value => {
-    onPreviewChange(({
-      styles
-    }) => {
-      styles.set(propertyName, value);
-    });
-  }, [elementId, propertyName]);
-  const onValueReset = useCallback(() => {
-    onChange(({
-      styles
-    }) => {
-      styles.unset(propertyName);
-    });
-  }, [elementId, propertyName]);
-  return {
-    store,
-    value: unitValue.getValue(),
-    unit: unitValue.getUnit(),
-    isKeyword: unitValue.isKeyword(),
-    onChange: onValueChange,
-    onChangePreview: onValueChangePreview,
-    onReset: onValueReset,
-    inheritedFrom,
-    overridden
-  };
+const useStyleValue = (elementId, propertyName, defaultValue)=>{
+    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);
+    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? "");
+    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};
+    const onValueChange = useCallback((value)=>{
+        onChange(({ styles })=>{
+            styles.set(propertyName, value);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    const onValueChangePreview = useCallback((value)=>{
+        onPreviewChange(({ styles })=>{
+            styles.set(propertyName, value);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    const onValueReset = useCallback(()=>{
+        onChange(({ styles })=>{
+            styles.unset(propertyName);
+        });
+    }, [
+        elementId,
+        propertyName
+    ]);
+    return {
+        store,
+        value: unitValue.getValue(),
+        unit: unitValue.getUnit(),
+        isKeyword: unitValue.isKeyword(),
+        onChange: onValueChange,
+        onChangePreview: onValueChangePreview,
+        onReset: onValueReset,
+        inheritedFrom,
+        overridden
+    };
 };
+export { useStyleValue };
 
 //# sourceMappingURL=useStyleValue.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useStyles","UnitValue","useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","unitValue","from","overridden","inheritedFrom","onValueChange","value","set","onValueChangePreview","onValueReset","unset","getValue","unit","getUnit","isKeyword","onChangePreview","onReset"],"sources":["useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            onChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueChangePreview = useCallback(\n        (value: string) => {\n            onPreviewChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueReset = useCallback(() => {\n        onChange(({ styles }) => {\n            styles.unset(propertyName);\n        });\n    }, [elementId, propertyName]);\n\n    return {\n        store,\n        value: unitValue.getValue(),\n        unit: unitValue.getUnit(),\n        isKeyword: unitValue.isKeyword(),\n        onChange: onValueChange,\n        onChangePreview: onValueChangePreview,\n        onReset: onValueReset,\n        inheritedFrom,\n        overridden\n    };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,SAAS;AAClB,SAASC,SAAS;AAElB,OAAO,MAAMC,aAAa,GAAGA,CAACC,SAAiB,EAAEC,YAAoB,EAAEC,YAAqB,KAAK;EAC7F,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,cAAc;IAAEC;EAAM,CAAC,GAAGV,SAAS,CAACG,SAAS,CAAC;EACzF,MAAMQ,SAAS,GAAGV,SAAS,CAACW,IAAI,CAACN,MAAM,CAACF,YAAY,CAAC,IAAIC,YAAY,IAAI,EAAE,CAAC;EAE5E,MAAM;IAAEQ,UAAU;IAAEC;EAAc,CAAC,GAAGL,cAAc,CAACL,YAAY,CAAC,IAAI,CAAC,CAAC;EAExE,MAAMW,aAAa,GAAGhB,WAAW,CAC5BiB,KAAa,IAAK;IACfT,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMc,oBAAoB,GAAGnB,WAAW,CACnCiB,KAAa,IAAK;IACfR,eAAe,CAAC,CAAC;MAAEF;IAAO,CAAC,KAAK;MAC5BA,MAAM,CAACW,GAAG,CAACb,YAAY,EAAEY,KAAK,CAAC;IACnC,CAAC,CAAC;EACN,CAAC,EACD,CAACb,SAAS,EAAEC,YAAY,CAC5B,CAAC;EAED,MAAMe,YAAY,GAAGpB,WAAW,CAAC,MAAM;IACnCQ,QAAQ,CAAC,CAAC;MAAED;IAAO,CAAC,KAAK;MACrBA,MAAM,CAACc,KAAK,CAAChB,YAAY,CAAC;IAC9B,CAAC,CAAC;EACN,CAAC,EAAE,CAACD,SAAS,EAAEC,YAAY,CAAC,CAAC;EAE7B,OAAO;IACHM,KAAK;IACLM,KAAK,EAAEL,SAAS,CAACU,QAAQ,CAAC,CAAC;IAC3BC,IAAI,EAAEX,SAAS,CAACY,OAAO,CAAC,CAAC;IACzBC,SAAS,EAAEb,SAAS,CAACa,SAAS,CAAC,CAAC;IAChCjB,QAAQ,EAAEQ,aAAa;IACvBU,eAAe,EAAEP,oBAAoB;IACrCQ,OAAO,EAAEP,YAAY;IACrBL,aAAa;IACbD;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useStyles } from \"./useStyles.js\";\nimport { UnitValue } from \"./UnitValue.js\";\n\nexport const useStyleValue = (elementId: string, propertyName: string, defaultValue?: string) => {\n    const { styles, onChange, onPreviewChange, inheritanceMap, store } = useStyles(elementId);\n    const unitValue = UnitValue.from(styles[propertyName] ?? defaultValue ?? \"\");\n\n    const { overridden, inheritedFrom } = inheritanceMap[propertyName] ?? {};\n\n    const onValueChange = useCallback(\n        (value: string) => {\n            onChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueChangePreview = useCallback(\n        (value: string) => {\n            onPreviewChange(({ styles }) => {\n                styles.set(propertyName, value);\n            });\n        },\n        [elementId, propertyName]\n    );\n\n    const onValueReset = useCallback(() => {\n        onChange(({ styles }) => {\n            styles.unset(propertyName);\n        });\n    }, [elementId, propertyName]);\n\n    return {\n        store,\n        value: unitValue.getValue(),\n        unit: unitValue.getUnit(),\n        isKeyword: unitValue.isKeyword(),\n        onChange: onValueChange,\n        onChangePreview: onValueChangePreview,\n        onReset: onValueReset,\n        inheritedFrom,\n        overridden\n    };\n};\n"],"names":["useStyleValue","elementId","propertyName","defaultValue","styles","onChange","onPreviewChange","inheritanceMap","store","useStyles","unitValue","UnitValue","overridden","inheritedFrom","onValueChange","useCallback","value","onValueChangePreview","onValueReset"],"mappings":";;;AAIO,MAAMA,gBAAgB,CAACC,WAAmBC,cAAsBC;IACnE,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,eAAe,EAAEC,cAAc,EAAEC,KAAK,EAAE,GAAGC,UAAUR;IAC/E,MAAMS,YAAYC,UAAU,IAAI,CAACP,MAAM,CAACF,aAAa,IAAIC,gBAAgB;IAEzE,MAAM,EAAES,UAAU,EAAEC,aAAa,EAAE,GAAGN,cAAc,CAACL,aAAa,IAAI,CAAC;IAEvE,MAAMY,gBAAgBC,YAClB,CAACC;QACGX,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAACF,cAAcc;QAC7B;IACJ,GACA;QAACf;QAAWC;KAAa;IAG7B,MAAMe,uBAAuBF,YACzB,CAACC;QACGV,gBAAgB,CAAC,EAAEF,MAAM,EAAE;YACvBA,OAAO,GAAG,CAACF,cAAcc;QAC7B;IACJ,GACA;QAACf;QAAWC;KAAa;IAG7B,MAAMgB,eAAeH,YAAY;QAC7BV,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,KAAK,CAACF;QACjB;IACJ,GAAG;QAACD;QAAWC;KAAa;IAE5B,OAAO;QACHM;QACA,OAAOE,UAAU,QAAQ;QACzB,MAAMA,UAAU,OAAO;QACvB,WAAWA,UAAU,SAAS;QAC9B,UAAUI;QACV,iBAAiBG;QACjB,SAASC;QACTL;QACAD;IACJ;AACJ"}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js

@@ -2,32 +2,34 @@ import { useMemo } from "react";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { useBreakpoint } from "../../../hooks/useBreakpoint.js";
 import { StylesStore } from "./StylesStore.js";
-
-// Singleton store container
 const stylesStores = new Map();
-export function useStyles(elementId) {
-  const editor = useDocumentEditor();
-  const {
-    breakpoints
-  } = useBreakpoint();
-  const store = useMemo(() => {
-    const cacheKey = [elementId, ...breakpoints].join(";");
-    // Create or get existing store for this element
-    let store = stylesStores.get(cacheKey);
-    if (!store) {
-      store = new StylesStore(editor, elementId, breakpoints.map(bp => bp.name));
-      stylesStores.set(cacheKey, store);
-    }
-    return store;
-  }, [elementId, breakpoints.length]);
-  return {
-    store,
-    styles: store.vm.styles,
-    metadata: store.vm.metadata,
-    inheritanceMap: store.vm.inheritanceMap,
-    onChange: store.onChange,
-    onPreviewChange: store.onPreviewChange
-  };
+function useStyles(elementId) {
+    const editor = useDocumentEditor();
+    const { breakpoints } = useBreakpoint();
+    const store = useMemo(()=>{
+        const cacheKey = [
+            elementId,
+            ...breakpoints
+        ].join(";");
+        let store = stylesStores.get(cacheKey);
+        if (!store) {
+            store = new StylesStore(editor, elementId, breakpoints.map((bp)=>bp.name));
+            stylesStores.set(cacheKey, store);
+        }
+        return store;
+    }, [
+        elementId,
+        breakpoints.length
+    ]);
+    return {
+        store,
+        styles: store.vm.styles,
+        metadata: store.vm.metadata,
+        inheritanceMap: store.vm.inheritanceMap,
+        onChange: store.onChange,
+        onPreviewChange: store.onPreviewChange
+    };
 }
+export { useStyles };
 
 //# sourceMappingURL=useStyles.js.map

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","cacheKey","join","get","map","bp","name","set","length","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore.js\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        const cacheKey = [elementId, ...breakpoints].join(\";\");\n        // Create or get existing store for this element\n        let store = stylesStores.get(cacheKey);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(cacheKey, store);\n        }\n\n        return store;\n    }, [elementId, breakpoints.length]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,iBAAiB;AAC1B,SAASC,aAAa;AACtB,SAASC,WAAW;;AAEpB;AACA,MAAMC,YAAY,GAAG,IAAIC,GAAG,CAAsB,CAAC;AAInD,OAAO,SAASC,SAASA,CAACC,SAAiB,EAAE;EACzC,MAAMC,MAAM,GAAGP,iBAAiB,CAAC,CAAC;EAClC,MAAM;IAAEQ;EAAY,CAAC,GAAGP,aAAa,CAAC,CAAC;EAEvC,MAAMQ,KAAK,GAAGV,OAAO,CAAC,MAAM;IACxB,MAAMW,QAAQ,GAAG,CAACJ,SAAS,EAAE,GAAGE,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC;IACtD;IACA,IAAIF,KAAK,GAAGN,YAAY,CAACS,GAAG,CAACF,QAAQ,CAAC;IAEtC,IAAI,CAACD,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACK,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDZ,YAAY,CAACa,GAAG,CAACN,QAAQ,EAAED,KAAK,CAAC;IACrC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,EAAEE,WAAW,CAACS,MAAM,CAAC,CAAC;EAEnC,OAAO;IACHR,KAAK;IACLS,MAAM,EAAET,KAAK,CAACU,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAEX,KAAK,CAACU,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAEZ,KAAK,CAACU,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEb,KAAK,CAACa,QAAQ;IACxBC,eAAe,EAAEd,KAAK,CAACc;EAC3B,CAAC;AACL","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.js","sources":["../../../../../src/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint.js\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore.js\";\n\n// Singleton store container\nconst stylesStores = new Map<string, StylesStore>();\n\nexport type { ElementBreakpointStyles };\n\nexport function useStyles(elementId: string) {\n    const editor = useDocumentEditor();\n    const { breakpoints } = useBreakpoint();\n\n    const store = useMemo(() => {\n        const cacheKey = [elementId, ...breakpoints].join(\";\");\n        // Create or get existing store for this element\n        let store = stylesStores.get(cacheKey);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(cacheKey, store);\n        }\n\n        return store;\n    }, [elementId, breakpoints.length]);\n\n    return {\n        store,\n        styles: store.vm.styles,\n        metadata: store.vm.metadata,\n        inheritanceMap: store.vm.inheritanceMap,\n        onChange: store.onChange,\n        onPreviewChange: store.onPreviewChange\n    };\n}\n"],"names":["stylesStores","Map","useStyles","elementId","editor","useDocumentEditor","breakpoints","useBreakpoint","store","useMemo","cacheKey","StylesStore","bp"],"mappings":";;;;AAMA,MAAMA,eAAe,IAAIC;AAIlB,SAASC,UAAUC,SAAiB;IACvC,MAAMC,SAASC;IACf,MAAM,EAAEC,WAAW,EAAE,GAAGC;IAExB,MAAMC,QAAQC,QAAQ;QAClB,MAAMC,WAAW;YAACP;eAAcG;SAAY,CAAC,IAAI,CAAC;QAElD,IAAIE,QAAQR,aAAa,GAAG,CAACU;QAE7B,IAAI,CAACF,OAAO;YACRA,QAAQ,IAAIG,YACRP,QACAD,WACAG,YAAY,GAAG,CAACM,CAAAA,KAAMA,GAAG,IAAI;YAEjCZ,aAAa,GAAG,CAACU,UAAUF;QAC/B;QAEA,OAAOA;IACX,GAAG;QAACL;QAAWG,YAAY,MAAM;KAAC;IAElC,OAAO;QACHE;QACA,QAAQA,MAAM,EAAE,CAAC,MAAM;QACvB,UAAUA,MAAM,EAAE,CAAC,QAAQ;QAC3B,gBAAgBA,MAAM,EAAE,CAAC,cAAc;QACvC,UAAUA,MAAM,QAAQ;QACxB,iBAAiBA,MAAM,eAAe;IAC1C;AACJ"}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js

@@ -1,34 +1,29 @@
-import React, { useCallback, useEffect, useRef } from "react";
-export const InlineSvg = ({
-  src,
-  className = ""
-}) => {
-  const ref = useRef(null);
-  const setSvg = useCallback(svg => {
-    if (ref.current) {
-      const domParser = new DOMParser();
-      const svgElement = domParser.parseFromString(svg, "image/svg+xml");
-      if (className.length > 0) {
-        svgElement.documentElement.classList.add(...className.split(" "));
-      }
-      ref.current.innerHTML = svgElement.documentElement.outerHTML;
-    }
-  }, []);
-  useEffect(() => {
-    if (src.startsWith("<svg") && ref.current) {
-      setSvg(src);
-      return;
-    }
-    if (src.startsWith("data:image/svg+xml")) {
-      const base64 = src.split(",")[1];
-      setSvg(atob(base64));
-      return;
-    }
-    fetch(src).then(res => res.text()).then(svg => setSvg(svg)).catch(console.error);
-  }, [src]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  });
+import react, { useCallback, useEffect, useRef } from "react";
+const InlineSvg = ({ src, className = "" })=>{
+    const ref = useRef(null);
+    const setSvg = useCallback((svg)=>{
+        if (ref.current) {
+            const domParser = new DOMParser();
+            const svgElement = domParser.parseFromString(svg, "image/svg+xml");
+            if (className.length > 0) svgElement.documentElement.classList.add(...className.split(" "));
+            ref.current.innerHTML = svgElement.documentElement.outerHTML;
+        }
+    }, []);
+    useEffect(()=>{
+        if (src.startsWith("<svg") && ref.current) return void setSvg(src);
+        if (src.startsWith("data:image/svg+xml")) {
+            const base64 = src.split(",")[1];
+            setSvg(atob(base64));
+            return;
+        }
+        fetch(src).then((res)=>res.text()).then((svg)=>setSvg(svg)).catch(console.error);
+    }, [
+        src
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: ref
+    });
 };
+export { InlineSvg };
 
 //# sourceMappingURL=InlineSvg.js.map

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useRef","InlineSvg","src","className","ref","setSvg","svg","current","domParser","DOMParser","svgElement","parseFromString","length","documentElement","classList","add","split","innerHTML","outerHTML","startsWith","base64","atob","fetch","then","res","text","catch","console","error","createElement"],"sources":["InlineSvg.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\n\ninterface InlineSvgProps {\n    src: string;\n    className?: string;\n}\n\nexport const InlineSvg = ({ src, className = \"\" }: InlineSvgProps) => {\n    const ref = useRef<HTMLObjectElement | null>(null);\n\n    const setSvg = useCallback((svg: string) => {\n        if (ref.current) {\n            const domParser = new DOMParser();\n            const svgElement = domParser.parseFromString(svg, \"image/svg+xml\");\n\n            if (className.length > 0) {\n                svgElement.documentElement.classList.add(...className.split(\" \"));\n            }\n            ref.current.innerHTML = svgElement.documentElement.outerHTML;\n        }\n    }, []);\n\n    useEffect(() => {\n        if (src.startsWith(\"<svg\") && ref.current) {\n            setSvg(src);\n            return;\n        }\n\n        if (src.startsWith(\"data:image/svg+xml\")) {\n            const base64 = src.split(\",\")[1];\n            setSvg(atob(base64));\n            return;\n        }\n\n        fetch(src)\n            .then(res => res.text())\n            .then(svg => setSvg(svg))\n            .catch(console.error);\n    }, [src]);\n\n    return <div ref={ref} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAO7D,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,GAAG;EAAEC,SAAS,GAAG;AAAmB,CAAC,KAAK;EAClE,MAAMC,GAAG,GAAGJ,MAAM,CAA2B,IAAI,CAAC;EAElD,MAAMK,MAAM,GAAGP,WAAW,CAAEQ,GAAW,IAAK;IACxC,IAAIF,GAAG,CAACG,OAAO,EAAE;MACb,MAAMC,SAAS,GAAG,IAAIC,SAAS,CAAC,CAAC;MACjC,MAAMC,UAAU,GAAGF,SAAS,CAACG,eAAe,CAACL,GAAG,EAAE,eAAe,CAAC;MAElE,IAAIH,SAAS,CAACS,MAAM,GAAG,CAAC,EAAE;QACtBF,UAAU,CAACG,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,GAAGZ,SAAS,CAACa,KAAK,CAAC,GAAG,CAAC,CAAC;MACrE;MACAZ,GAAG,CAACG,OAAO,CAACU,SAAS,GAAGP,UAAU,CAACG,eAAe,CAACK,SAAS;IAChE;EACJ,CAAC,EAAE,EAAE,CAAC;EAENnB,SAAS,CAAC,MAAM;IACZ,IAAIG,GAAG,CAACiB,UAAU,CAAC,MAAM,CAAC,IAAIf,GAAG,CAACG,OAAO,EAAE;MACvCF,MAAM,CAACH,GAAG,CAAC;MACX;IACJ;IAEA,IAAIA,GAAG,CAACiB,UAAU,CAAC,oBAAoB,CAAC,EAAE;MACtC,MAAMC,MAAM,GAAGlB,GAAG,CAACc,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;MAChCX,MAAM,CAACgB,IAAI,CAACD,MAAM,CAAC,CAAC;MACpB;IACJ;IAEAE,KAAK,CAACpB,GAAG,CAAC,CACLqB,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAAC,CAAC,CAAC,CACvBF,IAAI,CAACjB,GAAG,IAAID,MAAM,CAACC,GAAG,CAAC,CAAC,CACxBoB,KAAK,CAACC,OAAO,CAACC,KAAK,CAAC;EAC7B,CAAC,EAAE,CAAC1B,GAAG,CAAC,CAAC;EAET,oBAAOL,KAAA,CAAAgC,aAAA;IAAKzB,GAAG,EAAEA;EAAI,CAAE,CAAC;AAC5B,CAAC","ignoreList":[]}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\n\ninterface InlineSvgProps {\n    src: string;\n    className?: string;\n}\n\nexport const InlineSvg = ({ src, className = \"\" }: InlineSvgProps) => {\n    const ref = useRef<HTMLObjectElement | null>(null);\n\n    const setSvg = useCallback((svg: string) => {\n        if (ref.current) {\n            const domParser = new DOMParser();\n            const svgElement = domParser.parseFromString(svg, \"image/svg+xml\");\n\n            if (className.length > 0) {\n                svgElement.documentElement.classList.add(...className.split(\" \"));\n            }\n            ref.current.innerHTML = svgElement.documentElement.outerHTML;\n        }\n    }, []);\n\n    useEffect(() => {\n        if (src.startsWith(\"<svg\") && ref.current) {\n            setSvg(src);\n            return;\n        }\n\n        if (src.startsWith(\"data:image/svg+xml\")) {\n            const base64 = src.split(\",\")[1];\n            setSvg(atob(base64));\n            return;\n        }\n\n        fetch(src)\n            .then(res => res.text())\n            .then(svg => setSvg(svg))\n            .catch(console.error);\n    }, [src]);\n\n    return <div ref={ref} />;\n};\n"],"names":["InlineSvg","src","className","ref","useRef","setSvg","useCallback","svg","domParser","DOMParser","svgElement","useEffect","base64","atob","fetch","res","console"],"mappings":";AAOO,MAAMA,YAAY,CAAC,EAAEC,GAAG,EAAEC,YAAY,EAAE,EAAkB;IAC7D,MAAMC,MAAMC,OAAiC;IAE7C,MAAMC,SAASC,YAAY,CAACC;QACxB,IAAIJ,IAAI,OAAO,EAAE;YACb,MAAMK,YAAY,IAAIC;YACtB,MAAMC,aAAaF,UAAU,eAAe,CAACD,KAAK;YAElD,IAAIL,UAAU,MAAM,GAAG,GACnBQ,WAAW,eAAe,CAAC,SAAS,CAAC,GAAG,IAAIR,UAAU,KAAK,CAAC;YAEhEC,IAAI,OAAO,CAAC,SAAS,GAAGO,WAAW,eAAe,CAAC,SAAS;QAChE;IACJ,GAAG,EAAE;IAELC,UAAU;QACN,IAAIV,IAAI,UAAU,CAAC,WAAWE,IAAI,OAAO,EAAE,YACvCE,OAAOJ;QAIX,IAAIA,IAAI,UAAU,CAAC,uBAAuB;YACtC,MAAMW,SAASX,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE;YAChCI,OAAOQ,KAAKD;YACZ;QACJ;QAEAE,MAAMb,KACD,IAAI,CAACc,CAAAA,MAAOA,IAAI,IAAI,IACpB,IAAI,CAACR,CAAAA,MAAOF,OAAOE,MACnB,KAAK,CAACS,QAAQ,KAAK;IAC5B,GAAG;QAACf;KAAI;IAER,OAAO,WAAP,GAAO,oBAAC;QAAI,KAAKE;;AACrB"}