@webiny/lexical-editor-actions 0.0.0-unstable.085ff6572f

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LexicalEditorActions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LexicalEditorActions: () => JSX.Element;

package/LexicalEditorActions.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalEditorActions = void 0;
+var _lexicalEditor = require("@webiny/lexical-editor");
+var _react = _interopRequireDefault(require("react"));
+var _LexicalColorPickerDropdown = require("./components/LexicalColorPickerDropdown");
+var _TypographyDropDown = require("./components/TypographyDropDown");
+var _TextAlignmentDropdown = require("./components/TextAlignmentDropdown");
+var LexicalEditorActions = function LexicalEditorActions() {
+  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.LexicalEditorConfig, null, /*#__PURE__*/_react.default.createElement(_lexicalEditor.FontColorAction.ColorPicker, {
+    element: /*#__PURE__*/_react.default.createElement(_LexicalColorPickerDropdown.LexicalColorPickerDropdown, null)
+  }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TypographyAction.TypographyDropDown, {
+    element: /*#__PURE__*/_react.default.createElement(_TypographyDropDown.TypographyDropDown, null)
+  }), /*#__PURE__*/_react.default.createElement(_lexicalEditor.TextAlignmentAction.TextAlignmentDropDown, {
+    element: /*#__PURE__*/_react.default.createElement(_TextAlignmentDropdown.TextAlignmentDropdown, null)
+  }));
+};
+exports.LexicalEditorActions = LexicalEditorActions;

package/LexicalEditorActions.js.map

@@ -0,0 +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"}

package/README.md

