@webiny/lexical-editor-actions 6.4.5-beta.0 → 6.6.0-alpha.0

package/components/LexicalColorPicker/LexicalColorPicker.js

@@ -1,110 +1,16 @@
 import react, { useCallback, useEffect, useMemo, useState } from "react";
-import styled from "@emotion/styled";
-import { css } from "@emotion/css";
 import { ChromePicker } from "react-color";
 import { Tooltip } from "@webiny/admin-ui";
 import { ReactComponent } from "./round-color_lens-24px.js";
 import { useRichTextEditor } from "@webiny/lexical-editor";
-const ColorPickerStyle = styled("div")({
-    position: "relative",
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "flex-start",
-    width: 240,
-    padding: 15,
-    backgroundColor: "#fff"
-});
-const ColorBox = styled("div")({
-    cursor: "pointer",
-    width: 40,
-    height: 40,
-    borderRadius: "50%",
-    margin: 5,
-    border: "1px solid var(--mdc-theme-on-background)",
-    padding: 3,
-    boxSizing: "content-box"
-});
-const Color = styled("button")({
-    cursor: "pointer",
-    width: 40,
-    height: 40,
-    transition: "transform 0.1s, border 0.2s",
-    borderColor: "transparent",
-    display: "flex",
-    alignItems: "center",
-    borderRadius: "50%",
-    "&::after": {
-        transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: -1,
-        opacity: 0
-    },
-    "&:hover": {
-        transform: "scale(1.1)",
-        boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
-        "&::after": {
-            opacity: 1
-        }
-    }
-});
-const iconPaletteStyle = css({
-    height: 20,
-    width: "100%",
-    marginTop: 1,
-    color: "var(--mdc-theme-secondary)"
-});
-const COLORS = {
-    lightGray: "hsla(0, 0%, 97%, 1)",
-    gray: "hsla(300, 2%, 92%, 1)",
-    darkGray: "hsla(0, 0%, 70%, 1)",
-    darkestGray: "hsla(0, 0%, 20%, 1)",
-    black: "hsla(208, 100%, 5%, 1)"
-};
-const styles = {
-    selectedColor: css({
-        boxShadow: "inset 0px 0px 0px 10px var(--mdc-theme-secondary)",
-        button: {
-            border: "5px solid var(--mdc-theme-surface)"
-        }
-    }),
-    button: css({
-        cursor: "pointer",
-        height: 30,
-        boxSizing: "border-box",
-        "&:hover:not(:disabled)": {
-            backgroundColor: COLORS.gray
-        },
-        "&:focus:not(:disabled)": {
-            outline: "none"
-        },
-        "&:disabled": {
-            opacity: 0.5,
-            cursor: "not-allowed"
-        },
-        "& svg": {
-            width: 16,
-            height: 16
-        }
-    }),
-    color: css({
-        width: "40px",
-        height: "100%"
-    })
-};
-const chromePickerStyle = css({
-    boxShadow: "none !important",
-    marginTop: "15px",
-    marginLeft: "-15px",
-    width: "240px !important"
-});
+const colorPickerClass = "relative flex flex-wrap justify-start w-[240px] p-[15px] bg-white";
+const colorBoxClass = "cursor-pointer w-10 h-10 rounded-full m-[5px] border border-solid border-[color:var(--mdc-theme-on-background)] p-[3px] box-content";
+const selectedColorClass = "shadow-[inset_0px_0px_0px_10px_var(--mdc-theme-secondary)] [&_button]:border-[5px] [&_button]:border-solid [&_button]:border-[color:var(--mdc-theme-surface)]";
+const colorButtonClass = "cursor-pointer w-10 h-10 flex items-center rounded-full border-transparent [transition:transform_0.1s,_border_0.2s] after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:-z-10 after:opacity-0 after:[transition:opacity_0.5s_cubic-bezier(0.165,0.84,0.44,1)] hover:scale-110 hover:shadow-[0_0.25rem_0.125rem_0_rgba(0,0,0,0.05)] hover:after:opacity-100";
+const iconPaletteClass = "h-5 w-full mt-px text-[color:var(--mdc-theme-secondary)]";
+const chromePickerClass = "w-[270px]! m-[15px_-15px_-15px_-15px]";
 const showPickerStyle = {
-    display: "block",
-    width: "100%"
+    display: "block"
 };
 const hidePickerStyle = {
     display: "none"
@@ -148,13 +54,16 @@ const LexicalColorPicker = ({ value, onChange, onChangeComplete, allowCustomColo
         themeColors,
         value
     ]);
-    return /*#__PURE__*/ react.createElement(ColorPickerStyle, null, themeColors.map((color)=>/*#__PURE__*/ react.createElement(ColorBox, {
+    return /*#__PURE__*/ react.createElement("div", {
+        className: colorPickerClass
+    }, themeColors.map((color)=>/*#__PURE__*/ react.createElement("div", {
             key: color.id,
-            className: color.id === value ? styles.selectedColor : ""
+            className: color.id === value ? `${colorBoxClass} ${selectedColorClass}` : colorBoxClass
         }, /*#__PURE__*/ react.createElement(Tooltip, {
             content: /*#__PURE__*/ react.createElement("span", null, color.label),
             side: "bottom",
-            trigger: /*#__PURE__*/ react.createElement(Color, {
+            trigger: /*#__PURE__*/ react.createElement("button", {
+                className: colorButtonClass,
                 style: {
                     backgroundColor: color.value
                 },
@@ -162,23 +71,24 @@ const LexicalColorPicker = ({ value, onChange, onChangeComplete, allowCustomColo
                     onChangeComplete(color.value, color.id);
                 }
             })
-        }))), allowCustomColor ? /*#__PURE__*/ react.createElement(ColorBox, {
-        className: value && !isThemeColor ? styles.selectedColor : ""
+        }))), allowCustomColor ? /*#__PURE__*/ react.createElement("div", {
+        className: value && !isThemeColor ? `${colorBoxClass} ${selectedColorClass}` : colorBoxClass
     }, /*#__PURE__*/ react.createElement(Tooltip, {
         content: /*#__PURE__*/ react.createElement("span", null, "Color picker"),
         side: "bottom",
-        trigger: /*#__PURE__*/ react.createElement(Color, {
+        trigger: /*#__PURE__*/ react.createElement("button", {
+            className: colorButtonClass,
             style: {
                 backgroundColor: isThemeColor ? "#fff" : value
             },
             onClick: togglePicker
         }, /*#__PURE__*/ react.createElement(ReactComponent, {
-            className: iconPaletteStyle
+            className: iconPaletteClass
         }))
     })) : null, /*#__PURE__*/ react.createElement("div", {
         style: showPicker ? showPickerStyle : hidePickerStyle
     }, /*#__PURE__*/ react.createElement(ChromePicker, {
-        className: chromePickerStyle,
+        className: chromePickerClass,
         color: actualSelectedColor,
         disableAlpha: true,
         onChange: onColorChange,

package/components/LexicalColorPicker/LexicalColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/LexicalColorPicker/LexicalColorPicker.js","sources":["../../../src/components/LexicalColorPicker/LexicalColorPicker.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/css\";\nimport type { ColorResult, RGBColor } from \"react-color\";\nimport { ChromePicker } from \"react-color\";\nimport { Tooltip } from \"@webiny/admin-ui\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\nimport { useRichTextEditor } from \"@webiny/lexical-editor\";\n\nconst ColorPickerStyle = styled(\"div\")({\n    position: \"relative\",\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    justifyContent: \"flex-start\",\n    width: 240,\n    padding: 15,\n    backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n    cursor: \"pointer\",\n    width: 40,\n    height: 40,\n    borderRadius: \"50%\",\n    margin: 5,\n    border: \"1px solid var(--mdc-theme-on-background)\",\n    padding: 3,\n    boxSizing: \"content-box\"\n});\n\nconst Color = styled(\"button\")({\n    cursor: \"pointer\",\n    width: 40,\n    height: 40,\n    transition: \"transform 0.1s, border 0.2s\",\n    borderColor: \"transparent\",\n    display: \"flex\",\n    alignItems: \"center\",\n    borderRadius: \"50%\",\n    \"&::after\": {\n        transition: \"opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)\",\n        content: '\"\"',\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        width: \"100%\",\n        height: \"100%\",\n        zIndex: -1,\n        opacity: 0\n    },\n    \"&:hover\": {\n        transform: \"scale(1.1)\",\n        boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\n        \"&::after\": {\n            opacity: 1\n        }\n    }\n});\n\nconst iconPaletteStyle = css({\n    height: 20,\n    width: \"100%\",\n    marginTop: 1,\n    color: \"var(--mdc-theme-secondary)\"\n});\n\nconst COLORS = {\n    lightGray: \"hsla(0, 0%, 97%, 1)\",\n    gray: \"hsla(300, 2%, 92%, 1)\",\n    darkGray: \"hsla(0, 0%, 70%, 1)\",\n    darkestGray: \"hsla(0, 0%, 20%, 1)\",\n    black: \"hsla(208, 100%, 5%, 1)\"\n};\n\nconst styles = {\n    selectedColor: css({\n        boxShadow: \"inset 0px 0px 0px 10px var(--mdc-theme-secondary)\",\n        button: {\n            border: \"5px solid var(--mdc-theme-surface)\"\n        }\n    }),\n    button: css({\n        cursor: \"pointer\",\n        height: 30,\n        boxSizing: \"border-box\",\n        \"&:hover:not(:disabled)\": { backgroundColor: COLORS.gray },\n        \"&:focus:not(:disabled)\": {\n            outline: \"none\"\n        },\n        \"&:disabled\": {\n            opacity: 0.5,\n            cursor: \"not-allowed\"\n        },\n        \"& svg\": {\n            width: 16,\n            height: 16\n        }\n    }),\n    color: css({\n        width: \"40px\",\n        height: \"100%\"\n    })\n};\n\nconst chromePickerStyle = css({\n    boxShadow: \"none !important\",\n    marginTop: \"15px\",\n    marginLeft: \"-15px\",\n    width: \"240px !important\"\n});\n\ninterface LexicalColorPickerProps {\n    value: string;\n    onChange?: (color: string) => void;\n    onChangeComplete: (color: string, name?: string) => void;\n    handlerClassName?: string;\n    allowCustomColor?: boolean;\n}\n\nconst showPickerStyle = { display: \"block\", width: \"100%\" };\nconst hidePickerStyle = { display: \"none\" };\n\nexport const LexicalColorPicker = ({\n    value,\n    onChange,\n    onChangeComplete,\n    allowCustomColor\n}: LexicalColorPickerProps) => {\n    const [showPicker, setShowPicker] = useState(false);\n    // Either a custom color or a color coming from the theme object.\n    const [actualSelectedColor, setActualSelectedColor] = useState(value || \"#fff\");\n    const [isThemeColor, setIsThemeColor] = useState(false);\n\n    useEffect(() => {\n        if (value) {\n            setActualSelectedColor(value);\n        }\n    }, [value]);\n\n    const getColorValue = useCallback((rgb: RGBColor, alpha?: number) => {\n        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`;\n    }, []);\n\n    const onColorChange = useCallback(\n        (color: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            // controls of the picker are updated as user moves the mouse\n            const customColor = getColorValue(color.rgb, color.rgb.a === 0 ? 1 : color.rgb.a);\n            setActualSelectedColor(customColor);\n            if (typeof onChange === \"function\") {\n                onChange(customColor);\n            }\n        },\n        [onChange]\n    );\n\n    const onColorChangeComplete = useCallback(\n        ({ rgb }: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            const color = getColorValue(rgb, rgb.a === 0 ? 1 : rgb.a);\n            setActualSelectedColor(color);\n            onChangeComplete(color);\n        },\n        [onChangeComplete]\n    );\n\n    const togglePicker = useCallback((e: SyntheticEvent) => {\n        e.stopPropagation();\n        setShowPicker(state => !state);\n    }, []);\n\n    const { theme } = useRichTextEditor();\n\n    const themeColors = useMemo(() => theme?.colors ?? [], []);\n\n    useEffect(() => {\n        const isThemeColor = themeColors.some(color => color.id === value);\n        setIsThemeColor(isThemeColor);\n    }, [themeColors, value]);\n\n    return (\n        <ColorPickerStyle>\n            {themeColors.map(color => {\n                return (\n                    <ColorBox\n                        key={color.id}\n                        className={color.id === value ? styles.selectedColor : \"\"}\n                    >\n                        <Tooltip\n                            content={<span>{color.label}</span>}\n                            side=\"bottom\"\n                            trigger={\n                                <Color\n                                    style={{ backgroundColor: color.value }}\n                                    onClick={() => {\n                                        onChangeComplete(color.value, color.id);\n                                    }}\n                                />\n                            }\n                        />\n                    </ColorBox>\n                );\n            })}\n\n            {allowCustomColor ? (\n                <ColorBox className={value && !isThemeColor ? styles.selectedColor : \"\"}>\n                    <Tooltip\n                        content={<span>Color picker</span>}\n                        side=\"bottom\"\n                        trigger={\n                            <Color\n                                style={{ backgroundColor: isThemeColor ? \"#fff\" : value }}\n                                onClick={togglePicker}\n                            >\n                                <IconPalette className={iconPaletteStyle} />\n                            </Color>\n                        }\n                    />\n                </ColorBox>\n            ) : null}\n\n            <div style={showPicker ? showPickerStyle : hidePickerStyle}>\n                <ChromePicker\n                    className={chromePickerStyle}\n                    color={actualSelectedColor}\n                    disableAlpha={true}\n                    onChange={onColorChange}\n                    onChangeComplete={onColorChangeComplete}\n                />\n            </div>\n        </ColorPickerStyle>\n    );\n};\n"],"names":["ColorPickerStyle","styled","ColorBox","Color","iconPaletteStyle","css","COLORS","styles","chromePickerStyle","showPickerStyle","hidePickerStyle","LexicalColorPicker","value","onChange","onChangeComplete","allowCustomColor","showPicker","setShowPicker","useState","actualSelectedColor","setActualSelectedColor","isThemeColor","setIsThemeColor","useEffect","getColorValue","useCallback","rgb","alpha","onColorChange","color","event","customColor","onColorChangeComplete","togglePicker","e","state","theme","useRichTextEditor","themeColors","useMemo","Tooltip","IconPalette","ChromePicker"],"mappings":";;;;;;;AAYA,MAAMA,mBAAmBC,OAAO,OAAO;IACnC,UAAU;IACV,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,OAAO;IACP,SAAS;IACT,iBAAiB;AACrB;AAEA,MAAMC,WAAWD,OAAO,OAAO;IAC3B,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,cAAc;IACd,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,WAAW;AACf;AAEA,MAAME,QAAQF,OAAO,UAAU;IAC3B,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,YAAY;IACZ,aAAa;IACb,SAAS;IACT,YAAY;IACZ,cAAc;IACd,YAAY;QACR,YAAY;QACZ,SAAS;QACT,UAAU;QACV,KAAK;QACL,MAAM;QACN,OAAO;QACP,QAAQ;QACR,QAAQ;QACR,SAAS;IACb;IACA,WAAW;QACP,WAAW;QACX,WAAW;QACX,YAAY;YACR,SAAS;QACb;IACJ;AACJ;AAEA,MAAMG,mBAAmBC,IAAI;IACzB,QAAQ;IACR,OAAO;IACP,WAAW;IACX,OAAO;AACX;AAEA,MAAMC,SAAS;IACX,WAAW;IACX,MAAM;IACN,UAAU;IACV,aAAa;IACb,OAAO;AACX;AAEA,MAAMC,SAAS;IACX,eAAeF,IAAI;QACf,WAAW;QACX,QAAQ;YACJ,QAAQ;QACZ;IACJ;IACA,QAAQA,IAAI;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,0BAA0B;YAAE,iBAAiBC,OAAO,IAAI;QAAC;QACzD,0BAA0B;YACtB,SAAS;QACb;QACA,cAAc;YACV,SAAS;YACT,QAAQ;QACZ;QACA,SAAS;YACL,OAAO;YACP,QAAQ;QACZ;IACJ;IACA,OAAOD,IAAI;QACP,OAAO;QACP,QAAQ;IACZ;AACJ;AAEA,MAAMG,oBAAoBH,IAAI;IAC1B,WAAW;IACX,WAAW;IACX,YAAY;IACZ,OAAO;AACX;AAUA,MAAMI,kBAAkB;IAAE,SAAS;IAAS,OAAO;AAAO;AAC1D,MAAMC,kBAAkB;IAAE,SAAS;AAAO;AAEnC,MAAMC,qBAAqB,CAAC,EAC/BC,KAAK,EACLC,QAAQ,EACRC,gBAAgB,EAChBC,gBAAgB,EACM;IACtB,MAAM,CAACC,YAAYC,cAAc,GAAGC,SAAS;IAE7C,MAAM,CAACC,qBAAqBC,uBAAuB,GAAGF,SAASN,SAAS;IACxE,MAAM,CAACS,cAAcC,gBAAgB,GAAGJ,SAAS;IAEjDK,UAAU;QACN,IAAIX,OACAQ,uBAAuBR;IAE/B,GAAG;QAACA;KAAM;IAEV,MAAMY,gBAAgBC,YAAY,CAACC,KAAeC,QACvC,CAAC,KAAK,EAAED,IAAI,CAAC,CAAC,EAAE,EAAEA,IAAI,CAAC,CAAC,EAAE,EAAEA,IAAI,CAAC,CAAC,EAAE,EAAEC,SAASD,IAAI,CAAC,CAAC,CAAC,CAAC,EAC/D,EAAE;IAEL,MAAME,gBAAgBH,YAClB,CAACI,OAAiCC;QAC9BA,MAAM,cAAc;QAEpB,MAAMC,cAAcP,cAAcK,MAAM,GAAG,EAAEA,AAAgB,MAAhBA,MAAM,GAAG,CAAC,CAAC,GAAS,IAAIA,MAAM,GAAG,CAAC,CAAC;QAChFT,uBAAuBW;QACvB,IAAI,AAAoB,cAApB,OAAOlB,UACPA,SAASkB;IAEjB,GACA;QAAClB;KAAS;IAGd,MAAMmB,wBAAwBP,YAC1B,CAAC,EAAEC,GAAG,EAA4B,EAAEI;QAChCA,MAAM,cAAc;QACpB,MAAMD,QAAQL,cAAcE,KAAKA,AAAU,MAAVA,IAAI,CAAC,GAAS,IAAIA,IAAI,CAAC;QACxDN,uBAAuBS;QACvBf,iBAAiBe;IACrB,GACA;QAACf;KAAiB;IAGtB,MAAMmB,eAAeR,YAAY,CAACS;QAC9BA,EAAE,eAAe;QACjBjB,cAAckB,CAAAA,QAAS,CAACA;IAC5B,GAAG,EAAE;IAEL,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,MAAMC,cAAcC,QAAQ,IAAMH,OAAO,UAAU,EAAE,EAAE,EAAE;IAEzDb,UAAU;QACN,MAAMF,eAAeiB,YAAY,IAAI,CAACT,CAAAA,QAASA,MAAM,EAAE,KAAKjB;QAC5DU,gBAAgBD;IACpB,GAAG;QAACiB;QAAa1B;KAAM;IAEvB,OAAO,WAAP,GACI,oBAACZ,kBAAgBA,MACZsC,YAAY,GAAG,CAACT,CAAAA,QACN,WAAP,GACI,oBAAC3B,UAAQA;YACL,KAAK2B,MAAM,EAAE;YACb,WAAWA,MAAM,EAAE,KAAKjB,QAAQL,OAAO,aAAa,GAAG;yBAEvD,oBAACiC,SAAOA;YACJ,uBAAS,oBAAC,cAAMX,MAAM,KAAK;YAC3B,MAAK;YACL,uBACI,oBAAC1B,OAAKA;gBACF,OAAO;oBAAE,iBAAiB0B,MAAM,KAAK;gBAAC;gBACtC,SAAS;oBACLf,iBAAiBe,MAAM,KAAK,EAAEA,MAAM,EAAE;gBAC1C;;cAQvBd,mBAAmB,WAAnBA,GACG,oBAACb,UAAQA;QAAC,WAAWU,SAAS,CAACS,eAAed,OAAO,aAAa,GAAG;qBACjE,oBAACiC,SAAOA;QACJ,uBAAS,oBAAC,cAAK;QACf,MAAK;QACL,uBACI,oBAACrC,OAAKA;YACF,OAAO;gBAAE,iBAAiBkB,eAAe,SAAST;YAAM;YACxD,SAASqB;yBAET,oBAACQ,gBAAWA;YAAC,WAAWrC;;UAKxC,oBAEJ,oBAAC;QAAI,OAAOY,aAAaP,kBAAkBC;qBACvC,oBAACgC,cAAYA;QACT,WAAWlC;QACX,OAAOW;QACP,cAAc;QACd,UAAUS;QACV,kBAAkBI;;AAKtC"}
+{"version":3,"file":"components/LexicalColorPicker/LexicalColorPicker.js","sources":["../../../src/components/LexicalColorPicker/LexicalColorPicker.tsx"],"sourcesContent":["import type { SyntheticEvent } from \"react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ColorResult, RGBColor } from \"react-color\";\nimport { ChromePicker } from \"react-color\";\nimport { Tooltip } from \"@webiny/admin-ui\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\nimport { useRichTextEditor } from \"@webiny/lexical-editor\";\n\nconst colorPickerClass = \"relative flex flex-wrap justify-start w-[240px] p-[15px] bg-white\";\n\nconst colorBoxClass =\n    \"cursor-pointer w-10 h-10 rounded-full m-[5px] border border-solid border-[color:var(--mdc-theme-on-background)] p-[3px] box-content\";\n\nconst selectedColorClass =\n    \"shadow-[inset_0px_0px_0px_10px_var(--mdc-theme-secondary)] [&_button]:border-[5px] [&_button]:border-solid [&_button]:border-[color:var(--mdc-theme-surface)]\";\n\nconst colorButtonClass =\n    \"cursor-pointer w-10 h-10 flex items-center rounded-full border-transparent [transition:transform_0.1s,_border_0.2s] \" +\n    \"after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:-z-10 after:opacity-0 after:[transition:opacity_0.5s_cubic-bezier(0.165,0.84,0.44,1)] \" +\n    \"hover:scale-110 hover:shadow-[0_0.25rem_0.125rem_0_rgba(0,0,0,0.05)] hover:after:opacity-100\";\n\nconst iconPaletteClass = \"h-5 w-full mt-px text-[color:var(--mdc-theme-secondary)]\";\n\nconst chromePickerClass = \"w-[270px]! m-[15px_-15px_-15px_-15px]\";\n\ninterface LexicalColorPickerProps {\n    value: string;\n    onChange?: (color: string) => void;\n    onChangeComplete: (color: string, name?: string) => void;\n    handlerClassName?: string;\n    allowCustomColor?: boolean;\n}\n\nconst showPickerStyle = { display: \"block\" };\nconst hidePickerStyle = { display: \"none\" };\n\nexport const LexicalColorPicker = ({\n    value,\n    onChange,\n    onChangeComplete,\n    allowCustomColor\n}: LexicalColorPickerProps) => {\n    const [showPicker, setShowPicker] = useState(false);\n    // Either a custom color or a color coming from the theme object.\n    const [actualSelectedColor, setActualSelectedColor] = useState(value || \"#fff\");\n    const [isThemeColor, setIsThemeColor] = useState(false);\n\n    useEffect(() => {\n        if (value) {\n            setActualSelectedColor(value);\n        }\n    }, [value]);\n\n    const getColorValue = useCallback((rgb: RGBColor, alpha?: number) => {\n        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha ?? rgb.a})`;\n    }, []);\n\n    const onColorChange = useCallback(\n        (color: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            // controls of the picker are updated as user moves the mouse\n            const customColor = getColorValue(color.rgb, color.rgb.a === 0 ? 1 : color.rgb.a);\n            setActualSelectedColor(customColor);\n            if (typeof onChange === \"function\") {\n                onChange(customColor);\n            }\n        },\n        [onChange]\n    );\n\n    const onColorChangeComplete = useCallback(\n        ({ rgb }: Pick<ColorResult, \"rgb\">, event: React.SyntheticEvent) => {\n            event.preventDefault();\n            const color = getColorValue(rgb, rgb.a === 0 ? 1 : rgb.a);\n            setActualSelectedColor(color);\n            onChangeComplete(color);\n        },\n        [onChangeComplete]\n    );\n\n    const togglePicker = useCallback((e: SyntheticEvent) => {\n        e.stopPropagation();\n        setShowPicker(state => !state);\n    }, []);\n\n    const { theme } = useRichTextEditor();\n\n    const themeColors = useMemo(() => theme?.colors ?? [], []);\n\n    useEffect(() => {\n        const isThemeColor = themeColors.some(color => color.id === value);\n        setIsThemeColor(isThemeColor);\n    }, [themeColors, value]);\n\n    return (\n        <div className={colorPickerClass}>\n            {themeColors.map(color => {\n                return (\n                    <div\n                        key={color.id}\n                        className={\n                            color.id === value\n                                ? `${colorBoxClass} ${selectedColorClass}`\n                                : colorBoxClass\n                        }\n                    >\n                        <Tooltip\n                            content={<span>{color.label}</span>}\n                            side=\"bottom\"\n                            trigger={\n                                <button\n                                    className={colorButtonClass}\n                                    style={{ backgroundColor: color.value }}\n                                    onClick={() => {\n                                        onChangeComplete(color.value, color.id);\n                                    }}\n                                />\n                            }\n                        />\n                    </div>\n                );\n            })}\n\n            {allowCustomColor ? (\n                <div\n                    className={\n                        value && !isThemeColor\n                            ? `${colorBoxClass} ${selectedColorClass}`\n                            : colorBoxClass\n                    }\n                >\n                    <Tooltip\n                        content={<span>Color picker</span>}\n                        side=\"bottom\"\n                        trigger={\n                            <button\n                                className={colorButtonClass}\n                                style={{ backgroundColor: isThemeColor ? \"#fff\" : value }}\n                                onClick={togglePicker}\n                            >\n                                <IconPalette className={iconPaletteClass} />\n                            </button>\n                        }\n                    />\n                </div>\n            ) : null}\n\n            <div style={showPicker ? showPickerStyle : hidePickerStyle}>\n                <ChromePicker\n                    className={chromePickerClass}\n                    color={actualSelectedColor}\n                    disableAlpha={true}\n                    onChange={onColorChange}\n                    onChangeComplete={onColorChangeComplete}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["colorPickerClass","colorBoxClass","selectedColorClass","colorButtonClass","iconPaletteClass","chromePickerClass","showPickerStyle","hidePickerStyle","LexicalColorPicker","value","onChange","onChangeComplete","allowCustomColor","showPicker","setShowPicker","useState","actualSelectedColor","setActualSelectedColor","isThemeColor","setIsThemeColor","useEffect","getColorValue","useCallback","rgb","alpha","onColorChange","color","event","customColor","onColorChangeComplete","togglePicker","e","state","theme","useRichTextEditor","themeColors","useMemo","Tooltip","IconPalette","ChromePicker"],"mappings":"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"}

package/components/LexicalColorPickerDropdown.js

@@ -1,25 +1,26 @@
 import react from "react";
-import { DropDown, useFontColorPicker, useRichTextEditor } from "@webiny/lexical-editor";
+import { DropDown, useFontColorPicker } from "@webiny/lexical-editor";
 import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
-import { css } from "@emotion/css";
-const LexicalColorPickerDropdown = ({ allowCustomColor })=>{
+const LexicalColorPickerDropdown = ({ allowCustomColor = false })=>{
     const { value, applyColor } = useFontColorPicker();
-    const { theme } = useRichTextEditor();
-    const buttonColorSelection = css({
-        borderBottom: "3px solid " + value
-    });
-    return /*#__PURE__*/ react.createElement(DropDown, {
+    const wrapperStyle = {
+        display: "contents",
+        "--wby-font-color": value
+    };
+    return /*#__PURE__*/ react.createElement("span", {
+        style: wrapperStyle
+    }, /*#__PURE__*/ react.createElement(DropDown, {
         buttonClassName: "toolbar-item color-picker",
         buttonAriaLabel: "Formatting options for text color",
-        buttonIconClassName: "icon font-color " + buttonColorSelection,
+        buttonIconClassName: "icon font-color [border-bottom:3px_solid_var(--wby-font-color)]",
         stopCloseOnClickSelf: true,
         disabled: false,
         showScroll: false
     }, /*#__PURE__*/ react.createElement(LexicalColorPicker, {
         value: value,
         onChangeComplete: applyColor,
-        allowCustomColor: allowCustomColor ?? theme.allowCustomColors
-    }));
+        allowCustomColor: allowCustomColor
+    })));
 };
 export { LexicalColorPickerDropdown };
 

package/components/LexicalColorPickerDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/LexicalColorPickerDropdown.js","sources":["../../src/components/LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, useRichTextEditor, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker.js\";\nimport { css } from \"@emotion/css\";\n\nexport interface LexicalColorPickerDropdownProps {\n    allowCustomColor?: boolean;\n}\n\nexport const LexicalColorPickerDropdown = ({\n    allowCustomColor\n}: LexicalColorPickerDropdownProps) => {\n    const { value, applyColor } = useFontColorPicker();\n    const { theme } = useRichTextEditor();\n\n    const buttonColorSelection = css({\n        borderBottom: \"3px solid \" + value\n    });\n\n    return (\n        <DropDown\n            buttonClassName=\"toolbar-item color-picker\"\n            buttonAriaLabel={\"Formatting options for text color\"}\n            buttonIconClassName={\"icon font-color \" + buttonColorSelection}\n            stopCloseOnClickSelf={true}\n            disabled={false}\n            showScroll={false}\n        >\n            <LexicalColorPicker\n                value={value}\n                onChangeComplete={applyColor}\n                allowCustomColor={allowCustomColor ?? theme.allowCustomColors}\n            />\n        </DropDown>\n    );\n};\n"],"names":["LexicalColorPickerDropdown","allowCustomColor","value","applyColor","useFontColorPicker","theme","useRichTextEditor","buttonColorSelection","css","DropDown","LexicalColorPicker"],"mappings":";;;;AASO,MAAMA,6BAA6B,CAAC,EACvCC,gBAAgB,EACc;IAC9B,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,MAAMC,uBAAuBC,IAAI;QAC7B,cAAc,eAAeN;IACjC;IAEA,OAAO,WAAP,GACI,oBAACO,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,qBAAqB,qBAAqBF;QAC1C,sBAAsB;QACtB,UAAU;QACV,YAAY;qBAEZ,oBAACG,oBAAkBA;QACf,OAAOR;QACP,kBAAkBC;QAClB,kBAAkBF,oBAAoBI,MAAM,iBAAiB;;AAI7E"}
+{"version":3,"file":"components/LexicalColorPickerDropdown.js","sources":["../../src/components/LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker.js\";\n\nexport interface LexicalColorPickerDropdownProps {\n    allowCustomColor?: boolean;\n}\n\nexport const LexicalColorPickerDropdown = ({\n    allowCustomColor = false\n}: LexicalColorPickerDropdownProps) => {\n    const { value, applyColor } = useFontColorPicker();\n\n    // The current color is dynamic, so it's passed as a CSS custom property on a\n    // `display: contents` wrapper (no layout box) and read by the icon's static class.\n    const wrapperStyle = { display: \"contents\", \"--wby-font-color\": value } as React.CSSProperties;\n\n    return (\n        <span style={wrapperStyle}>\n            <DropDown\n                buttonClassName=\"toolbar-item color-picker\"\n                buttonAriaLabel={\"Formatting options for text color\"}\n                buttonIconClassName={\n                    \"icon font-color [border-bottom:3px_solid_var(--wby-font-color)]\"\n                }\n                stopCloseOnClickSelf={true}\n                disabled={false}\n                showScroll={false}\n            >\n                <LexicalColorPicker\n                    value={value}\n                    onChangeComplete={applyColor}\n                    allowCustomColor={allowCustomColor}\n                />\n            </DropDown>\n        </span>\n    );\n};\n"],"names":["LexicalColorPickerDropdown","allowCustomColor","value","applyColor","useFontColorPicker","wrapperStyle","DropDown","LexicalColorPicker"],"mappings":";;;AAQO,MAAMA,6BAA6B,CAAC,EACvCC,mBAAmB,KAAK,EACM;IAC9B,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC;IAI9B,MAAMC,eAAe;QAAE,SAAS;QAAY,oBAAoBH;IAAM;IAEtE,OAAO,WAAP,GACI,oBAAC;QAAK,OAAOG;qBACT,oBAACC,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,qBACI;QAEJ,sBAAsB;QACtB,UAAU;QACV,YAAY;qBAEZ,oBAACC,oBAAkBA;QACf,OAAOL;QACP,kBAAkBC;QAClB,kBAAkBF;;AAKtC"}

package/package.json

@@ -1,24 +1,22 @@
 {
 	"name": "@webiny/lexical-editor-actions",
-	"version": "6.4.5-beta.0",
+	"version": "6.6.0-alpha.0",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
 		"./*": "./*"
 	},
 	"dependencies": {
-		"@emotion/css": "11.13.5",
-		"@emotion/styled": "11.14.1",
-		"@lexical/selection": "0.46.0",
-		"@webiny/admin-ui": "6.4.5-beta.0",
-		"@webiny/lexical-editor": "6.4.5-beta.0",
+		"@lexical/selection": "0.48.0",
+		"@webiny/admin-ui": "6.6.0-alpha.0",
+		"@webiny/lexical-editor": "6.6.0-alpha.0",
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-dom": "18.3.1"
 	},
 	"devDependencies": {
 		"@types/react-color": "3.0.13",
-		"@webiny/build-tools": "6.4.5-beta.0"
+		"@webiny/build-tools": "6.6.0-alpha.0"
 	},
 	"publishConfig": {
 		"access": "public"