@webiny/lexical-editor 5.40.0-beta.1 → 5.40.0-beta.3

package/components/LexicalHtmlRenderer.js

@@ -1,15 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LexicalHtmlRenderer = exports.BaseLexicalHtmlRenderer = void 0;
+exports.LexicalHtmlRenderer = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _emotion = require("emotion");
 var _LexicalComposer = require("@lexical/react/LexicalComposer");
 var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
 var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
@@ -19,11 +20,14 @@ var _lexicalTheme = require("@webiny/lexical-theme");
 var _isValidLexicalData = require("../utils/isValidLexicalData");
 var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
 var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
-var BaseLexicalHtmlRenderer = function BaseLexicalHtmlRenderer(_ref) {
+var _RichTextEditorContext = require("../context/RichTextEditorContext");
+var _excluded = ["nodes", "value", "theme"];
+var LexicalHtmlRenderer = exports.LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
   var nodes = _ref.nodes,
     value = _ref.value,
     theme = _ref.theme,
-    themeEmotionMap = _ref.themeEmotionMap;
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var themeEmotionMap = props?.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(_emotion.css, theme, props.themeStylesTransformer);
   var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)());
   var editorValue = (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)();
   var initialConfig = {
@@ -44,6 +48,9 @@ var BaseLexicalHtmlRenderer = function BaseLexicalHtmlRenderer(_ref) {
   return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
     initialConfig: initialConfig,
     key: initialConfig.nodes.length
+  }, /*#__PURE__*/_react.default.createElement(_RichTextEditorContext.RichTextEditorProvider, {
+    theme: theme,
+    themeEmotionMap: themeEmotionMap
   }, /*#__PURE__*/_react.default.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
     contentEditable: /*#__PURE__*/_react.default.createElement("div", {
       className: "editor"
@@ -52,22 +59,7 @@ var BaseLexicalHtmlRenderer = function BaseLexicalHtmlRenderer(_ref) {
     placeholder: null
   }), /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.UpdateStatePlugin, {
     value: editorValue
-  }));
-};
-
-/**
- * @description Main editor container
- */
-exports.BaseLexicalHtmlRenderer = BaseLexicalHtmlRenderer;
-var LexicalHtmlRenderer = function LexicalHtmlRenderer(props) {
-  return /*#__PURE__*/_react.default.createElement(_react2.ClassNames, null, function (_ref2) {
-    var css = _ref2.css;
-    var themeEmotionMap = props?.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(css, props.theme, props.themeStylesTransformer);
-    return /*#__PURE__*/_react.default.createElement(BaseLexicalHtmlRenderer, Object.assign({}, props, {
-      themeEmotionMap: themeEmotionMap
-    }));
-  });
+  })));
 };