@@ -0,0 +1,15 @@
+# @webiny/lexical-editor-actions
+[![](https://img.shields.io/npm/dw/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor) 
+[![](https://img.shields.io/npm/v/@webiny/lexical-editor-actions.svg)](https://www.npmjs.com/package/@webiny/lexical-editor)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+
+## About
+
+This package provides actions plugins for Lexical editor.
+
+
+## Where is it used?
+
+Currently, this packaged is used in [@webiny/app-serverless-cms](../app-serverless-cms).

package/components/LexicalColorPicker/LexicalColorPicker.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface LexicalColorPickerProps {
+    value: string;
+    onChange?: Function;
+    onChangeComplete: Function;
+    handlerClassName?: string;
+}
+export declare const LexicalColorPicker: React.FC<LexicalColorPickerProps>;
+export {};

package/components/LexicalColorPicker/LexicalColorPicker.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalColorPicker = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _emotion = require("emotion");
+var _usePageBuilder2 = require("@webiny/app-page-builder/hooks/usePageBuilder");
+var _usePageElements = require("@webiny/app-page-builder-elements/hooks/usePageElements");
+var _utils = require("@webiny/app-page-builder/utils");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _reactColor = require("react-color");
+var _roundColor_lens24px = require("./round-color_lens-24px.svg");
+// Icons
+
+var ColorPickerStyle = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "ewrv11k0",
+  label: "ColorPickerStyle"
+})({
+  position: "relative",
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "space-between",
+  width: 225,
+  padding: 0,
+  backgroundColor: "#fff"
+});
+var ColorBox = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "ewrv11k1",
+  label: "ColorBox"
+})({
+  cursor: "pointer",
+  width: 50,
+  height: 40,
+  margin: 10,
+  borderRadius: 2
+});
+var Color = /*#__PURE__*/(0, _styled.default)("button", {
+  target: "ewrv11k2",
+  label: "Color"
+})({
+  cursor: "pointer",
+  width: 40,
+  height: 30,
+  border: "1px solid var(--mdc-theme-on-background)",
+  transition: "transform 0.2s, scale 0.2s",
+  display: "flex",
+  alignItems: "center",
+  "&::after": {
+    boxShadow: "0 0.25rem 0.125rem 0 rgba(0,0,0,0.05)",
+    transition: "opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)",
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    opacity: 0
+  },
+  "&:hover": {
+    transform: "scale(1.25)",
+    "&::after": {
+      opacity: 1
+    }
+  }
+});
+var transparent = /*#__PURE__*/(0, _emotion.css)({
+  backgroundSize: "10px 10px",
+  backgroundImage: "linear-gradient( 45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient(-45deg, #555 25%, transparent 25%, transparent)," + "linear-gradient( 45deg, transparent 75%, #555 75%)," + "linear-gradient(-45deg, transparent 75%, #555 75%)"
+}, "label:transparent;");
+var iconPaletteStyle = /*#__PURE__*/(0, _emotion.css)({
+  height: 20,
+  width: "100%",
+  marginTop: 1,
+  color: "var(--mdc-theme-secondary)"
+}, "label:iconPaletteStyle;");
+var COLORS = {
+  lightGray: "hsla(0, 0%, 97%, 1)",
+  gray: "hsla(300, 2%, 92%, 1)",
+  darkGray: "hsla(0, 0%, 70%, 1)",
+  darkestGray: "hsla(0, 0%, 20%, 1)",
+  black: "hsla(208, 100%, 5%, 1)"
+};
+var styles = {
+  selectedColor: /*#__PURE__*/(0, _emotion.css)({
+    boxShadow: "0px 0px 0px 2px var(--mdc-theme-secondary)"
+  }, "label:selectedColor;"),
+  button: /*#__PURE__*/(0, _emotion.css)({
+    cursor: "pointer",
+    height: 30,
+    boxSizing: "border-box",
+    "&:hover:not(:disabled)": {
+      backgroundColor: COLORS.gray
+    },
+    "&:focus:not(:disabled)": {
+      outline: "none"
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    },
+    "& svg": {
+      width: 16,
+      height: 16
+    }
+  }, "label:button;"),
+  color: /*#__PURE__*/(0, _emotion.css)({
+    width: "40px",
+    height: "100%"
+  }, "label:color;")
+};
+var LexicalColorPicker = function LexicalColorPicker(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showPicker = _useState2[0],
+    setShowPicker = _useState2[1];
+  // Either a custom color or a color coming from the theme object.
+  var _useState3 = (0, _react.useState)(value || "#fff"),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    actualSelectedColor = _useState4[0],
+    setActualSelectedColor = _useState4[1];
+  var themeColor = false;
+  var getColorValue = (0, _react.useCallback)(function (rgb) {
+    return "rgba(".concat(rgb.r, ", ").concat(rgb.g, ", ").concat(rgb.b, ", ").concat(rgb.a, ")");
+  }, []);
+  var onColorChange = (0, _react.useCallback)(function (color, event) {
+    event.preventDefault();
+    // controls of the picker are updated as user moves the mouse
+    var customColor = getColorValue(color.rgb);
+    setActualSelectedColor(customColor);
+    if (typeof onChange === "function") {
+      onChange(customColor);
+    }
+  }, [onChange]);
+  var onColorChangeComplete = (0, _react.useCallback)(function (_ref2, event) {
+    var rgb = _ref2.rgb;
+    setActualSelectedColor(value);
+    onChangeComplete(getColorValue(rgb));
+    event.preventDefault();
+  }, [onChangeComplete]);
+  var togglePicker = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    setShowPicker(!showPicker);
+  }, []);
+  var _usePageBuilder = (0, _usePageBuilder2.usePageBuilder)(),
+    theme = _usePageBuilder.theme;
+  var pageElements = (0, _usePageElements.usePageElements)();
+  var themeColors = {};
+  if (_utils.isLegacyRenderingEngine) {
+    var legacyTheme = theme;
+    themeColors = (legacyTheme === null || legacyTheme === void 0 ? void 0 : legacyTheme.colors) || {};
+  } else {
+    var _pageElements$theme, _pageElements$theme$s;
+    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;
+    if (colors) {
+      for (var key in colors) {
+        if (colors[key]) {
+          themeColors[key] = colors[key];
+        }
+      }
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(ColorPickerStyle, null, Object.keys(themeColors).map(function (key, index) {
+    var color = themeColors[key];
+    if (color === value || value === "transparent") {
+      themeColor = true;
+    }
+    return /*#__PURE__*/_react.default.createElement(ColorBox, {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(Color, {
+      className: key === value ? styles.selectedColor : "",
+      style: {
+        backgroundColor: color
+      },
+      onClick: function onClick() {
+        // With page elements implementation, we want to store the color key and
+        // then the actual color will be retrieved from the theme object.
+        var value = color;
+        var themeColorName;
+        if (!_utils.isLegacyRenderingEngine) {
+          var _pageElements$theme2, _pageElements$theme2$;
+          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;
+          themeColorName = key;
+          value = _colors[key];
+        }
+        onChangeComplete(value, themeColorName);
+      }
+    }));
+  }), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
+    className: (0, _classnames2.default)(transparent, (0, _defineProperty2.default)({}, styles.selectedColor, value === "transparent")),
+    onClick: function onClick() {
+      onChangeComplete("transparent");
+    }
+  })), /*#__PURE__*/_react.default.createElement(ColorBox, null, /*#__PURE__*/_react.default.createElement(Color, {
+    className: value && !themeColor ? styles.selectedColor : "",
+    style: {
+      backgroundColor: themeColor ? "#fff" : value
+    },
+    onClick: togglePicker
+  }, /*#__PURE__*/_react.default.createElement(_roundColor_lens24px.ReactComponent, {
+    className: iconPaletteStyle
+  }))), showPicker && /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
+    color: actualSelectedColor,
+    onChange: onColorChange,
+    onChangeComplete: onColorChangeComplete
+  }));
+};
+exports.LexicalColorPicker = LexicalColorPicker;

