@webiny/lexical-editor 0.0.0-unstable.1145e7667f

package/components/LexicalHtmlRenderer.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LexicalHtmlRenderer = exports.BaseLexicalHtmlRenderer = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _isValidLexicalData = require("../utils/isValidLexicalData");
+var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
+var _LexicalComposer = require("@lexical/react/LexicalComposer");
+var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
+var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
+var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
+var _webinyNodes = require("../nodes/webinyNodes");
+var _webinyLexicalTheme = require("../themes/webinyLexicalTheme");
+var _react2 = require("@emotion/react");
+var _toTypographyEmotionMap = require("../utils/toTypographyEmotionMap");
+var BaseLexicalHtmlRenderer = function BaseLexicalHtmlRenderer(_ref) {
+  var nodes = _ref.nodes,
+    value = _ref.value,
+    theme = _ref.theme,
+    themeEmotionMap = _ref.themeEmotionMap;
+  var initialConfig = {
+    editorState: (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)(),
+    namespace: "webiny",
+    onError: function onError(error) {
+      throw error;
+    },
+    editable: false,
+    nodes: [].concat((0, _toConsumableArray2.default)(_webinyNodes.WebinyNodes), (0, _toConsumableArray2.default)(nodes || [])),
+    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _webinyLexicalTheme.webinyEditorTheme), {}, {
+      emotionMap: themeEmotionMap,
+      styles: theme.styles
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+    initialConfig: initialConfig
+  }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
+    contentEditable: /*#__PURE__*/_react.default.createElement("div", {
+      className: "editor"
+    }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, null)),
+    ErrorBoundary: _LexicalErrorBoundary.default,
+    placeholder: null
+  }), /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.LexicalUpdateStatePlugin, {
+    value: value
+  }));
+};
+
+/**
+ * @description Main editor container
+ */
+exports.BaseLexicalHtmlRenderer = BaseLexicalHtmlRenderer;
+var LexicalHtmlRenderer = function LexicalHtmlRenderer(props) {
+  return /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
+    var _props$themeEmotionMa;
+    var css = _ref2.css;
+    var themeEmotionMap = (_props$themeEmotionMa = props === null || props === void 0 ? void 0 : props.themeEmotionMap) !== null && _props$themeEmotionMa !== void 0 ? _props$themeEmotionMa : (0, _toTypographyEmotionMap.toTypographyEmotionMap)(css, props.theme);
+    return /*#__PURE__*/_react.default.createElement(BaseLexicalHtmlRenderer, Object.assign({}, props, {
+      themeEmotionMap: themeEmotionMap
+    }));
+  });
+};
+exports.LexicalHtmlRenderer = LexicalHtmlRenderer;

package/components/LexicalHtmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BaseLexicalHtmlRenderer","nodes","value","theme","themeEmotionMap","initialConfig","editorState","isValidLexicalData","generateInitialLexicalValue","namespace","onError","error","editable","WebinyNodes","webinyEditorTheme","emotionMap","styles","LexicalErrorBoundary","LexicalHtmlRenderer","props","css","toTypographyEmotionMap"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { LexicalValue, ThemeEmotionMap } from \"~/types\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { LexicalUpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { WebinyNodes } from \"~/nodes/webinyNodes\";\nimport { webinyEditorTheme, WebinyTheme } from \"~/themes/webinyLexicalTheme\";\nimport { ClassNames } from \"@emotion/react\";\nimport { toTypographyEmotionMap } from \"~/utils/toTypographyEmotionMap\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    /*\n     * @description Theme to be injected into lexical editor\n     */\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n}\n\nexport const BaseLexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = ({\n    nodes,\n    value,\n    theme,\n    themeEmotionMap\n}) => {\n    const initialConfig = {\n        editorState: isValidLexicalData(value) ? value : generateInitialLexicalValue(),\n        namespace: \"webiny\",\n        onError: (error: Error) => {\n            throw error;\n        },\n        editable: false,\n        nodes: [...WebinyNodes, ...(nodes || [])],\n        theme: { ...webinyEditorTheme, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <LexicalUpdateStatePlugin value={value} />\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const LexicalHtmlRenderer: React.FC<LexicalHtmlRendererProps> = props => {\n    return (\n        <ClassNames>\n            {({ css }) => {\n                const themeEmotionMap =\n                    props?.themeEmotionMap ?? toTypographyEmotionMap(css, props.theme);\n                return <BaseLexicalHtmlRenderer {...props} themeEmotionMap={themeEmotionMap} />;\n            }}\n        </ClassNames>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAYO,IAAMA,uBAA2D,GAAG,SAA9DA,uBAA2D,OAKlE;EAAA,IAJFC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IACLC,eAAe,QAAfA,eAAe;EAEf,IAAMC,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAAC,sCAAkB,EAACL,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAM,wDAA2B,GAAE;IAC9EC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,iBAACC,KAAY,EAAK;MACvB,MAAMA,KAAK;IACf,CAAC;IACDC,QAAQ,EAAE,KAAK;IACfX,KAAK,6CAAMY,wBAAW,oCAAMZ,KAAK,IAAI,EAAE,EAAE;IACzCE,KAAK,8DAAOW,qCAAiB;MAAEC,UAAU,EAAEX,eAAe;MAAEY,MAAM,EAAEb,KAAK,CAACa;IAAM;EACpF,CAAC;EAED,oBACI,6BAAC,gCAAe;IAAC,aAAa,EAAEX;EAAc,gBAC1C,6BAAC,qCAAc;IACX,eAAe,eACX;MAAK,SAAS,EAAC;IAAQ,gBACnB,6BAAC,uCAAe,OAAG,CAE1B;IACD,aAAa,EAAEY,6BAAqB;IACpC,WAAW,EAAE;EAAK,EACpB,eACF,6BAAC,kDAAwB;IAAC,KAAK,EAAEf;EAAM,EAAG,CAC5B;AAE1B,CAAC;;AAED;AACA;AACA;AAFA;AAGO,IAAMgB,mBAAuD,GAAG,SAA1DA,mBAAuD,CAAGC,KAAK,EAAI;EAC5E,oBACI,6BAAC,kBAAU,QACN,iBAAa;IAAA;IAAA,IAAVC,GAAG,SAAHA,GAAG;IACH,IAAMhB,eAAe,4BACjBe,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEf,eAAe,yEAAI,IAAAiB,8CAAsB,EAACD,GAAG,EAAED,KAAK,CAAChB,KAAK,CAAC;IACtE,oBAAO,6BAAC,uBAAuB,oBAAKgB,KAAK;MAAE,eAAe,EAAEf;IAAgB,GAAG;EACnF,CAAC,CACQ;AAErB,CAAC;AAAC"}

