@webiny/lexical-editor-actions 5.39.0 → 5.39.1-beta.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.
- package/LexicalEditorActions.js +1 -2
- package/LexicalEditorActions.js.map +1 -1
- package/components/LexicalColorPicker/LexicalColorPicker.js +1 -2
- package/components/LexicalColorPicker/LexicalColorPicker.js.map +1 -1
- package/components/LexicalColorPickerDropdown.js +1 -2
- package/components/LexicalColorPickerDropdown.js.map +1 -1
- package/components/TextAlignmentDropdown.js +1 -2
- package/components/TextAlignmentDropdown.js.map +1 -1
- package/package.json +6 -6
package/LexicalEditorActions.js
CHANGED
|
@@ -12,13 +12,12 @@ var _TextAlignmentDropdown = require("./components/TextAlignmentDropdown");
|
|
|
12
12
|
/*
|
|
13
13
|
* Lexical editor configuration and components with global composition scope
|
|
14
14
|
*/
|
|
15
|
-
var LexicalEditorActions = function LexicalEditorActions() {
|
|
15
|
+
var LexicalEditorActions = exports.LexicalEditorActions = function LexicalEditorActions() {
|
|
16
16
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
|
|
17
17
|
element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
|
|
18
18
|
}), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TextAlignmentAction.TextAlignmentDropDown, {
|
|
19
19
|
element: /*#__PURE__*/_react.default.createElement(_TextAlignmentDropdown.TextAlignmentDropdown, null)
|
|
20
20
|
}));
|
|
21
21
|
};
|
|
22
|
-
exports.LexicalEditorActions = LexicalEditorActions;
|
|
23
22
|
|
|
24
23
|
//# sourceMappingURL=LexicalEditorActions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_lexicalEditor","require","_react","_interopRequireDefault","_LexicalColorPickerDropdown","_TextAlignmentDropdown","LexicalEditorActions","default","createElement","Fragment","FontColorAction","ColorPicker","element","LexicalColorPickerDropdown","TextAlignmentAction","TextAlignmentDropDown","TextAlignmentDropdown"
|
|
1
|
+
{"version":3,"names":["_lexicalEditor","require","_react","_interopRequireDefault","_LexicalColorPickerDropdown","_TextAlignmentDropdown","LexicalEditorActions","exports","default","createElement","Fragment","FontColorAction","ColorPicker","element","LexicalColorPickerDropdown","TextAlignmentAction","TextAlignmentDropDown","TextAlignmentDropdown"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { TextAlignmentAction } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\nimport { TextAlignmentDropdown } from \"~/components/TextAlignmentDropdown\";\n\n/*\n * Lexical editor configuration and components with global composition scope\n */\nexport const LexicalEditorActions = () => {\n return (\n <>\n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n <TextAlignmentAction.TextAlignmentDropDown element={<TextAlignmentDropdown />} />\n </>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,cAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,2BAAA,GAAAH,OAAA;AAEA,IAAAI,sBAAA,GAAAJ,OAAA;AAEA;AACA;AACA;AACO,IAAMK,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACtC,oBACIJ,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAAAP,MAAA,CAAAM,OAAA,CAAAE,QAAA,qBACIR,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACT,cAAA,CAAAW,eAAe,CAACC,WAAW;IAACC,OAAO,eAAEX,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACL,2BAAA,CAAAU,0BAA0B,MAAE;EAAE,CAAE,CAAC,eACxEZ,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACT,cAAA,CAAAe,mBAAmB,CAACC,qBAAqB;IAACH,OAAO,eAAEX,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACJ,sBAAA,CAAAY,qBAAqB,MAAE;EAAE,CAAE,CAClF,CAAC;AAEX,CAAC"}
|
|
@@ -114,7 +114,7 @@ var styles = {
|
|
|
114
114
|
height: "100%"
|
|
115
115
|
}, "label:color;")
|
|
116
116
|
};
|
|
117
|
-
var LexicalColorPicker = function LexicalColorPicker(_ref) {
|
|
117
|
+
var LexicalColorPicker = exports.LexicalColorPicker = function LexicalColorPicker(_ref) {
|
|
118
118
|
var value = _ref.value,
|
|
119
119
|
onChange = _ref.onChange,
|
|
120
120
|
onChangeComplete = _ref.onChangeComplete;
|
|
@@ -198,6 +198,5 @@ var LexicalColorPicker = function LexicalColorPicker(_ref) {
|
|
|
198
198
|
onChangeComplete: onColorChangeComplete
|
|
199
199
|
}));
|
|
200
200
|
};
|
|
201
|
-
exports.LexicalColorPicker = LexicalColorPicker;
|
|
202
201
|
|
|
203
202
|
//# sourceMappingURL=LexicalColorPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_interopRequireDefault","_emotion","_usePageElements","_classnames2","_reactColor","_roundColor_lens24px","ColorPickerStyle","styled","target","label","position","display","flexWrap","justifyContent","width","padding","backgroundColor","ColorBox","cursor","height","margin","borderRadius","Color","border","transition","alignItems","boxShadow","content","top","left","zIndex","opacity","transform","transparent","css","backgroundSize","backgroundImage","iconPaletteStyle","marginTop","color","COLORS","lightGray","gray","darkGray","darkestGray","black","styles","selectedColor","button","boxSizing","outline","LexicalColorPicker","_ref","value","onChange","onChangeComplete","_useState","useState","_useState2","_slicedToArray2","default","showPicker","setShowPicker","_useState3","_useState4","actualSelectedColor","setActualSelectedColor","themeColor","getColorValue","useCallback","rgb","concat","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","_ref2","togglePicker","e","stopPropagation","pageElements","usePageElements","themeColors","colors","theme","key","createElement","Object","keys","map","index","className","style","onClick","classnames","_defineProperty2","ReactComponent","ChromePicker","exports"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements/hooks/usePageElements\";\nimport classnames from \"classnames\";\nimport { ChromePicker } from \"react-color\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\n\nconst ColorPickerStyle = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\",\n width: 225,\n padding: 0,\n backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n cursor: \"pointer\",\n width: 50,\n height: 40,\n margin: 10,\n borderRadius: 2\n});\n\nconst Color = styled(\"button\")({\n cursor: \"pointer\",\n width: 40,\n height: 30,\n border: \"1px solid var(--mdc-theme-on-background)\",\n transition: \"transform 0.2s, scale 0.2s\",\n display: \"flex\",\n alignItems: \"center\",\n \"&::after\": {\n boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\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.25)\",\n \"&::after\": {\n opacity: 1\n }\n }\n});\n\nconst transparent = css({\n backgroundSize: \"10px 10px\",\n backgroundImage:\n \"linear-gradient( 45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient(-45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient( 45deg, transparent 75%, #555 75%),\" +\n \"linear-gradient(-45deg, transparent 75%, #555 75%)\"\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: \"0px 0px 0px 2px var(--mdc-theme-secondary)\"\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\ninterface LexicalColorPickerProps {\n value: string;\n onChange?: (color: string) => void;\n onChangeComplete: (color: string, name?: string) => void;\n handlerClassName?: string;\n}\n\nexport const LexicalColorPicker = ({\n value,\n onChange,\n onChangeComplete\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 let themeColor = false;\n\n const getColorValue = useCallback(rgb => {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;\n }, []);\n\n const onColorChange = useCallback(\n (color, event) => {\n event.preventDefault();\n // controls of the picker are updated as user moves the mouse\n const customColor = getColorValue(color.rgb);\n setActualSelectedColor(customColor);\n if (typeof onChange === \"function\") {\n onChange(customColor);\n }\n },\n [onChange]\n );\n\n const onColorChangeComplete = useCallback(\n ({ rgb }, event) => {\n setActualSelectedColor(value);\n onChangeComplete(getColorValue(rgb));\n event.preventDefault();\n },\n [onChangeComplete]\n );\n\n const togglePicker = useCallback(e => {\n e.stopPropagation();\n setShowPicker(!showPicker);\n }, []);\n\n const pageElements = usePageElements();\n\n const themeColors: Record<string, any> = {};\n const colors = pageElements.theme?.styles?.colors;\n if (colors) {\n for (const key in colors) {\n if (colors[key]) {\n themeColors[key] = colors[key];\n }\n }\n }\n\n return (\n <ColorPickerStyle>\n {Object.keys(themeColors).map((key, index) => {\n const color = themeColors[key];\n\n if (color === value || value === \"transparent\") {\n themeColor = true;\n }\n return (\n <ColorBox key={index}>\n <Color\n className={key === value ? styles.selectedColor : \"\"}\n style={{ backgroundColor: color }}\n onClick={() => {\n // With page elements implementation, we want to store the color key and\n // then the actual color will be retrieved from the theme object.\n const colors = pageElements.theme?.styles?.colors;\n onChangeComplete(colors[key], key);\n }}\n />\n </ColorBox>\n );\n })}\n\n <ColorBox>\n <Color\n className={classnames(transparent, {\n [styles.selectedColor]: value === \"transparent\"\n })}\n onClick={() => {\n onChangeComplete(\"transparent\");\n }}\n />\n </ColorBox>\n\n <ColorBox>\n <Color\n className={value && !themeColor ? styles.selectedColor : \"\"}\n style={{ backgroundColor: themeColor ? \"#fff\" : value }}\n onClick={togglePicker}\n >\n <IconPalette className={iconPaletteStyle} />\n </Color>\n </ColorBox>\n\n {showPicker && (\n <ChromePicker\n color={actualSelectedColor}\n onChange={onColorChange}\n onChangeComplete={onColorChangeComplete}\n />\n )}\n </ColorPickerStyle>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_interopRequireDefault","_emotion","_usePageElements","_classnames2","_reactColor","_roundColor_lens24px","ColorPickerStyle","styled","target","label","position","display","flexWrap","justifyContent","width","padding","backgroundColor","ColorBox","cursor","height","margin","borderRadius","Color","border","transition","alignItems","boxShadow","content","top","left","zIndex","opacity","transform","transparent","css","backgroundSize","backgroundImage","iconPaletteStyle","marginTop","color","COLORS","lightGray","gray","darkGray","darkestGray","black","styles","selectedColor","button","boxSizing","outline","LexicalColorPicker","exports","_ref","value","onChange","onChangeComplete","_useState","useState","_useState2","_slicedToArray2","default","showPicker","setShowPicker","_useState3","_useState4","actualSelectedColor","setActualSelectedColor","themeColor","getColorValue","useCallback","rgb","concat","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","_ref2","togglePicker","e","stopPropagation","pageElements","usePageElements","themeColors","colors","theme","key","createElement","Object","keys","map","index","className","style","onClick","classnames","_defineProperty2","ReactComponent","ChromePicker"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements/hooks/usePageElements\";\nimport classnames from \"classnames\";\nimport { ChromePicker } from \"react-color\";\n\n// Icons\nimport { ReactComponent as IconPalette } from \"./round-color_lens-24px.svg\";\n\nconst ColorPickerStyle = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexWrap: \"wrap\",\n justifyContent: \"space-between\",\n width: 225,\n padding: 0,\n backgroundColor: \"#fff\"\n});\n\nconst ColorBox = styled(\"div\")({\n cursor: \"pointer\",\n width: 50,\n height: 40,\n margin: 10,\n borderRadius: 2\n});\n\nconst Color = styled(\"button\")({\n cursor: \"pointer\",\n width: 40,\n height: 30,\n border: \"1px solid var(--mdc-theme-on-background)\",\n transition: \"transform 0.2s, scale 0.2s\",\n display: \"flex\",\n alignItems: \"center\",\n \"&::after\": {\n boxShadow: \"0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)\",\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.25)\",\n \"&::after\": {\n opacity: 1\n }\n }\n});\n\nconst transparent = css({\n backgroundSize: \"10px 10px\",\n backgroundImage:\n \"linear-gradient( 45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient(-45deg, #555 25%, transparent 25%, transparent),\" +\n \"linear-gradient( 45deg, transparent 75%, #555 75%),\" +\n \"linear-gradient(-45deg, transparent 75%, #555 75%)\"\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: \"0px 0px 0px 2px var(--mdc-theme-secondary)\"\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\ninterface LexicalColorPickerProps {\n value: string;\n onChange?: (color: string) => void;\n onChangeComplete: (color: string, name?: string) => void;\n handlerClassName?: string;\n}\n\nexport const LexicalColorPicker = ({\n value,\n onChange,\n onChangeComplete\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 let themeColor = false;\n\n const getColorValue = useCallback(rgb => {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`;\n }, []);\n\n const onColorChange = useCallback(\n (color, event) => {\n event.preventDefault();\n // controls of the picker are updated as user moves the mouse\n const customColor = getColorValue(color.rgb);\n setActualSelectedColor(customColor);\n if (typeof onChange === \"function\") {\n onChange(customColor);\n }\n },\n [onChange]\n );\n\n const onColorChangeComplete = useCallback(\n ({ rgb }, event) => {\n setActualSelectedColor(value);\n onChangeComplete(getColorValue(rgb));\n event.preventDefault();\n },\n [onChangeComplete]\n );\n\n const togglePicker = useCallback(e => {\n e.stopPropagation();\n setShowPicker(!showPicker);\n }, []);\n\n const pageElements = usePageElements();\n\n const themeColors: Record<string, any> = {};\n const colors = pageElements.theme?.styles?.colors;\n if (colors) {\n for (const key in colors) {\n if (colors[key]) {\n themeColors[key] = colors[key];\n }\n }\n }\n\n return (\n <ColorPickerStyle>\n {Object.keys(themeColors).map((key, index) => {\n const color = themeColors[key];\n\n if (color === value || value === \"transparent\") {\n themeColor = true;\n }\n return (\n <ColorBox key={index}>\n <Color\n className={key === value ? styles.selectedColor : \"\"}\n style={{ backgroundColor: color }}\n onClick={() => {\n // With page elements implementation, we want to store the color key and\n // then the actual color will be retrieved from the theme object.\n const colors = pageElements.theme?.styles?.colors;\n onChangeComplete(colors[key], key);\n }}\n />\n </ColorBox>\n );\n })}\n\n <ColorBox>\n <Color\n className={classnames(transparent, {\n [styles.selectedColor]: value === \"transparent\"\n })}\n onClick={() => {\n onChangeComplete(\"transparent\");\n }}\n />\n </ColorBox>\n\n <ColorBox>\n <Color\n className={value && !themeColor ? styles.selectedColor : \"\"}\n style={{ backgroundColor: themeColor ? \"#fff\" : value }}\n onClick={togglePicker}\n >\n <IconPalette className={iconPaletteStyle} />\n </Color>\n </ColorBox>\n\n {showPicker && (\n <ChromePicker\n color={actualSelectedColor}\n onChange={onColorChange}\n onChangeComplete={onColorChangeComplete}\n />\n )}\n </ColorPickerStyle>\n );\n};\n"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ exports.LexicalColorPickerDropdown = void 0;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _lexicalEditor = require("@webiny/lexical-editor");
|
|
10
10
|
var _LexicalColorPicker = require("./LexicalColorPicker/LexicalColorPicker");
|
|
11
|
-
var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
|
|
11
|
+
var LexicalColorPickerDropdown = exports.LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
|
|
12
12
|
var _useFontColorPicker = (0, _lexicalEditor.useFontColorPicker)(),
|
|
13
13
|
value = _useFontColorPicker.value,
|
|
14
14
|
applyColor = _useFontColorPicker.applyColor;
|
|
@@ -24,6 +24,5 @@ var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
|
|
|
24
24
|
onChangeComplete: applyColor
|
|
25
25
|
}));
|
|
26
26
|
};
|
|
27
|
-
exports.LexicalColorPickerDropdown = LexicalColorPickerDropdown;
|
|
28
27
|
|
|
29
28
|
//# sourceMappingURL=LexicalColorPickerDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalEditor","_LexicalColorPicker","LexicalColorPickerDropdown","_useFontColorPicker","useFontColorPicker","value","applyColor","default","createElement","DropDown","buttonClassName","buttonAriaLabel","buttonIconClassName","stopCloseOnClickSelf","disabled","showScroll","LexicalColorPicker","onChangeComplete"
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_lexicalEditor","_LexicalColorPicker","LexicalColorPickerDropdown","exports","_useFontColorPicker","useFontColorPicker","value","applyColor","default","createElement","DropDown","buttonClassName","buttonAriaLabel","buttonIconClassName","stopCloseOnClickSelf","disabled","showScroll","LexicalColorPicker","onChangeComplete"],"sources":["LexicalColorPickerDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport { useFontColorPicker, DropDown } from \"@webiny/lexical-editor\";\nimport { LexicalColorPicker } from \"~/components/LexicalColorPicker/LexicalColorPicker\";\n\nexport const LexicalColorPickerDropdown = () => {\n const { value, applyColor } = useFontColorPicker();\n\n return (\n <DropDown\n buttonClassName=\"toolbar-item color-picker\"\n buttonAriaLabel={\"Formatting options for text color\"}\n buttonIconClassName=\"icon font-color\"\n stopCloseOnClickSelf={true}\n disabled={false}\n showScroll={false}\n >\n <LexicalColorPicker value={value} onChangeComplete={applyColor} />\n </DropDown>\n );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAEO,IAAMG,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,SAA7BA,0BAA0BA,CAAA,EAAS;EAC5C,IAAAE,mBAAA,GAA8B,IAAAC,iCAAkB,EAAC,CAAC;IAA1CC,KAAK,GAAAF,mBAAA,CAALE,KAAK;IAAEC,UAAU,GAAAH,mBAAA,CAAVG,UAAU;EAEzB,oBACIV,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACT,cAAA,CAAAU,QAAQ;IACLC,eAAe,EAAC,2BAA2B;IAC3CC,eAAe,EAAE,mCAAoC;IACrDC,mBAAmB,EAAC,iBAAiB;IACrCC,oBAAoB,EAAE,IAAK;IAC3BC,QAAQ,EAAE,KAAM;IAChBC,UAAU,EAAE;EAAM,gBAElBnB,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,mBAAA,CAAAgB,kBAAkB;IAACX,KAAK,EAAEA,KAAM;IAACY,gBAAgB,EAAEX;EAAW,CAAE,CAC3D,CAAC;AAEnB,CAAC"}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _selection = require("@lexical/selection");
|
|
10
10
|
var _lexicalEditor = require("@webiny/lexical-editor");
|
|
11
11
|
var _useCurrentSelection = require("@webiny/lexical-editor/hooks/useCurrentSelection");
|
|
12
|
-
var TextAlignmentDropdown = function TextAlignmentDropdown() {
|
|
12
|
+
var TextAlignmentDropdown = exports.TextAlignmentDropdown = function TextAlignmentDropdown() {
|
|
13
13
|
var _useTextAlignmentActi = (0, _lexicalEditor.useTextAlignmentAction)(),
|
|
14
14
|
applyTextAlignment = _useTextAlignmentActi.applyTextAlignment,
|
|
15
15
|
outdentText = _useTextAlignmentActi.outdentText,
|
|
@@ -79,6 +79,5 @@ var TextAlignmentDropdown = function TextAlignmentDropdown() {
|
|
|
79
79
|
className: "text"
|
|
80
80
|
}, "Indent")));
|
|
81
81
|
};
|
|
82
|
-
exports.TextAlignmentDropdown = TextAlignmentDropdown;
|
|
83
82
|
|
|
84
83
|
//# sourceMappingURL=TextAlignmentDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_selection","_lexicalEditor","_useCurrentSelection","TextAlignmentDropdown","_useTextAlignmentActi","useTextAlignmentAction","applyTextAlignment","outdentText","indentText","isRTL","useDeriveValueFromSelection","_ref","rangeSelection","$isParentElementRTL","default","createElement","DropDown","buttonLabel","buttonIconClassName","buttonClassName","buttonAriaLabel","DropDownItem","onClick","className","Divider"
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_selection","_lexicalEditor","_useCurrentSelection","TextAlignmentDropdown","exports","_useTextAlignmentActi","useTextAlignmentAction","applyTextAlignment","outdentText","indentText","isRTL","useDeriveValueFromSelection","_ref","rangeSelection","$isParentElementRTL","default","createElement","DropDown","buttonLabel","buttonIconClassName","buttonClassName","buttonAriaLabel","DropDownItem","onClick","className","Divider"],"sources":["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\";\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor-actions",
|
|
3
|
-
"version": "5.39.
|
|
3
|
+
"version": "5.39.1-beta.1",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@emotion/styled": "11.10.6",
|
|
6
6
|
"@lexical/selection": "0.12.2",
|
|
7
|
-
"@webiny/app-page-builder-elements": "5.39.
|
|
8
|
-
"@webiny/lexical-editor": "5.39.
|
|
7
|
+
"@webiny/app-page-builder-elements": "5.39.1-beta.1",
|
|
8
|
+
"@webiny/lexical-editor": "5.39.1-beta.1",
|
|
9
9
|
"classnames": "2.3.2",
|
|
10
10
|
"emotion": "10.0.27",
|
|
11
11
|
"react": "17.0.2",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"react-dom": "17.0.2"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
|
-
"@webiny/cli": "5.39.
|
|
17
|
-
"@webiny/project-utils": "5.39.
|
|
16
|
+
"@webiny/cli": "5.39.1-beta.1",
|
|
17
|
+
"@webiny/project-utils": "5.39.1-beta.1"
|
|
18
18
|
},
|
|
19
19
|
"publishConfig": {
|
|
20
20
|
"access": "public",
|
|
@@ -24,5 +24,5 @@
|
|
|
24
24
|
"build": "yarn webiny run build",
|
|
25
25
|
"watch": "yarn webiny run watch"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "6fc74b45740bd4123dcf9b5890bfacee594208bf"
|
|
28
28
|
}
|