@webiny/app-website-builder 6.0.0-alpha.0

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

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { Input, Select } from "@webiny/admin-ui";
+class Value {
+  static from(value) {
+    return value === "auto" ? 0 : parseInt(value ?? "0");
+  }
+}
+const capTo100 = ["%", "vh", "vw"];
+export const UnitValuePicker = props => {
+  const [editing, setEditing] = useState(false);
+  const defaultValue = editing ? "" : 0;
+  const isAuto = props.value === "auto";
+  const currentValue = Value.from(props.value);
+  const onEnter = () => {
+    setValue(props.value);
+  };
+  const setUnit = unit => {
+    const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;
+    props.onChange(unit === "auto" ? "auto" : `${value}${unit}`);
+  };
+  const setValue = value => {
+    const parsedValue = Value.from(value);
+    const finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+    props.onChange(`${finalValue}${props.unit}`);
+  };
+  const setPreviewValue = value => {
+    setEditing(true);
+    let finalValue = "";
+    if (value !== "") {
+      const parsedValue = parseInt(value);
+      finalValue = isNaN(parsedValue) ? 0 : parsedValue;
+    }
+    props.onChangePreview(`${finalValue}${props.unit}`);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-row wby-space-x-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex-col"
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: isAuto,
+    size: "md",
+    value: isAuto ? "-" : props.value ?? defaultValue,
+    onEnter: onEnter,
+    autoSelect: true,
+    onChange: value => setPreviewValue(value),
+    onBlur: e => setValue(e.target.value),
+    autoFocus: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex-col"
+  }, /*#__PURE__*/React.createElement(Select, {
+    size: "md",
+    value: props.unit,
+    options: props.units,
+    onChange: setUnit,
+    displayResetAction: false
+  })));
+};
+
+//# sourceMappingURL=UnitValuePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Input","Select","Value","from","value","parseInt","capTo100","UnitValuePicker","props","editing","setEditing","defaultValue","isAuto","currentValue","onEnter","setValue","setUnit","unit","includes","onChange","parsedValue","finalValue","isNaN","setPreviewValue","onChangePreview","createElement","className","disabled","size","autoSelect","onBlur","e","target","autoFocus","options","units","displayResetAction"],"sources":["UnitValuePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Input, Select } from \"@webiny/admin-ui\";\n\nexport type UnitOption = {\n    label: string;\n    value: string;\n};\n\ninterface UnitValueProps {\n    value: string;\n    unit: string;\n    units: UnitOption[];\n    onChange: (value: string) => void;\n    onChangePreview: (value: string) => void;\n}\n\nclass Value {\n    static from(value: string | undefined) {\n        return value === \"auto\" ? 0 : parseInt(value ?? \"0\");\n    }\n}\n\nconst capTo100 = [\"%\", \"vh\", \"vw\"];\n\nexport const UnitValuePicker = (props: UnitValueProps) => {\n    const [editing, setEditing] = useState(false);\n\n    const defaultValue = editing ? \"\" : 0;\n\n    const isAuto = props.value === \"auto\";\n\n    const currentValue = Value.from(props.value);\n\n    const onEnter = () => {\n        setValue(props.value);\n    };\n\n    const setUnit = (unit: string) => {\n        const value = capTo100.includes(unit) && currentValue > 100 ? 100 : currentValue;\n        props.onChange(unit === \"auto\" ? \"auto\" : `${value}${unit}`);\n    };\n\n    const setValue = (value: string) => {\n        const parsedValue = Value.from(value);\n        const finalValue = isNaN(parsedValue) ? 0 : parsedValue;\n        props.onChange(`${finalValue}${props.unit}`);\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    return (\n        <div className={\"wby-flex wby-flex-row wby-space-x-sm\"}>\n            <div className={\"wby-flex-col\"}>\n                <Input\n                    disabled={isAuto}\n                    size={\"md\"}\n                    value={isAuto ? \"-\" : 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={\"wby-flex-col\"}>\n                <Select\n                    size=\"md\"\n                    value={props.unit}\n                    options={props.units}\n                    onChange={setUnit}\n                    displayResetAction={false}\n                />\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/UnitsOptions.d.ts

@@ -0,0 +1,11 @@
+export declare class UnitsOptions {
+    private units;
+    static widthUnits(): UnitsOptions;
+    static heightUnits(): UnitsOptions;
+    add(...args: string[]): this;
+    remove(...args: string[]): this;
+    getOptions(): {
+        label: string;
+        value: string;
+    }[];
+}

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

