npm - @webiny/lexical-editor-actions - Versions diffs - 6.4.11 → 6.6.0-alpha.1 - Mend

@webiny/lexical-editor-actions 6.4.11 → 6.6.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/components/LexicalColorPicker/LexicalColorPicker.js +46 -113
package/components/LexicalColorPicker/LexicalColorPicker.js.map +1 -1
package/components/LexicalColorPickerDropdown.js +7 -5
package/components/LexicalColorPickerDropdown.js.map +1 -1
package/components/TextAlignmentDropdown.js +39 -20
package/components/TextAlignmentDropdown.js.map +1 -1
package/package.json +6 -7

package/components/LexicalColorPicker/LexicalColorPicker.js CHANGED Viewed

@@ -1,110 +1,29 @@
 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 RESET_COLOR = "inherit";
+const BG_FALLBACK = "var(--color-neutral-base)";
+const BORDER_FALLBACK = "var(--border-color-neutral-dimmed-darker)";
+const withColorFallback = (color, fallback)=>{
+    const trimmed = color.trim();
+    return /^var\(\s*--[^,()]+\)$/.test(trimmed) ? trimmed.replace(/\)$/, `, ${fallback})`) : trimmed;
 };
-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 colorPickerClass = "flex flex-wrap gap-[6px] p-sm max-w-[132px] bg-neutral-base";
+const colorPickerExpandedClass = "flex flex-wrap gap-[6px] p-sm w-[257px] bg-neutral-base";
+const swatchClass = "flex items-center justify-center size-4 rounded-[2px] cursor-pointer transition-transform hover:scale-110 border-2 border-neutral-dimmed-darker";
+const iconPaletteClass = "size-4 text-neutral-strong";
+const noColorSwatchClass = `${swatchClass} bg-neutral-base relative overflow-hidden`;
+const noColorSwatchStyle = {
+    borderColor: "var(--border-color-neutral-muted)"
 };