package/components/LexicalColorPicker/LexicalColorPicker.js.map

@@ -0,0 +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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"}

package/components/LexicalColorPicker/round-color_lens-24px.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
+	 height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g id="Bounding_Boxes">
+	<g id="ui_x5F_spec_x5F_header_copy_3">
+	</g>
+	<rect fill="none" width="24" height="24"/>
+</g>
+<g id="Rounded">
+	<g id="ui_x5F_spec_x5F_header_copy_7">
+	</g>
+	<path fill="currentColor" d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9c0.83,0,1.5-0.67,1.5-1.5c0-0.39-0.15-0.74-0.39-1.01c-0.23-0.26-0.38-0.61-0.38-0.99
+		c0-0.83,0.67-1.5,1.5-1.5H16c2.76,0,5-2.24,5-5C21,6.58,16.97,3,12,3z M6.5,12C5.67,12,5,11.33,5,10.5S5.67,9,6.5,9S8,9.67,8,10.5
+		S7.33,12,6.5,12z M9.5,8C8.67,8,8,7.33,8,6.5S8.67,5,9.5,5S11,5.67,11,6.5S10.33,8,9.5,8z M14.5,8C13.67,8,13,7.33,13,6.5
+		S13.67,5,14.5,5S16,5.67,16,6.5S15.33,8,14.5,8z M17.5,12c-0.83,0-1.5-0.67-1.5-1.5S16.67,9,17.5,9S19,9.67,19,10.5
+		S18.33,12,17.5,12z"/>
+</g>
+</svg>

package/components/LexicalColorPicker/unselected.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="#DDDDDD"/>
+    <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="22" height="20" style="{ mask-type:alpha; }">
+        <rect x="0.5" y="0.889587" width="20.8636" height="18.5455" rx="1" fill="white" stroke="white"/>
+    </mask>
+    <g mask="url(#mask0)">
+        <path d="M20.9999 1.41229L0.999878 18.4123" stroke="#BF0000" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+</svg>

package/components/LexicalColorPickerDropdown.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LexicalColorPickerDropdown: () => JSX.Element;

