@webiny/lexical-editor 6.0.0-beta.0 → 6.0.0-rc.0

package/components/LexicalHtmlRenderer.js

@@ -1,64 +1,49 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _emotion = require("emotion");
-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 _lexicalNodes = require("@webiny/lexical-nodes");
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _isValidLexicalData = require("../utils/isValidLexicalData");
-var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
-var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
-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,
-    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 = {
-    // We update the state via the `<LexicalUpdateStatePlugin/>`.
+import React, { useRef } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary.js";
+import { allNodes } from "@webiny/lexical-nodes";
+import { RichTextEditorProvider } from "../context/RichTextEditorContext.js";
+import { StateHandlingPlugin } from "../plugins/StateHandlingPlugin.js";
+export const LexicalHtmlRenderer = ({
+  nodes,
+  value,
+  ...props
+}) => {
+  const theme = props.theme;
+  const editorTheme = useRef(theme);
+  const initialConfig = {
     editorState: null,
     namespace: "webiny",
-    onError: function onError() {
+    onError: () => {
       // Ignore errors. We don't want to break the app because of errors caused by config/value updates.
       // These are usually resolved in the next component render cycle.
     },
     editable: false,
-    nodes: [].concat((0, _toConsumableArray2.default)(_lexicalNodes.allNodes), (0, _toConsumableArray2.default)(nodes || [])),
-    theme: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, editorTheme.current), {}, {
-      emotionMap: themeEmotionMap,
-      styles: theme.styles
-    })
+    nodes: [...allNodes, ...(nodes || [])],
+    theme: {
+      ...editorTheme.current.tokens,
+      // I'm not aware of a better way to pass custom data to nodes.
+      // For now, we're using Lexical's theme to pass colors and typography.
+      $colors: editorTheme.current.colors,
+      $typography: editorTheme.current.typography,
+      $cacheKey: JSON.stringify(editorTheme.current)
+    }
   };
-  return /*#__PURE__*/_react.default.createElement(_LexicalComposer.LexicalComposer, {
+  return /*#__PURE__*/React.createElement(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", {
+  }, /*#__PURE__*/React.createElement(RichTextEditorProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement("div", {
       className: "editor"
-    }, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, null)),
-    ErrorBoundary: _LexicalErrorBoundary.default,
+    }, /*#__PURE__*/React.createElement(ContentEditable, null)),
+    ErrorBoundary: LexicalErrorBoundary,
     placeholder: null
-  }), /*#__PURE__*/_react.default.createElement(_LexicalUpdateStatePlugin.UpdateStatePlugin, {
-    value: editorValue
+  }), /*#__PURE__*/React.createElement(StateHandlingPlugin, {
+    value: value
   })));
 };
 

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["React","useRef","LexicalComposer","RichTextPlugin","ContentEditable","LexicalErrorBoundary","allNodes","RichTextEditorProvider","StateHandlingPlugin","LexicalHtmlRenderer","nodes","value","props","theme","editorTheme","initialConfig","editorState","namespace","onError","editable","current","tokens","$colors","colors","$typography","typography","$cacheKey","JSON","stringify","createElement","key","length","contentEditable","className","ErrorBoundary","placeholder"],"sources":["LexicalHtmlRenderer.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport type { Klass, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary.js\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport type { EditorTheme } from \"@webiny/lexical-theme\";\nimport type { LexicalValue } from \"~/types.js\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext.js\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin.js\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: EditorTheme;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = props.theme;\n    const editorTheme = useRef(theme);\n\n    const initialConfig = {\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: {\n            ...editorTheme.current.tokens,\n            // I'm not aware of a better way to pass custom data to nodes.\n            // For now, we're using Lexical's theme to pass colors and typography.\n            $colors: editorTheme.current.colors,\n            $typography: editorTheme.current.typography,\n            $cacheKey: JSON.stringify(editorTheme.current)\n        }\n    };\n\n    return (\n        <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n            <RichTextEditorProvider theme={theme}>\n                <RichTextPlugin\n                    contentEditable={\n                        <div className=\"editor\">\n                            <ContentEditable />\n                        </div>\n                    }\n                    ErrorBoundary={LexicalErrorBoundary}\n                    placeholder={null}\n                />\n                <StateHandlingPlugin value={value} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,sCAAsC;AACrE,SAASC,eAAe,QAAQ,uCAAuC;AACvE,SAASC,oBAAoB,QAAQ,wCAAwC;AAC7E,SAASC,QAAQ,QAAQ,uBAAuB;AAGhD,SAASC,sBAAsB;AAC/B,SAASC,mBAAmB;AAQ5B,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAE,GAAGC;AAAgC,CAAC,KAAK;EACzF,MAAMC,KAAkB,GAAGD,KAAK,CAACC,KAAK;EACtC,MAAMC,WAAW,GAAGb,MAAM,CAACY,KAAK,CAAC;EAEjC,MAAME,aAAa,GAAG;IAClBC,WAAW,EAAE,IAAI;IACjBC,SAAS,EAAE,QAAQ;IACnBC,OAAO,EAAEA,CAAA,KAAM;MACX;MACA;IAAA,CACH;IACDC,QAAQ,EAAE,KAAK;IACfT,KAAK,EAAE,CAAC,GAAGJ,QAAQ,EAAE,IAAII,KAAK,IAAI,EAAE,CAAC,CAAC;IACtCG,KAAK,EAAE;MACH,GAAGC,WAAW,CAACM,OAAO,CAACC,MAAM;MAC7B;MACA;MACAC,OAAO,EAAER,WAAW,CAACM,OAAO,CAACG,MAAM;MACnCC,WAAW,EAAEV,WAAW,CAACM,OAAO,CAACK,UAAU;MAC3CC,SAAS,EAAEC,IAAI,CAACC,SAAS,CAACd,WAAW,CAACM,OAAO;IACjD;EACJ,CAAC;EAED,oBACIpB,KAAA,CAAA6B,aAAA,CAAC3B,eAAe;IAACa,aAAa,EAAEA,aAAc;IAACe,GAAG,EAAEf,aAAa,CAACL,KAAK,CAACqB;EAAO,gBAC3E/B,KAAA,CAAA6B,aAAA,CAACtB,sBAAsB;IAACM,KAAK,EAAEA;EAAM,gBACjCb,KAAA,CAAA6B,aAAA,CAAC1B,cAAc;IACX6B,eAAe,eACXhC,KAAA,CAAA6B,aAAA;MAAKI,SAAS,EAAC;IAAQ,gBACnBjC,KAAA,CAAA6B,aAAA,CAACzB,eAAe,MAAE,CACjB,CACR;IACD8B,aAAa,EAAE7B,oBAAqB;IACpC8B,WAAW,EAAE;EAAK,CACrB,CAAC,eACFnC,KAAA,CAAA6B,aAAA,CAACrB,mBAAmB;IAACG,KAAK,EAAEA;EAAM,CAAE,CAChB,CACX,CAAC;AAE1B,CAAC","ignoreList":[]}