-exports.LexicalHtmlRenderer = LexicalHtmlRenderer;
 
 //# sourceMappingURL=LexicalHtmlRenderer.js.map

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_react2","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","_LexicalUpdateStatePlugin","BaseLexicalHtmlRenderer","_ref","nodes","value","theme","themeEmotionMap","editorTheme","useRef","createTheme","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","editable","concat","_toConsumableArray2","default","allNodes","_objectSpread2","current","emotionMap","styles","createElement","LexicalComposer","key","length","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","UpdateStatePlugin","exports","LexicalHtmlRenderer","props","ClassNames","_ref2","css","toTypographyEmotionMap","themeStylesTransformer","Object","assign"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { ClassNames, CSSObject } from \"@emotion/react\";\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 { allNodes } from \"@webiny/lexical-nodes\";\nimport {\n    createTheme,\n    WebinyTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const BaseLexicalHtmlRenderer = ({\n    nodes,\n    value,\n    theme,\n    themeEmotionMap\n}: LexicalHtmlRendererProps) => {\n    const editorTheme = useRef(createTheme());\n    const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n    const initialConfig = {\n        // We update the state via the `<LexicalUpdateStatePlugin/>`.\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextPlugin\n                contentEditable={\n                    <div className=\"editor\">\n                        <ContentEditable />\n                    </div>\n                }\n                ErrorBoundary={LexicalErrorBoundary}\n                placeholder={null}\n            />\n            <UpdateStatePlugin value={editorValue} />\n        </LexicalComposer>\n    );\n};\n\n/**\n * @description Main editor container\n */\nexport const LexicalHtmlRenderer = (props: LexicalHtmlRendererProps) => {\n    return (\n        <ClassNames>\n            {({ css }) => {\n                const themeEmotionMap =\n                    props?.themeEmotionMap ??\n                    toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n                return <BaseLexicalHtmlRenderer {...props} themeEmotionMap={themeEmotionMap} />;\n            }}\n        </ClassNames>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","_LexicalUpdateStatePlugin","_RichTextEditorContext","_excluded","LexicalHtmlRenderer","exports","_ref","nodes","value","theme","props","_objectWithoutProperties2","default","themeEmotionMap","toTypographyEmotionMap","css","themeStylesTransformer","editorTheme","useRef","createTheme","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","editable","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","styles","createElement","LexicalComposer","key","length","RichTextEditorProvider","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","UpdateStatePlugin"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { Klass, LexicalNode } from \"lexical\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\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 { allNodes } from \"@webiny/lexical-nodes\";\nimport {\n    createTheme,\n    WebinyTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: WebinyTheme;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({\n    nodes,\n    value,\n    theme,\n    ...props\n}: LexicalHtmlRendererProps) => {\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme());\n    const editorValue = isValidLexicalData(value) ? value : generateInitialLexicalValue();\n\n    const initialConfig = {\n        // We update the state via the `<LexicalUpdateStatePlugin/>`.\n        editorState: null,\n        namespace: \"webiny\",\n        onError: () => {\n            // Ignore errors. We don't want to break the app because of errors caused by config/value updates.\n            // These are usually resolved in the next component render cycle.\n        },\n        editable: false,\n        nodes: [...allNodes, ...(nodes || [])],\n        theme: { ...editorTheme.current, emotionMap: themeEmotionMap, styles: theme.styles }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme} themeEmotionMap={themeEmotionMap}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <UpdateStatePlugin value={editorValue} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAEA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,uBAAA,GAAAJ,OAAA;AACA,IAAAK,qBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,aAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AAMA,IAAAS,mBAAA,GAAAT,OAAA;AACA,IAAAU,4BAAA,GAAAV,OAAA;AAEA,IAAAW,yBAAA,GAAAX,OAAA;AACA,IAAAY,sBAAA,GAAAZ,OAAA;AAAyE,IAAAa,SAAA;AAUlE,IAAMC,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAAE,IAAA,EAKA;EAAA,IAJ5BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACFC,KAAK,OAAAC,yBAAA,CAAAC,OAAA,EAAAN,IAAA,EAAAH,SAAA;EAER,IAAMU,eAAe,GACjBH,KAAK,EAAEG,eAAe,IAAI,IAAAC,oCAAsB,EAACC,YAAG,EAAEN,KAAK,EAAEC,KAAK,CAACM,sBAAsB,CAAC;EAC9F,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAC,IAAAC,yBAAW,EAAC,CAAC,CAAC;EACzC,IAAMC,WAAW,GAAG,IAAAC,sCAAkB,EAACb,KAAK,CAAC,GAAGA,KAAK,GAAG,IAAAc,wDAA2B,EAAC,CAAC;EAErF,IAAMC,aAAa,GAAG;IAClB;IACAC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAE,SAAAA,QAAA,EAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfpB,KAAK,KAAAqB,MAAA,KAAAC,mBAAA,CAAAjB,OAAA,EAAMkB,sBAAQ,OAAAD,mBAAA,CAAAjB,OAAA,EAAML,KAAK,IAAI,EAAE,EAAE;IACtCE,KAAK,MAAAsB,cAAA,CAAAnB,OAAA,MAAAmB,cAAA,CAAAnB,OAAA,MAAOK,WAAW,CAACe,OAAO;MAAEC,UAAU,EAAEpB,eAAe;MAAEqB,MAAM,EAAEzB,KAAK,CAACyB;IAAM;EACtF,CAAC;EAED,oBACI9C,MAAA,CAAAwB,OAAA,CAAAuB,aAAA,CAAC3C,gBAAA,CAAA4C,eAAe;IAACb,aAAa,EAAEA,aAAc;IAACc,GAAG,EAAEd,aAAa,CAAChB,KAAK,CAAC+B;EAAO,gBAC3ElD,MAAA,CAAAwB,OAAA,CAAAuB,aAAA,CAACjC,sBAAA,CAAAqC,sBAAsB;IAAC9B,KAAK,EAAEA,KAAM;IAACI,eAAe,EAAEA;EAAgB,gBACnEzB,MAAA,CAAAwB,OAAA,CAAAuB,aAAA,CAAC1C,sBAAA,CAAA+C,cAAc;IACXC,eAAe,eACXrD,MAAA,CAAAwB,OAAA,CAAAuB,aAAA;MAAKO,SAAS,EAAC;IAAQ,gBACnBtD,MAAA,CAAAwB,OAAA,CAAAuB,aAAA,CAACzC,uBAAA,CAAAiD,eAAe,MAAE,CACjB,CACR;IACDC,aAAa,EAAEC,6BAAqB;IACpCC,WAAW,EAAE;EAAK,CACrB,CAAC,eACF1D,MAAA,CAAAwB,OAAA,CAAAuB,aAAA,CAAClC,yBAAA,CAAA8C,iBAAiB;IAACvC,KAAK,EAAEY;EAAY,CAAE,CACpB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}

