@webiny/lexical-editor 5.44.0 → 5.44.1-beta.0
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.js +4 -24
- package/components/Editor/RichTextEditor.js.map +1 -1
- package/components/LexicalHtmlRenderer.js +2 -2
- package/components/LexicalHtmlRenderer.js.map +1 -1
- package/index.d.ts +1 -1
- package/index.js +8 -8
- package/index.js.map +1 -1
- package/package.json +8 -7
- package/plugins/StateHandlingPlugin.d.ts +8 -0
- package/plugins/StateHandlingPlugin.js +82 -0
- package/plugins/StateHandlingPlugin.js.map +1 -0
- package/utils/generateInitialLexicalValue.d.ts +1 -2
- package/utils/generateInitialLexicalValue.js.map +1 -1
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.d.ts +0 -9
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js +0 -48
- package/plugins/LexicalUpdateStatePlugin/UpdateStatePlugin.js.map +0 -1
- package/plugins/LexicalUpdateStatePlugin/index.d.ts +0 -1
- package/plugins/LexicalUpdateStatePlugin/index.js +0 -18
- package/plugins/LexicalUpdateStatePlugin/index.js.map +0 -1
|
@@ -13,8 +13,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _emotion = require("emotion");
|
|
15
15
|
var _LexicalComposer = require("@lexical/react/LexicalComposer");
|
|
16
|
-
var _text = require("@lexical/text");
|
|
17
|
-
var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
|
|
18
16
|
var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
|
|
19
17
|
var _LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
|
|
20
18
|
var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
|
|
@@ -26,13 +24,13 @@ var _lexicalTheme = require("@webiny/lexical-theme");
|
|
|
26
24
|
var _lexicalNodes = require("@webiny/lexical-nodes");
|
|
27
25
|
var _RichTextEditorContext = require("../../context/RichTextEditorContext");
|
|
28
26
|
var _isValidLexicalData = require("../../utils/isValidLexicalData");
|
|
29
|
-
var _LexicalUpdateStatePlugin = require("../../plugins/LexicalUpdateStatePlugin");
|
|
30
27
|
var _BlurEventPlugin = require("../../plugins/BlurEventPlugin/BlurEventPlugin");
|
|
31
28
|
var _Placeholder = require("../../ui/Placeholder");
|
|
32
29
|
var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
|
|
33
30
|
var _SharedHistoryContext = require("../../context/SharedHistoryContext");
|
|
34
31
|
var _LexicalEditorConfig = require("../LexicalEditorConfig/LexicalEditorConfig");
|
|
35
32
|
var _normalizeInputValue = require("./normalizeInputValue");
|
|
33
|
+
var _StateHandlingPlugin = require("../../plugins/StateHandlingPlugin");
|
|
36
34
|
var _excluded = ["toolbar", "staticToolbar", "onChange", "nodes", "placeholder", "children", "onBlur", "focus", "styles", "width", "height", "contentEditableStyles", "placeholderStyles", "generateInitialValue"];
|
|
37
35
|
var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
|
|
38
36
|
var toolbar = _ref.toolbar,
|
|
@@ -95,23 +93,6 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
|
|
|
95
93
|
emotionMap: themeEmotionMap
|
|
96
94
|
})
|
|
97
95
|
};
|
|
98
|
-
function handleOnChange(editorState, editor) {
|
|
99
|
-
editorState.read(function () {
|
|
100
|
-
if (typeof onChange === "function") {
|
|
101
|
-
var _editorState = editor.getEditorState();
|
|
102
|
-
var isEditorEmpty = (0, _text.$isRootTextContentEmpty)(editor.isComposing(), true);
|
|
103
|
-
var newValue = JSON.stringify(_editorState.toJSON());
|
|
104
|
-
|
|
105
|
-
// We don't want to call "onChange" if editor text is empty, and original `value` is empty.
|
|
106
|
-
if (!value && isEditorEmpty) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
if (value !== newValue) {
|
|
110
|
-
onChange(newValue);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
96
|
return (
|
|
116
97
|
/*#__PURE__*/
|
|
117
98
|
/**
|
|
@@ -136,10 +117,9 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
|
|
|
136
117
|
overflow: "auto",
|
|
137
118
|
position: "relative"
|
|
138
119
|
})
|
|
139
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
value: editorValue
|
|
120
|
+
}, /*#__PURE__*/_react.default.createElement(_StateHandlingPlugin.StateHandlingPlugin, {
|
|
121
|
+
value: editorValue,
|
|
122
|
+
onChange: onChange
|
|
143
123
|
}), /*#__PURE__*/_react.default.createElement(_LexicalClearEditorPlugin.ClearEditorPlugin, null), /*#__PURE__*/_react.default.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
|
|
144
124
|
externalHistoryState: historyState
|
|
145
125
|
}), onBlur && /*#__PURE__*/_react.default.createElement(_BlurEventPlugin.BlurEventPlugin, {
|
|
@@ -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 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
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalAutoFocusPlugin","_LexicalClearEditorPlugin","_LexicalRichTextPlugin","_LexicalErrorBoundary","_reactComposition","_LexicalHistoryPlugin","_LexicalContentEditable","_lexicalTheme","_lexicalNodes","_RichTextEditorContext","_isValidLexicalData","_BlurEventPlugin","_Placeholder","_generateInitialLexicalValue","_SharedHistoryContext","_LexicalEditorConfig","_normalizeInputValue","_StateHandlingPlugin","_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","SharedHistoryContext","LexicalComposer","length","RichTextEditorProvider","toolbarActionPlugins","className","ref","style","overflow","position","StateHandlingPlugin","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, LexicalNode } from \"lexical\";\nimport { LexicalComposer } from \"@lexical/react/LexicalComposer\";\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 { 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\";\nimport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\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 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 <StateHandlingPlugin value={editorValue} onChange={onChange} />\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":[]}
|
|
@@ -19,8 +19,8 @@ var _lexicalNodes = require("@webiny/lexical-nodes");
|
|
|
19
19
|
var _lexicalTheme = require("@webiny/lexical-theme");
|
|
20
20
|
var _isValidLexicalData = require("../utils/isValidLexicalData");
|
|
21
21
|
var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
|
|
22
|
-
var _LexicalUpdateStatePlugin = require("../plugins/LexicalUpdateStatePlugin");
|
|
23
22
|
var _RichTextEditorContext = require("../context/RichTextEditorContext");
|
|
23
|
+
var _StateHandlingPlugin = require("../plugins/StateHandlingPlugin");
|
|
24
24
|
var _excluded = ["nodes", "value"];
|
|
25
25
|
var LexicalHtmlRenderer = exports.LexicalHtmlRenderer = function LexicalHtmlRenderer(_ref) {
|
|
26
26
|
var nodes = _ref.nodes,
|
|
@@ -60,7 +60,7 @@ var LexicalHtmlRenderer = exports.LexicalHtmlRenderer = function LexicalHtmlRend
|
|
|
60
60
|
}, /*#__PURE__*/_react.default.createElement(_LexicalContentEditable.ContentEditable, null)),
|
|
61
61
|
ErrorBoundary: _LexicalErrorBoundary.default,
|
|
62
62
|
placeholder: null
|
|
63
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
63
|
+
}), /*#__PURE__*/_react.default.createElement(_StateHandlingPlugin.StateHandlingPlugin, {
|
|
64
64
|
value: editorValue
|
|
65
65
|
})));
|
|
66
66
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_emotion","_LexicalComposer","_LexicalRichTextPlugin","_LexicalContentEditable","_LexicalErrorBoundary","_interopRequireDefault","_lexicalNodes","_lexicalTheme","_isValidLexicalData","_generateInitialLexicalValue","
|
|
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":[]}
|
package/index.d.ts
CHANGED
|
@@ -21,11 +21,11 @@ export { StaticToolbar } from "./components/Toolbar/StaticToolbar";
|
|
|
21
21
|
export { RichTextEditor } from "./components/Editor/RichTextEditor";
|
|
22
22
|
export { HeadingEditor } from "./components/Editor/HeadingEditor";
|
|
23
23
|
export { ParagraphEditor } from "./components/Editor/ParagraphEditor";
|
|
24
|
+
export { StateHandlingPlugin } from "./plugins/StateHandlingPlugin";
|
|
24
25
|
export { LinkPlugin } from "./plugins/LinkPlugin/LinkPlugin";
|
|
25
26
|
export { FloatingLinkEditorPlugin } from "./plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin";
|
|
26
27
|
export { CodeHighlightPlugin } from "./plugins/CodeHighlightPlugin/CodeHighlightPlugin";
|
|
27
28
|
export { BlurEventPlugin } from "./plugins/BlurEventPlugin/BlurEventPlugin";
|
|
28
|
-
export { UpdateStatePlugin } from "./plugins/LexicalUpdateStatePlugin/UpdateStatePlugin";
|
|
29
29
|
export { FontColorPlugin } from "./plugins/FontColorPlugin/FontColorPlugin";
|
|
30
30
|
export { TypographyPlugin } from "./plugins/TypographyPlugin/TypographyPlugin";
|
|
31
31
|
export { QuotePlugin } from "./plugins/QuoteNodePlugin/QuoteNodePlugin";
|
package/index.js
CHANGED
|
@@ -27,11 +27,11 @@ var _exportNames = {
|
|
|
27
27
|
RichTextEditor: true,
|
|
28
28
|
HeadingEditor: true,
|
|
29
29
|
ParagraphEditor: true,
|
|
30
|
+
StateHandlingPlugin: true,
|
|
30
31
|
LinkPlugin: true,
|
|
31
32
|
FloatingLinkEditorPlugin: true,
|
|
32
33
|
CodeHighlightPlugin: true,
|
|
33
34
|
BlurEventPlugin: true,
|
|
34
|
-
UpdateStatePlugin: true,
|
|
35
35
|
FontColorPlugin: true,
|
|
36
36
|
TypographyPlugin: true,
|
|
37
37
|
QuotePlugin: true,
|
|
@@ -199,6 +199,12 @@ Object.defineProperty(exports, "RichTextEditor", {
|
|
|
199
199
|
return _RichTextEditor.RichTextEditor;
|
|
200
200
|
}
|
|
201
201
|
});
|
|
202
|
+
Object.defineProperty(exports, "StateHandlingPlugin", {
|
|
203
|
+
enumerable: true,
|
|
204
|
+
get: function get() {
|
|
205
|
+
return _StateHandlingPlugin.StateHandlingPlugin;
|
|
206
|
+
}
|
|
207
|
+
});
|
|
202
208
|
Object.defineProperty(exports, "StaticToolbar", {
|
|
203
209
|
enumerable: true,
|
|
204
210
|
get: function get() {
|
|
@@ -235,12 +241,6 @@ Object.defineProperty(exports, "UnderlineAction", {
|
|
|
235
241
|
return _UnderlineAction.UnderlineAction;
|
|
236
242
|
}
|
|
237
243
|
});
|
|
238
|
-
Object.defineProperty(exports, "UpdateStatePlugin", {
|
|
239
|
-
enumerable: true,
|
|
240
|
-
get: function get() {
|
|
241
|
-
return _UpdateStatePlugin.UpdateStatePlugin;
|
|
242
|
-
}
|
|
243
|
-
});
|
|
244
244
|
Object.defineProperty(exports, "generateInitialLexicalValue", {
|
|
245
245
|
enumerable: true,
|
|
246
246
|
get: function get() {
|
|
@@ -293,11 +293,11 @@ var _StaticToolbar = require("./components/Toolbar/StaticToolbar");
|
|
|
293
293
|
var _RichTextEditor = require("./components/Editor/RichTextEditor");
|
|
294
294
|
var _HeadingEditor = require("./components/Editor/HeadingEditor");
|
|
295
295
|
var _ParagraphEditor = require("./components/Editor/ParagraphEditor");
|
|
296
|
+
var _StateHandlingPlugin = require("./plugins/StateHandlingPlugin");
|
|
296
297
|
var _LinkPlugin = require("./plugins/LinkPlugin/LinkPlugin");
|
|
297
298
|
var _FloatingLinkEditorPlugin = require("./plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin");
|
|
298
299
|
var _CodeHighlightPlugin = require("./plugins/CodeHighlightPlugin/CodeHighlightPlugin");
|
|
299
300
|
var _BlurEventPlugin = require("./plugins/BlurEventPlugin/BlurEventPlugin");
|
|
300
|
-
var _UpdateStatePlugin = require("./plugins/LexicalUpdateStatePlugin/UpdateStatePlugin");
|
|
301
301
|
var _FontColorPlugin = require("./plugins/FontColorPlugin/FontColorPlugin");
|
|
302
302
|
var _TypographyPlugin = require("./plugins/TypographyPlugin/TypographyPlugin");
|
|
303
303
|
var _QuoteNodePlugin = require("./plugins/QuoteNodePlugin/QuoteNodePlugin");
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_LexicalHtmlRenderer","require","_hooks","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Divider","_DropDown","_BoldAction","_BulletListAction","_CodeHighlightAction","_FontSizeAction","_FontColorAction","_ItalicAction","_LinkAction","_NumberedListAction","_QuoteAction","_UnderlineAction","_TypographyAction","_TextAlignmentAction","_ImageAction","_Toolbar","_StaticToolbar","_RichTextEditor","_HeadingEditor","_ParagraphEditor","_LinkPlugin","_FloatingLinkEditorPlugin","_CodeHighlightPlugin","_BlurEventPlugin","
|
|
1
|
+
{"version":3,"names":["_LexicalHtmlRenderer","require","_hooks","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_Divider","_DropDown","_BoldAction","_BulletListAction","_CodeHighlightAction","_FontSizeAction","_FontColorAction","_ItalicAction","_LinkAction","_NumberedListAction","_QuoteAction","_UnderlineAction","_TypographyAction","_TextAlignmentAction","_ImageAction","_Toolbar","_StaticToolbar","_RichTextEditor","_HeadingEditor","_ParagraphEditor","_StateHandlingPlugin","_LinkPlugin","_FloatingLinkEditorPlugin","_CodeHighlightPlugin","_BlurEventPlugin","_FontColorPlugin","_TypographyPlugin","_QuoteNodePlugin","_ListPlugin","_ImagesPlugin","_generateInitialLexicalValue","_isValidLexicalData","_commands","_types","_interopRequireWildcard","types","_LexicalEditorConfig"],"sources":["index.ts"],"sourcesContent":["// render\nexport { LexicalHtmlRenderer } from \"~/components/LexicalHtmlRenderer\";\n// hooks\nexport * from \"./hooks\";\n// UI elements\nexport { Divider } from \"~/ui/Divider\";\nexport { DropDownItem } from \"~/ui/DropDown\";\nexport { DropDown } from \"~/ui/DropDown\";\n// actions\nexport { BoldAction } from \"~/components/ToolbarActions/BoldAction\";\nexport { BulletListAction } from \"~/components/ToolbarActions/BulletListAction\";\nexport { CodeHighlightAction } from \"~/components/ToolbarActions/CodeHighlightAction\";\nexport { FontSizeAction } from \"~/components/ToolbarActions/FontSizeAction\";\nexport { FontColorAction } from \"~/components/ToolbarActions/FontColorAction\";\nexport { ItalicAction } from \"~/components/ToolbarActions/ItalicAction\";\nexport { LinkAction } from \"~/components/ToolbarActions/LinkAction\";\nexport { NumberedListAction } from \"~/components/ToolbarActions/NumberedListAction\";\nexport { QuoteAction } from \"~/components/ToolbarActions/QuoteAction\";\nexport { UnderlineAction } from \"~/components/ToolbarActions/UnderlineAction\";\nexport { TypographyAction } from \"~/components/ToolbarActions/TypographyAction\";\nexport { TextAlignmentAction } from \"~/components/ToolbarActions/TextAlignmentAction\";\nexport { ImageAction } from \"~/components/ToolbarActions/ImageAction\";\n// toolbars\nexport { Toolbar } from \"~/components/Toolbar/Toolbar\";\nexport { StaticToolbar } from \"~/components/Toolbar/StaticToolbar\";\n// editor\nexport { RichTextEditor } from \"~/components/Editor/RichTextEditor\";\nexport { HeadingEditor } from \"~/components/Editor/HeadingEditor\";\nexport { ParagraphEditor } from \"~/components/Editor/ParagraphEditor\";\n// plugins\nexport { StateHandlingPlugin } from \"~/plugins/StateHandlingPlugin\";\nexport { LinkPlugin } from \"~/plugins/LinkPlugin/LinkPlugin\";\nexport { FloatingLinkEditorPlugin } from \"~/plugins/FloatingLinkEditorPlugin/FloatingLinkEditorPlugin\";\nexport { CodeHighlightPlugin } from \"~/plugins/CodeHighlightPlugin/CodeHighlightPlugin\";\nexport { BlurEventPlugin } from \"~/plugins/BlurEventPlugin/BlurEventPlugin\";\nexport { FontColorPlugin } from \"~/plugins/FontColorPlugin/FontColorPlugin\";\nexport { TypographyPlugin } from \"~/plugins/TypographyPlugin/TypographyPlugin\";\nexport { QuotePlugin } from \"~/plugins/QuoteNodePlugin/QuoteNodePlugin\";\nexport { ListPlugin } from \"~/plugins/ListPLugin/ListPlugin\";\nexport { ImagesPlugin } from \"~/plugins/ImagesPlugin/ImagesPlugin\";\n// utils\nexport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nexport { isValidLexicalData } from \"~/utils/isValidLexicalData\";\n// Commands\nexport * from \"~/commands\";\n// types\nexport * as types from \"./types\";\n// config\nexport {\n LexicalEditorConfig,\n useLexicalEditorConfig\n} from \"~/components/LexicalEditorConfig/LexicalEditorConfig\";\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor",
|
|
3
|
-
"version": "5.44.0",
|
|
3
|
+
"version": "5.44.1-beta.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/webiny/webiny-js.git"
|
|
@@ -15,17 +15,18 @@
|
|
|
15
15
|
"@lexical/selection": "0.23.1",
|
|
16
16
|
"@lexical/text": "0.23.1",
|
|
17
17
|
"@lexical/utils": "0.23.1",
|
|
18
|
-
"@webiny/lexical-nodes": "5.44.0",
|
|
19
|
-
"@webiny/lexical-theme": "5.44.0",
|
|
20
|
-
"@webiny/react-composition": "5.44.0",
|
|
21
|
-
"@webiny/react-properties": "5.44.0",
|
|
18
|
+
"@webiny/lexical-nodes": "5.44.1-beta.0",
|
|
19
|
+
"@webiny/lexical-theme": "5.44.1-beta.0",
|
|
20
|
+
"@webiny/react-composition": "5.44.1-beta.0",
|
|
21
|
+
"@webiny/react-properties": "5.44.1-beta.0",
|
|
22
22
|
"emotion": "10.0.27",
|
|
23
23
|
"lexical": "0.23.1",
|
|
24
|
+
"lodash": "4.17.21",
|
|
24
25
|
"react": "18.2.0",
|
|
25
26
|
"react-dom": "18.2.0"
|
|
26
27
|
},
|
|
27
28
|
"devDependencies": {
|
|
28
|
-
"@webiny/project-utils": "5.44.0"
|
|
29
|
+
"@webiny/project-utils": "5.44.1-beta.0"
|
|
29
30
|
},
|
|
30
31
|
"publishConfig": {
|
|
31
32
|
"access": "public",
|
|
@@ -35,5 +36,5 @@
|
|
|
35
36
|
"build": "node ../cli/bin.js run build",
|
|
36
37
|
"watch": "node ../cli/bin.js run watch"
|
|
37
38
|
},
|
|
38
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "c80e6d88501ac84229f6577dee7b30163a906379"
|
|
39
40
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { LexicalValue } from "../types";
|
|
3
|
+
interface OnChangeProps {
|
|
4
|
+
value: string | null | undefined;
|
|
5
|
+
onChange?: (value: LexicalValue) => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const StateHandlingPlugin: (props: OnChangeProps) => React.JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.StateHandlingPlugin = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
|
11
|
+
var _LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
|
|
12
|
+
var _text = require("@lexical/text");
|
|
13
|
+
var _normalizeInputValue = require("../components/Editor/normalizeInputValue");
|
|
14
|
+
var _hooks = require("../hooks");
|
|
15
|
+
var _isValidLexicalData = require("../utils/isValidLexicalData");
|
|
16
|
+
var _generateInitialLexicalValue = require("../utils/generateInitialLexicalValue");
|
|
17
|
+
var StateHandlingPlugin = exports.StateHandlingPlugin = function StateHandlingPlugin(props) {
|
|
18
|
+
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
19
|
+
editor = _useRichTextEditor.editor;
|
|
20
|
+
var lastEmittedRef = (0, _react.useRef)("");
|
|
21
|
+
var lastOnChangeTimestampRef = (0, _react.useRef)(0);
|
|
22
|
+
var value = (0, _normalizeInputValue.normalizeInputValue)(props.value);
|
|
23
|
+
var editorInputValue = value ?? (0, _generateInitialLexicalValue.generateInitialLexicalValue)();
|
|
24
|
+
var handleOnChange = (0, _react.useMemo)(function () {
|
|
25
|
+
return (0, _debounce.default)(function (editorState, editor) {
|
|
26
|
+
editorState.read(function () {
|
|
27
|
+
if (typeof props.onChange === "function") {
|
|
28
|
+
var _editorState = editor.getEditorState();
|
|
29
|
+
var isEditorEmpty = (0, _text.$isRootTextContentEmpty)(editor.isComposing(), true);
|
|
30
|
+
var newValue = JSON.stringify(_editorState.toJSON());
|
|
31
|
+
if (!value && isEditorEmpty) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (newValue !== lastEmittedRef.current) {
|
|
35
|
+
lastEmittedRef.current = newValue;
|
|
36
|
+
lastOnChangeTimestampRef.current = Date.now();
|
|
37
|
+
props.onChange(newValue);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}, 300);
|
|
42
|
+
}, [props.onChange, editor]);
|
|
43
|
+
(0, _react.useEffect)(function () {
|
|
44
|
+
if (!value || !editor || value === lastEmittedRef.current) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
var now = Date.now();
|
|
48
|
+
if (now - lastOnChangeTimestampRef.current < 500) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
var parsedState = (0, _isValidLexicalData.parseLexicalState)(editorInputValue);
|
|
52
|
+
var newState;
|
|
53
|
+
var currentSerialized = JSON.stringify(editor.getEditorState().toJSON());
|
|
54
|
+
if (currentSerialized === editorInputValue) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
try {
|
|
58
|
+
newState = editor.parseEditorState(parsedState || (0, _generateInitialLexicalValue.generateInitialLexicalValue)());
|
|
59
|
+
} catch (_unused) {
|
|
60
|
+
// Ignore errors
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// We must set the state outside the `editor.update()` callback to prevent freezing.
|
|
64
|
+
// https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate
|
|
65
|
+
if (newState) {
|
|
66
|
+
var state = newState;
|
|
67
|
+
queueMicrotask(function () {
|
|
68
|
+
try {
|
|
69
|
+
editor.setEditorState(state);
|
|
70
|
+
} catch (e) {
|
|
71
|
+
console.error(e);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}, [value, editor, editorInputValue]);
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_LexicalOnChangePlugin.OnChangePlugin, {
|
|
77
|
+
onChange: handleOnChange,
|
|
78
|
+
ignoreSelectionChange: true
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
//# sourceMappingURL=StateHandlingPlugin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_debounce","_interopRequireDefault","_LexicalOnChangePlugin","_text","_normalizeInputValue","_hooks","_isValidLexicalData","_generateInitialLexicalValue","StateHandlingPlugin","exports","props","_useRichTextEditor","useRichTextEditor","editor","lastEmittedRef","useRef","lastOnChangeTimestampRef","value","normalizeInputValue","editorInputValue","generateInitialLexicalValue","handleOnChange","useMemo","debounce","editorState","read","onChange","getEditorState","isEditorEmpty","$isRootTextContentEmpty","isComposing","newValue","JSON","stringify","toJSON","current","Date","now","useEffect","parsedState","parseLexicalState","newState","currentSerialized","parseEditorState","_unused","state","queueMicrotask","setEditorState","e","console","error","default","createElement","OnChangePlugin","ignoreSelectionChange"],"sources":["StateHandlingPlugin.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\nimport debounce from \"lodash/debounce\";\nimport { OnChangePlugin as BaseOnChangePlugin } from \"@lexical/react/LexicalOnChangePlugin\";\nimport type { EditorState, LexicalEditor } from \"lexical\";\nimport { $isRootTextContentEmpty } from \"@lexical/text\";\nimport { normalizeInputValue } from \"~/components/Editor/normalizeInputValue\";\nimport type { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks/index\";\nimport { parseLexicalState } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\n\ninterface OnChangeProps {\n value: string | null | undefined;\n onChange?: (value: LexicalValue) => void;\n}\n\nexport const StateHandlingPlugin = (props: OnChangeProps) => {\n const { editor } = useRichTextEditor();\n const lastEmittedRef = useRef(\"\");\n const lastOnChangeTimestampRef = useRef(0);\n\n const value = normalizeInputValue(props.value);\n const editorInputValue = value ?? generateInitialLexicalValue();\n\n const handleOnChange = useMemo(() => {\n return debounce((editorState: EditorState, editor: LexicalEditor) => {\n editorState.read(() => {\n if (typeof props.onChange === \"function\") {\n const editorState = editor.getEditorState();\n const isEditorEmpty = $isRootTextContentEmpty(editor.isComposing(), true);\n const newValue = JSON.stringify(editorState.toJSON());\n\n if (!value && isEditorEmpty) {\n return;\n }\n\n if (newValue !== lastEmittedRef.current) {\n lastEmittedRef.current = newValue;\n lastOnChangeTimestampRef.current = Date.now();\n props.onChange(newValue);\n }\n }\n });\n }, 300);\n }, [props.onChange, editor]);\n\n useEffect(() => {\n if (!value || !editor || value === lastEmittedRef.current) {\n return;\n }\n\n const now = Date.now();\n if (now - lastOnChangeTimestampRef.current < 500) {\n return;\n }\n\n const parsedState = parseLexicalState(editorInputValue);\n\n let newState: EditorState | undefined;\n\n const currentSerialized = JSON.stringify(editor.getEditorState().toJSON());\n\n if (currentSerialized === editorInputValue) {\n return;\n }\n\n try {\n newState = editor.parseEditorState(parsedState || generateInitialLexicalValue());\n } catch {\n // Ignore errors\n }\n\n // We must set the state outside the `editor.update()` callback to prevent freezing.\n // https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate\n if (newState) {\n const state = newState;\n queueMicrotask(() => {\n try {\n editor.setEditorState(state);\n } catch (e) {\n console.error(e);\n }\n });\n }\n }, [value, editor, editorInputValue]);\n\n return <BaseOnChangePlugin onChange={handleOnChange} ignoreSelectionChange={true} />;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["defaultLexicalValue","JSON","stringify","root","children","direction","format","indent","styles","type","version","generateInitialLexicalValue","exports"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"names":["defaultLexicalValue","JSON","stringify","root","children","direction","format","indent","styles","type","version","generateInitialLexicalValue","exports"],"sources":["generateInitialLexicalValue.ts"],"sourcesContent":["const defaultLexicalValue = JSON.stringify({\n root: {\n children: [\n {\n children: [],\n direction: null,\n format: \"\",\n indent: 0,\n styles: [],\n type: \"paragraph-element\",\n version: 1\n }\n ],\n direction: null,\n format: \"\",\n indent: 0,\n type: \"root\",\n version: 1\n }\n});\n\n/**\n * @description Basic JSON data string that will initialize the editor.\n */\nexport const generateInitialLexicalValue = (): string => {\n return defaultLexicalValue;\n};\n"],"mappings":";;;;;;AAAA,IAAMA,mBAAmB,GAAGC,IAAI,CAACC,SAAS,CAAC;EACvCC,IAAI,EAAE;IACFC,QAAQ,EAAE,CACN;MACIA,QAAQ,EAAE,EAAE;MACZC,SAAS,EAAE,IAAI;MACfC,MAAM,EAAE,EAAE;MACVC,MAAM,EAAE,CAAC;MACTC,MAAM,EAAE,EAAE;MACVC,IAAI,EAAE,mBAAmB;MACzBC,OAAO,EAAE;IACb,CAAC,CACJ;IACDL,SAAS,EAAE,IAAI;IACfC,MAAM,EAAE,EAAE;IACVC,MAAM,EAAE,CAAC;IACTE,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;;AAEF;AACA;AACA;AACO,IAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,SAA9BA,2BAA2BA,CAAA,EAAiB;EACrD,OAAOX,mBAAmB;AAC9B,CAAC","ignoreList":[]}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { LexicalValue } from "../../types";
|
|
2
|
-
interface UpdateStatePluginProps {
|
|
3
|
-
value: LexicalValue | null;
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* Updates the lexical state if new value is provided to the lexical editor through props.
|
|
7
|
-
*/
|
|
8
|
-
export declare const UpdateStatePlugin: ({ value }: UpdateStatePluginProps) => null;
|
|
9
|
-
export {};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.UpdateStatePlugin = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _isValidLexicalData = require("../../utils/isValidLexicalData");
|
|
9
|
-
var _generateInitialLexicalValue = require("../../utils/generateInitialLexicalValue");
|
|
10
|
-
var _hooks = require("../../hooks");
|
|
11
|
-
/**
|
|
12
|
-
* Updates the lexical state if new value is provided to the lexical editor through props.
|
|
13
|
-
*/
|
|
14
|
-
var UpdateStatePlugin = exports.UpdateStatePlugin = function UpdateStatePlugin(_ref) {
|
|
15
|
-
var value = _ref.value;
|
|
16
|
-
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
17
|
-
editor = _useRichTextEditor.editor;
|
|
18
|
-
(0, _react.useEffect)(function () {
|
|
19
|
-
if (value && editor) {
|
|
20
|
-
var newState;
|
|
21
|
-
editor.update(function () {
|
|
22
|
-
var editorState = editor.getEditorState();
|
|
23
|
-
if (JSON.stringify(editorState.toJSON()) === value) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
try {
|
|
27
|
-
var parsedState = (0, _isValidLexicalData.parseLexicalState)(value);
|
|
28
|
-
newState = editor.parseEditorState(parsedState || (0, _generateInitialLexicalValue.generateInitialLexicalValue)());
|
|
29
|
-
} catch (err) {
|
|
30
|
-
console.log("Lexical state update error", err.message);
|
|
31
|
-
// Ignore errors
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
// We must set the state outside the `editor.update()` callback to prevent freezing.
|
|
36
|
-
// https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate
|
|
37
|
-
if (newState) {
|
|
38
|
-
var state = newState;
|
|
39
|
-
queueMicrotask(function () {
|
|
40
|
-
editor.setEditorState(state);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}, [value, editor]);
|
|
45
|
-
return null;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
//# sourceMappingURL=UpdateStatePlugin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_isValidLexicalData","_generateInitialLexicalValue","_hooks","UpdateStatePlugin","exports","_ref","value","_useRichTextEditor","useRichTextEditor","editor","useEffect","newState","update","editorState","getEditorState","JSON","stringify","toJSON","parsedState","parseLexicalState","parseEditorState","generateInitialLexicalValue","err","console","log","message","state","queueMicrotask","setEditorState"],"sources":["UpdateStatePlugin.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { parseLexicalState } from \"~/utils/isValidLexicalData\";\nimport { generateInitialLexicalValue } from \"~/utils/generateInitialLexicalValue\";\nimport { LexicalValue } from \"~/types\";\nimport { useRichTextEditor } from \"~/hooks\";\n\ninterface UpdateStatePluginProps {\n value: LexicalValue | null;\n}\n\n/**\n * Updates the lexical state if new value is provided to the lexical editor through props.\n */\nexport const UpdateStatePlugin = ({ value }: UpdateStatePluginProps) => {\n const { editor } = useRichTextEditor();\n useEffect(() => {\n if (value && editor) {\n let newState;\n\n editor.update(() => {\n const editorState = editor.getEditorState();\n\n if (JSON.stringify(editorState.toJSON()) === value) {\n return;\n }\n\n try {\n const parsedState = parseLexicalState(value);\n newState = editor.parseEditorState(\n parsedState || generateInitialLexicalValue()\n );\n } catch (err) {\n console.log(\"Lexical state update error\", err.message);\n // Ignore errors\n }\n });\n\n // We must set the state outside the `editor.update()` callback to prevent freezing.\n // https://lexical.dev/docs/api/classes/lexical.LexicalEditor#seteditorstate\n if (newState) {\n const state = newState;\n queueMicrotask(() => {\n editor.setEditorState(state);\n });\n }\n }\n }, [value, editor]);\n\n return null;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AACA,IAAAE,4BAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAMA;AACA;AACA;AACO,IAAMI,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,SAApBA,iBAAiBA,CAAAE,IAAA,EAA0C;EAAA,IAApCC,KAAK,GAAAD,IAAA,CAALC,KAAK;EACrC,IAAAC,kBAAA,GAAmB,IAAAC,wBAAiB,EAAC,CAAC;IAA9BC,MAAM,GAAAF,kBAAA,CAANE,MAAM;EACd,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAIJ,KAAK,IAAIG,MAAM,EAAE;MACjB,IAAIE,QAAQ;MAEZF,MAAM,CAACG,MAAM,CAAC,YAAM;QAChB,IAAMC,WAAW,GAAGJ,MAAM,CAACK,cAAc,CAAC,CAAC;QAE3C,IAAIC,IAAI,CAACC,SAAS,CAACH,WAAW,CAACI,MAAM,CAAC,CAAC,CAAC,KAAKX,KAAK,EAAE;UAChD;QACJ;QAEA,IAAI;UACA,IAAMY,WAAW,GAAG,IAAAC,qCAAiB,EAACb,KAAK,CAAC;UAC5CK,QAAQ,GAAGF,MAAM,CAACW,gBAAgB,CAC9BF,WAAW,IAAI,IAAAG,wDAA2B,EAAC,CAC/C,CAAC;QACL,CAAC,CAAC,OAAOC,GAAG,EAAE;UACVC,OAAO,CAACC,GAAG,CAAC,4BAA4B,EAAEF,GAAG,CAACG,OAAO,CAAC;UACtD;QACJ;MACJ,CAAC,CAAC;;MAEF;MACA;MACA,IAAId,QAAQ,EAAE;QACV,IAAMe,KAAK,GAAGf,QAAQ;QACtBgB,cAAc,CAAC,YAAM;UACjBlB,MAAM,CAACmB,cAAc,CAACF,KAAK,CAAC;QAChC,CAAC,CAAC;MACN;IACJ;EACJ,CAAC,EAAE,CAACpB,KAAK,EAAEG,MAAM,CAAC,CAAC;EAEnB,OAAO,IAAI;AACf,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./UpdateStatePlugin";
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _UpdateStatePlugin = require("./UpdateStatePlugin");
|
|
7
|
-
Object.keys(_UpdateStatePlugin).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _UpdateStatePlugin[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _UpdateStatePlugin[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_UpdateStatePlugin","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./UpdateStatePlugin\";\n"],"mappings":";;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,kBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,kBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,kBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|