@webiny/lexical-editor-actions 5.36.2 → 5.37.0-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.
Files changed (12) hide show
  1. package/LexicalEditorActions.js +4 -4
  2. package/LexicalEditorActions.js.map +1 -1
  3. package/components/LexicalColorPicker/LexicalColorPicker.js +9 -24
  4. package/components/LexicalColorPicker/LexicalColorPicker.js.map +1 -1
  5. package/components/LexicalColorPickerDropdown.js +1 -1
  6. package/components/LexicalColorPickerDropdown.js.map +1 -1
  7. package/components/TextAlignmentDropdown.js.map +1 -1
  8. package/index.js.map +1 -1
  9. package/package.json +6 -8
  10. package/components/TypographyDropDown.d.ts +0 -2
  11. package/components/TypographyDropDown.js +0 -77
  12. package/components/TypographyDropDown.js.map +0 -1
package/LexicalEditorActions.js CHANGED
@@ -8,13 +8,13 @@ exports.LexicalEditorActions = void 0;
8
8
  var _lexicalEditor = require("@webiny/lexical-editor");
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _LexicalColorPickerDropdown = require("./components/LexicalColorPickerDropdown");
11
- var _TypographyDropDown = require("./components/TypographyDropDown");
12
11
  var _TextAlignmentDropdown = require("./components/TextAlignmentDropdown");
12
+ /*
13
+ * Lexical editor configuration and components with global composition scope
14
+ */
13
15
  var LexicalEditorActions = function LexicalEditorActions() {
14
- return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
16
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
15
17
  element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
16
- }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyAction.TypographyDropDown, {
17
- element: /*#__PURE__*/_react.default.createElement(_TypographyDropDown.TypographyDropDown, null)
18
18
  }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TextAlignmentAction.TextAlignmentDropDown, {
19
19
  element: /*#__PURE__*/_react.default.createElement(_TextAlignmentDropdown.TextAlignmentDropdown, null)
20
20
  }));
package/LexicalEditorActions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["LexicalEditorActions"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { LexicalEditorConfig, TypographyAction, TextAlignmentAction } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"~/components/TypographyDropDown\";\nimport { TextAlignmentDropdown } from \"~/components/TextAlignmentDropdown\";\n\nexport const LexicalEditorActions = () => {\n return (\n <LexicalEditorConfig>\n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n <TextAlignmentAction.TextAlignmentDropDown element={<TextAlignmentDropdown />} />\n </LexicalEditorConfig>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AAEO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;EACtC,oBACI,6BAAC,kCAAmB,qBAChB,6BAAC,8BAAe,CAAC,WAAW;IAAC,OAAO,eAAE,6BAAC,sDAA0B;EAAI,EAAG,eACxE,6BAAC,+BAAgB,CAAC,kBAAkB;IAAC,OAAO,eAAE,6BAAC,sCAAkB;EAAI,EAAG,eACxE,6BAAC,kCAAmB,CAAC,qBAAqB;IAAC,OAAO,eAAE,6BAAC,4CAAqB;EAAI,EAAG,CAC/D;AAE9B,CAAC;AAAC"}
1
+ {"version":3,"names":["_lexicalEditor","require","_react","_interopRequireDefault","_LexicalColorPickerDropdown","_TextAlignmentDropdown","LexicalEditorActions","default","createElement","Fragment","FontColorAction","ColorPicker","element","LexicalColorPickerDropdown","TextAlignmentAction","TextAlignmentDropDown","TextAlignmentDropdown","exports"],"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,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACtC,oBACIJ,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAAAN,MAAA,CAAAK,OAAA,CAAAE,QAAA,qBACIP,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACR,cAAA,CAAAU,eAAe,CAACC,WAAW;IAACC,OAAO,eAAEV,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACJ,2BAAA,CAAAS,0BAA0B,MAAE;EAAE,CAAE,CAAC,eACxEX,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACR,cAAA,CAAAc,mBAAmB,CAACC,qBAAqB;IAACH,OAAO,eAAEV,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACH,sBAAA,CAAAW,qBAAqB,MAAE;EAAE,CAAE,CAClF,CAAC;AAEX,CAAC;AAACC,OAAA,CAAAX,oBAAA,GAAAA,oBAAA"}
package/components/LexicalColorPicker/LexicalColorPicker.js CHANGED
@@ -11,9 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _styled = _interopRequireDefault(require("@emotion/styled"));
13
13
  var _emotion = require("emotion");
