@webiny/lexical-editor 5.44.1-beta.1 → 5.45.0-beta.0

package/components/LexicalHtmlRenderer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","_RichTextEditorContext","_StateHandlingPlugin","_excluded","LexicalHtmlRenderer","exports","_ref","nodes","value","props","_objectWithoutProperties2","default","theme","_objectSpread2","styles","emotionMap","themeEmotionMap","toTypographyEmotionMap","css","themeStylesTransformer","editorTheme","useRef","createTheme","editorValue","isValidLexicalData","generateInitialLexicalValue","initialConfig","editorState","namespace","onError","editable","concat","_toConsumableArray2","allNodes","current","createElement","LexicalComposer","key","length","RichTextEditorProvider","RichTextPlugin","contentEditable","className","ContentEditable","ErrorBoundary","LexicalErrorBoundary","placeholder","StateHandlingPlugin"],"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    EditorTheme,\n    ThemeEmotionMap,\n    toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\n\ninterface LexicalHtmlRendererProps {\n    nodes?: Klass<LexicalNode>[];\n    value: LexicalValue | null;\n    theme: Partial<EditorTheme>;\n    themeEmotionMap?: ThemeEmotionMap;\n    themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n}\n\nexport const LexicalHtmlRenderer = ({ nodes, value, ...props }: LexicalHtmlRendererProps) => {\n    const theme: EditorTheme = { styles: {}, emotionMap: {}, ...props.theme };\n    const themeEmotionMap =\n        props?.themeEmotionMap ?? toTypographyEmotionMap(css, theme, props.themeStylesTransformer);\n    const editorTheme = useRef(createTheme(theme));\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                <StateHandlingPlugin value={editorValue} />\n            </RichTextEditorProvider>\n        </LexicalComposer>\n    );\n};\n"],"mappings":"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","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"
   }));
 };

package/components/ToolbarActions/BoldAction.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_lexical","_useCurrentSelection2","_hooks","BoldAction","exports","_useRichTextEditor","useRichTextEditor","editor","_useCurrentSelection","useCurrentSelection","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","FORMAT_TEXT_COMMAND","default","createElement","onClick","className"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport const BoldAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,qBAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAEO,IAAMI,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAbA,UAAUA,CAAA,EAAS;EAC5B,IAAAE,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,oBAAA,GAA2B,IAAAC,yCAAmB,EAAC,CAAC;IAAxCC,cAAc,GAAAF,oBAAA,CAAdE,cAAc;EACtB,IAAMC,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACtBN,MAAM,CAACO,eAAe,CAACC,4BAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACIlB,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IACIC,OAAO,EAAEL,WAAY;IACrBM,SAAS,EAAE,oBAAoB,IAAIR,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCd,MAAA,CAAAmB,OAAA,CAAAC,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FORMAT_TEXT_COMMAND","useCurrentSelection","useRichTextEditor","BoldAction","editor","rangeSelection","isBoldSelected","hasFormat","handleClick","dispatchCommand","createElement","onClick","className"],"sources":["BoldAction.tsx"],"sourcesContent":["import React from \"react\";\nimport { FORMAT_TEXT_COMMAND } from \"lexical\";\nimport { useCurrentSelection } from \"~/hooks/useCurrentSelection.js\";\nimport { useRichTextEditor } from \"~/hooks/index.js\";\n\nexport const BoldAction = () => {\n    const { editor } = useRichTextEditor();\n    const { rangeSelection } = useCurrentSelection();\n    const isBoldSelected = rangeSelection ? rangeSelection.hasFormat(\"bold\") : false;\n\n    const handleClick = () => {\n        editor.dispatchCommand(FORMAT_TEXT_COMMAND, \"bold\");\n    };\n\n    return (\n        <button\n            onClick={handleClick}\n            className={\"popup-item spaced \" + (isBoldSelected ? \"active\" : \"\")}\n            aria-label=\"Format text as bold\"\n        >\n            <i className=\"format bold\" />\n        </button>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB,QAAQ,SAAS;AAC7C,SAASC,mBAAmB;AAC5B,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAM;IAAEC;EAAO,CAAC,GAAGF,iBAAiB,CAAC,CAAC;EACtC,MAAM;IAAEG;EAAe,CAAC,GAAGJ,mBAAmB,CAAC,CAAC;EAChD,MAAMK,cAAc,GAAGD,cAAc,GAAGA,cAAc,CAACE,SAAS,CAAC,MAAM,CAAC,GAAG,KAAK;EAEhF,MAAMC,WAAW,GAAGA,CAAA,KAAM;IACtBJ,MAAM,CAACK,eAAe,CAACT,mBAAmB,EAAE,MAAM,CAAC;EACvD,CAAC;EAED,oBACID,KAAA,CAAAW,aAAA;IACIC,OAAO,EAAEH,WAAY;IACrBI,SAAS,EAAE,oBAAoB,IAAIN,cAAc,GAAG,QAAQ,GAAG,EAAE,CAAE;IACnE,cAAW;EAAqB,gBAEhCP,KAAA,CAAAW,aAAA;IAAGE,SAAS,EAAC;EAAa,CAAE,CACxB,CAAC;AAEjB,CAAC","ignoreList":[]}