package/components/Toolbar/StaticToolbar.css

@@ -258,3 +258,419 @@
 .static-toolbar button.item.dropdown-item-active i {
   opacity: 1;
 }
+
+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.indent {
+  background-image: url("../../images/icons/indent.svg");
+}
+
+i.outdent {
+  background-image: url("../../images/icons/outdent.svg");
+}
+
+i.justify-align {
+  background-image: url("../../images/icons/justify.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");
+}
+
+i.insert-image,
+.icon.insert-image {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url("../../images/icons/insert-image.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");
+}
+
+i.font-color,
+.icon.font-color {
+  background-image: url("../../images/icons/font-color.svg");
+}
+
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.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;
+}
+
+.editor-shell span.editor-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  user-select: none;
+}
+
+.editor-shell .editor-image img {
+  max-width: 100%;
+  cursor: default;
+}
+
+.editor-shell .editor-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
+
+.editor-shell .editor-image img.focused.draggable {
+  cursor: grab;
+}
+
+.editor-shell .editor-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+
+.editor-shell .editor-image .image-caption-container .tree-view-output {
+  margin: 0;
+  border-radius: 0;
+}
+
+.editor-shell .editor-image .image-caption-container {
+  display: block;
+  position: absolute;
+  bottom: 4px;
+  left: 0;
+  right: 0;
+  padding: 0;
+  margin: 0;
+  border-top: 1px solid #fff;
+  background-color: #ffffffe6;
+  min-width: 100px;
+  color: #000;
+  overflow: hidden;
+}
+
+.editor-shell .editor-image .image-caption-button {
+  display: block;
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  width: 30%;
+  padding: 10px;
+  margin: 0 auto;
+  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;
+}
+
+.editor-shell .editor-image .image-caption-button:hover {
+  background-color: #3c84f480;
+}
+
+.editor-shell .editor-image .image-resizer {
+  display: block;
+  width: 7px;
+  height: 7px;
+  position: absolute;
+  background-color: #3c84f4;
+  border: 1px solid #fff;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-n {
+  top: -6px;
+  left: 48%;
+  cursor: n-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-ne {
+  top: -6px;
+  right: -6px;
+  cursor: ne-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-e {
+  bottom: 48%;
+  right: -6px;
+  cursor: e-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-se {
+  bottom: -2px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-s {
+  bottom: -2px;
+  left: 48%;
+  cursor: s-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-sw {
+  bottom: -2px;
+  left: -6px;
+  cursor: sw-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-w {
+  bottom: 48%;
+  left: -6px;
+  cursor: w-resize;
+}
+
+.editor-shell .editor-image .image-resizer.image-resizer-nw {
+  top: -6px;
+  left: -6px;
+  cursor: nw-resize;
+}
+
+.editor-shell span.inline-editor-image {
+  cursor: default;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+}
+
+.editor-shell .inline-editor-image img {
+  max-width: 100%;
+  cursor: default;
+}
+
+.editor-shell .inline-editor-image img.focused {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.editor-shell .inline-editor-image img.focused.draggable {
+  cursor: grab;
+}
+
+.editor-shell .inline-editor-image img.focused.draggable:active {
+  cursor: grabbing;
+}
+
+.editor-shell .inline-editor-image .image-caption-container .tree-view-output {
+  margin: 0;
+  border-radius: 0;
+}
+
+.editor-shell .inline-editor-image.position-full {
+  margin: 1em 0;
+}
+
+.editor-shell .inline-editor-image.position-left {
+  float: left;
+  width: 50%;
+  margin: 1em 1em 0 0;
+}
+
+.editor-shell .inline-editor-image.position-right {
+  float: right;
+  width: 50%;
+  margin: 1em 0 0 1em;
+}
+
+.editor-shell .inline-editor-image .image-edit-button {
+  display: block;
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px 8px;
+  margin: 0 auto;
+  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;
+}
+
+.editor-shell .inline-editor-image .image-edit-button:hover {
+  background-color: #3c84f480;
+}
+
+.editor-shell .inline-editor-image .image-caption-container {
+  display: block;
+  background-color: #f4f4f4;
+  min-width: 100%;
+  color: #000;
+  overflow: hidden;
+}

package/components/Toolbar/StaticToolbar.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
 import "./StaticToolbar.css";
-export declare const StaticToolbar: () => React.JSX.Element;
+export declare const StaticToolbar: ({ className }: {
+    className?: string;
+}) => React.JSX.Element;

package/components/Toolbar/StaticToolbar.js

@@ -1,26 +1,22 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StaticToolbar = void 0;
-var _react = _interopRequireWildcard(require("react"));
-require("./StaticToolbar.css");
-var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
-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) {
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
-      key: action.name
-    }, action.element);
-  })));
+import React, { Fragment } from "react";
+import "./StaticToolbar.css";
+import { useLexicalEditorConfig } from "../LexicalEditorConfig/LexicalEditorConfig.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+export const StaticToolbar = ({
+  className
+}) => {
+  const {
+    toolbarElements
+  } = useLexicalEditorConfig();
+  const {
+    editor
+  } = useRichTextEditor();
+  return /*#__PURE__*/React.createElement("div", {
+    className: className ?? "static-toolbar",
+    "data-role": "toolbar"
+  }, editor.isEditable() && /*#__PURE__*/React.createElement(React.Fragment, null, toolbarElements.map(action => /*#__PURE__*/React.createElement(Fragment, {
+    key: action.name
+  }, action.element))));
 };
 
 //# sourceMappingURL=StaticToolbar.js.map

