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

package/components/LexicalColorPicker/LexicalColorPicker.js

@@ -97,11 +97,14 @@ const styles = {
     })
 };
 const chromePickerStyle = css({
-    width: "270px !important",
-    margin: "15px -15px -15px -15px"
+    boxShadow: "none !important",
+    marginTop: "15px",
+    marginLeft: "-15px",
+    width: "240px !important"
 });
 const showPickerStyle = {
-    display: "block"
+    display: "block",
+    width: "100%"
 };
 const hidePickerStyle = {
     display: "none"

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    width: \"270px !important\",\n    margin: \"15px -15px -15px -15px\"\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\" };\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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"}
+{"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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"}

package/components/LexicalColorPickerDropdown.js

@@ -1,9 +1,10 @@
 import react from "react";
-import { DropDown, useFontColorPicker } from "@webiny/lexical-editor";
+import { DropDown, useFontColorPicker, useRichTextEditor } from "@webiny/lexical-editor";
 import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
 import { css } from "@emotion/css";
-const LexicalColorPickerDropdown = ({ allowCustomColor = false })=>{
+const LexicalColorPickerDropdown = ({ allowCustomColor })=>{
     const { value, applyColor } = useFontColorPicker();
+    const { theme } = useRichTextEditor();
     const buttonColorSelection = css({
         borderBottom: "3px solid " + value
     });
@@ -17,7 +18,7 @@ const LexicalColorPickerDropdown = ({ allowCustomColor = false })=>{
     }, /*#__PURE__*/ react.createElement(LexicalColorPicker, {
         value: value,
         onChangeComplete: applyColor,
-        allowCustomColor: allowCustomColor
+        allowCustomColor: allowCustomColor ?? theme.allowCustomColors
     }));
 };
 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, 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 = false\n}: LexicalColorPickerDropdownProps) => {\n    const { value, applyColor } = useFontColorPicker();\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}\n            />\n        </DropDown>\n    );\n};\n"],"names":["LexicalColorPickerDropdown","allowCustomColor","value","applyColor","useFontColorPicker","buttonColorSelection","css","DropDown","LexicalColorPicker"],"mappings":";;;;AASO,MAAMA,6BAA6B,CAAC,EACvCC,mBAAmB,KAAK,EACM;IAC9B,MAAM,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGC;IAE9B,MAAMC,uBAAuBC,IAAI;QAC7B,cAAc,eAAeJ;IACjC;IAEA,OAAO,WAAP,GACI,oBAACK,UAAQA;QACL,iBAAgB;QAChB,iBAAiB;QACjB,qBAAqB,qBAAqBF;QAC1C,sBAAsB;QACtB,UAAU;QACV,YAAY;qBAEZ,oBAACG,oBAAkBA;QACf,OAAON;QACP,kBAAkBC;QAClB,kBAAkBF;;AAIlC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/lexical-editor-actions",
-	"version": "6.4.4",
+	"version": "6.4.5-beta.0",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -10,15 +10,15 @@
 		"@emotion/css": "11.13.5",
 		"@emotion/styled": "11.14.1",
 		"@lexical/selection": "0.46.0",
-		"@webiny/admin-ui": "6.4.4",
-		"@webiny/lexical-editor": "6.4.4",
+		"@webiny/admin-ui": "6.4.5-beta.0",
+		"@webiny/lexical-editor": "6.4.5-beta.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.4"
+		"@webiny/build-tools": "6.4.5-beta.0"
 	},
 	"publishConfig": {
 		"access": "public"