14
- var _usePageBuilder2 = require("@webiny/app-page-builder/hooks/usePageBuilder");
15
14
  var _usePageElements = require("@webiny/app-page-builder-elements/hooks/usePageElements");
16
- var _utils = require("@webiny/app-page-builder/utils");
17
15
  var _classnames2 = _interopRequireDefault(require("classnames"));
18
16
  var _reactColor = require("react-color");
19
17
  var _roundColor_lens24px = require("./round-color_lens-24px.svg");
@@ -117,6 +115,7 @@ var styles = {
117
115
  }, "label:color;")
118
116
  };
119
117
  var LexicalColorPicker = function LexicalColorPicker(_ref) {
118
+ var _pageElements$theme, _pageElements$theme$s;
120
119
  var value = _ref.value,
121
120
  onChange = _ref.onChange,
122
121
  onChangeComplete = _ref.onChangeComplete;
@@ -152,21 +151,13 @@ var LexicalColorPicker = function LexicalColorPicker(_ref) {
152
151
  e.stopPropagation();
153
152
  setShowPicker(!showPicker);
154
153
  }, []);
155
- var _usePageBuilder = (0, _usePageBuilder2.usePageBuilder)(),
156
- theme = _usePageBuilder.theme;
157
154
  var pageElements = (0, _usePageElements.usePageElements)();
158
155
  var themeColors = {};
159
- if (_utils.isLegacyRenderingEngine) {
160
- var legacyTheme = theme;
161
- themeColors = (legacyTheme === null || legacyTheme === void 0 ? void 0 : legacyTheme.colors) || {};
162
- } else {
163
- var _pageElements$theme, _pageElements$theme$s;
164
- var colors = (_pageElements$theme = pageElements.theme) === null || _pageElements$theme === void 0 ? void 0 : (_pageElements$theme$s = _pageElements$theme.styles) === null || _pageElements$theme$s === void 0 ? void 0 : _pageElements$theme$s.colors;
165
- if (colors) {
166
- for (var key in colors) {
167
- if (colors[key]) {
168
- themeColors[key] = colors[key];
169
- }
156
+ var colors = (_pageElements$theme = pageElements.theme) === null || _pageElements$theme === void 0 ? void 0 : (_pageElements$theme$s = _pageElements$theme.styles) === null || _pageElements$theme$s === void 0 ? void 0 : _pageElements$theme$s.colors;
157
+ if (colors) {
158
+ for (var key in colors) {
159
+ if (colors[key]) {
160
+ themeColors[key] = colors[key];
170
161
  }
171
162
  }
172
163
  }
@@ -183,17 +174,11 @@ var LexicalColorPicker = function LexicalColorPicker(_ref) {
183
174
  backgroundColor: color
184
175
  },
185
176
  onClick: function onClick() {
177
+ var _pageElements$theme2, _pageElements$theme2$;
186
178
  // With page elements implementation, we want to store the color key and
187
179
  // then the actual color will be retrieved from the theme object.
188
- var value = color;
189
- var themeColorName;
190
- if (!_utils.isLegacyRenderingEngine) {
191
- var _pageElements$theme2, _pageElements$theme2$;
192
- var _colors = (_pageElements$theme2 = pageElements.theme) === null || _pageElements$theme2 === void 0 ? void 0 : (_pageElements$theme2$ = _pageElements$theme2.styles) === null || _pageElements$theme2$ === void 0 ? void 0 : _pageElements$theme2$.colors;
193
- themeColorName = key;
194
- value = _colors[key];
195
- }
196
- onChangeComplete(value, themeColorName);
180
+ var colors = (_pageElements$theme2 = pageElements.theme) === null || _pageElements$theme2 === void 0 ? void 0 : (_pageElements$theme2$ = _pageElements$theme2.styles) === null || _pageElements$theme2$ === void 0 ? void 0 : _pageElements$theme2$.colors;
181
+ onChangeComplete(colors[key], key);
197
182
  }
198
183
  }));
