@webiny/lexical-editor-actions 0.0.0-unstable.496cf268ac → 0.0.0-unstable.606fc9c866

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 (6) hide show
  1. package/LexicalEditorActions.js +3 -0
  2. package/LexicalEditorActions.js.map +1 -1
  3. package/components/TypographyDropDown.d.ts +2 -0
  4. package/components/TypographyDropDown.js +79 -0
  5. package/components/TypographyDropDown.js.map +1 -0
  6. package/package.json +8 -7
package/LexicalEditorActions.js CHANGED
@@ -8,9 +8,12 @@ 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");
11
12
  var LexicalEditorActions = function LexicalEditorActions() {
12
13
  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
13
14
  element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
15
+ }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyAction.TypographyDropDown, {
16
+ element: /*#__PURE__*/_react.default.createElement(_TypographyDropDown.TypographyDropDown, null)
14
17
  }));
15
18
  };
16
19
  exports.LexicalEditorActions = LexicalEditorActions;
package/LexicalEditorActions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["LexicalEditorActions"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { LexicalEditorConfig } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\n\nexport const LexicalEditorActions = () => {\n return (\n <LexicalEditorConfig>\n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n </LexicalEditorConfig>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAGO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAoB,GAAS;EACtC,oBACI,6BAAC,kCAAmB,qBAChB,6BAAC,8BAAe,CAAC,WAAW;IAAC,OAAO,eAAE,6BAAC,sDAA0B;EAAI,EAAG,CACtD;AAE9B,CAAC;AAAC"}
1
+ {"version":3,"names":["LexicalEditorActions"],"sources":["LexicalEditorActions.tsx"],"sourcesContent":["import { LexicalEditorConfig, TypographyAction } from \"@webiny/lexical-editor\";\nimport React from \"react\";\nimport { LexicalColorPickerDropdown } from \"~/components/LexicalColorPickerDropdown\";\nimport { FontColorAction } from \"@webiny/lexical-editor\";\nimport { TypographyDropDown } from \"~/components/TypographyDropDown\";\n\nexport const LexicalEditorActions = () => {\n return (\n <LexicalEditorConfig>\n <FontColorAction.ColorPicker element={<LexicalColorPickerDropdown />} />\n <TypographyAction.TypographyDropDown element={<TypographyDropDown />} />\n </LexicalEditorConfig>\n );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;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,CACtD;AAE9B,CAAC;AAAC"}
package/components/TypographyDropDown.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const TypographyDropDown: () => JSX.Element;
package/components/TypographyDropDown.js ADDED
@@ -0,0 +1,79 @@
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 typographyStyles = theme.styles.typography;
26
+ var _useRichTextEditor = (0, _lexicalEditor.useRichTextEditor)(),
27
+ textBlockSelection = _useRichTextEditor.textBlockSelection;
28
+ var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.textType;
29
+ var hasTypographyStyles = !!typographyStyles;
30
+ (0, _react.useEffect)(function () {
31
+ var _theme$styles$typogra, _theme$styles$typogra2, _theme$styles$typogra3, _theme$styles$typogra4, _theme$styles$typogra5, _theme$styles$typogra6;
32
+ if (textType) {
33
+ switch (textType) {
34
+ case "heading":
35
+ setStyles(((_theme$styles$typogra = theme.styles.typography) === null || _theme$styles$typogra === void 0 ? void 0 : _theme$styles$typogra.headings) || []);
36
+ break;
37
+ case "paragraph":
38
+ setStyles(((_theme$styles$typogra2 = theme.styles.typography) === null || _theme$styles$typogra2 === void 0 ? void 0 : _theme$styles$typogra2.paragraphs) || []);
39
+ break;
40
+ case "bullet":
41
+ setStyles(((_theme$styles$typogra3 = theme.styles.typography.lists) === null || _theme$styles$typogra3 === void 0 ? void 0 : _theme$styles$typogra3.filter(function (x) {
42
+ return x.tag === "ul";
43
+ })) || []);
44
+ break;
45
+ case "number":
46
+ 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) {
47
+ return x.tag === "ol";
48
+ })) || []);
49
+ break;
50
+ case "quoteblock":
51
+ setStyles(((_theme$styles$typogra6 = theme.styles.typography) === null || _theme$styles$typogra6 === void 0 ? void 0 : _theme$styles$typogra6.quotes) || []);
52
+ break;
53
+ default:
54
+ setStyles([]);
55
+ }
56
+ }
57
+ }, [textType]);
58
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, theme && hasTypographyStyles ? /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
59
+ buttonClassName: "toolbar-item typography-dropdown",
60
+ buttonAriaLabel: "Typography formatting options",
61
+ buttonLabel: (value === null || value === void 0 ? void 0 : value.name) || "Normal",
62
+ stopCloseOnClickSelf: true,
63
+ disabled: false,
64
+ showScroll: false
65
+ }, styles === null || styles === void 0 ? void 0 : styles.map(function (option) {
66
+ return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
67
+ className: "item typography-item ".concat((value === null || value === void 0 ? void 0 : value.id) === option.id ? "active dropdown-item-active" : ""),
68
+ onClick: function onClick() {
69
+ return applyTypography((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
70
+ css: option.styles
71
+ }));
72
+ },
73
+ key: option.id
74
+ }, /*#__PURE__*/_react.default.createElement("span", {
75
+ className: "text"
76
+ }, option.name));
77
+ })) : null);
78
+ };
79
+ exports.TypographyDropDown = TypographyDropDown;
package/components/TypographyDropDown.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["TypographyDropDown","useTypographyAction","value","applyTypography","usePageElements","theme","useState","styles","setStyles","typographyStyles","typography","useRichTextEditor","textBlockSelection","textType","state","hasTypographyStyles","useEffect","headings","paragraphs","lists","filter","x","tag","quotes","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 typographyStyles = theme.styles.typography;\n const { textBlockSelection } = useRichTextEditor();\n const textType = textBlockSelection?.state?.textType;\n\n const hasTypographyStyles = !!typographyStyles;\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 {theme && hasTypographyStyles ? (\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":"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"}
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@webiny/lexical-editor-actions",
3
- "version": "0.0.0-unstable.496cf268ac",
3
+ "version": "0.0.0-unstable.606fc9c866",
4
4
  "dependencies": {
5
5
  "@emotion/styled": "11.10.6",
6
- "@webiny/app-page-builder": "0.0.0-unstable.496cf268ac",
7
- "@webiny/app-page-builder-elements": "0.0.0-unstable.496cf268ac",
8
- "@webiny/lexical-editor": "0.0.0-unstable.496cf268ac",
6
+ "@webiny/app-page-builder": "0.0.0-unstable.606fc9c866",
7
+ "@webiny/app-page-builder-elements": "0.0.0-unstable.606fc9c866",
8
+ "@webiny/lexical-editor": "0.0.0-unstable.606fc9c866",
9
+ "@webiny/theme": "0.0.0-unstable.606fc9c866",
9
10
  "classnames": "2.3.2",
10
11
  "emotion": "10.0.27",
11
12
  "react": "17.0.2",
@@ -13,8 +14,8 @@
13
14
  "react-dom": "17.0.2"
14
15
  },
15
16
  "devDependencies": {
16
- "@webiny/cli": "^0.0.0-unstable.496cf268ac",
17
- "@webiny/project-utils": "^0.0.0-unstable.496cf268ac"
17
+ "@webiny/cli": "^0.0.0-unstable.606fc9c866",
18
+ "@webiny/project-utils": "^0.0.0-unstable.606fc9c866"
18
19
  },
19
20
  "publishConfig": {
20
21
  "access": "public",
@@ -24,5 +25,5 @@
24
25
  "build": "yarn webiny run build",
25
26
  "watch": "yarn webiny run watch"
26
27
  },
27
- "gitHead": "496cf268acd5b092c860b62d75c7d765c9472043"
28
+ "gitHead": "606fc9c866aec436f24983abc9bdaf02af2b8746"
28
29
  }