@@ -0,0 +1,29 @@
+export class UnitsOptions {
+  units = ["px", "%", "em", "rem"];
+  static widthUnits() {
+    const units = new UnitsOptions();
+    units.add("vw");
+    return units;
+  }
+  static heightUnits() {
+    const units = new UnitsOptions();
+    units.add("vh");
+    return units;
+  }
+  add(...args) {
+    this.units.push(...args);
+    return this;
+  }
+  remove(...args) {
+    this.units = this.units.filter(unit => !args.includes(unit));
+    return this;
+  }
+  getOptions() {
+    return this.units.map(unit => ({
+      label: unit,
+      value: unit
+    }));
+  }
+}
+
+//# sourceMappingURL=UnitsOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["UnitsOptions","units","widthUnits","add","heightUnits","args","push","remove","filter","unit","includes","getOptions","map","label","value"],"sources":["UnitsOptions.ts"],"sourcesContent":["export class UnitsOptions {\n    private units = [\"px\", \"%\", \"em\", \"rem\"];\n\n    static widthUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vw\");\n        return units;\n    }\n\n    static heightUnits() {\n        const units = new UnitsOptions();\n        units.add(\"vh\");\n        return units;\n    }\n\n    add(...args: string[]) {\n        this.units.push(...args);\n        return this;\n    }\n\n    remove(...args: string[]) {\n        this.units = this.units.filter(unit => !args.includes(unit));\n        return this;\n    }\n\n    getOptions() {\n        return this.units.map(unit => ({\n            label: unit,\n            value: unit\n        }));\n    }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,CAAC;EACdC,KAAK,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC;EAExC,OAAOC,UAAUA,CAAA,EAAG;IAChB,MAAMD,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEA,OAAOG,WAAWA,CAAA,EAAG;IACjB,MAAMH,KAAK,GAAG,IAAID,YAAY,CAAC,CAAC;IAChCC,KAAK,CAACE,GAAG,CAAC,IAAI,CAAC;IACf,OAAOF,KAAK;EAChB;EAEAE,GAAGA,CAAC,GAAGE,IAAc,EAAE;IACnB,IAAI,CAACJ,KAAK,CAACK,IAAI,CAAC,GAAGD,IAAI,CAAC;IACxB,OAAO,IAAI;EACf;EAEAE,MAAMA,CAAC,GAAGF,IAAc,EAAE;IACtB,IAAI,CAACJ,KAAK,GAAG,IAAI,CAACA,KAAK,CAACO,MAAM,CAACC,IAAI,IAAI,CAACJ,IAAI,CAACK,QAAQ,CAACD,IAAI,CAAC,CAAC;IAC5D,OAAO,IAAI;EACf;EAEAE,UAAUA,CAAA,EAAG;IACT,OAAO,IAAI,CAACV,KAAK,CAACW,GAAG,CAACH,IAAI,KAAK;MAC3BI,KAAK,EAAEJ,IAAI;MACXK,KAAK,EAAEL;IACX,CAAC,CAAC,CAAC;EACP;AACJ","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/ValueSelector.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+type Option = {
+    label: string;
+    value: string;
+};
+interface ValueSelectorProps {
+    label: React.ReactNode;
+    value: string;
+    unit: string;
+    isKeyword: boolean;
+    units: Option[];
+    onChange: (value: string) => void;
+    onChangePreview: (value: string) => void;
+    onReset: () => void;
+    inheritedFrom?: string;
+    overridden?: boolean;
+    disabled?: boolean;
+}
+export declare const ValueSelector: (props: ValueSelectorProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,119 @@
+import React, { useCallback, useRef, useState } from "react";
+import { cn, DropdownMenu, FormComponentLabel, FormComponentNote, Input, Select, Separator } from "@webiny/admin-ui";
+import { InheritedFrom } from "../InheritanceLabel";
+import { useBreakpoint } from "../../../hooks/useBreakpoint";
+import { BASE_BREAKPOINT } from "../../../../constants";
+import { UnitValue } from "./UnitValue";
+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(["wby-cursor-pointer wby-bg-neutral-base", "wby-border-sm wby-border-solid wby-border-neutral-muted", props.overridden && props.inheritedFrom && "wby-bg-success-default wby-text-neutral-light", props.disabled && "wby-bg-neutral-disabled wby-text-neutral-disabled wby-pointer-events-none", "wby-flex wby-flex-row wby-text-sm wby-mx-auto wby-justify-center wby-rounded-sm wby-py-[1px] wby-px-[2px]"]);
+  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: "wby-flex wby-flex-row wby-space-x-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-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: "wby-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: "wby-flex wby-flex-col wby-w-full"
+  }, /*#__PURE__*/React.createElement(DropdownMenu, {
+    open: isOpen,
+    onOpenChange: () => setIsOpen(false),
+    trigger: label,
+    align: "center",
+    side: "bottom",
+    className: "wby-shadow-lg"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "wby-p-sm wby-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
+  })))));
+};
+
+//# sourceMappingURL=ValueSelector.js.map

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