package/components/Toolbar/StaticToolbar.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["React","Fragment","useLexicalEditorConfig","useRichTextEditor","StaticToolbar","className","toolbarElements","editor","createElement","isEditable","map","action","key","name","element"],"sources":["StaticToolbar.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport \"./StaticToolbar.css\";\nimport { useLexicalEditorConfig } from \"~/components/LexicalEditorConfig/LexicalEditorConfig.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const StaticToolbar = ({ className }: { className?: string }) => {\n    const { toolbarElements } = useLexicalEditorConfig();\n    const { editor } = useRichTextEditor();\n\n    return (\n        <div className={className ?? \"static-toolbar\"} data-role={\"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,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC;AACA,SAASC,sBAAsB;AAC/B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EACpE,MAAM;IAAEC;EAAgB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEK;EAAO,CAAC,GAAGJ,iBAAiB,CAAC,CAAC;EAEtC,oBACIH,KAAA,CAAAQ,aAAA;IAAKH,SAAS,EAAEA,SAAS,IAAI,gBAAiB;IAAC,aAAW;EAAU,GAC/DE,MAAM,CAACE,UAAU,CAAC,CAAC,iBAChBT,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAC,QAAA,QACKK,eAAe,CAACI,GAAG,CAACC,MAAM,iBACvBX,KAAA,CAAAQ,aAAA,CAACP,QAAQ;IAACW,GAAG,EAAED,MAAM,CAACE;EAAK,GAAEF,MAAM,CAACG,OAAkB,CACzD,CACH,CAEL,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/ToolbarActions/BoldAction.js

@@ -1,28 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BoldAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _lexical = require("lexical");
-var _useCurrentSelection2 = require("../../hooks/useCurrentSelection");
-var _hooks = require("../../hooks");
-var BoldAction = exports.BoldAction = function BoldAction() {
-  var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useCurrentSelection = (0, _useCurrentSelection2.useCurrentSelection)(),
-    rangeSelection = _useCurrentSelection.rangeSelection;
-  var isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
-  var handleClick = function handleClick() {
-    editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, "bold");
+import React from "react";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { useCurrentSelection } from "../../hooks/useCurrentSelection.js";
+import { useRichTextEditor } from "../../hooks/index.js";
+export const BoldAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    rangeSelection
+  } = useCurrentSelection();
+  const isBoldSelected = rangeSelection ? rangeSelection.hasFormat("bold") : false;
+  const handleClick = () => {
+    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", {
     onClick: handleClick,
     className: "popup-item spaced " + (isBoldSelected ? "active" : ""),
     "aria-label": "Format text as bold"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "format bold"
   }));
 };