@webiny/lexical-editor-actions 6.6.0-alpha.0 → 6.6.0-alpha.2
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.
- package/components/LexicalColorPicker/LexicalColorPicker.js +42 -19
- package/components/LexicalColorPicker/LexicalColorPicker.js.map +1 -1
- package/components/LexicalColorPickerDropdown.js +13 -12
- package/components/LexicalColorPickerDropdown.js.map +1 -1
- package/components/TextAlignmentDropdown.js +39 -20
- package/components/TextAlignmentDropdown.js.map +1 -1
- package/package.json +6 -5
|
@@ -3,12 +3,25 @@ import { ChromePicker } from "react-color";
|
|
|
3
3
|
import { Tooltip } from "@webiny/admin-ui";
|
|
4
4
|
import { ReactComponent } from "./round-color_lens-24px.js";
|
|
5
5
|
import { useRichTextEditor } from "@webiny/lexical-editor";
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
|
|
6
|
+
const RESET_COLOR = "inherit";
|
|
7
|
+
const BG_FALLBACK = "var(--color-neutral-base)";
|
|
8
|
+
const BORDER_FALLBACK = "var(--border-color-neutral-dimmed-darker)";
|
|
9
|
+
const withColorFallback = (color, fallback)=>{
|
|
10
|
+
const trimmed = color.trim();
|
|
11
|
+
return /^var\(\s*--[^,()]+\)$/.test(trimmed) ? trimmed.replace(/\)$/, `, ${fallback})`) : trimmed;
|
|
12
|
+
};
|
|
13
|
+
const colorPickerClass = "flex flex-wrap gap-[6px] p-sm max-w-[132px] bg-neutral-base";
|
|
14
|
+
const colorPickerExpandedClass = "flex flex-wrap gap-[6px] p-sm w-[257px] bg-neutral-base";
|
|
15
|
+
const swatchClass = "flex items-center justify-center size-4 rounded-[2px] cursor-pointer transition-transform hover:scale-110 border-2 border-neutral-dimmed-darker";
|
|
16
|
+
const iconPaletteClass = "size-4 text-neutral-strong";
|
|
17
|
+
const noColorSwatchClass = `${swatchClass} bg-neutral-base relative overflow-hidden`;
|
|
18
|
+
const noColorSwatchStyle = {
|
|
19
|
+
borderColor: "var(--border-color-neutral-muted)"
|
|
20
|
+
};
|
|
21
|
+
const noColorLineStyle = {
|
|
22
|
+
background: "linear-gradient(45deg, transparent 44%, var(--border-color-neutral-muted) 44%, var(--border-color-neutral-muted) 56%, transparent 56%)"
|
|
23
|
+
};
|
|
24
|
+
const chromePickerClass = "mx-auto mt-sm shadow-none!";
|
|
12
25
|
const showPickerStyle = {
|
|
13
26
|
display: "block"
|
|
14
27
|
};
|
|
@@ -48,44 +61,54 @@ const LexicalColorPicker = ({ value, onChange, onChangeComplete, allowCustomColo
|
|
|
48
61
|
const { theme } = useRichTextEditor();
|
|
49
62
|
const themeColors = useMemo(()=>theme?.colors ?? [], []);
|
|
50
63
|
useEffect(()=>{
|
|
51
|
-
const isThemeColor = themeColors.some((color)=>color.
|
|
64
|
+
const isThemeColor = themeColors.some((color)=>color.value === value);
|
|
52
65
|
setIsThemeColor(isThemeColor);
|
|
53
66
|
}, [
|
|
54
67
|
themeColors,
|
|
55
68
|
value
|
|
56
69
|
]);
|
|
57
70
|
return /*#__PURE__*/ react.createElement("div", {
|
|
58
|
-
className: colorPickerClass
|
|
59
|
-
}, themeColors.map((color)=>/*#__PURE__*/ react.createElement(
|
|
71
|
+
className: showPicker ? colorPickerExpandedClass : colorPickerClass
|
|
72
|
+
}, themeColors.map((color)=>/*#__PURE__*/ react.createElement(Tooltip, {
|
|
60
73
|
key: color.id,
|
|
61
|
-
className: color.id === value ? `${colorBoxClass} ${selectedColorClass}` : colorBoxClass
|
|
62
|
-
}, /*#__PURE__*/ react.createElement(Tooltip, {
|
|
63
74
|
content: /*#__PURE__*/ react.createElement("span", null, color.label),
|
|
64
75
|
side: "bottom",
|
|
65
76
|
trigger: /*#__PURE__*/ react.createElement("button", {
|
|
66
|
-
className:
|
|
77
|
+
className: swatchClass,
|
|
67
78
|
style: {
|
|
68
|
-
backgroundColor: color.value
|
|
79
|
+
backgroundColor: withColorFallback(color.value, BG_FALLBACK),
|
|
80
|
+
borderColor: withColorFallback(color.value, BORDER_FALLBACK)
|
|
69
81
|
},
|
|
70
82
|
onClick: ()=>{
|
|
71
83
|
onChangeComplete(color.value, color.id);
|
|
72
84
|
}
|
|
73
85
|
})
|
|
74
|
-
}))
|
|
75
|
-
className: value && !isThemeColor ? `${colorBoxClass} ${selectedColorClass}` : colorBoxClass
|
|
76
|
-
}, /*#__PURE__*/ react.createElement(Tooltip, {
|
|
86
|
+
})), allowCustomColor ? /*#__PURE__*/ react.createElement(Tooltip, {
|
|
77
87
|
content: /*#__PURE__*/ react.createElement("span", null, "Color picker"),
|
|
78
88
|
side: "bottom",
|
|
79
89
|
trigger: /*#__PURE__*/ react.createElement("button", {
|
|
80
|
-
className:
|
|
90
|
+
className: swatchClass,
|
|
81
91
|
style: {
|
|
82
|
-
backgroundColor: isThemeColor ? "#fff" : value
|
|
92
|
+
backgroundColor: isThemeColor ? "#fff" : value,
|
|
93
|
+
borderColor: "var(--border-color-neutral-dimmed-darker)"
|
|
83
94
|
},
|
|
84
95
|
onClick: togglePicker
|
|
85
96
|
}, /*#__PURE__*/ react.createElement(ReactComponent, {
|
|
86
97
|
className: iconPaletteClass
|
|
87
98
|
}))
|
|
88
|
-
})
|
|
99
|
+
}) : null, /*#__PURE__*/ react.createElement(Tooltip, {
|
|
100
|
+
content: /*#__PURE__*/ react.createElement("span", null, "No color"),
|
|
101
|
+
side: "bottom",
|
|
102
|
+
trigger: /*#__PURE__*/ react.createElement("button", {
|
|
103
|
+
className: noColorSwatchClass,
|
|
104
|
+
style: noColorSwatchStyle,
|
|
105
|
+
onClick: ()=>onChangeComplete(RESET_COLOR)
|
|
106
|
+
}, /*#__PURE__*/ react.createElement("span", {
|
|
107
|
+
className: "absolute inset-0",
|
|
108
|
+
style: noColorLineStyle
|
|
109
|
+
}))
|
|
110
|
+
}), /*#__PURE__*/ react.createElement("div", {
|
|
111
|
+
className: "w-full",
|
|
89
112
|
style: showPicker ? showPickerStyle : hidePickerStyle
|
|
90
113
|
}, /*#__PURE__*/ react.createElement(ChromePicker, {
|
|
91
114
|
className: chromePickerClass,
|
|
@@ -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 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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"}
|
|
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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"}
|
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import react from "react";
|
|
2
|
-
import { DropDown, useFontColorPicker } from "@webiny/lexical-editor";
|
|
2
|
+
import { DropDown, useFontColorPicker, useRichTextEditor } from "@webiny/lexical-editor";
|
|
3
3
|
import { LexicalColorPicker } from "./LexicalColorPicker/LexicalColorPicker.js";
|
|
4
|
-
|
|
4
|
+
import { ReactComponent } from "@webiny/icons/format_color_text.svg";
|
|
5
|
+
const LexicalColorPickerDropdown = ({ allowCustomColor })=>{
|
|
5
6
|
const { value, applyColor } = useFontColorPicker();
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
"--wby-font-color": value
|
|
9
|
-
};
|
|
10
|
-
return /*#__PURE__*/ react.createElement("span", {
|
|
11
|
-
style: wrapperStyle
|
|
12
|
-
}, /*#__PURE__*/ react.createElement(DropDown, {
|
|
7
|
+
const { theme } = useRichTextEditor();
|
|
8
|
+
return /*#__PURE__*/ react.createElement(DropDown, {
|
|
13
9
|
buttonClassName: "toolbar-item color-picker",
|
|
14
10
|
buttonAriaLabel: "Formatting options for text color",
|
|
15
|
-
|
|
11
|
+
buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
|
|
12
|
+
className: "icon",
|
|
13
|
+
style: value ? {
|
|
14
|
+
fill: value
|
|
15
|
+
} : void 0
|
|
16
|
+
}),
|
|
16
17
|
stopCloseOnClickSelf: true,
|
|
17
18
|
disabled: false,
|
|
18
19
|
showScroll: false
|
|
19
20
|
}, /*#__PURE__*/ react.createElement(LexicalColorPicker, {
|
|
20
21
|
value: value,
|
|
21
22
|
onChangeComplete: applyColor,
|
|
22
|
-
allowCustomColor: allowCustomColor
|
|
23
|
-
}))
|
|
23
|
+
allowCustomColor: allowCustomColor ?? theme.allowCustomColors
|
|
24
|
+
}));
|
|
24
25
|
};
|
|
25
26
|
export { LexicalColorPickerDropdown };
|
|
26
27
|
|
|
@@ -1 +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\";\n\nexport interface LexicalColorPickerDropdownProps {\n allowCustomColor?: boolean;\n}\n\nexport const LexicalColorPickerDropdown = ({\n allowCustomColor
|
|
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"}
|
|
@@ -2,66 +2,85 @@ import react from "react";
|
|
|
2
2
|
import { $isParentElementRTL } from "@lexical/selection";
|
|
3
3
|
import { Divider, DropDown, DropDownItem, useTextAlignmentAction } from "@webiny/lexical-editor";
|
|
4
4
|
import { useDeriveValueFromSelection } from "@webiny/lexical-editor/hooks/useCurrentSelection.js";
|
|
5
|
+
import { ReactComponent } from "@webiny/icons/format_align_left.svg";
|
|
6
|
+
import { ReactComponent as format_align_center_svg_ReactComponent } from "@webiny/icons/format_align_center.svg";
|
|
7
|
+
import { ReactComponent as format_align_right_svg_ReactComponent } from "@webiny/icons/format_align_right.svg";
|
|
8
|
+
import { ReactComponent as format_align_justify_svg_ReactComponent } from "@webiny/icons/format_align_justify.svg";
|
|
9
|
+
import { ReactComponent as format_indent_increase_svg_ReactComponent } from "@webiny/icons/format_indent_increase.svg";
|
|
10
|
+
import { ReactComponent as format_indent_decrease_svg_ReactComponent } from "@webiny/icons/format_indent_decrease.svg";
|
|
5
11
|
const TextAlignmentDropdown = ()=>{
|
|
6
|
-
const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();
|
|
12
|
+
const { applyTextAlignment, outdentText, indentText, value } = useTextAlignmentAction();
|
|
7
13
|
const isRTL = useDeriveValueFromSelection(({ rangeSelection })=>rangeSelection ? $isParentElementRTL(rangeSelection) : false);
|
|
14
|
+
const alignment = value || "left";
|
|
8
15
|
return /*#__PURE__*/ react.createElement(DropDown, {
|
|
9
16
|
buttonLabel: "Align",
|
|
10
|
-
|
|
17
|
+
buttonIcon: /*#__PURE__*/ react.createElement(ReactComponent, {
|
|
18
|
+
className: "icon"
|
|
19
|
+
}),
|
|
11
20
|
buttonClassName: "toolbar-item spaced alignment",
|
|
12
21
|
buttonAriaLabel: "Formatting options for text alignment"
|
|
13
22
|
}, /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
14
23
|
onClick: ()=>{
|
|
15
24
|
applyTextAlignment("left");
|
|
16
25
|
},
|
|
17
|
-
className: "item"
|
|
18
|
-
|
|
19
|
-
|
|
26
|
+
className: "item",
|
|
27
|
+
selected: "left" === alignment
|
|
28
|
+
}, /*#__PURE__*/ react.createElement(ReactComponent, {
|
|
29
|
+
className: "icon"
|
|
20
30
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
21
31
|
className: "text"
|
|
22
32
|
}, "Left Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
23
33
|
onClick: ()=>{
|
|
24
34
|
applyTextAlignment("center");
|
|
25
35
|
},
|
|
26
|
-
className: "item"
|
|
27
|
-
|
|
28
|
-
|
|
36
|
+
className: "item",
|
|
37
|
+
selected: "center" === alignment
|
|
38
|
+
}, /*#__PURE__*/ react.createElement(format_align_center_svg_ReactComponent, {
|
|
39
|
+
className: "icon"
|
|
29
40
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
30
41
|
className: "text"
|
|
31
42
|
}, "Center Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
32
43
|
onClick: ()=>{
|
|
33
44
|
applyTextAlignment("right");
|
|
34
45
|
},
|
|
35
|
-
className: "item"
|
|
36
|
-
|
|
37
|
-
|
|
46
|
+
className: "item",
|
|
47
|
+
selected: "right" === alignment
|
|
48
|
+
}, /*#__PURE__*/ react.createElement(format_align_right_svg_ReactComponent, {
|
|
49
|
+
className: "icon"
|
|
38
50
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
39
51
|
className: "text"
|
|
40
52
|
}, "Right Align")), /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
41
53
|
onClick: ()=>{
|
|
42
54
|
applyTextAlignment("justify");
|
|
43
55
|
},
|
|
44
|
-
className: "item"
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
className: "item",
|
|
57
|
+
selected: "justify" === alignment
|
|
58
|
+
}, /*#__PURE__*/ react.createElement(format_align_justify_svg_ReactComponent, {
|
|
59
|
+
className: "icon"
|
|
47
60
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
48
61
|
className: "text"
|
|
49
62
|
}, "Justify Align")), /*#__PURE__*/ react.createElement(Divider, null), /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
50
63
|
onClick: ()=>{
|
|
51
64
|
outdentText();
|
|
52
65
|
},
|
|
53
|
-
className: "item"
|
|
54
|
-
|
|
55
|
-
|
|
66
|
+
className: "item",
|
|
67
|
+
selected: false
|
|
68
|
+
}, isRTL ? /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
|
|
69
|
+
className: "icon"
|
|
70
|
+
}) : /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
|
|
71
|
+
className: "icon"
|
|
56
72
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
57
73
|
className: "text"
|
|
58
74
|
}, "Outdent")), /*#__PURE__*/ react.createElement(DropDownItem, {
|
|
59
75
|
onClick: ()=>{
|
|
60
76
|
indentText();
|
|
61
77
|
},
|
|
62
|
-
className: "item"
|
|
63
|
-
|
|
64
|
-
|
|
78
|
+
className: "item",
|
|
79
|
+
selected: false
|
|
80
|
+
}, isRTL ? /*#__PURE__*/ react.createElement(format_indent_decrease_svg_ReactComponent, {
|
|
81
|
+
className: "icon"
|
|
82
|
+
}) : /*#__PURE__*/ react.createElement(format_indent_increase_svg_ReactComponent, {
|
|
83
|
+
className: "icon"
|
|
65
84
|
}), /*#__PURE__*/ react.createElement("span", {
|
|
66
85
|
className: "text"
|
|
67
86
|
}, "Indent")));
|
|
@@ -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
|
|
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
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor-actions",
|
|
3
|
-
"version": "6.6.0-alpha.
|
|
3
|
+
"version": "6.6.0-alpha.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./index.js",
|
|
7
7
|
"./*": "./*"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@lexical/selection": "0.
|
|
11
|
-
"@webiny/admin-ui": "6.6.0-alpha.
|
|
12
|
-
"@webiny/
|
|
10
|
+
"@lexical/selection": "0.49.0",
|
|
11
|
+
"@webiny/admin-ui": "6.6.0-alpha.2",
|
|
12
|
+
"@webiny/icons": "6.6.0-alpha.2",
|
|
13
|
+
"@webiny/lexical-editor": "6.6.0-alpha.2",
|
|
13
14
|
"react": "18.3.1",
|
|
14
15
|
"react-color": "2.19.3",
|
|
15
16
|
"react-dom": "18.3.1"
|
|
16
17
|
},
|
|
17
18
|
"devDependencies": {
|
|
18
19
|
"@types/react-color": "3.0.13",
|
|
19
|
-
"@webiny/build-tools": "6.6.0-alpha.
|
|
20
|
+
"@webiny/build-tools": "6.6.0-alpha.2"
|
|
20
21
|
},
|
|
21
22
|
"publishConfig": {
|
|
22
23
|
"access": "public"
|