199
184
  }), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
package/components/LexicalColorPicker/LexicalColorPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["ColorPickerStyle","styled","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","value","onChange","onChangeComplete","useState","showPicker","setShowPicker","actualSelectedColor","setActualSelectedColor","themeColor","getColorValue","useCallback","rgb","r","g","b","a","onColorChange","event","preventDefault","customColor","onColorChangeComplete","togglePicker","e","stopPropagation","usePageBuilder","theme","pageElements","usePageElements","themeColors","isLegacyRenderingEngine","legacyTheme","colors","key","Object","keys","map","index","themeColorName","classnames"],"sources":["LexicalColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\nimport { usePageBuilder } from \"@webiny/app-page-builder/hooks/usePageBuilder\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements/hooks/usePageElements\";\nimport { PbTheme } from \"@webiny/app-page-builder/types\";\nimport { isLegacyRenderingEngine } from \"@webiny/app-page-builder/utils\";\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?: Function;\n onChangeComplete: Function;\n handlerClassName?: string;\n}\n\nexport const LexicalColorPicker: React.FC<LexicalColorPickerProps> = ({\n value,\n onChange,\n onChangeComplete\n}) => {\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 { theme } = usePageBuilder();\n\n const pageElements = usePageElements();\n\n let themeColors: Record<string, any> = {};\n\n if (isLegacyRenderingEngine) {\n const legacyTheme = theme as PbTheme;\n themeColors = legacyTheme?.colors || {};\n } else {\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\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 let value = color;\n let themeColorName;\n if (!isLegacyRenderingEngine) {\n const colors = pageElements.theme?.styles?.colors;\n themeColorName = key;\n value = colors[key];\n }\n\n onChangeComplete(value, themeColorName);\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","_ref","_pageElements$theme","_pageElements$theme$s","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","_pageElements$theme2","_pageElements$theme2$","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?: Function;\n onChangeComplete: Function;\n handlerClassName?: string;\n}\n\nexport const LexicalColorPicker: React.FC<LexicalColorPickerProps> = ({\n value,\n onChange,\n onChangeComplete\n}) => {\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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"}
package/components/LexicalColorPickerDropdown.js CHANGED
@@ -14,7 +14,7 @@ var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
14
14
  applyColor = _useFontColorPicker.applyColor;
15
15
  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
16
16
  buttonClassName: "toolbar-item color-picker",
17
- buttonAriaLabel: "Formatting options for font size",
17
+ buttonAriaLabel: "Formatting options for text color",
18
18
  buttonIconClassName: "icon font-color",
19
19
  stopCloseOnClickSelf: true,
20
20
  disabled: false,