@@ -0,0 +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\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { BASE_BREAKPOINT } from \"~/constants\";\nimport { UnitValue } from \"./UnitValue\";\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        \"wby-cursor-pointer wby-bg-neutral-base\",\n        \"wby-border-sm wby-border-solid wby-border-neutral-muted\",\n        props.overridden && props.inheritedFrom && \"wby-bg-success-default wby-text-neutral-light\",\n        props.disabled &&\n            \"wby-bg-neutral-disabled wby-text-neutral-disabled wby-pointer-events-none\",\n        \"wby-flex wby-flex-row wby-text-sm wby-mx-auto wby-justify-center wby-rounded-sm wby-py-[1px] wby-px-[2px]\"\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={\"wby-flex wby-flex-row wby-space-x-sm\"}>\n                <div className={\"wby-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={\"wby-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={\"wby-flex wby-flex-col wby-w-full\"}>\n            <DropdownMenu\n                open={isOpen}\n                onOpenChange={() => setIsOpen(false)}\n                trigger={label}\n                align=\"center\"\n                side=\"bottom\"\n                className={\"wby-shadow-lg\"}\n            >\n                <div className={\"wby-p-sm wby-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":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC5D,SACIC,EAAE,EACFC,YAAY,EACZC,kBAAkB,EAClBC,iBAAiB,EACjBC,KAAK,EACLC,MAAM,EACNC,SAAS,QACN,kBAAkB;AACzB,SAASC,aAAa;AACtB,SAASC,aAAa;AACtB,SAASC,eAAe;AACxB,SAASC,SAAS;AAqBlB,OAAO,MAAMC,aAAa,GAAIC,KAAyB,IAAK;EACxD,MAAM;IAAEC;EAAW,CAAC,GAAGL,aAAa,CAAC,CAAC;EACtC,MAAM,CAACM,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACiB,MAAM,EAAEC,SAAS,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACmB,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EACvD,MAAMqB,QAAQ,GAAGtB,MAAM,CAA0B,IAAI,CAAC;EAEtD,MAAMuB,YAAY,GAAGP,OAAO,GAAG,EAAE,GAAG,CAAC;EAErC,MAAMQ,YAAY,GAAGZ,SAAS,CAACa,IAAI,CAACX,KAAK,CAACY,KAAK,CAAC;EAEhD,MAAMC,WAAW,GAAG5B,WAAW,CAAC,MAAM;IAClCsB,eAAe,CAAC,IAAI,CAAC;EACzB,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMO,OAAO,GAAGA,CAAA,KAAM;IAClBC,QAAQ,CAACf,KAAK,CAACY,KAAK,CAAC;IACrBP,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC;EAED,MAAMW,OAAO,GAAIC,IAAY,IAAK;IAC9Bd,UAAU,CAAC,KAAK,CAAC;IACjBO,YAAY,CAACM,OAAO,CAACC,IAAI,CAAC;IAC1BjB,KAAK,CAACkB,QAAQ,CAACR,YAAY,CAACS,QAAQ,CAAC,CAAC,CAAC;EAC3C,CAAC;EAED,MAAMJ,QAAQ,GAAIH,KAAa,IAAK;IAChC,MAAMQ,WAAW,GAAGtB,SAAS,CAACa,IAAI,CAACC,KAAK,CAAC;IACzC,IAAI,CAACN,YAAY,EAAE;MACf;IACJ;IACA,MAAMe,UAAU,GAAGD,WAAW,CAACE,QAAQ,CAAC,GAAG,CAAC;IAC5CtB,KAAK,CAACkB,QAAQ,CAAC,GAAGG,UAAU,GAAGrB,KAAK,CAACiB,IAAI,EAAE,CAAC;IAE5CV,eAAe,CAAC,KAAK,CAAC;IACtBgB,UAAU,CAAC,MAAM;MACbpB,UAAU,CAAC,KAAK,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;EACV,CAAC;EAED,MAAMqB,eAAe,GAAIZ,KAAa,IAAK;IACvCT,UAAU,CAAC,IAAI,CAAC;IAChB,IAAIkB,UAA2B,GAAG,EAAE;IACpC,IAAIT,KAAK,KAAK,EAAE,EAAE;MACd,MAAMQ,WAAW,GAAGK,QAAQ,CAACb,KAAK,CAAC;MACnCS,UAAU,GAAGK,KAAK,CAACN,WAAW,CAAC,GAAG,CAAC,GAAGA,WAAW;IACrD;IACApB,KAAK,CAAC2B,eAAe,CAAC,GAAGN,UAAU,GAAGrB,KAAK,CAACiB,IAAI,EAAE,CAAC;EACvD,CAAC;EAED,MAAMW,OAAO,GAAGA,CAAA,KAAM;IAClB5B,KAAK,CAAC4B,OAAO,CAAC,CAAC;IACfvB,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC;EAED,MAAMwB,UAAU,GAAGzC,EAAE,CAAC,CAClB,wCAAwC,EACxC,yDAAyD,EACzDY,KAAK,CAAC8B,UAAU,IAAI9B,KAAK,CAAC+B,aAAa,IAAI,+CAA+C,EAC1F/B,KAAK,CAACgC,QAAQ,IACV,2EAA2E,EAC/E,2GAA2G,CAC9G,CAAC;EAEF,MAAMC,KAAK,gBACPjD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAEN,UAAW;IAACO,OAAO,EAAEA,CAAA,KAAM/B,SAAS,CAAC,IAAI,CAAE;IAACgC,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAG;EAAE,GAC5EtC,KAAK,CAACY,KAAK,IAAI,CAAC,EAAC,GAAC,EAACZ,KAAK,CAACuC,SAAS,GAAG,IAAI,GAAGvC,KAAK,CAACiB,IAClD,CACR;EAED,MAAMuB,QAAQ,gBACVxD,KAAA,CAAAkD,aAAA,CAAAlD,KAAA,CAAAyD,QAAA,qBACIzD,KAAA,CAAAkD,aAAA,CAAC5C,kBAAkB;IAACoD,IAAI,EAAE1C,KAAK,CAACiC;EAAM,CAAE,CAAC,eACzCjD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAE;EAAuC,gBACnDnD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAE;EAAe,gBAC3BnD,KAAA,CAAAkD,aAAA,CAAC1C,KAAK;IACFmD,SAAS,EAAE9B,WAAY;IACvBL,QAAQ,EAAEA,QAAS;IACnBwB,QAAQ,EAAEhC,KAAK,CAACuC,SAAU;IAC1BK,IAAI,EAAE,IAAK;IACXhC,KAAK,EAAEZ,KAAK,CAACuC,SAAS,GAAG,GAAG,GAAGvC,KAAK,CAACY,KAAK,IAAIH,YAAa;IAC3DK,OAAO,EAAEA,OAAQ;IACjB+B,UAAU,EAAE,IAAK;IACjB3B,QAAQ,EAAEN,KAAK,IAAIY,eAAe,CAACZ,KAAK,CAAE;IAC1CkC,MAAM,EAAEC,CAAC,IAAIhC,QAAQ,CAACgC,CAAC,CAACC,MAAM,CAACpC,KAAK,CAAE;IACtCqC,SAAS,EAAE;EAAK,CACnB,CACA,CAAC,eACNjE,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAE;EAAe,gBAC3BnD,KAAA,CAAAkD,aAAA,CAACzC,MAAM;IACHmD,IAAI,EAAC,IAAI;IACThC,KAAK,EAAEZ,KAAK,CAACiB,IAAK;IAClBiC,OAAO,EAAElD,KAAK,CAACmD,KAAM;IACrBjC,QAAQ,EAAED,IAAI,IAAI;MACdD,OAAO,CAACC,IAAI,CAAC;MACbM,UAAU,CAAC,MAAM;QACbf,QAAQ,CAAC4C,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,EAAE,CAAC;IACV,CAAE;IACFC,kBAAkB,EAAE;EAAM,CAC7B,CACA,CACJ,CAAC,eACNtE,KAAA,CAAAkD,aAAA,CAAC3C,iBAAiB;IAACmD,IAAI,EAAE;EAAqD,CAAE,CAClF,CACL;EAED,oBACI1D,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAE;EAAmC,gBAC/CnD,KAAA,CAAAkD,aAAA,CAAC7C,YAAY;IACTkE,IAAI,EAAEnD,MAAO;IACboD,YAAY,EAAEA,CAAA,KAAMnD,SAAS,CAAC,KAAK,CAAE;IACrCoD,OAAO,EAAExB,KAAM;IACfyB,KAAK,EAAC,QAAQ;IACdC,IAAI,EAAC,QAAQ;IACbxB,SAAS,EAAE;EAAgB,gBAE3BnD,KAAA,CAAAkD,aAAA;IAAKC,SAAS,EAAE,sBAAuB;IAACE,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,GACzDE,QAAQ,EACR3C,eAAe,KAAKI,UAAU,CAAC2D,IAAI,GAAG,IAAI,gBACvC5E,KAAA,CAAAkD,aAAA,CAAAlD,KAAA,CAAAyD,QAAA,qBACIzD,KAAA,CAAAkD,aAAA,CAACxC,SAAS;IAACmE,OAAO,EAAE,QAAS;IAACC,MAAM,EAAE;EAAK,CAAE,CAAC,eAC9C9E,KAAA,CAAAkD,aAAA,CAACvC,aAAa;IACVoC,aAAa,EAAE/B,KAAK,CAAC+B,aAAa,IAAIlC,eAAgB;IACtDkE,YAAY,EAAE/D,KAAK,CAAC8B,UAAU,GAAG7B,UAAU,CAAC2D,IAAI,GAAG,IAAK;IACxDhC,OAAO,EAAEA;EAAQ,CACpB,CACH,CAEL,CACK,CACb,CAAC;AAEd,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyleValue.d.ts