package/components/Toolbar/StaticToolbar.css

@@ -4,9 +4,9 @@
   padding: 4px;
   vertical-align: middle;
   border: 1px solid #eee;
-  height: 35px;
   will-change: transform;
   background: #fff;
+  flex-wrap: wrap;
   z-index: 1;
 }
 

package/components/Toolbar/StaticToolbar.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from "react";
 import "./StaticToolbar.css";
-export declare const StaticToolbar: () => JSX.Element;
+export declare const StaticToolbar: () => React.JSX.Element;

package/components/Toolbar/StaticToolbar.js

@@ -1,22 +1,19 @@
 "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.StaticToolbar = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 require("./StaticToolbar.css");
 var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
-var StaticToolbar = function StaticToolbar() {
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
+var _hooks = require("../../hooks");
+var StaticToolbar = exports.StaticToolbar = function StaticToolbar() {
   var _useLexicalEditorConf = (0, _LexicalEditorConfig.useLexicalEditorConfig)(),
     toolbarElements = _useLexicalEditorConf.toolbarElements;
+  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
+    editor = _useRichTextEditor.editor;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "static-toolbar"
   }, editor.isEditable() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toolbarElements.map(function (action) {
@@ -25,6 +22,5 @@ var StaticToolbar = function StaticToolbar() {
     }, action.element);
   })));
 };
-exports.StaticToolbar = StaticToolbar;
 
 //# sourceMappingURL=StaticToolbar.js.map