-const chromePickerStyle = css({
-    boxShadow: "none !important",
-    marginTop: "15px",
-    marginLeft: "-15px",
-    width: "240px !important"
-});
+const noColorLineStyle = {
+    background: "linear-gradient(45deg, transparent 44%, var(--border-color-neutral-muted) 44%, var(--border-color-neutral-muted) 56%, transparent 56%)"
+};
+const chromePickerClass = "mx-auto mt-sm shadow-none!";
 const showPickerStyle = {
-    display: "block",
-    width: "100%"
+    display: "block"
 };
 const hidePickerStyle = {
     display: "none"
@@ -142,43 +61,57 @@ const LexicalColorPicker = ({ value, onChange, onChangeComplete, allowCustomColo
     const { theme } = useRichTextEditor();
     const themeColors = useMemo(()=>theme?.colors ?? [], []);
     useEffect(()=>{
-        const isThemeColor = themeColors.some((color)=>color.id === value);
+        const isThemeColor = themeColors.some((color)=>color.value === value);
         setIsThemeColor(isThemeColor);
     }, [
         themeColors,
         value
     ]);
-    return /*#__PURE__*/ react.createElement(ColorPickerStyle, null, themeColors.map((color)=>/*#__PURE__*/ react.createElement(ColorBox, {
+    return /*#__PURE__*/ react.createElement("div", {
+        className: showPicker ? colorPickerExpandedClass : colorPickerClass
+    }, themeColors.map((color)=>/*#__PURE__*/ react.createElement(Tooltip, {
             key: color.id,
-            className: color.id === value ? styles.selectedColor : ""
-        }, /*#__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: swatchClass,
                 style: {
-                    backgroundColor: color.value
+                    backgroundColor: withColorFallback(color.value, BG_FALLBACK),
+                    borderColor: withColorFallback(color.value, BORDER_FALLBACK)
                 },
                 onClick: ()=>{
                     onChangeComplete(color.value, color.id);
                 }
             })
-        }))), allowCustomColor ? /*#__PURE__*/ react.createElement(ColorBox, {
-        className: value && !isThemeColor ? styles.selectedColor : ""
-    }, /*#__PURE__*/ react.createElement(Tooltip, {
+        })), allowCustomColor ? /*#__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: swatchClass,
             style: {
-                backgroundColor: isThemeColor ? "#fff" : value
+                backgroundColor: isThemeColor ? "#fff" : value,
+                borderColor: "var(--border-color-neutral-dimmed-darker)"
             },
             onClick: togglePicker
         }, /*#__PURE__*/ react.createElement(ReactComponent, {
-            className: iconPaletteStyle
+            className: iconPaletteClass
+        }))
+    }) : null, /*#__PURE__*/ react.createElement(Tooltip, {
+        content: /*#__PURE__*/ react.createElement("span", null, "No color"),
+        side: "bottom",
+        trigger: /*#__PURE__*/ react.createElement("button", {
+            className: noColorSwatchClass,
+            style: noColorSwatchStyle,
+            onClick: ()=>onChangeComplete(RESET_COLOR)
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "absolute inset-0",
+            style: noColorLineStyle
         }))
-    })) : null, /*#__PURE__*/ react.createElement("div", {
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "w-full",
         style: showPicker ? showPickerStyle : hidePickerStyle
     }, /*#__PURE__*/ react.createElement(ChromePicker, {
-        className: chromePickerStyle,
+        className: chromePickerClass,
         color: actualSelectedColor,
         disableAlpha: true,
         onChange: onColorChange,

package/components/LexicalColorPicker/LexicalColorPicker.js.map CHANGED Viewed

	@@ -1 +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":"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"}
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 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\n// Applied to reset the font color back to the theme/inherited default.\nconst RESET_COLOR = \"inherit\";\n\n// Some theme colors are bare CSS vars (e.g. `var(--wa-theme-color3)`) that may be undefined,\n// which renders black. Inject a fallback so an undefined color renders as a white swatch with\n// a gray border (bg falls back to white, border to gray) instead.\nconst BG_FALLBACK = \"var(--color-neutral-base)\";\nconst BORDER_FALLBACK = \"var(--border-color-neutral-dimmed-darker)\";\nconst withColorFallback = (color: string, fallback: string): string => {\n const trimmed = color.trim();\n return /^var\$\\s*--[^,()]+\$$/.test(trimmed)\n ? trimmed.replace(/\\)$/, `, ${fallback})`)\n : trimmed;\n};\n\n// Color menu (Figma Webiny DS): square 16px swatches, 2px radius, 6px gap, 8px padding.\n// max-w keeps ~5 swatches per row and lets it wrap for larger palettes.\nconst colorPickerClass = \"flex flex-wrap gap-[6px] p-sm max-w-[132px] bg-neutral-base\";\n// When the custom ChromePicker is open (allowCustomColors), the compact max-w would clip the\n// picker (the dropdown has overflow:hidden), so widen to fit the picker's natural ~225px width.\nconst colorPickerExpandedClass = \"flex flex-wrap gap-[6px] p-sm w-[257px] bg-neutral-base\";\n\nconst swatchClass =\n \"flex items-center justify-center size-4 rounded-[2px] cursor-pointer transition-transform hover:scale-110 \" +\n // 2px border (Figma DS) so light/white swatches stay visible.\n \"border-2 border-neutral-dimmed-darker\";\n\nconst iconPaletteClass = \"size-4 text-neutral-strong\";\n\n// \"No color\" swatch: bordered square with a diagonal line, resets the font color.\nconst noColorSwatchClass = `${swatchClass} bg-neutral-base relative overflow-hidden`;\n// No-color border is neutral-muted (Figma), applied inline to win over swatchClass's color.\nconst noColorSwatchStyle: React.CSSProperties = {\n borderColor: \"var(--border-color-neutral-muted)\"\n};\nconst noColorLineStyle: React.CSSProperties = {\n background:\n \"linear-gradient(45deg, transparent 44%, var(--border-color-neutral-muted) 44%, var(--border-color-neutral-muted) 56%, transparent 56%)\"\n};\n\n// Natural width, centered on its own full-width row below the swatches, with a top gap.\nconst chromePickerClass = \"mx-auto mt-sm shadow-none!\";\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.value === value);\n setIsThemeColor(isThemeColor);\n }, [themeColors, value]);\n\n return (\n <div className={showPicker ? colorPickerExpandedClass : colorPickerClass}>\n {themeColors.map(color => {\n return (\n <Tooltip\n key={color.id}\n content={<span>{color.label}</span>}\n side=\"bottom\"\n trigger={\n <button\n className={swatchClass}\n // Border matches the color so there's no gray ring on\n // colored swatches; the gray border only shows for light/white.\n style={{\n backgroundColor: withColorFallback(color.value, BG_FALLBACK),\n borderColor: withColorFallback(color.value, BORDER_FALLBACK)\n }}\n onClick={() => {\n onChangeComplete(color.value, color.id);\n }}\n />\n }\n />\n );\n })}\n\n {allowCustomColor ? (\n <Tooltip\n content={<span>Color picker</span>}\n side=\"bottom\"\n trigger={\n <button\n className={swatchClass}\n style={{\n backgroundColor: isThemeColor ? \"#fff\" : value,\n borderColor: \"var(--border-color-neutral-dimmed-darker)\"\n }}\n onClick={togglePicker}\n >\n <IconPalette className={iconPaletteClass} />\n </button>\n }\n />\n ) : null}\n\n <Tooltip\n content={<span>No color</span>}\n side=\"bottom\"\n trigger={\n <button\n className={noColorSwatchClass}\n style={noColorSwatchStyle}\n onClick={() => onChangeComplete(RESET_COLOR)}\n >\n <span className={\"absolute inset-0\"} style={noColorLineStyle} />\n </button>\n }\n />\n\n <div className={\"w-full\"} 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":["RESET_COLOR","BG_FALLBACK","BORDER_FALLBACK","withColorFallback","color","fallback","trimmed","colorPickerClass","colorPickerExpandedClass","swatchClass","iconPaletteClass","noColorSwatchClass","noColorSwatchStyle","noColorLineStyle","chromePickerClass","showPickerStyle","hidePickerStyle","LexicalColorPicker","value","onChange","onChangeComplete","allowCustomColor","showPicker","setShowPicker","useState","actualSelectedColor","setActualSelectedColor","isThemeColor","setIsThemeColor","useEffect","getColorValue","useCallback","rgb","alpha","onColorChange","event","customColor","onColorChangeComplete","togglePicker","e","state","theme","useRichTextEditor","themeColors","useMemo","Tooltip","IconPalette","ChromePicker"],"mappings":"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"}

package/components/LexicalColorPickerDropdown.js CHANGED Viewed

@@ -1,17 +1,19 @@
 import react from "react";
 import { DropDown, useFontColorPicker, useRichTextEditor } from "@webiny/lexical-editor";
 import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
-import { css } from "@emotion/css";
+import { ReactComponent } from "@webiny/icons/format_color_text.svg";
 const LexicalColorPickerDropdown = ({ allowCustomColor })=>{
     const { value, applyColor } = useFontColorPicker();
     const { theme } = useRichTextEditor();
-    const buttonColorSelection = css({
-        borderBottom: "3px solid " + value
-    });
     return /*#__PURE__*/ react.createElement(DropDown, {
         buttonClassName: "toolbar-item color-picker",
         buttonAriaLabel: "Formatting options for text color",
-        buttonIconClassName: "icon font-color " + buttonColorSelection,
+        buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
+            className: "icon",
+            style: value ? {
+                fill: value
+            } : void 0
+        }),
         stopCloseOnClickSelf: true,
         disabled: false,
         showScroll: false

package/components/LexicalColorPickerDropdown.js.map CHANGED Viewed

	@@ -1 +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"}
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 { ReactComponent as FontColorIcon } from \"@webiny/icons/format_color_text.svg\";\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 return (\n <DropDown\n buttonClassName=\"toolbar-item color-picker\"\n buttonAriaLabel={\"Formatting options for text color\"}\n buttonIcon={\n // Tint the A icon with the current font color.\n <FontColorIcon className=\"icon\" style={value ? { fill: value } : undefined} />\n }\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","DropDown","FontColorIcon","undefined","LexicalColorPicker"],"mappings":";;;;AASO,MAAMA,6BAA6B,CAAC,EACvCC,gBAAgB,EACc;IAC9B,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC;IAC9B,MAAM,EAAEC,KAAK,EAAE,GAAGC;IAElB,OAAO,WAAP,GACI,oBAACC,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,Y,cAEI,oBAACC,gBAAaA;YAAC,WAAU;YAAO,OAAON,QAAQ;gBAAE,MAAMA;YAAM,IAAIO;;QAErE,sBAAsB;QACtB,UAAU;QACV,YAAY;qBAEZ,oBAACC,oBAAkBA;QACf,OAAOR;QACP,kBAAkBC;QAClB,kBAAkBF,oBAAoBI,MAAM,iBAAiB;;AAI7E"}

package/components/TextAlignmentDropdown.js CHANGED Viewed

@@ -2,66 +2,85 @@ import react from "react";
 import { $isParentElementRTL } from "@lexical/selection";
 import { Divider, DropDown, DropDownItem, useTextAlignmentAction } from "@webiny/lexical-editor";
 import { useDeriveValueFromSelection } from "@webiny/lexical-editor/hooks/useCurrentSelection.js";
+import { ReactComponent } from "@webiny/icons/format_align_left.svg";
+import { ReactComponent as format_align_center_svg_ReactComponent } from "@webiny/icons/format_align_center.svg";
+import { ReactComponent as format_align_right_svg_ReactComponent } from "@webiny/icons/format_align_right.svg";
+import { ReactComponent as format_align_justify_svg_ReactComponent } from "@webiny/icons/format_align_justify.svg";
+import { ReactComponent as format_indent_increase_svg_ReactComponent } from "@webiny/icons/format_indent_increase.svg";
+import { ReactComponent as format_indent_decrease_svg_ReactComponent } from "@webiny/icons/format_indent_decrease.svg";
 const TextAlignmentDropdown = ()=>{
-    const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();
+    const { applyTextAlignment, outdentText, indentText, value } = useTextAlignmentAction();
     const isRTL = useDeriveValueFromSelection(({ rangeSelection })=>rangeSelection ? $isParentElementRTL(rangeSelection) : false);
+    const alignment = value || "left";
     return /*#__PURE__*/ react.createElement(DropDown, {
         buttonLabel: "Align",
-        buttonIconClassName: "icon left-align",
+        buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
+            className: "icon"
+        }),
         buttonClassName: "toolbar-item spaced alignment",
         buttonAriaLabel: "Formatting options for text alignment"
     }, /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             applyTextAlignment("left");
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon left-align"
+        className: "item",
+        selected: "left" === alignment
+    }, /*#__PURE__*/ react.createElement(ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Left Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             applyTextAlignment("center");
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon center-align"
+        className: "item",
+        selected: "center" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_center_svg_ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Center Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             applyTextAlignment("right");
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon right-align"
+        className: "item",
+        selected: "right" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_right_svg_ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Right Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             applyTextAlignment("justify");
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon justify-align"
+        className: "item",
+        selected: "justify" === alignment
+    }, /*#__PURE__*/ react.createElement(format_align_justify_svg_ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Justify Align")), /*#__PURE__*/ react.createElement(Divider, null), /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             outdentText();
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon " + (isRTL ? "indent" : "outdent")
+        className: "item",
+        selected: false
+    }, isRTL ? /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
+        className: "icon"
+    }) : /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Outdent")), /*#__PURE__*/ react.createElement(DropDownItem, {
         onClick: ()=>{
             indentText();
         },
-        className: "item"
-    }, /*#__PURE__*/ react.createElement("i", {
-        className: "icon " + (isRTL ? "outdent" : "indent")
+        className: "item",
+        selected: false
+    }, isRTL ? /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
+        className: "icon"
+    }) : /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
+        className: "icon"
     }), /*#__PURE__*/ react.createElement("span", {
         className: "text"
     }, "Indent")));