package/components/ToolbarActions/BulletListAction.js

@@ -1,43 +1,37 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BulletListAction = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _commands = require("../../commands");
-var _useRichTextEditor3 = require("../../hooks/useRichTextEditor");
-var _lexicalTheme = require("@webiny/lexical-theme");
-var _lexicalNodes = require("@webiny/lexical-nodes");
-var _useCurrentElement2 = require("../../hooks/useCurrentElement");
-var BulletListAction = exports.BulletListAction = function BulletListAction() {
-  var _useRichTextEditor = (0, _useRichTextEditor3.useRichTextEditor)(),
-    editor = _useRichTextEditor.editor;
-  var _useCurrentElement = (0, _useCurrentElement2.useCurrentElement)(),
-    element = _useCurrentElement.element;
-  var _useRichTextEditor2 = (0, _useRichTextEditor3.useRichTextEditor)(),
-    themeEmotionMap = _useRichTextEditor2.themeEmotionMap;
-  var isList = (0, _lexicalNodes.$isListNode)(element);
-  var isBullet = isList && element.getListType() === "bullet";
-  var formatBulletList = function formatBulletList() {
+import React from "react";
+import { INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from "../../commands/index.js";
+import { useRichTextEditor } from "../../hooks/useRichTextEditor.js";
+import { $isListNode } from "@webiny/lexical-nodes";
+import { useCurrentElement } from "../../hooks/useCurrentElement.js";
+export const BulletListAction = () => {
+  const {
+    editor
+  } = useRichTextEditor();
+  const {
+    element
+  } = useCurrentElement();
+  const {
+    theme
+  } = useRichTextEditor();
+  const isList = $isListNode(element);
+  const isBullet = isList && element.getListType() === "bullet";
+  const formatBulletList = () => {
     if (!isBullet) {
-      var styleId = themeEmotionMap ? (0, _lexicalTheme.findTypographyStyleByHtmlTag)("ul", themeEmotionMap)?.id : undefined;
+      const styleId = theme.getTypographyByTag("ul")?.id;
+
       // will update the active state in the useEffect
-      editor.dispatchCommand(_commands.INSERT_UNORDERED_LIST_COMMAND, {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, {
         themeStyleId: styleId
       });
     } else {
-      editor.dispatchCommand(_commands.REMOVE_LIST_COMMAND, undefined);
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
     }
   };
-  return /*#__PURE__*/_react.default.createElement("button", {
-    onClick: function onClick() {
-      return formatBulletList();
-    },
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: () => formatBulletList(),
     className: "popup-item spaced " + (isBullet ? "active" : ""),
     "aria-label": "Format text as bullet list"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon bullet-list"
   }));
 };