@@ -0,0 +1,11 @@
+export declare const useStyleValue: (elementId: string, propertyName: string, defaultValue?: string) => {
+    store: import("./StylesStore").StylesStore;
+    value: string;
+    unit: string;
+    isKeyword: boolean;
+    onChange: (value: string) => void;
+    onChangePreview: (value: string) => void;
+    onReset: () => void;
+    inheritedFrom: string | undefined;
+    overridden: boolean;
+};

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

@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+import { useStyles } from "./useStyles";
+import { UnitValue } from "./UnitValue";
+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
+  };
+};
+
+//# sourceMappingURL=useStyleValue.js.map

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

@@ -0,0 +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\";\nimport { UnitValue } from \"./UnitValue\";\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":[]}

package/BaseEditor/defaultConfig/Sidebar/StyleSettings/useStyles.d.ts

@@ -0,0 +1,19 @@
+import { StylesStore, type ElementBreakpointStyles } from "./StylesStore";
+export type { ElementBreakpointStyles };
+export declare function useStyles(elementId: string): {
+    store: StylesStore;
+    styles: Record<string, any>;
+    metadata: import("../../../metadata").IMetadata;
+    inheritanceMap: Record<string, {
+        overridden: boolean;
+        inheritedFrom?: string | undefined;
+    }>;
+    onChange: (cb: (params: {
+        styles: import("./StylesStore").StylesValueObject;
+        metadata: import("../../../metadata").IMetadata;
+    }) => void) => void;
+    onPreviewChange: (cb: (params: {
+        styles: import("./StylesStore").StylesValueObject;
+        metadata: import("../../../metadata").IMetadata;
+    }) => void) => void;
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useDocumentEditor","useBreakpoint","StylesStore","stylesStores","Map","useStyles","elementId","editor","breakpoints","store","get","map","bp","name","set","styles","vm","metadata","inheritanceMap","onChange","onPreviewChange"],"sources":["useStyles.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor\";\nimport { useBreakpoint } from \"~/BaseEditor/hooks/useBreakpoint\";\nimport { StylesStore, type ElementBreakpointStyles } from \"./StylesStore\";\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        // Create or get existing store for this element\n        let store = stylesStores.get(elementId);\n\n        if (!store) {\n            store = new StylesStore(\n                editor,\n                elementId,\n                breakpoints.map(bp => bp.name)\n            );\n            stylesStores.set(elementId, store);\n        }\n\n        return store;\n    }, [elementId]);\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;IACA,IAAIU,KAAK,GAAGN,YAAY,CAACO,GAAG,CAACJ,SAAS,CAAC;IAEvC,IAAI,CAACG,KAAK,EAAE;MACRA,KAAK,GAAG,IAAIP,WAAW,CACnBK,MAAM,EACND,SAAS,EACTE,WAAW,CAACG,GAAG,CAACC,EAAE,IAAIA,EAAE,CAACC,IAAI,CACjC,CAAC;MACDV,YAAY,CAACW,GAAG,CAACR,SAAS,EAAEG,KAAK,CAAC;IACtC;IAEA,OAAOA,KAAK;EAChB,CAAC,EAAE,CAACH,SAAS,CAAC,CAAC;EAEf,OAAO;IACHG,KAAK;IACLM,MAAM,EAAEN,KAAK,CAACO,EAAE,CAACD,MAAM;IACvBE,QAAQ,EAAER,KAAK,CAACO,EAAE,CAACC,QAAQ;IAC3BC,cAAc,EAAET,KAAK,CAACO,EAAE,CAACE,cAAc;IACvCC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBC,eAAe,EAAEX,KAAK,CAACW;EAC3B,CAAC;AACL","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface InlineSvgProps {
+    src: string;
+    className?: string;
+}
+export declare const InlineSvg: ({ src, className }: InlineSvgProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +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");
+      svgElement.documentElement.classList.add(...className.split(" "));
+      ref.current.outerHTML = svgElement.documentElement.outerHTML;
+    }
+  }, []);
+  useEffect(() => {
+    if (src.startsWith("<svg") && ref.current) {
+      setSvg(src);
+      return;
+    }
+    fetch(src).then(res => res.text()).then(svg => setSvg(svg)).catch(console.error);
+  }, [src]);
+  return /*#__PURE__*/React.createElement("img", {
+    ref: ref,
+    src: src,
+    alt: ""
+  });
+};
+
+//# sourceMappingURL=InlineSvg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useEffect","useRef","InlineSvg","src","className","ref","setSvg","svg","current","domParser","DOMParser","svgElement","parseFromString","documentElement","classList","add","split","outerHTML","startsWith","fetch","then","res","text","catch","console","error","createElement","alt"],"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<HTMLImageElement>(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            svgElement.documentElement.classList.add(...className.split(\" \"));\n            ref.current.outerHTML = svgElement.documentElement.outerHTML;\n        }\n    }, []);\n\n    useEffect(() => {\n        if (src.startsWith(\"<svg\") && ref.current) {\n            setSvg(src);\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 <img ref={ref} src={src} alt=\"\" />;\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,CAAmB,IAAI,CAAC;EAE1C,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;MAElEI,UAAU,CAACE,eAAe,CAACC,SAAS,CAACC,GAAG,CAAC,GAAGX,SAAS,CAACY,KAAK,CAAC,GAAG,CAAC,CAAC;MACjEX,GAAG,CAACG,OAAO,CAACS,SAAS,GAAGN,UAAU,CAACE,eAAe,CAACI,SAAS;IAChE;EACJ,CAAC,EAAE,EAAE,CAAC;EAENjB,SAAS,CAAC,MAAM;IACZ,IAAIG,GAAG,CAACe,UAAU,CAAC,MAAM,CAAC,IAAIb,GAAG,CAACG,OAAO,EAAE;MACvCF,MAAM,CAACH,GAAG,CAAC;MACX;IACJ;IAEAgB,KAAK,CAAChB,GAAG,CAAC,CACLiB,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACC,IAAI,CAAC,CAAC,CAAC,CACvBF,IAAI,CAACb,GAAG,IAAID,MAAM,CAACC,GAAG,CAAC,CAAC,CACxBgB,KAAK,CAACC,OAAO,CAACC,KAAK,CAAC;EAC7B,CAAC,EAAE,CAACtB,GAAG,CAAC,CAAC;EAET,oBAAOL,KAAA,CAAA4B,aAAA;IAAKrB,GAAG,EAAEA,GAAI;IAACF,GAAG,EAAEA,GAAI;IAACwB,GAAG,EAAC;EAAE,CAAE,CAAC;AAC7C,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const InsertElements: () => React.JSX.Element;

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Icon, Card } from "@webiny/admin-ui";
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { InlineSvg } from "./InlineSvg";
+import { Draggable } from "../../../components/Draggable";
+import { useComponentGroups } from "./useComponentGroups";
+const GroupComponent = ({
+  item
+}) => {
+  const components = useSelectFromEditor(state => {
+    return state.components ?? {};
+  });
+  const component = components[item.name];
+  if (!component) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-flex-row wby-items-center wby-p-sm wby-bg-neutral-light wby-rounded-sm wby-gap-sm wby-cursor-grab"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: "Icon",
+    icon: /*#__PURE__*/React.createElement(InlineSvg, {
+      src: component.image,
+      className: "wby-fill-neutral-strong"
+    }),
+    size: "md",
+    className: "wby-fill-neutral-strong"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wby-text-sm wby-font-medium wby-text-neutral-primary wby-text-center"
+  }, component.label ?? component.name));
+};
+export const InsertElements = () => {
+  const groups = useComponentGroups();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, groups.map(group => {
+    if (!group.items.length) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(Card, {
+      key: group.name,
+      title: group.label,
+      description: group.description,
+      borderRadius: "none",
+      padding: "compact"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-flex-col wby-gap-sm wby-p-sm wby-justify-start"
+    }, group.items.map(item => {
+      return /*#__PURE__*/React.createElement(Draggable, {
+        key: item.name,
+        type: "ELEMENT",
+        item: {
+          componentName: item.name
+        }
+      }, ({
+        dragRef
+      }) => dragRef(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GroupComponent, {
+        item: item
+      }))));
+    })));
+  }));
+};
+
+//# sourceMappingURL=InsertElements.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Icon","Card","useSelectFromEditor","InlineSvg","Draggable","useComponentGroups","GroupComponent","item","components","state","component","name","createElement","Fragment","className","label","icon","src","image","size","InsertElements","groups","map","group","items","length","key","title","description","borderRadius","padding","type","componentName","dragRef"],"sources":["InsertElements.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Card } from \"@webiny/admin-ui\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor\";\nimport type { ComponentGroupItem, ComponentManifest } from \"~/sdk/types\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg\";\nimport { Draggable } from \"~/BaseEditor/components/Draggable\";\nimport { useComponentGroups } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups\";\n\nconst GroupComponent = ({ item }: { item: ComponentGroupItem }) => {\n    const components = useSelectFromEditor<Record<string, ComponentManifest>>(state => {\n        return state.components ?? {};\n    });\n\n    const component = components[item.name];\n\n    if (!component) {\n        return <></>;\n    }\n\n    return (\n        <div className=\"wby-flex wby-flex-row wby-items-center wby-p-sm wby-bg-neutral-light wby-rounded-sm wby-gap-sm wby-cursor-grab\">\n            <Icon\n                label=\"Icon\"\n                icon={<InlineSvg src={component.image!} className={\"wby-fill-neutral-strong\"} />}\n                size={\"md\"}\n                className={\"wby-fill-neutral-strong\"}\n            />\n            <div className=\"wby-text-sm wby-font-medium wby-text-neutral-primary wby-text-center\">\n                {component.label ?? component.name}\n            </div>\n        </div>\n    );\n};\n\nexport const InsertElements = () => {\n    const groups = useComponentGroups();\n\n    return (\n        <>\n            {groups.map(group => {\n                if (!group.items.length) {\n                    return null;\n                }\n\n                return (\n                    <Card\n                        key={group.name}\n                        title={group.label}\n                        description={group.description}\n                        borderRadius={\"none\"}\n                        padding={\"compact\"}\n                    >\n                        <div className=\"wby-flex wby-flex-col wby-gap-sm wby-p-sm wby-justify-start\">\n                            {group.items.map(item => {\n                                return (\n                                    <Draggable\n                                        key={item.name}\n                                        type=\"ELEMENT\"\n                                        item={{ componentName: item.name }}\n                                    >\n                                        {({ dragRef }) =>\n                                            dragRef(\n                                                <div>\n                                                    <GroupComponent item={item} />\n                                                </div>\n                                            )\n                                        }\n                                    </Draggable>\n                                );\n                            })}\n                        </div>\n                    </Card>\n                );\n            })}\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAE5B,SAASC,SAAS;AAClB,SAASC,SAAS;AAClB,SAASC,kBAAkB;AAE3B,MAAMC,cAAc,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EAC/D,MAAMC,UAAU,GAAGN,mBAAmB,CAAoCO,KAAK,IAAI;IAC/E,OAAOA,KAAK,CAACD,UAAU,IAAI,CAAC,CAAC;EACjC,CAAC,CAAC;EAEF,MAAME,SAAS,GAAGF,UAAU,CAACD,IAAI,CAACI,IAAI,CAAC;EAEvC,IAAI,CAACD,SAAS,EAAE;IACZ,oBAAOX,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,MAAI,CAAC;EAChB;EAEA,oBACId,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAgH,gBAC3Hf,KAAA,CAAAa,aAAA,CAACZ,IAAI;IACDe,KAAK,EAAC,MAAM;IACZC,IAAI,eAAEjB,KAAA,CAAAa,aAAA,CAACT,SAAS;MAACc,GAAG,EAAEP,SAAS,CAACQ,KAAO;MAACJ,SAAS,EAAE;IAA0B,CAAE,CAAE;IACjFK,IAAI,EAAE,IAAK;IACXL,SAAS,EAAE;EAA0B,CACxC,CAAC,eACFf,KAAA,CAAAa,aAAA;IAAKE,SAAS,EAAC;EAAsE,GAChFJ,SAAS,CAACK,KAAK,IAAIL,SAAS,CAACC,IAC7B,CACJ,CAAC;AAEd,CAAC;AAED,OAAO,MAAMS,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAMC,MAAM,GAAGhB,kBAAkB,CAAC,CAAC;EAEnC,oBACIN,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAc,QAAA,QACKQ,MAAM,CAACC,GAAG,CAACC,KAAK,IAAI;IACjB,IAAI,CAACA,KAAK,CAACC,KAAK,CAACC,MAAM,EAAE;MACrB,OAAO,IAAI;IACf;IAEA,oBACI1B,KAAA,CAAAa,aAAA,CAACX,IAAI;MACDyB,GAAG,EAAEH,KAAK,CAACZ,IAAK;MAChBgB,KAAK,EAAEJ,KAAK,CAACR,KAAM;MACnBa,WAAW,EAAEL,KAAK,CAACK,WAAY;MAC/BC,YAAY,EAAE,MAAO;MACrBC,OAAO,EAAE;IAAU,gBAEnB/B,KAAA,CAAAa,aAAA;MAAKE,SAAS,EAAC;IAA6D,GACvES,KAAK,CAACC,KAAK,CAACF,GAAG,CAACf,IAAI,IAAI;MACrB,oBACIR,KAAA,CAAAa,aAAA,CAACR,SAAS;QACNsB,GAAG,EAAEnB,IAAI,CAACI,IAAK;QACfoB,IAAI,EAAC,SAAS;QACdxB,IAAI,EAAE;UAAEyB,aAAa,EAAEzB,IAAI,CAACI;QAAK;MAAE,GAElC,CAAC;QAAEsB;MAAQ,CAAC,KACTA,OAAO,cACHlC,KAAA,CAAAa,aAAA,2BACIb,KAAA,CAAAa,aAAA,CAACN,cAAc;QAACC,IAAI,EAAEA;MAAK,CAAE,CAC5B,CACT,CAEG,CAAC;IAEpB,CAAC,CACA,CACH,CAAC;EAEf,CAAC,CACH,CAAC;AAEX,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElementsTab.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const InsertElementsTab: () => React.JSX.Element;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Icon, Tabs } from "@webiny/admin-ui";
+import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer";
+import { ReactComponent as InsertIcon } from "@webiny/icons/add_circle_outline.svg";
+import { InsertElements } from "./InsertElements";
+export const InsertElementsTab = () => {
+  return /*#__PURE__*/React.createElement(Tabs.Tab, {
+    value: "insert",
+    trigger: "Insert",
+    spacing: "sm",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(InsertIcon, null),
+      label: "Insert Element"
+    }),
+    content: /*#__PURE__*/React.createElement(ScrollableContainer, null, /*#__PURE__*/React.createElement(InsertElements, null))
+  });
+};
+
+//# sourceMappingURL=InsertElementsTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Icon","Tabs","ScrollableContainer","ReactComponent","InsertIcon","InsertElements","InsertElementsTab","createElement","Tab","value","trigger","spacing","icon","label","content"],"sources":["InsertElementsTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer\";\nimport { ReactComponent as InsertIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { InsertElements } from \"./InsertElements\";\n\nexport const InsertElementsTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"insert\"\n            trigger={\"Insert\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<InsertIcon />} label={\"Insert Element\"} />}\n            content={\n                <ScrollableContainer>\n                    <InsertElements />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,sCAAsC;AACnF,SAASC,cAAc;AAEvB,OAAO,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACnC,oBACIP,KAAA,CAAAQ,aAAA,CAACN,IAAI,CAACO,GAAG;IACLC,KAAK,EAAC,QAAQ;IACdC,OAAO,EAAE,QAAS;IAClBC,OAAO,EAAE,IAAK;IACdC,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACP,IAAI;MAACY,IAAI,eAAEb,KAAA,CAAAQ,aAAA,CAACH,UAAU,MAAE,CAAE;MAACS,KAAK,EAAE;IAAiB,CAAE,CAAE;IAC9DC,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACL,mBAAmB,qBAChBH,KAAA,CAAAQ,aAAA,CAACF,cAAc,MAAE,CACA;EACxB,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/index.d.ts