package/components/LexicalColorPickerDropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["LexicalColorPickerDropdown","useFontColorPicker","value","applyColor"],"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 font size\"}\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;AACA;AACA;AAEO,IAAMA,0BAA0B,GAAG,SAA7BA,0BAA0B,GAAS;EAC5C,0BAA8B,IAAAC,iCAAkB,GAAE;IAA1CC,KAAK,uBAALA,KAAK;IAAEC,UAAU,uBAAVA,UAAU;EAEzB,oBACI,6BAAC,uBAAQ;IACL,eAAe,EAAC,2BAA2B;IAC3C,eAAe,EAAE,kCAAmC;IACpD,mBAAmB,EAAC,iBAAiB;IACrC,oBAAoB,EAAE,IAAK;IAC3B,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAE;EAAM,gBAElB,6BAAC,sCAAkB;IAAC,KAAK,EAAED,KAAM;IAAC,gBAAgB,EAAEC;EAAW,EAAG,CAC3D;AAEnB,CAAC;AAAC"}
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","exports"],"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,GAAG,SAA7BA,0BAA0BA,CAAA,EAAS;EAC5C,IAAAC,mBAAA,GAA8B,IAAAC,iCAAkB,EAAC,CAAC;IAA1CC,KAAK,GAAAF,mBAAA,CAALE,KAAK;IAAEC,UAAU,GAAAH,mBAAA,CAAVG,UAAU;EAEzB,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,cAAA,CAAAS,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,gBAElBlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,mBAAA,CAAAe,kBAAkB;IAACX,KAAK,EAAEA,KAAM;IAACY,gBAAgB,EAAEX;EAAW,CAAE,CAC3D,CAAC;AAEnB,CAAC;AAACY,OAAA,CAAAhB,0BAAA,GAAAA,0BAAA"}
package/components/TextAlignmentDropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["TextAlignmentDropdown","useRichTextEditor","textBlockSelection","useTextAlignmentAction","applyTextAlignment","outdentText","indentText","state","isRTL"],"sources":["TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Divider,\n DropDown,\n DropDownItem,\n useRichTextEditor,\n useTextAlignmentAction\n} from \"@webiny/lexical-editor\";\n\nexport const TextAlignmentDropdown = () => {\n const { textBlockSelection } = useRichTextEditor();\n const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();\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\n className={\"icon \" + (textBlockSelection?.state?.isRTL ? \"indent\" : \"outdent\")}\n />\n <span className=\"text\">Outdent</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n indentText();\n }}\n className=\"item\"\n >\n <i\n className={\"icon \" + (textBlockSelection?.state?.isRTL ? \"outdent\" : \"indent\")}\n />\n <span className=\"text\">Indent</span>\n </DropDownItem>\n </DropDown>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAQO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqB,GAAS;EAAA;EACvC,yBAA+B,IAAAC,gCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,4BAAwD,IAAAC,qCAAsB,GAAE;IAAxEC,kBAAkB,yBAAlBA,kBAAkB;IAAEC,WAAW,yBAAXA,WAAW;IAAEC,UAAU,yBAAVA,UAAU;EAEnD,oBACI,6BAAC,uBAAQ;IACL,WAAW,EAAC,OAAO;IACnB,mBAAmB,EAAC,iBAAiB;IACrC,eAAe,EAAC,+BAA+B;IAC/C,eAAe,EAAC;EAAuC,gBAEvD,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXF,kBAAkB,CAAC,MAAM,CAAC;IAC9B,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IAAG,SAAS,EAAC;EAAiB,EAAG,eACjC;IAAM,SAAS,EAAC;EAAM,GAAC,YAAU,CAAO,CAC7B,eACf,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXA,kBAAkB,CAAC,QAAQ,CAAC;IAChC,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IAAG,SAAS,EAAC;EAAmB,EAAG,eACnC;IAAM,SAAS,EAAC;EAAM,GAAC,cAAY,CAAO,CAC/B,eACf,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXA,kBAAkB,CAAC,OAAO,CAAC;IAC/B,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IAAG,SAAS,EAAC;EAAkB,EAAG,eAClC;IAAM,SAAS,EAAC;EAAM,GAAC,aAAW,CAAO,CAC9B,eACf,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXA,kBAAkB,CAAC,SAAS,CAAC;IACjC,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IAAG,SAAS,EAAC;EAAoB,EAAG,eACpC;IAAM,SAAS,EAAC;EAAM,GAAC,eAAa,CAAO,CAChC,eACf,6BAAC,sBAAO,OAAG,eACX,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXC,WAAW,EAAE;IACjB,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IACI,SAAS,EAAE,OAAO,IAAIH,kBAAkB,aAAlBA,kBAAkB,wCAAlBA,kBAAkB,CAAEK,KAAK,kDAAzB,sBAA2BC,KAAK,GAAG,QAAQ,GAAG,SAAS;EAAE,EACjF,eACF;IAAM,SAAS,EAAC;EAAM,GAAC,SAAO,CAAO,CAC1B,eACf,6BAAC,2BAAY;IACT,OAAO,EAAE,mBAAM;MACXF,UAAU,EAAE;IAChB,CAAE;IACF,SAAS,EAAC;EAAM,gBAEhB;IACI,SAAS,EAAE,OAAO,IAAIJ,kBAAkB,aAAlBA,kBAAkB,yCAAlBA,kBAAkB,CAAEK,KAAK,mDAAzB,uBAA2BC,KAAK,GAAG,SAAS,GAAG,QAAQ;EAAE,EACjF,eACF;IAAM,SAAS,EAAC;EAAM,GAAC,QAAM,CAAO,CACzB,CACR;AAEnB,CAAC;AAAC"}
1
+ {"version":3,"names":["_react","_interopRequireDefault","require","_lexicalEditor","TextAlignmentDropdown","_textBlockSelection$s","_textBlockSelection$s2","_useRichTextEditor","useRichTextEditor","textBlockSelection","_useTextAlignmentActi","useTextAlignmentAction","applyTextAlignment","outdentText","indentText","default","createElement","DropDown","buttonLabel","buttonIconClassName","buttonClassName","buttonAriaLabel","DropDownItem","onClick","className","Divider","state","isRTL","exports"],"sources":["TextAlignmentDropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n Divider,\n DropDown,\n DropDownItem,\n useRichTextEditor,\n useTextAlignmentAction\n} from \"@webiny/lexical-editor\";\n\nexport const TextAlignmentDropdown = () => {\n const { textBlockSelection } = useRichTextEditor();\n const { applyTextAlignment, outdentText, indentText } = useTextAlignmentAction();\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\n className={\"icon \" + (textBlockSelection?.state?.isRTL ? \"indent\" : \"outdent\")}\n />\n <span className=\"text\">Outdent</span>\n </DropDownItem>\n <DropDownItem\n onClick={() => {\n indentText();\n }}\n className=\"item\"\n >\n <i\n className={\"icon \" + (textBlockSelection?.state?.isRTL ? \"outdent\" : \"indent\")}\n />\n <span className=\"text\">Indent</span>\n </DropDownItem>\n </DropDown>\n );\n};\n"],"mappings":"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"}
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions\";\n"],"mappings":";;;;;;;;;;;AAAA"}
1
+ {"version":3,"names":["_LexicalEditorActions","require"],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions\";\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,qBAAA,GAAAC,OAAA"}
package/package.json CHANGED
@@ -1,12 +1,10 @@
1
1
  {
2
2
  "name": "@webiny/lexical-editor-actions",
3
- "version": "5.36.2",
3
+ "version": "5.37.0-beta.1",
4
4
  "dependencies": {
5
5
  "@emotion/styled": "11.10.6",
6
- "@webiny/app-page-builder": "5.36.2",
7
- "@webiny/app-page-builder-elements": "5.36.2",
8
- "@webiny/lexical-editor": "5.36.2",
9
- "@webiny/theme": "5.36.2",
6
+ "@webiny/app-page-builder-elements": "5.37.0-beta.1",
7
+ "@webiny/lexical-editor": "5.37.0-beta.1",
10
8
  "classnames": "2.3.2",
11
9
  "emotion": "10.0.27",
12
10
  "react": "17.0.2",
@@ -14,8 +12,8 @@
14
12
  "react-dom": "17.0.2"
15
13
  },
16
14
  "devDependencies": {
17
- "@webiny/cli": "5.36.2",
18
- "@webiny/project-utils": "5.36.2"
15
+ "@webiny/cli": "5.37.0-beta.1",
16
+ "@webiny/project-utils": "5.37.0-beta.1"
19
17
  },
20
18
  "publishConfig": {
21
19
  "access": "public",
@@ -25,5 +23,5 @@
25
23
  "build": "yarn webiny run build",
26
24
  "watch": "yarn webiny run watch"
27
25
  },
28
- "gitHead": "908c591cd08d81da267ed6152e880b52e1157c8b"
26
+ "gitHead": "176c29425477d1daaca1b7da79bacc79a1d35f6e"
29
27
  }