package/components/LexicalColorPickerDropdown.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalColorPickerDropdown = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _lexicalEditor = require("@webiny/lexical-editor");
+var _LexicalColorPicker = require("./LexicalColorPicker/LexicalColorPicker");
+var LexicalColorPickerDropdown = function LexicalColorPickerDropdown() {
+  var _useFontColorPicker = (0, _lexicalEditor.useFontColorPicker)(),
+    value = _useFontColorPicker.value,
+    applyColor = _useFontColorPicker.applyColor;
+  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
+    buttonClassName: "toolbar-item color-picker",
+    buttonAriaLabel: "Formatting options for font size",
+    buttonIconClassName: "icon font-color",
+    stopCloseOnClickSelf: true,
+    disabled: false,
+    showScroll: false
+  }, /*#__PURE__*/_react.default.createElement(_LexicalColorPicker.LexicalColorPicker, {
+    value: value,
+    onChangeComplete: applyColor
+  }));
+};
+exports.LexicalColorPickerDropdown = LexicalColorPickerDropdown;

package/components/LexicalColorPickerDropdown.js.map

@@ -0,0 +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"}

package/components/TextAlignmentDropdown.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TextAlignmentDropdown: () => JSX.Element;

package/components/TextAlignmentDropdown.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextAlignmentDropdown = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _lexicalEditor = require("@webiny/lexical-editor");
+var TextAlignmentDropdown = function TextAlignmentDropdown() {
+  var _textBlockSelection$s, _textBlockSelection$s2;
+  var _useRichTextEditor = (0, _lexicalEditor.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var _useTextAlignmentActi = (0, _lexicalEditor.useTextAlignmentAction)(),
+    applyTextAlignment = _useTextAlignmentActi.applyTextAlignment,
+    outdentText = _useTextAlignmentActi.outdentText,
+    indentText = _useTextAlignmentActi.indentText;
+  return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
+    buttonLabel: "Align",
+    buttonIconClassName: "icon left-align",
+    buttonClassName: "toolbar-item spaced alignment",
+    buttonAriaLabel: "Formatting options for text alignment"
+  }, /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      applyTextAlignment("left");
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon left-align"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Left Align")), /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      applyTextAlignment("center");
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon center-align"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Center Align")), /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      applyTextAlignment("right");
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon right-align"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Right Align")), /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      applyTextAlignment("justify");
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon justify-align"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Justify Align")), /*#__PURE__*/_react.default.createElement(_lexicalEditor.Divider, null), /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      outdentText();
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon " + (textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s = textBlockSelection.state) !== null && _textBlockSelection$s !== void 0 && _textBlockSelection$s.isRTL ? "indent" : "outdent")
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Outdent")), /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+    onClick: function onClick() {
+      indentText();
+    },
+    className: "item"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "icon " + (textBlockSelection !== null && textBlockSelection !== void 0 && (_textBlockSelection$s2 = textBlockSelection.state) !== null && _textBlockSelection$s2 !== void 0 && _textBlockSelection$s2.isRTL ? "outdent" : "indent")
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, "Indent")));
+};
+exports.TextAlignmentDropdown = TextAlignmentDropdown;

package/components/TextAlignmentDropdown.js.map

@@ -0,0 +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"}

package/components/TypographyDropDown.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TypographyDropDown: () => JSX.Element;