@@ -0,0 +1 @@
+export * from "./InsertElements";

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

@@ -0,0 +1,3 @@
+export * from "./InsertElements";
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./InsertElements\";\n"],"mappings":"AAAA","ignoreList":[]}

package/BaseEditor/defaultConfig/Toolbar/InsertElements/useComponentGroups.d.ts

@@ -0,0 +1,6 @@
+import { ComponentManifest, SerializedComponentGroup } from "../../../../sdk/types";
+type WithItems<T> = T & {
+    items: ComponentManifest[];
+};
+export declare const useComponentGroups: () => WithItems<SerializedComponentGroup>[];
+export {};

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

@@ -0,0 +1,26 @@
+import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor";
+import { functionConverter } from "../../../../sdk";
+const getComponentFilter = group => {
+  if (group.name === "custom") {
+    return cmp => !cmp.group;
+  }
+  if (group.filter) {
+    return functionConverter.deserialize(group.filter);
+  }
+  return cmp => cmp.group === group.name;
+};
+export const useComponentGroups = () => {
+  return useSelectFromEditor(state => {
+    const groups = Object.values(state.componentGroups);
+    const components = Object.values(state.components).filter(item => !item.hideFromToolbar);
+    return groups.map(group => {
+      const filter = getComponentFilter(group);
+      return {
+        ...group,
+        items: components.filter(filter)
+      };
+    });
+  });
+};
+
+//# sourceMappingURL=useComponentGroups.js.map