package/components/TypographyDropDown.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const TypographyDropDown: () => JSX.Element;
package/components/TypographyDropDown.js DELETED
@@ -1,77 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.TypographyDropDown = void 0;
9
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _react = _interopRequireWildcard(require("react"));
12
- var _lexicalEditor = require("@webiny/lexical-editor");
13
- var _appPageBuilderElements = require("@webiny/app-page-builder-elements");
14
- var TypographyDropDown = function TypographyDropDown() {
15
- var _textBlockSelection$s;
16
- var _useTypographyAction = (0, _lexicalEditor.useTypographyAction)(),
17
- value = _useTypographyAction.value,
18
- applyTypography = _useTypographyAction.applyTypography;
19
- var _usePageElements = (0, _appPageBuilderElements.usePageElements)(),
20
- theme = _usePageElements.theme;
21
- var _useState = (0, _react.useState)([]),
22
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
23
- styles = _useState2[0],
24
- setStyles = _useState2[1];
25
- var _useRichTextEditor = (0, _lexicalEditor.useRichTextEditor)(),
26
- textBlockSelection = _useRichTextEditor.textBlockSelection;
27
- var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.textType;
28
- (0, _react.useEffect)(function () {
29
- var _theme$styles$typogra, _theme$styles$typogra2, _theme$styles$typogra3, _theme$styles$typogra4, _theme$styles$typogra5, _theme$styles$typogra6;
30
- if (textType) {
31
- switch (textType) {
32
- case "heading":
33
- setStyles(((_theme$styles$typogra = theme.styles.typography) === null || _theme$styles$typogra === void 0 ? void 0 : _theme$styles$typogra.headings) || []);
34
- break;
35
- case "paragraph":
36
- setStyles(((_theme$styles$typogra2 = theme.styles.typography) === null || _theme$styles$typogra2 === void 0 ? void 0 : _theme$styles$typogra2.paragraphs) || []);
37
- break;
38
- case "bullet":
39
- setStyles(((_theme$styles$typogra3 = theme.styles.typography.lists) === null || _theme$styles$typogra3 === void 0 ? void 0 : _theme$styles$typogra3.filter(function (x) {
40
- return x.tag === "ul";
41
- })) || []);
42
- break;
43
- case "number":
44
- setStyles(((_theme$styles$typogra4 = theme.styles.typography) === null || _theme$styles$typogra4 === void 0 ? void 0 : (_theme$styles$typogra5 = _theme$styles$typogra4.lists) === null || _theme$styles$typogra5 === void 0 ? void 0 : _theme$styles$typogra5.filter(function (x) {
45
- return x.tag === "ol";
46
- })) || []);
47
- break;
48
- case "quoteblock":
49
- setStyles(((_theme$styles$typogra6 = theme.styles.typography) === null || _theme$styles$typogra6 === void 0 ? void 0 : _theme$styles$typogra6.quotes) || []);
50
- break;
51
- default:
52
- setStyles([]);
53
- }
54
- }
55
- }, [textType]);
56
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!(styles !== null && styles !== void 0 && styles.length) ? /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
57
- buttonClassName: "toolbar-item typography-dropdown",
58
- buttonAriaLabel: "Typography formatting options",
59
- buttonLabel: (value === null || value === void 0 ? void 0 : value.name) || "Normal",
60
- stopCloseOnClickSelf: true,
61
- disabled: false,
62
- showScroll: false
63
- }, styles === null || styles === void 0 ? void 0 : styles.map(function (option) {
64
- return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
65
- className: "item typography-item ".concat((value === null || value === void 0 ? void 0 : value.id) === option.id ? "active dropdown-item-active" : ""),
66
- onClick: function onClick() {
67
- return applyTypography((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
68
- css: option.styles
69
- }));
70
- },
71
- key: option.id
72
- }, /*#__PURE__*/_react.default.createElement("span", {
73
- className: "text"
74
- }, option.name));
75
- })) : null);
76
- };
77
- exports.TypographyDropDown = TypographyDropDown;
package/components/TypographyDropDown.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["TypographyDropDown","useTypographyAction","value","applyTypography","usePageElements","theme","useState","styles","setStyles","useRichTextEditor","textBlockSelection","textType","state","useEffect","typography","headings","paragraphs","lists","filter","x","tag","quotes","length","name","map","option","id","css"],"sources":["TypographyDropDown.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport {\n DropDown,\n DropDownItem,\n useRichTextEditor,\n useTypographyAction\n} from \"@webiny/lexical-editor\";\nimport { usePageElements } from \"@webiny/app-page-builder-elements\";\nimport { TypographyStyle } from \"@webiny/theme/types\";\nimport { TypographyValue } from \"@webiny/lexical-editor/types\";\n\nexport const TypographyDropDown = () => {\n const { value, applyTypography } = useTypographyAction();\n const { theme } = usePageElements();\n const [styles, setStyles] = useState<TypographyStyle[]>([]);\n const { textBlockSelection } = useRichTextEditor();\n const textType = textBlockSelection?.state?.textType;\n\n useEffect(() => {\n if (textType) {\n switch (textType) {\n case \"heading\":\n setStyles(theme.styles.typography?.headings || []);\n break;\n case \"paragraph\":\n setStyles(theme.styles.typography?.paragraphs || []);\n break;\n case \"bullet\":\n setStyles(theme.styles.typography.lists?.filter(x => x.tag === \"ul\") || []);\n break;\n case \"number\":\n setStyles(theme.styles.typography?.lists?.filter(x => x.tag === \"ol\") || []);\n break;\n case \"quoteblock\":\n setStyles(theme.styles.typography?.quotes || []);\n break;\n default:\n setStyles([]);\n }\n }\n }, [textType]);\n\n return (\n <>\n {!!styles?.length ? (\n <DropDown\n buttonClassName=\"toolbar-item typography-dropdown\"\n buttonAriaLabel={\"Typography formatting options\"}\n buttonLabel={value?.name || \"Normal\"}\n stopCloseOnClickSelf={true}\n disabled={false}\n showScroll={false}\n >\n {styles?.map(option => (\n <DropDownItem\n className={`item typography-item ${\n value?.id === option.id ? \"active dropdown-item-active\" : \"\"\n }`}\n onClick={() =>\n applyTypography({\n ...option,\n css: option.styles\n } as TypographyValue)\n }\n key={option.id}\n >\n <span className=\"text\">{option.name}</span>\n </DropDownItem>\n ))}\n </DropDown>\n ) : null}\n </>\n );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAMA;AAIO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;EAAA;EACpC,2BAAmC,IAAAC,kCAAmB,GAAE;IAAhDC,KAAK,wBAALA,KAAK;IAAEC,eAAe,wBAAfA,eAAe;EAC9B,uBAAkB,IAAAC,uCAAe,GAAE;IAA3BC,KAAK,oBAALA,KAAK;EACb,gBAA4B,IAAAC,eAAQ,EAAoB,EAAE,CAAC;IAAA;IAApDC,MAAM;IAAEC,SAAS;EACxB,yBAA+B,IAAAC,gCAAiB,GAAE;IAA1CC,kBAAkB,sBAAlBA,kBAAkB;EAC1B,IAAMC,QAAQ,GAAGD,kBAAkB,aAAlBA,kBAAkB,gDAAlBA,kBAAkB,CAAEE,KAAK,0DAAzB,sBAA2BD,QAAQ;EAEpD,IAAAE,gBAAS,EAAC,YAAM;IAAA;IACZ,IAAIF,QAAQ,EAAE;MACV,QAAQA,QAAQ;QACZ,KAAK,SAAS;UACVH,SAAS,CAAC,0BAAAH,KAAK,CAACE,MAAM,CAACO,UAAU,0DAAvB,sBAAyBC,QAAQ,KAAI,EAAE,CAAC;UAClD;QACJ,KAAK,WAAW;UACZP,SAAS,CAAC,2BAAAH,KAAK,CAACE,MAAM,CAACO,UAAU,2DAAvB,uBAAyBE,UAAU,KAAI,EAAE,CAAC;UACpD;QACJ,KAAK,QAAQ;UACTR,SAAS,CAAC,2BAAAH,KAAK,CAACE,MAAM,CAACO,UAAU,CAACG,KAAK,2DAA7B,uBAA+BC,MAAM,CAAC,UAAAC,CAAC;YAAA,OAAIA,CAAC,CAACC,GAAG,KAAK,IAAI;UAAA,EAAC,KAAI,EAAE,CAAC;UAC3E;QACJ,KAAK,QAAQ;UACTZ,SAAS,CAAC,2BAAAH,KAAK,CAACE,MAAM,CAACO,UAAU,qFAAvB,uBAAyBG,KAAK,2DAA9B,uBAAgCC,MAAM,CAAC,UAAAC,CAAC;YAAA,OAAIA,CAAC,CAACC,GAAG,KAAK,IAAI;UAAA,EAAC,KAAI,EAAE,CAAC;UAC5E;QACJ,KAAK,YAAY;UACbZ,SAAS,CAAC,2BAAAH,KAAK,CAACE,MAAM,CAACO,UAAU,2DAAvB,uBAAyBO,MAAM,KAAI,EAAE,CAAC;UAChD;QACJ;UACIb,SAAS,CAAC,EAAE,CAAC;MAAC;IAE1B;EACJ,CAAC,EAAE,CAACG,QAAQ,CAAC,CAAC;EAEd,oBACI,4DACK,CAAC,EAACJ,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEe,MAAM,iBACb,6BAAC,uBAAQ;IACL,eAAe,EAAC,kCAAkC;IAClD,eAAe,EAAE,+BAAgC;IACjD,WAAW,EAAE,CAAApB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEqB,IAAI,KAAI,QAAS;IACrC,oBAAoB,EAAE,IAAK;IAC3B,QAAQ,EAAE,KAAM;IAChB,UAAU,EAAE;EAAM,GAEjBhB,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEiB,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACf,6BAAC,2BAAY;MACT,SAAS,iCACL,CAAAvB,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEwB,EAAE,MAAKD,MAAM,CAACC,EAAE,GAAG,6BAA6B,GAAG,EAAE,CAC7D;MACH,OAAO,EAAE;QAAA,OACLvB,eAAe,6DACRsB,MAAM;UACTE,GAAG,EAAEF,MAAM,CAAClB;QAAM,GACD;MAAA,CACxB;MACD,GAAG,EAAEkB,MAAM,CAACC;IAAG,gBAEf;MAAM,SAAS,EAAC;IAAM,GAAED,MAAM,CAACF,IAAI,CAAQ,CAChC;EAAA,CAClB,CAAC,CACK,GACX,IAAI,CACT;AAEX,CAAC;AAAC"}