@webiny/lexical-editor 5.41.1 → 5.41.2-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Editor/RichTextEditor.d.ts +2 -2
- package/components/Editor/RichTextEditor.js +1 -1
- package/components/Editor/RichTextEditor.js.map +1 -1
- package/components/LexicalHtmlRenderer.d.ts +3 -3
- package/components/LexicalHtmlRenderer.js +7 -4
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/context/RichTextEditorContext.d.ts +3 -3
- package/context/RichTextEditorContext.js.map +1 -1
- package/package.json +8 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { CSSObject } from "@emotion/react";
|
|
3
3
|
import { Klass, LexicalNode } from "lexical";
|
|
4
|
-
import {
|
|
4
|
+
import { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
|
|
5
5
|
import { LexicalValue, ToolbarActionPlugin } from "../../types";
|
|
6
6
|
export interface RichTextEditorProps {
|
|
7
7
|
children?: React.ReactNode | React.ReactNode[];
|
|
@@ -17,7 +17,7 @@ export interface RichTextEditorProps {
|
|
|
17
17
|
staticToolbar?: React.ReactNode;
|
|
18
18
|
styles?: React.CSSProperties;
|
|
19
19
|
tag?: string;
|
|
20
|
-
theme:
|
|
20
|
+
theme: EditorTheme;
|
|
21
21
|
themeEmotionMap?: ThemeEmotionMap;
|
|
22
22
|
toolbarActionPlugins?: ToolbarActionPlugin[];
|
|
23
23
|
themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
|
|
@@ -52,7 +52,7 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
|
|
|
52
52
|
generateInitialValue = _ref$generateInitialV === void 0 ? _generateInitialLexicalValue.generateInitialLexicalValue : _ref$generateInitialV,
|
|
53
53
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
54
54
|
var themeEmotionMap = props.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(_emotion.css, props.theme, props.themeStylesTransformer);
|
|
55
|
-
var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)());
|
|
55
|
+
var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)(props.theme));
|
|
56
56
|
var config = (0, _LexicalEditorConfig.useLexicalEditorConfig)();
|
|
57
57
|
var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
|
|
58
58
|
historyState = _useSharedHistoryCont.historyState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_text","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_lexicalTheme","_lexicalNodes","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_SharedHistoryContext","_LexicalEditorConfig","_normalizeInputValue","_excluded","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","_ref$generateInitialV","generateInitialValue","generateInitialLexicalValue","props","_objectWithoutProperties2","default","themeEmotionMap","toTypographyEmotionMap","css","theme","themeStylesTransformer","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","value","normalizeInputValue","editorValue","isValidLexicalData","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","isEditorEmpty","$isRootTextContentEmpty","isComposing","newValue","JSON","stringify","toJSON","SharedHistoryContext","LexicalComposer","length","RichTextEditorProvider","toolbarActionPlugins","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","exports","makeDecoratable","LexicalEditorWithConfig"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport {\n createTheme,\n WebinyTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n LexicalEditorWithConfig,\n useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { normalizeInputValue } from \"./normalizeInputValue\";\n\nexport interface RichTextEditorProps {\n children?: React.ReactNode | React.ReactNode[];\n classes?: string;\n contentEditableStyles?: React.CSSProperties;\n focus?: boolean;\n height?: number | string;\n nodes?: Klass<LexicalNode>[];\n onBlur?: (editorState: LexicalValue) => void;\n onChange?: (json: LexicalValue) => void;\n placeholder?: string;\n placeholderStyles?: React.CSSProperties;\n staticToolbar?: React.ReactNode;\n styles?: React.CSSProperties;\n tag?: string;\n theme: WebinyTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n toolbar?: React.ReactNode;\n value: LexicalValue | null | undefined;\n width?: number | string;\n generateInitialValue?: () => LexicalValue;\n}\n\nconst BaseRichTextEditor = ({\n toolbar,\n staticToolbar,\n onChange,\n nodes,\n placeholder,\n children,\n onBlur,\n focus,\n styles,\n width,\n height,\n contentEditableStyles,\n placeholderStyles,\n generateInitialValue = generateInitialLexicalValue,\n ...props\n}: RichTextEditorProps) => {\n const themeEmotionMap =\n props.themeEmotionMap ??\n toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n const editorTheme = useRef(createTheme());\n const config = useLexicalEditorConfig();\n const { historyState } = useSharedHistoryContext();\n const placeholderElem = (\n <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n );\n const scrollRef = useRef(null);\n const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n undefined\n );\n const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n if (_floatingAnchorElem !== null) {\n setFloatingAnchorElem(_floatingAnchorElem);\n }\n };\n\n const sizeStyle = {\n height: height || \"\",\n width: width || \"\"\n };\n\n const configNodes = config.nodes.map(node => node.node);\n const configPlugins = config.plugins.map(plugin => (\n <Fragment key={plugin.name}>{plugin.element}</Fragment>\n ));\n\n const value = normalizeInputValue(props.value);\n const editorValue = isValidLexicalData(value) ? value : generateInitialValue();\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 nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n };\n\n function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n editorState.read(() => {\n if (typeof onChange === \"function\") {\n const editorState = editor.getEditorState();\n const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n const newValue = JSON.stringify(editorState.toJSON());\n\n // We don't want to call \"onChange\" if editor text is empty, and original `value` is empty.\n if (!value && isEditorEmpty) {\n return;\n }\n\n if (value !== newValue) {\n onChange(newValue);\n }\n }\n });\n }\n\n return (\n /**\n * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n * and initially, there can be multiple re-renders, while the config object is settled.\n *\n * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n */\n <SharedHistoryContext>\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider\n theme={props.theme}\n themeEmotionMap={themeEmotionMap}\n toolbarActionPlugins={props.toolbarActionPlugins}\n >\n {staticToolbar ? staticToolbar : null}\n <div\n /* This className is necessary for targeting of editor container from CSS files. */\n className={\"editor-shell\"}\n ref={scrollRef}\n style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n >\n {/* State plugins. */}\n <OnChangePlugin onChange={handleOnChange} />\n <UpdateStatePlugin value={editorValue} />\n <ClearEditorPlugin />\n <HistoryPlugin externalHistoryState={historyState} />\n {/* Event plugins. */}\n {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n {focus && <AutoFocusPlugin />}\n {/* External plugins and components. */}\n {configPlugins}\n {children}\n <RichTextPlugin\n contentEditable={\n <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n <div className=\"editor\" ref={onRef}>\n <ContentEditable\n style={{ outline: 0, ...contentEditableStyles }}\n />\n </div>\n </div>\n }\n placeholder={placeholderElem}\n ErrorBoundary={LexicalErrorBoundary}\n />\n {/* Toolbar. */}\n {floatingAnchorElem && toolbar}\n </div>\n </RichTextEditorProvider>\n </LexicalComposer>\n </SharedHistoryContext>\n );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n return (\n <LexicalEditorWithConfig>\n <BaseRichTextEditor {...props} />\n </LexicalEditorWithConfig>\n );\n});\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_text","_LexicalOnChangePlugin","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_lexicalTheme","_lexicalNodes","_RichTextEditorContext","_isValidLexicalData","_LexicalUpdateStatePlugin","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_SharedHistoryContext","_LexicalEditorConfig","_normalizeInputValue","_excluded","BaseRichTextEditor","_ref","toolbar","staticToolbar","onChange","nodes","placeholder","children","onBlur","focus","styles","width","height","contentEditableStyles","placeholderStyles","_ref$generateInitialV","generateInitialValue","generateInitialLexicalValue","props","_objectWithoutProperties2","default","themeEmotionMap","toTypographyEmotionMap","css","theme","themeStylesTransformer","editorTheme","useRef","createTheme","config","useLexicalEditorConfig","_useSharedHistoryCont","useSharedHistoryContext","historyState","placeholderElem","createElement","Placeholder","scrollRef","_useState","useState","undefined","_useState2","_slicedToArray2","floatingAnchorElem","setFloatingAnchorElem","onRef","_floatingAnchorElem","sizeStyle","configNodes","map","node","configPlugins","plugins","plugin","Fragment","key","name","element","value","normalizeInputValue","editorValue","isValidLexicalData","initialConfig","editorState","namespace","onError","concat","_toConsumableArray2","allNodes","_objectSpread2","current","emotionMap","handleOnChange","editor","read","getEditorState","isEditorEmpty","$isRootTextContentEmpty","isComposing","newValue","JSON","stringify","toJSON","SharedHistoryContext","LexicalComposer","length","RichTextEditorProvider","toolbarActionPlugins","className","ref","style","overflow","position","OnChangePlugin","UpdateStatePlugin","ClearEditorPlugin","HistoryPlugin","externalHistoryState","BlurEventPlugin","AutoFocusPlugin","RichTextPlugin","contentEditable","ContentEditable","outline","ErrorBoundary","LexicalErrorBoundary","RichTextEditor","exports","makeDecoratable","LexicalEditorWithConfig"],"sources":["RichTextEditor.tsx"],"sourcesContent":["import React, { Fragment, useRef, useState } from \"react\";\nimport { css } from \"emotion\";\nimport { CSSObject } from \"@emotion/react\";\nimport { Klass, LexicalEditor, LexicalNode } from \"lexical\";\nimport { EditorState } from \"lexical/LexicalEditorState\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { OnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { ClearEditorPlugin } from \"@lexical/react/LexicalClearEditorPlugin\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { LexicalErrorBoundary } from \"@lexical/react/LexicalErrorBoundary\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport {\n createTheme,\n EditorTheme,\n ThemeEmotionMap,\n toTypographyEmotionMap\n} from \"@webiny/lexical-theme\";\nimport { allNodes } from \"@webiny/lexical-nodes\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\nimport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\nimport { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nimport { LexicalValue, ToolbarActionPlugin } from \"~/types\";\nimport { Placeholder } from \"~/ui/Placeholder\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { SharedHistoryContext, useSharedHistoryContext } from \"~/context/SharedHistoryContext\";\nimport {\n LexicalEditorWithConfig,\n useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\nimport { normalizeInputValue } from \"./normalizeInputValue\";\n\nexport interface RichTextEditorProps {\n children?: React.ReactNode | React.ReactNode[];\n classes?: string;\n contentEditableStyles?: React.CSSProperties;\n focus?: boolean;\n height?: number | string;\n nodes?: Klass<LexicalNode>[];\n onBlur?: (editorState: LexicalValue) => void;\n onChange?: (json: LexicalValue) => void;\n placeholder?: string;\n placeholderStyles?: React.CSSProperties;\n staticToolbar?: React.ReactNode;\n styles?: React.CSSProperties;\n tag?: string;\n theme: EditorTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;\n toolbar?: React.ReactNode;\n value: LexicalValue | null | undefined;\n width?: number | string;\n generateInitialValue?: () => LexicalValue;\n}\n\nconst BaseRichTextEditor = ({\n toolbar,\n staticToolbar,\n onChange,\n nodes,\n placeholder,\n children,\n onBlur,\n focus,\n styles,\n width,\n height,\n contentEditableStyles,\n placeholderStyles,\n generateInitialValue = generateInitialLexicalValue,\n ...props\n}: RichTextEditorProps) => {\n const themeEmotionMap =\n props.themeEmotionMap ??\n toTypographyEmotionMap(css, props.theme, props.themeStylesTransformer);\n\n const editorTheme = useRef(createTheme(props.theme));\n const config = useLexicalEditorConfig();\n const { historyState } = useSharedHistoryContext();\n const placeholderElem = (\n <Placeholder styles={placeholderStyles}>{placeholder || \"Enter text...\"}</Placeholder>\n );\n const scrollRef = useRef(null);\n const [floatingAnchorElem, setFloatingAnchorElem] = useState<HTMLElement | undefined>(\n undefined\n );\n const onRef = (_floatingAnchorElem: HTMLDivElement) => {\n if (_floatingAnchorElem !== null) {\n setFloatingAnchorElem(_floatingAnchorElem);\n }\n };\n\n const sizeStyle = {\n height: height || \"\",\n width: width || \"\"\n };\n\n const configNodes = config.nodes.map(node => node.node);\n const configPlugins = config.plugins.map(plugin => (\n <Fragment key={plugin.name}>{plugin.element}</Fragment>\n ));\n\n const value = normalizeInputValue(props.value);\n const editorValue = isValidLexicalData(value) ? value : generateInitialValue();\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 nodes: [...allNodes, ...configNodes, ...(nodes || [])],\n theme: { ...editorTheme.current, emotionMap: themeEmotionMap }\n };\n\n function handleOnChange(editorState: EditorState, editor: LexicalEditor) {\n editorState.read(() => {\n if (typeof onChange === \"function\") {\n const editorState = editor.getEditorState();\n const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n\n const newValue = JSON.stringify(editorState.toJSON());\n\n // We don't want to call \"onChange\" if editor text is empty, and original `value` is empty.\n if (!value && isEditorEmpty) {\n return;\n }\n\n if (value !== newValue) {\n onChange(newValue);\n }\n }\n });\n }\n\n return (\n /**\n * Once the LexicalComposer is mounted, it caches the `initialConfig` internally, and all future\n * updates to the config will be ignored. This is a problem because we pull in Nodes from our config,\n * and initially, there can be multiple re-renders, while the config object is settled.\n *\n * To bypass this issue, we generate a naive `key` based on the number of Nodes.\n */\n <SharedHistoryContext>\n <LexicalComposer initialConfig={initialConfig} key={initialConfig.nodes.length}>\n <RichTextEditorProvider\n theme={props.theme}\n themeEmotionMap={themeEmotionMap}\n toolbarActionPlugins={props.toolbarActionPlugins}\n >\n {staticToolbar ? staticToolbar : null}\n <div\n /* This className is necessary for targeting of editor container from CSS files. */\n className={\"editor-shell\"}\n ref={scrollRef}\n style={{ ...styles, ...sizeStyle, overflow: \"auto\", position: \"relative\" }}\n >\n {/* State plugins. */}\n <OnChangePlugin onChange={handleOnChange} />\n <UpdateStatePlugin value={editorValue} />\n <ClearEditorPlugin />\n <HistoryPlugin externalHistoryState={historyState} />\n {/* Event plugins. */}\n {onBlur && <BlurEventPlugin onBlur={onBlur} />}\n {focus && <AutoFocusPlugin />}\n {/* External plugins and components. */}\n {configPlugins}\n {children}\n <RichTextPlugin\n contentEditable={\n <div className=\"editor-scroller\" style={{ ...sizeStyle }}>\n <div className=\"editor\" ref={onRef}>\n <ContentEditable\n style={{ outline: 0, ...contentEditableStyles }}\n />\n </div>\n </div>\n }\n placeholder={placeholderElem}\n ErrorBoundary={LexicalErrorBoundary}\n />\n {/* Toolbar. */}\n {floatingAnchorElem && toolbar}\n </div>\n </RichTextEditorProvider>\n </LexicalComposer>\n </SharedHistoryContext>\n );\n};\n\n/**\n * @description Main editor container\n */\nexport const RichTextEditor = makeDecoratable(\"RichTextEditor\", (props: RichTextEditorProps) => {\n return (\n <LexicalEditorWithConfig>\n <BaseRichTextEditor {...props} />\n </LexicalEditorWithConfig>\n );\n});\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Klass, LexicalNode } from "lexical";
|
|
3
3
|
import { CSSObject } from "@emotion/react";
|
|
4
|
-
import {
|
|
4
|
+
import { EditorTheme, ThemeEmotionMap } from "@webiny/lexical-theme";
|
|
5
5
|
import { LexicalValue } from "../types";
|
|
6
6
|
interface LexicalHtmlRendererProps {
|
|
7
7
|
nodes?: Klass<LexicalNode>[];
|
|
8
8
|
value: LexicalValue | null;
|
|
9
|
-
theme:
|
|
9
|
+
theme: Partial<EditorTheme>;
|
|
10
10
|
themeEmotionMap?: ThemeEmotionMap;
|
|
11
11
|
themeStylesTransformer?: (cssObject: Record<string, any>) => CSSObject;
|
|
12
12
|
}
|
|
13
|
-
export declare const LexicalHtmlRenderer: ({ nodes, value,
|
|
13
|
+
export declare const LexicalHtmlRenderer: ({ nodes, value, ...props }: LexicalHtmlRendererProps) => React.JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.LexicalHtmlRenderer = void 0;
|
|
9
|
-
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
10
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _emotion = require("emotion");
|
|
@@ -21,14 +21,17 @@ var _isValidLexicalData = require("../utils/isValidLexicalData");
|
|
|
21
21
|
var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
|
|
22
22
|
var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
|
|
23
23
|
var _RichTextEditorContext = require("../context/RichTextEditorContext");
|
|
24
|
-
var _excluded = ["nodes", "value"
|
|
24
|
+
var _excluded = ["nodes", "value"];
|
|
25
25
|
var LexicalHtmlRenderer = exports.LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
|
|
26
26
|
var nodes = _ref.nodes,
|
|
27
27
|
value = _ref.value,
|
|
28
|
-
theme = _ref.theme,
|
|
29
28
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
29
|
+
var theme = (0, _objectSpread2.default)({
|
|
30
|
+
styles: {},
|
|
31
|
+
emotionMap: {}
|
|
32
|
+
}, props.theme);
|
|
30
33
|
var themeEmotionMap = props?.themeEmotionMap ?? (0, _lexicalTheme.toTypographyEmotionMap)(_emotion.css, theme, props.themeStylesTransformer);
|
|
31
|
-
var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)());
|
|
34
|
+
var editorTheme = (0, _react.useRef)((0, _lexicalTheme.createTheme)(theme));
|
|
32
35
|
var editorValue = (0, _isValidLexicalData.isValidLexicalData)(value) ? value : (0, _generateInitialLexicalValue.generateInitialLexicalValue)();
|
|
33
36
|
var initialConfig = {
|
|
34
37
|
// We update the state via the `<LexicalUpdateStatePlugin/>`.
|
|
@@ -1 +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","
|
|
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","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","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 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 { UpdateStatePlugin } from \"~/plugins/LexicalUpdateStatePlugin\";\nimport { RichTextEditorProvider } from \"~/context/RichTextEditorContext\";\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 <UpdateStatePlugin value={editorValue} />\n </RichTextEditorProvider>\n </LexicalComposer>\n );\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { LexicalEditor } from "lexical";
|
|
3
|
-
import type { ThemeEmotionMap,
|
|
3
|
+
import type { ThemeEmotionMap, EditorTheme } from "@webiny/lexical-theme";
|
|
4
4
|
import { ToolbarActionPlugin } from "../types";
|
|
5
5
|
export interface RichTextEditorContext {
|
|
6
6
|
editor: LexicalEditor;
|
|
7
|
-
theme?:
|
|
7
|
+
theme?: EditorTheme;
|
|
8
8
|
themeEmotionMap?: ThemeEmotionMap;
|
|
9
9
|
toolbarActionPlugins: ToolbarActionPlugin[];
|
|
10
10
|
}
|
|
11
11
|
export declare const RichTextEditorContext: React.Context<RichTextEditorContext | undefined>;
|
|
12
12
|
interface RichTextEditorProviderProps {
|
|
13
|
-
theme:
|
|
13
|
+
theme: EditorTheme;
|
|
14
14
|
themeEmotionMap?: ThemeEmotionMap;
|
|
15
15
|
toolbarActionPlugins?: ToolbarActionPlugin[];
|
|
16
16
|
children?: React.ReactNode | React.ReactNode[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","RichTextEditorContext","exports","createContext","undefined","RichTextEditorProvider","_ref","themeEmotionMap","theme","_ref$toolbarActionPlu","toolbarActionPlugins","children","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { ThemeEmotionMap,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_LexicalComposerContext","RichTextEditorContext","exports","createContext","undefined","RichTextEditorProvider","_ref","themeEmotionMap","theme","_ref$toolbarActionPlu","toolbarActionPlugins","children","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","_slicedToArray2","default","editor","createElement","Provider","value"],"sources":["RichTextEditorContext.tsx"],"sourcesContent":["import React, { createContext } from \"react\";\nimport { LexicalEditor } from \"lexical\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { ThemeEmotionMap, EditorTheme } from \"@webiny/lexical-theme\";\nimport { ToolbarActionPlugin } from \"~/types\";\n\nexport interface RichTextEditorContext {\n editor: LexicalEditor;\n theme?: EditorTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins: ToolbarActionPlugin[];\n}\n\nexport const RichTextEditorContext = createContext<RichTextEditorContext | undefined>(undefined);\n\ninterface RichTextEditorProviderProps {\n theme: EditorTheme;\n themeEmotionMap?: ThemeEmotionMap;\n toolbarActionPlugins?: ToolbarActionPlugin[];\n children?: React.ReactNode | React.ReactNode[];\n}\n\nexport const RichTextEditorProvider = ({\n themeEmotionMap,\n theme,\n toolbarActionPlugins = [],\n children\n}: RichTextEditorProviderProps) => {\n const [editor] = useLexicalComposerContext();\n\n return (\n <RichTextEditorContext.Provider\n value={{\n editor,\n theme,\n themeEmotionMap,\n toolbarActionPlugins\n }}\n >\n {children}\n </RichTextEditorContext.Provider>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,uBAAA,GAAAD,OAAA;AAWO,IAAME,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,gBAAG,IAAAE,oBAAa,EAAoCC,SAAS,CAAC;AASzF,IAAMC,sBAAsB,GAAAH,OAAA,CAAAG,sBAAA,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAKA;EAAA,IAJ/BC,eAAe,GAAAD,IAAA,CAAfC,eAAe;IACfC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAAC,qBAAA,GAAAH,IAAA,CACLI,oBAAoB;IAApBA,oBAAoB,GAAAD,qBAAA,cAAG,EAAE,GAAAA,qBAAA;IACzBE,QAAQ,GAAAL,IAAA,CAARK,QAAQ;EAER,IAAAC,qBAAA,GAAiB,IAAAC,iDAAyB,EAAC,CAAC;IAAAC,sBAAA,OAAAC,eAAA,CAAAC,OAAA,EAAAJ,qBAAA;IAArCK,MAAM,GAAAH,sBAAA;EAEb,oBACIjB,MAAA,CAAAmB,OAAA,CAAAE,aAAA,CAACjB,qBAAqB,CAACkB,QAAQ;IAC3BC,KAAK,EAAE;MACHH,MAAM,EAANA,MAAM;MACNT,KAAK,EAALA,KAAK;MACLD,eAAe,EAAfA,eAAe;MACfG,oBAAoB,EAApBA;IACJ;EAAE,GAEDC,QAC2B,CAAC;AAEzC,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor",
|
|
3
|
-
"version": "5.41.1",
|
|
3
|
+
"version": "5.41.2-beta.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/webiny/webiny-js.git"
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"@lexical/selection": "0.16.1",
|
|
16
16
|
"@lexical/text": "0.16.1",
|
|
17
17
|
"@lexical/utils": "0.16.1",
|
|
18
|
-
"@webiny/lexical-nodes": "5.41.1",
|
|
19
|
-
"@webiny/lexical-theme": "5.41.1",
|
|
20
|
-
"@webiny/react-composition": "5.41.1",
|
|
21
|
-
"@webiny/react-properties": "5.41.1",
|
|
18
|
+
"@webiny/lexical-nodes": "5.41.2-beta.1",
|
|
19
|
+
"@webiny/lexical-theme": "5.41.2-beta.1",
|
|
20
|
+
"@webiny/react-composition": "5.41.2-beta.1",
|
|
21
|
+
"@webiny/react-properties": "5.41.2-beta.1",
|
|
22
22
|
"emotion": "10.0.27",
|
|
23
23
|
"lexical": "0.16.1",
|
|
24
24
|
"lodash": "4.17.21",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react-dom": "18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@webiny/cli": "5.41.1",
|
|
30
|
-
"@webiny/project-utils": "5.41.1"
|
|
29
|
+
"@webiny/cli": "5.41.2-beta.1",
|
|
30
|
+
"@webiny/project-utils": "5.41.2-beta.1"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"build": "yarn webiny run build",
|
|
38
38
|
"watch": "yarn webiny run watch"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "69a78b382b4de30846edfc2a9d5f73ca223fcc10"
|
|
41
41
|
}
|