package/components/TypographyDropDown.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TypographyDropDown = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lexicalEditor = require("@webiny/lexical-editor");
+var _appPageBuilderElements = require("@webiny/app-page-builder-elements");
+var TypographyDropDown = function TypographyDropDown() {
+  var _textBlockSelection$s;
+  var _useTypographyAction = (0, _lexicalEditor.useTypographyAction)(),
+    value = _useTypographyAction.value,
+    applyTypography = _useTypographyAction.applyTypography;
+  var _usePageElements = (0, _appPageBuilderElements.usePageElements)(),
+    theme = _usePageElements.theme;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    styles = _useState2[0],
+    setStyles = _useState2[1];
+  var _useRichTextEditor = (0, _lexicalEditor.useRichTextEditor)(),
+    textBlockSelection = _useRichTextEditor.textBlockSelection;
+  var textType = textBlockSelection === null || textBlockSelection === void 0 ? void 0 : (_textBlockSelection$s = textBlockSelection.state) === null || _textBlockSelection$s === void 0 ? void 0 : _textBlockSelection$s.textType;
+  (0, _react.useEffect)(function () {
+    var _theme$styles$typogra, _theme$styles$typogra2, _theme$styles$typogra3, _theme$styles$typogra4, _theme$styles$typogra5, _theme$styles$typogra6;
+    if (textType) {
+      switch (textType) {
+        case "heading":
+          setStyles(((_theme$styles$typogra = theme.styles.typography) === null || _theme$styles$typogra === void 0 ? void 0 : _theme$styles$typogra.headings) || []);
+          break;
+        case "paragraph":
+          setStyles(((_theme$styles$typogra2 = theme.styles.typography) === null || _theme$styles$typogra2 === void 0 ? void 0 : _theme$styles$typogra2.paragraphs) || []);
+          break;
+        case "bullet":
+          setStyles(((_theme$styles$typogra3 = theme.styles.typography.lists) === null || _theme$styles$typogra3 === void 0 ? void 0 : _theme$styles$typogra3.filter(function (x) {
+            return x.tag === "ul";
+          })) || []);
+          break;
+        case "number":
+          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) {
+            return x.tag === "ol";
+          })) || []);
+          break;
+        case "quoteblock":
+          setStyles(((_theme$styles$typogra6 = theme.styles.typography) === null || _theme$styles$typogra6 === void 0 ? void 0 : _theme$styles$typogra6.quotes) || []);
+          break;
+        default:
+          setStyles([]);
+      }
+    }
+  }, [textType]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!(styles !== null && styles !== void 0 && styles.length) ? /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDown, {
+    buttonClassName: "toolbar-item typography-dropdown",
+    buttonAriaLabel: "Typography formatting options",
+    buttonLabel: (value === null || value === void 0 ? void 0 : value.name) || "Normal",
+    stopCloseOnClickSelf: true,
+    disabled: false,
+    showScroll: false
+  }, styles === null || styles === void 0 ? void 0 : styles.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_lexicalEditor.DropDownItem, {
+      className: "item typography-item ".concat((value === null || value === void 0 ? void 0 : value.id) === option.id ? "active dropdown-item-active" : ""),
+      onClick: function onClick() {
+        return applyTypography((0, _objectSpread2.default)((0, _objectSpread2.default)({}, option), {}, {
+          css: option.styles
+        }));
+      },
+      key: option.id
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "text"
+    }, option.name));
+  })) : null);
+};
+exports.TypographyDropDown = TypographyDropDown;

package/components/TypographyDropDown.js.map

@@ -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"}

package/index.d.ts

@@ -0,0 +1 @@
+export { LexicalEditorActions } from "./LexicalEditorActions";

package/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LexicalEditorActions", {
+  enumerable: true,
+  get: function get() {
+    return _LexicalEditorActions.LexicalEditorActions;
+  }
+});
+var _LexicalEditorActions = require("./LexicalEditorActions");

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { LexicalEditorActions } from \"~/LexicalEditorActions\";\n"],"mappings":";;;;;;;;;;;AAAA"}

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@webiny/lexical-editor-actions",
+	"version": "0.0.0-unstable.085ff6572f",
+	"dependencies": {
+		"@emotion/styled": "11.10.6",
+		"@webiny/app-page-builder": "0.0.0-unstable.085ff6572f",
+		"@webiny/app-page-builder-elements": "0.0.0-unstable.085ff6572f",
+		"@webiny/lexical-editor": "0.0.0-unstable.085ff6572f",
+		"@webiny/theme": "0.0.0-unstable.085ff6572f",
+		"classnames": "2.3.2",
+		"emotion": "10.0.27",
+		"react": "17.0.2",
+		"react-color": "2.19.3",
+		"react-dom": "17.0.2"
+	},
+	"devDependencies": {
+		"@webiny/cli": "0.0.0-unstable.085ff6572f",
+		"@webiny/project-utils": "0.0.0-unstable.085ff6572f"
+	},
+	"publishConfig": {
+		"access": "public",
+		"directory": "dist"
+	},
+	"scripts": {
+		"build": "yarn webiny run build",
+		"watch": "yarn webiny run watch"
+	},
+	"gitHead": "085ff6572f6bb6a76d218088b06d9f4ef92bbea7"
+}