package/components/Toolbar/HeadingToolbar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="web" />
+import { FC } from "react";
+interface HeadingToolbarProps {
+    anchorElem?: HTMLElement;
+}
+/**
+ * Toolbar with actions specific for the heading elements from H1-H6.
+ * @param anchorElem
+ * @constructor
+ */
+export declare const HeadingToolbar: FC<HeadingToolbarProps>;
+export {};

package/components/Toolbar/HeadingToolbar.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Toolbar = require("./Toolbar");
+/**
+ * Toolbar with actions specific for the heading elements from H1-H6.
+ * @param anchorElem
+ * @constructor
+ */
+var HeadingToolbar = function HeadingToolbar(_ref) {
+  var _ref$anchorElem = _ref.anchorElem,
+    anchorElem = _ref$anchorElem === void 0 ? document.body : _ref$anchorElem;
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
+    type: "heading",
+    anchorElem: anchorElem
+  });
+};
+exports.HeadingToolbar = HeadingToolbar;

package/components/Toolbar/HeadingToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HeadingToolbar","anchorElem","document","body"],"sources":["HeadingToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface HeadingToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions specific for the heading elements from H1-H6.\n * @param anchorElem\n * @constructor\n */\nexport const HeadingToolbar: FC<HeadingToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"heading\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAMA,cAAuC,GAAG,SAA1CA,cAAuC,OAAuC;EAAA,2BAAjCC,UAAU;IAAVA,UAAU,gCAAGC,QAAQ,CAACC,IAAI;EAChF,oBAAO,6BAAC,gBAAO;IAAC,IAAI,EAAE,SAAU;IAAC,UAAU,EAAEF;EAAW,EAAG;AAC/D,CAAC;AAAC"}

package/components/Toolbar/ParagraphToolbar.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="web" />
+import { FC } from "react";
+interface ParagraphToolbarProps {
+    anchorElem?: HTMLElement;
+}
+/**
+ * Toolbar with actions for rich text editing specific for the paragraph element <p>.
+ * @param anchorElem
+ * @constructor
+ */
+export declare const ParagraphToolbar: FC<ParagraphToolbarProps>;
+export {};

package/components/Toolbar/ParagraphToolbar.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParagraphToolbar = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Toolbar = require("./Toolbar");
+/**
+ * Toolbar with actions for rich text editing specific for the paragraph element <p>.
+ * @param anchorElem
+ * @constructor
+ */
+var ParagraphToolbar = function ParagraphToolbar(_ref) {
+  var _ref$anchorElem = _ref.anchorElem,
+    anchorElem = _ref$anchorElem === void 0 ? document.body : _ref$anchorElem;
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, {
+    type: "paragraph",
+    anchorElem: anchorElem
+  });
+};
+exports.ParagraphToolbar = ParagraphToolbar;