package/components/Toolbar/StaticToolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","_LexicalEditorConfig","StaticToolbar","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","createElement","className","isEditable","Fragment","map","action","key","name","element","exports"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n\nexport const StaticToolbar = () => {\n    const [editor] = useLexicalComposerContext();\n    const { toolbarElements } = useLexicalEditorConfig();\n\n    return (\n        <div className=\"static-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,uBAAA,GAAAD,OAAA;AACAA,OAAA;AACA,IAAAE,oBAAA,GAAAF,OAAA;AAEO,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EAC/B,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EACb,IAAAI,qBAAA,GAA4B,IAAAC,2CAAsB,EAAC,CAAC;IAA5CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;EAEvB,oBACId,MAAA,CAAAU,OAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC1BL,MAAM,CAACM,UAAU,CAAC,CAAC,iBAChBjB,MAAA,CAAAU,OAAA,CAAAK,aAAA,CAAAf,MAAA,CAAAU,OAAA,CAAAQ,QAAA,QACKJ,eAAe,CAACK,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACvBpB,MAAA,CAAAU,OAAA,CAAAK,aAAA,CAACf,MAAA,CAAAkB,QAAQ;MAACG,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACH,CAEL,CAAC;AAEd,CAAC;AAACC,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalEditorConfig","_hooks","StaticToolbar","exports","_useLexicalEditorConf","useLexicalEditorConfig","toolbarElements","_useRichTextEditor","useRichTextEditor","editor","default","createElement","className","isEditable","Fragment","map","action","key","name","element"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const StaticToolbar = () => {\n    const { toolbarElements } = useLexicalEditorConfig();\n    const { editor } = useRichTextEditor();\n\n    return (\n        <div className=\"static-toolbar\">\n            {editor.isEditable() && (\n                <>\n                    {toolbarElements.map(action => (\n                        <Fragment key={action.name}>{action.element}</Fragment>\n                    ))}\n                </>\n            )}\n        </div>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAA,OAAA;AACA,IAAAC,oBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEO,IAAMG,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EAC/B,IAAAE,qBAAA,GAA4B,IAAAC,2CAAsB,EAAC,CAAC;IAA5CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe;EACvB,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EAEd,oBACIZ,MAAA,CAAAa,OAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAAgB,GAC1BH,MAAM,CAACI,UAAU,CAAC,CAAC,iBAChBhB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAAAd,MAAA,CAAAa,OAAA,CAAAI,QAAA,QACKR,eAAe,CAACS,GAAG,CAAC,UAAAC,MAAM;IAAA,oBACvBnB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACd,MAAA,CAAAiB,QAAQ;MAACG,GAAG,EAAED,MAAM,CAACE;IAAK,GAAEF,MAAM,CAACG,OAAkB,CAAC;EAAA,CAC1D,CACH,CAEL,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Toolbar/Toolbar.css

@@ -1,4 +1,4 @@
-.floating-text-format-popup {
+.floating-toolbar {
   display: flex;
   padding: 4px;
   vertical-align: middle;
@@ -15,7 +15,7 @@
   will-change: transform;
 }
 
-.floating-text-format-popup button.popup-item {
+.floating-toolbar button.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -25,15 +25,15 @@
   vertical-align: middle;
 }
 
-.floating-text-format-popup button.popup-item:disabled {
+.floating-toolbar button.popup-item:disabled {
   cursor: not-allowed;
 }
 
-.floating-text-format-popup button.popup-item.spaced {
+.floating-toolbar button.popup-item.spaced {
   margin-right: 2px;
 }
 
-.floating-text-format-popup button.popup-item i.format {
+.floating-toolbar button.popup-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -44,23 +44,23 @@
   opacity: 0.6;
 }
 
-.floating-text-format-popup button.popup-item:disabled i.format {
+.floating-toolbar button.popup-item:disabled i.format {
   opacity: 0.2;
 }
 
-.floating-text-format-popup button.popup-item.active {
+.floating-toolbar button.popup-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-.floating-text-format-popup button.popup-item.active i {
+.floating-toolbar button.popup-item.active i {
   opacity: 1;
 }
 
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
+.floating-toolbar .popup-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.floating-text-format-popup select.popup-item {
+.floating-toolbar select.popup-item {
   border: 0;
   display: flex;
   background: none;
@@ -75,12 +75,12 @@
   text-overflow: ellipsis;
 }
 
-.floating-text-format-popup select.code-language {
+.floating-toolbar select.code-language {
   text-transform: capitalize;
   width: 130px;
 }
 
-.floating-text-format-popup .popup-item .text {
+.floating-toolbar .popup-item .text {
   display: flex;
   line-height: 20px;
   width: 200px;
@@ -94,7 +94,7 @@
   text-align: left;
 }
 
-.floating-text-format-popup .popup-item .icon {
+.floating-toolbar .popup-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -104,7 +104,7 @@
   background-size: contain;
 }
 
-.floating-text-format-popup i.chevron-down {
+.floating-toolbar i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -112,7 +112,7 @@
   user-select: none;
 }
 
-.floating-text-format-popup i.chevron-down.inside {
+.floating-toolbar i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -122,7 +122,7 @@
   pointer-events: none;
 }
 
-.floating-text-format-popup .divider {
+.floating-toolbar .divider {
   width: 1px;
   background-color: #eee;
   margin: 0 4px;
@@ -190,8 +190,8 @@ i.chevron-down {
   background-image: url("../../images/icons/chevron-down.svg");
 }
 
-
-i.insert-image, .icon.insert-image {
+i.insert-image,
+.icon.insert-image {
   background-color: transparent;
   background-size: contain;
   display: inline-block;
@@ -210,7 +210,8 @@ i.insert-image, .icon.insert-image {
   background-image: url("../../images/icons/list-ol.svg");
 }
 
-i.font-color, .icon.font-color {
+i.font-color,
+.icon.font-color {
   background-image: url("../../images/icons/font-color.svg");
 }
 
@@ -219,7 +220,7 @@ i.font-color, .icon.font-color {
   background-color: rgb(223, 232, 250);
 }
 
-.floating-text-format-popup button.toolbar-item {
+.floating-toolbar button.toolbar-item {
   border: 0;
   display: flex;
   background: none;
@@ -232,15 +233,15 @@ i.font-color, .icon.font-color {
   justify-content: space-between;
 }
 
-.floating-text-format-popup button.toolbar-item:disabled {
+.floating-toolbar button.toolbar-item:disabled {
   cursor: not-allowed;
 }
 
-.floating-text-format-popup button.toolbar-item.spaced {
+.floating-toolbar button.toolbar-item.spaced {
   margin-right: 2px;
 }
 
-.floating-text-format-popup button.toolbar-item i.format {
+.floating-toolbar button.toolbar-item i.format {
   background-size: contain;
   display: inline-block;
   height: 18px;
@@ -250,35 +251,35 @@ i.font-color, .icon.font-color {
   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 {
+.floating-toolbar button.toolbar-item:disabled .icon,
+.floating-toolbar button.toolbar-item:disabled .text,
+.floating-toolbar button.toolbar-item:disabled i.format,
+.floating-toolbar button.toolbar-item:disabled .chevron-down {
   opacity: 0.2;
 }
 
-.floating-text-format-popup button.toolbar-item.active {
+.floating-toolbar button.toolbar-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
 
-.floating-text-format-popup button.toolbar-item.active i {
+.floating-toolbar button.toolbar-item.active i {
   opacity: 1;
 }
 
-.floating-text-format-popup .toolbar-item:hover:not([disabled]) {
+.floating-toolbar .toolbar-item:hover:not([disabled]) {
   background-color: #eee;
 }
 
-.floating-text-format-popup .toolbar-item.font-family .text {
+.floating-toolbar .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;
 }
 
-.floating-text-format-popup .code-language {
+.floating-toolbar .code-language {
   width: 150px;
 }
 
-.floating-text-format-popup .toolbar-item .text {
+.floating-toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
   vertical-align: middle;
@@ -291,7 +292,7 @@ i.font-color, .icon.font-color {
   padding-right: 10px;
 }
 
-.floating-text-format-popup .toolbar-item .icon {
+.floating-toolbar .toolbar-item .icon {
   display: flex;
   width: 20px;
   height: 20px;
@@ -301,7 +302,7 @@ i.font-color, .icon.font-color {
   background-size: contain;
 }
 
-.floating-text-format-popup i.chevron-down {
+.floating-toolbar i.chevron-down {
   margin-top: 3px;
   width: 16px;
   height: 16px;
@@ -309,7 +310,7 @@ i.font-color, .icon.font-color {
   user-select: none;
 }
 
-.floating-text-format-popup i.chevron-down.inside {
+.floating-toolbar i.chevron-down.inside {
   width: 16px;
   height: 16px;
   display: flex;
@@ -325,7 +326,7 @@ i.font-color, .icon.font-color {
   margin: 0 4px;
 }
 
-.toolbar-item.font-size{
+.toolbar-item.font-size {
   width: 70px;
 }
 
@@ -340,7 +341,7 @@ i.font-color, .icon.font-color {
   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);
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
   border-radius: 8px;
   min-height: 40px;
   background-color: #fff;
@@ -436,7 +437,7 @@ i.font-color, .icon.font-color {
   }
 }
 
- button.item i {
+button.item i {
   opacity: 0.6;
 }
 
@@ -452,30 +453,30 @@ button.item.dropdown-item-active i {
   cursor: default;
   display: inline-block;
   position: relative;
-  user-select: none
+  user-select: none;
 }
 
 .editor-shell .editor-image img {
   max-width: 100%;
-  cursor: default
+  cursor: default;
 }
 
 .editor-shell .editor-image img.focused {
-  outline: 2px solid rgb(60,132,244);
-  user-select: none
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
 }
 
 .editor-shell .editor-image img.focused.draggable {
-  cursor: grab
+  cursor: grab;
 }
 
 .editor-shell .editor-image img.focused.draggable:active {
-  cursor: grabbing
+  cursor: grabbing;
 }
 
 .editor-shell .editor-image .image-caption-container .tree-view-output {
   margin: 0;
-  border-radius: 0
+  border-radius: 0;
 }
 
 .editor-shell .editor-image .image-caption-container {
@@ -490,7 +491,7 @@ button.item.dropdown-item-active i {
   background-color: #ffffffe6;
   min-width: 100px;
   color: #000;
-  overflow: hidden
+  overflow: hidden;
 }
 
 .editor-shell .editor-image .image-caption-button {
@@ -502,17 +503,17 @@ button.item.dropdown-item-active i {
   width: 30%;
   padding: 10px;
   margin: 0 auto;
-  border: 1px solid rgba(255,255,255,.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   background-color: #00000080;
   min-width: 100px;
   color: #fff;
   cursor: pointer;
-  user-select: none
+  user-select: none;
 }
 
 .editor-shell .editor-image .image-caption-button:hover {
-  background-color: #3c84f480
+  background-color: #3c84f480;
 }
 
 .editor-shell .editor-image .image-resizer {
@@ -521,100 +522,100 @@ button.item.dropdown-item-active i {
   height: 7px;
   position: absolute;
   background-color: #3c84f4;
-  border: 1px solid #fff
+  border: 1px solid #fff;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-n {
   top: -6px;
   left: 48%;
-  cursor: n-resize
+  cursor: n-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-ne {
   top: -6px;
   right: -6px;
-  cursor: ne-resize
+  cursor: ne-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-e {
   bottom: 48%;
   right: -6px;
-  cursor: e-resize
+  cursor: e-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-se {
   bottom: -2px;
   right: -6px;
-  cursor: nwse-resize
+  cursor: nwse-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-s {
   bottom: -2px;
   left: 48%;
-  cursor: s-resize
+  cursor: s-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-sw {
   bottom: -2px;
   left: -6px;
-  cursor: sw-resize
+  cursor: sw-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-w {
   bottom: 48%;
   left: -6px;
-  cursor: w-resize
+  cursor: w-resize;
 }
 
 .editor-shell .editor-image .image-resizer.image-resizer-nw {
   top: -6px;
   left: -6px;
-  cursor: nw-resize
+  cursor: nw-resize;
 }
 
 .editor-shell span.inline-editor-image {
   cursor: default;
   display: inline-block;
   position: relative;
-  z-index: 1
+  z-index: 1;
 }
 
 .editor-shell .inline-editor-image img {
   max-width: 100%;
-  cursor: default
+  cursor: default;
 }
 
 .editor-shell .inline-editor-image img.focused {
-  outline: 2px solid rgb(60,132,244)
+  outline: 2px solid rgb(60, 132, 244);
 }
 
 .editor-shell .inline-editor-image img.focused.draggable {
-  cursor: grab
+  cursor: grab;
 }
 
 .editor-shell .inline-editor-image img.focused.draggable:active {
-  cursor: grabbing
+  cursor: grabbing;
 }
 
 .editor-shell .inline-editor-image .image-caption-container .tree-view-output {
   margin: 0;
-  border-radius: 0
+  border-radius: 0;
 }
 
 .editor-shell .inline-editor-image.position-full {
-  margin: 1em 0
+  margin: 1em 0;
 }
 
 .editor-shell .inline-editor-image.position-left {
   float: left;
   width: 50%;
-  margin: 1em 1em 0 0
+  margin: 1em 1em 0 0;
 }
 
 .editor-shell .inline-editor-image.position-right {
   float: right;
   width: 50%;
-  margin: 1em 0 0 1em
+  margin: 1em 0 0 1em;
 }
 
 .editor-shell .inline-editor-image .image-edit-button {
@@ -624,17 +625,17 @@ button.item.dropdown-item-active i {
   right: 12px;
   padding: 6px 8px;
   margin: 0 auto;
-  border: 1px solid rgba(255,255,255,.3);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 5px;
   background-color: #00000080;
   min-width: 60px;
   color: #fff;
   cursor: pointer;
-  user-select: none
+  user-select: none;
 }
 
 .editor-shell .inline-editor-image .image-edit-button:hover {
-  background-color: #3c84f480
+  background-color: #3c84f480;
 }
 
 .editor-shell .inline-editor-image .image-caption-container {
@@ -642,5 +643,5 @@ button.item.dropdown-item-active i {
   background-color: #f4f4f4;
   min-width: 100%;
   color: #000;
-  overflow: hidden
+  overflow: hidden;
 }