package/components/TextAlignmentDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"components/TextAlignmentDropdown.js","sources":["../../src/components/TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isParentElementRTL } from \"@lexical/selection\";\nimport { Divider, DropDown, DropDownItem, useTextAlignmentAction } from \"@webiny/lexical-editor\";\nimport { useDeriveValueFromSelection } from \"@webiny/lexical-editor/hooks/useCurrentSelection.js\";\n\nexport const TextAlignmentDropdown = () => {\n const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();\n\n const isRTL = useDeriveValueFromSelection(({ rangeSelection }) => {\n return rangeSelection ? $isParentElementRTL(rangeSelection) : false;\n });\n\n return (\n <DropDown\n buttonLabel=\"Align\"\n ~~buttonIconClassName~~=\"icon ~~left-align~~\"\n buttonClassName=\"toolbar-item spaced alignment\"\n buttonAriaLabel=\"Formatting options for text alignment\"\n >\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"left\");\n }}\n className=\"item\"\n >\n <i className=\"icon ~~left-align~~\" />\n <span className=\"text\">Left Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"center\");\n }}\n className=\"item\"\n >\n <i className=\"icon ~~center-align~~\" />\n <span className=\"text\">Center Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"right\");\n }}\n className=\"item\"\n >\n <i className=\"icon ~~right-align~~\" />\n <span className=\"text\">Right Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"justify\");\n }}\n className=\"item\"\n >\n <i className=\"icon ~~justify-align~~\" />\n <span className=\"text\">Justify Align</span>\n </DropDownItem>\n <Divider />\n <DropDownItem\n onClick={() => {\n outdentText();\n }}\n className=\"item\"\n >\n <i className~~={\~~"icon \" + ~~(isRTL~~ ? \"~~indent~~\" : \~~"outdent\")} />\~~n <span className=\"text\">Outdent</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n indentText();\n }}\n className=\"item\"\n >\n <i className~~={\~~"icon \" + ~~(isRTL~~ ? \"~~outdent~~\" : \~~"indent\")} />\~~n <span className=\"text\">Indent</span>\n </DropDownItem>\n </DropDown>\n );\n};\n"],"names":["TextAlignmentDropdown","applyTextAlignment","outdentText","indentText","useTextAlignmentAction","isRTL","useDeriveValueFromSelection","rangeSelection","$isParentElementRTL","DropDown","DropDownItem","Divider"],"mappings":"~~;;;;AAKO~~,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAE,GAAGC;~~IAExD~~,MAAMC,QAAQC,4BAA4B,CAAC,EAAEC,cAAc,EAAE,GAClDA,iBAAiBC,oBAAoBD,kBAAkB;~~IAGlE~~,OAAO,WAAP,GACI,~~oBAACE~~,UAAQA;QACL,aAAY;QACZ,~~qBAAoB~~;~~QACpB~~,iBAAgB;QAChB,iBAAgB;qBAEhB,oBAACC,cAAYA;QACT,SAAS;~~YACLT~~,mBAAmB;QACvB;QACA,WAAU;qBAEV,~~oBAAC~~;~~QAAE~~,WAAU;~~sBACb~~,oBAAC;QAAK,WAAU;OAAO,8BAE3B,~~oBAACS~~,cAAYA;QACT,SAAS;~~YACLT~~,mBAAmB;QACvB;QACA,WAAU;qBAEV,~~oBAAC~~;~~QAAE~~,WAAU;~~sBACb~~,oBAAC;QAAK,WAAU;OAAO,gCAE3B,~~oBAACS~~,cAAYA;QACT,SAAS;~~YACLT~~,mBAAmB;QACvB;QACA,WAAU;qBAEV,~~oBAAC~~;~~QAAE~~,WAAU;~~sBACb~~,oBAAC;QAAK,WAAU;OAAO,+BAE3B,~~oBAACS~~,cAAYA;QACT,SAAS;~~YACLT~~,mBAAmB;QACvB;QACA,WAAU;qBAEV,~~oBAAC~~;~~QAAE~~,WAAU;~~sBACb~~,oBAAC;QAAK,WAAU;OAAO,iCAE3B,~~oBAACU~~,SAAOA,OAAAA,WAAAA,GACR,~~oBAACD~~,cAAYA;QACT,SAAS;~~YACLR~~;QACJ;QACA,WAAU;~~qBAEV~~,~~oBAAC~~;~~QAAE~~,~~WAAW~~,~~UAAWG~~,~~CAAAA~~,~~QAAQ~~,~~WAAW~~,~~SAAQ~~;~~sBACpD~~,oBAAC;QAAK,WAAU;OAAO,2BAE3B,~~oBAACK~~,cAAYA;QACT,SAAS;~~YACLP~~;QACJ;QACA,WAAU;~~qBAEV~~,~~oBAAC~~;~~QAAE~~,~~WAAW~~,~~UAAWE~~,~~CAAAA~~,~~QAAQ~~,~~YAAY~~,~~QAAO~~;~~sBACpD~~,oBAAC;QAAK,WAAU;OAAO;AAIvC"}
1	+ {"version":3,"file":"components/TextAlignmentDropdown.js","sources":["../../src/components/TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { $isParentElementRTL } from \"@lexical/selection\";\nimport { Divider, DropDown, DropDownItem, useTextAlignmentAction } from \"@webiny/lexical-editor\";\nimport { useDeriveValueFromSelection } from \"@webiny/lexical-editor/hooks/useCurrentSelection.js\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ReactComponent as AlignJustifyIcon } from \"@webiny/icons/format_align_justify.svg\";\nimport { ReactComponent as IndentIcon } from \"@webiny/icons/format_indent_increase.svg\";\nimport { ReactComponent as OutdentIcon } from \"@webiny/icons/format_indent_decrease.svg\";\n\nexport const TextAlignmentDropdown = () => {\n const { applyTextAlignment, outdentText, indentText, value } = useTextAlignmentAction();\n\n const isRTL = useDeriveValueFromSelection(({ rangeSelection }) => {\n return rangeSelection ? $isParentElementRTL(rangeSelection) : false;\n });\n\n // Empty format defaults to left alignment.\n const alignment = value \|\| \"left\";\n\n return (\n <DropDown\n buttonLabel=\"Align\"\n buttonIcon={<AlignLeftIcon className=\"icon\" />}\n buttonClassName=\"toolbar-item spaced alignment\"\n buttonAriaLabel=\"Formatting options for text alignment\"\n >\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"left\");\n }}\n className=\"item\"\n selected={alignment === \"left\"}\n >\n <AlignLeftIcon className=\"icon\" />\n <span className=\"text\">Left Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"center\");\n }}\n className=\"item\"\n selected={alignment === \"center\"}\n >\n <AlignCenterIcon className=\"icon\" />\n <span className=\"text\">Center Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"right\");\n }}\n className=\"item\"\n selected={alignment === \"right\"}\n >\n <AlignRightIcon className=\"icon\" />\n <span className=\"text\">Right Align</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n applyTextAlignment(\"justify\");\n }}\n className=\"item\"\n selected={alignment === \"justify\"}\n >\n <AlignJustifyIcon className=\"icon\" />\n <span className=\"text\">Justify Align</span>\n </DropDownItem>\n <Divider />\n <DropDownItem\n onClick={() => {\n outdentText();\n }}\n className=\"item\"\n selected={false}\n >\n {isRTL ? <IndentIcon className=\"icon\" /> : <OutdentIcon className=\"icon\" />}\n <span className=\"text\">Outdent</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n indentText();\n }}\n className=\"item\"\n selected={false}\n >\n {isRTL ? <OutdentIcon className=\"icon\" /> : <IndentIcon className=\"icon\" />}\n <span className=\"text\">Indent</span>\n </DropDownItem>\n </DropDown>\n );\n};\n"],"names":["TextAlignmentDropdown","applyTextAlignment","outdentText","indentText","value","useTextAlignmentAction","isRTL","useDeriveValueFromSelection","rangeSelection","$isParentElementRTL","alignment","DropDown","AlignLeftIcon","DropDownItem","AlignCenterIcon","AlignRightIcon","AlignJustifyIcon","Divider","IndentIcon","OutdentIcon"],"mappings":";;;;;;;;;;AAWO,MAAMA,wBAAwB;IACjC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAE,GAAGC;IAE/D,MAAMC,QAAQC,4BAA4B,CAAC,EAAEC,cAAc,EAAE,GAClDA,iBAAiBC,oBAAoBD,kBAAkB;IAIlE,MAAME,YAAYN,SAAS;IAE3B,OAAO,WAAP,GACI,oBAACO,UAAQA;QACL,aAAY;QACZ,0BAAY,oBAACC,gBAAaA;YAAC,WAAU;;QACrC,iBAAgB;QAChB,iBAAgB;qBAEhB,oBAACC,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,WAAdA;qBAEV,oBAACE,gBAAaA;QAAC,WAAU;sBACzB,oBAAC;QAAK,WAAU;OAAO,8BAE3B,oBAACC,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,aAAdA;qBAEV,oBAACI,wCAAeA;QAAC,WAAU;sBAC3B,oBAAC;QAAK,WAAU;OAAO,gCAE3B,oBAACD,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,YAAdA;qBAEV,oBAACK,uCAAcA;QAAC,WAAU;sBAC1B,oBAAC;QAAK,WAAU;OAAO,+BAE3B,oBAACF,cAAYA;QACT,SAAS;YACLZ,mBAAmB;QACvB;QACA,WAAU;QACV,UAAUS,AAAc,cAAdA;qBAEV,oBAACM,yCAAgBA;QAAC,WAAU;sBAC5B,oBAAC;QAAK,WAAU;OAAO,iCAE3B,oBAACC,SAAOA,OAAAA,WAAAA,GACR,oBAACJ,cAAYA;QACT,SAAS;YACLX;QACJ;QACA,WAAU;QACV,UAAU;OAETI,QAAQ,WAARA,GAAQ,oBAACY,2CAAUA;QAAC,WAAU;uBAAY,oBAACC,2CAAWA;QAAC,WAAU;sBAClE,oBAAC;QAAK,WAAU;OAAO,2BAE3B,oBAACN,cAAYA;QACT,SAAS;YACLV;QACJ;QACA,WAAU;QACV,UAAU;OAETG,QAAQ,WAARA,GAAQ,oBAACa,2CAAWA;QAAC,WAAU;uBAAY,oBAACD,2CAAUA;QAAC,WAAU;sBAClE,oBAAC;QAAK,WAAU;OAAO;AAIvC"}

package/package.json CHANGED Viewed

@@ -1,24 +1,23 @@
 {
 	"name": "@webiny/lexical-editor-actions",
-	"version": "6.4.11",
+	"version": "6.6.0-alpha.1",
 	"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.11",
-		"@webiny/lexical-editor": "6.4.11",
+		"@lexical/selection": "0.49.0",
+		"@webiny/admin-ui": "6.6.0-alpha.1",
+		"@webiny/icons": "6.6.0-alpha.1",
+		"@webiny/lexical-editor": "6.6.0-alpha.1",
 		"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.11"
+		"@webiny/build-tools": "6.6.0-alpha.1"
 	},
 	"publishConfig": {
 		"access": "public"