package/components/Toolbar/ParagraphToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ParagraphToolbar","anchorElem","document","body"],"sources":["ParagraphToolbar.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Toolbar } from \"~/components/Toolbar/Toolbar\";\n\ninterface ParagraphToolbarProps {\n    anchorElem?: HTMLElement;\n}\n\n/**\n * Toolbar with actions for rich text editing specific for the paragraph element <p>.\n * @param anchorElem\n * @constructor\n */\nexport const ParagraphToolbar: FC<ParagraphToolbarProps> = ({ anchorElem = document.body }) => {\n    return <Toolbar type={\"paragraph\"} anchorElem={anchorElem} />;\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AACA;AACA;AACA;AACO,IAAMA,gBAA2C,GAAG,SAA9CA,gBAA2C,OAAuC;EAAA,2BAAjCC,UAAU;IAAVA,UAAU,gCAAGC,QAAQ,CAACC,IAAI;EACpF,oBAAO,6BAAC,gBAAO;IAAC,IAAI,EAAE,WAAY;IAAC,UAAU,EAAEF;EAAW,EAAG;AACjE,CAAC;AAAC"}

package/components/Toolbar/Toolbar.css

@@ -0,0 +1,423 @@
+.floating-text-format-popup {
+  display: flex;
+  padding: 4px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 30;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  height: 35px;
+  will-change: transform;
+}
+
+.floating-text-format-popup button.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.floating-text-format-popup button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.popup-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.popup-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup select.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.floating-text-format-popup select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.floating-text-format-popup .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.floating-text-format-popup .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.floating-text-format-popup .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+i.bold {
+  background-image: url("../../images/icons/type-bold.svg");
+}
+
+i.italic {
+  background-image: url("../../images/icons/type-italic.svg");
+}
+
+i.code {
+  background-image: url("../../images/icons/code.svg");
+}
+
+i.underline {
+  background-image: url("../../images/icons/type-underline.svg");
+}
+
+i.strikethrough {
+  background-image: url("../../images/icons/type-strikethrough.svg");
+}
+
+i.link {
+  background-image: url("../../images/icons/link.svg");
+}
+
+i.quote {
+  background-image: url("../../images/icons/chat-square-quote.svg");
+}
+
+.icon.left-align,
+i.left-align {
+  background-image: url("../../images/icons/text-left.svg");
+}
+
+i.center-align {
+  background-image: url("../../images/icons/text-center.svg");
+}
+
+i.right-align {
+  background-image: url("../../images/icons/text-right.svg");
+}
+
+i.chevron-down {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url("../../images/icons/chevron-down.svg");
+}
+
+
+.icon.bullet-list,
+.icon.bullet {
+  background-image: url("../../images/icons/list-ul.svg");
+}
+
+.icon.numbered-list,
+.icon.number {
+  background-image: url("../../images/icons/list-ol.svg");
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+i.font-color, .icon.font-color {
+  background-image: url("../../images/icons/font-color.svg");
+}
+
+.floating-text-format-popup button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.floating-text-format-popup button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.toolbar-item:disabled .icon,
+.floating-text-format-popup button.toolbar-item:disabled .text,
+.floating-text-format-popup button.toolbar-item:disabled i.format,
+.floating-text-format-popup button.toolbar-item:disabled .chevron-down {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup .toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.floating-text-format-popup .code-language {
+  width: 150px;
+}
+
+.floating-text-format-popup .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+  padding-right: 10px;
+}
+
+.floating-text-format-popup .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+.lexical-dropdown-container {
+  position: absolute;
+  bottom: -5px;
+  left: 0;
+}
+
+.lexical-dropdown {
+  z-index: 10;
+  display: block;
+  position: fixed;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+  inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-height: 40px;
+  background-color: #fff;
+  max-height: 250px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.lexical-dropdown.no-scroll {
+  max-height: inherit;
+  overflow: auto;
+  overflow-y: auto;
+}
+
+.lexical-dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.lexical-dropdown .item.fontsize-item,
+.lexical-dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.lexical-dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.lexical-dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.lexical-dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.lexical-dropdown .item:hover {
+  background-color: #eee;
+}
+
+.lexical-dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.lexical-dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.lexical-dropdown .divider {
+  width: auto;
+  background-color: #eee;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+ button.item i {
+  opacity: 0.6;
+}
+
+button.item.dropdown-item-active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+button.item.dropdown-item-active i {
+  opacity: 1;
+}

package/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="web" />
+import React from "react";
+import "./Toolbar.css";
+import { ToolbarType } from "../../types";
+export interface ToolbarProps {
+    type: ToolbarType;
+    anchorElem: HTMLElement;
+    children?: React.ReactNode;
+}
+/**
+ * @description Main toolbar container
+ */
+export declare const Toolbar: import("@webiny/react-composition").ComposableFC<ToolbarProps>;