@contentful/field-editor-rich-text 3.9.0 → 3.9.2
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/dist/cjs/RichTextEditor.js +5 -12
- package/dist/cjs/{SyncEditorValue.js → SyncEditorChanges.js} +32 -38
- package/dist/cjs/helpers/callbacks.js +1 -9
- package/dist/cjs/internal/misc.js +0 -6
- package/dist/cjs/internal/transforms.js +42 -0
- package/dist/cjs/plugins/List/transforms/moveListItemDown.js +2 -2
- package/dist/cjs/plugins/List/transforms/moveListItems.js +2 -2
- package/dist/cjs/plugins/List/transforms/toggleList.js +2 -2
- package/dist/esm/RichTextEditor.js +5 -12
- package/dist/esm/SyncEditorChanges.js +47 -0
- package/dist/esm/helpers/callbacks.js +1 -9
- package/dist/esm/internal/misc.js +0 -3
- package/dist/esm/internal/transforms.js +36 -0
- package/dist/esm/plugins/List/transforms/moveListItemDown.js +1 -1
- package/dist/esm/plugins/List/transforms/moveListItems.js +1 -1
- package/dist/esm/plugins/List/transforms/toggleList.js +1 -1
- package/dist/types/SyncEditorChanges.d.ts +16 -0
- package/dist/types/internal/misc.d.ts +0 -1
- package/dist/types/internal/transforms.d.ts +9 -0
- package/dist/types/test-utils/jsx.d.ts +1 -1
- package/package.json +5 -5
- package/dist/esm/SyncEditorValue.js +0 -53
- package/dist/types/SyncEditorValue.d.ts +0 -13
|
@@ -25,13 +25,12 @@ const _emotion = require("emotion");
|
|
|
25
25
|
const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
|
|
26
26
|
const _noop = _interop_require_default(require("lodash/noop"));
|
|
27
27
|
const _ContentfulEditorProvider = require("./ContentfulEditorProvider");
|
|
28
|
-
const _callbacks = require("./helpers/callbacks");
|
|
29
28
|
const _toSlateValue = require("./helpers/toSlateValue");
|
|
30
29
|
const _misc = require("./internal/misc");
|
|
31
30
|
const _plugins = require("./plugins");
|
|
32
31
|
const _RichTextEditorstyles = require("./RichTextEditor.styles");
|
|
33
32
|
const _SdkProvider = require("./SdkProvider");
|
|
34
|
-
const
|
|
33
|
+
const _SyncEditorChanges = require("./SyncEditorChanges");
|
|
35
34
|
const _Toolbar = _interop_require_default(require("./Toolbar"));
|
|
36
35
|
const _StickyToolbarWrapper = _interop_require_default(require("./Toolbar/components/StickyToolbarWrapper"));
|
|
37
36
|
function _interop_require_default(obj) {
|
|
@@ -86,7 +85,6 @@ const ConnectedRichTextEditor = (props)=>{
|
|
|
86
85
|
onAction,
|
|
87
86
|
restrictedMarks
|
|
88
87
|
]);
|
|
89
|
-
const handleChange = props.onChange;
|
|
90
88
|
const initialValue = _react.useMemo(()=>{
|
|
91
89
|
return (0, _misc.normalizeInitialValue)({
|
|
92
90
|
plugins,
|
|
@@ -96,11 +94,6 @@ const ConnectedRichTextEditor = (props)=>{
|
|
|
96
94
|
props.value,
|
|
97
95
|
plugins
|
|
98
96
|
]);
|
|
99
|
-
const onChange = _react.useMemo(()=>(0, _callbacks.createOnChangeCallback)((document)=>{
|
|
100
|
-
handleChange?.(document);
|
|
101
|
-
}), [
|
|
102
|
-
handleChange
|
|
103
|
-
]);
|
|
104
97
|
const classNames = (0, _emotion.cx)(_RichTextEditorstyles.styles.editor, props.minHeight !== undefined ? (0, _emotion.css)({
|
|
105
98
|
minHeight: props.minHeight
|
|
106
99
|
}) : undefined, props.maxHeight !== undefined ? (0, _emotion.css)({
|
|
@@ -117,14 +110,14 @@ const ConnectedRichTextEditor = (props)=>{
|
|
|
117
110
|
id: id,
|
|
118
111
|
initialValue: initialValue,
|
|
119
112
|
plugins: plugins,
|
|
120
|
-
disableCorePlugins: _plugins.disableCorePlugins
|
|
121
|
-
onChange: onChange
|
|
113
|
+
disableCorePlugins: _plugins.disableCorePlugins
|
|
122
114
|
}, !props.isToolbarHidden && _react.createElement(_StickyToolbarWrapper.default, {
|
|
123
115
|
isDisabled: props.isDisabled
|
|
124
116
|
}, _react.createElement(_Toolbar.default, {
|
|
125
117
|
isDisabled: props.isDisabled
|
|
126
|
-
})), _react.createElement(
|
|
127
|
-
incomingValue: initialValue
|
|
118
|
+
})), _react.createElement(_SyncEditorChanges.SyncEditorChanges, {
|
|
119
|
+
incomingValue: initialValue,
|
|
120
|
+
onChange: props.onChange
|
|
128
121
|
}), _react.createElement(_platecore.Plate, {
|
|
129
122
|
id: id,
|
|
130
123
|
editableProps: {
|
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "SyncEditorChanges", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return SyncEditorChanges;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _react = _interop_require_wildcard(require("react"));
|
|
12
|
+
const _platecore = require("@udecode/plate-core");
|
|
12
13
|
const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
|
|
14
|
+
const _callbacks = require("./helpers/callbacks");
|
|
13
15
|
const _hooks = require("./internal/hooks");
|
|
14
|
-
const _misc = require("./internal/misc");
|
|
15
|
-
const _queries = require("./internal/queries");
|
|
16
16
|
const _transforms = require("./internal/transforms");
|
|
17
17
|
function _interop_require_default(obj) {
|
|
18
18
|
return obj && obj.__esModule ? obj : {
|
|
@@ -58,39 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
58
58
|
}
|
|
59
59
|
return newObj;
|
|
60
60
|
}
|
|
61
|
-
const
|
|
62
|
-
(0, _misc.withoutNormalizing)(editor, ()=>{
|
|
63
|
-
const children = [
|
|
64
|
-
...editor.children
|
|
65
|
-
];
|
|
66
|
-
children.forEach((node)=>editor.apply({
|
|
67
|
-
type: 'remove_node',
|
|
68
|
-
path: [
|
|
69
|
-
0
|
|
70
|
-
],
|
|
71
|
-
node
|
|
72
|
-
}));
|
|
73
|
-
if (nodes) {
|
|
74
|
-
const nodesArray = (0, _queries.isNode)(nodes) ? [
|
|
75
|
-
nodes
|
|
76
|
-
] : nodes;
|
|
77
|
-
nodesArray.forEach((node, i)=>{
|
|
78
|
-
editor.apply({
|
|
79
|
-
type: 'insert_node',
|
|
80
|
-
path: [
|
|
81
|
-
i
|
|
82
|
-
],
|
|
83
|
-
node
|
|
84
|
-
});
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
const point = (0, _queries.getEndPoint)(editor, []);
|
|
88
|
-
if (point) {
|
|
89
|
-
(0, _transforms.select)(editor, point);
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
};
|
|
93
|
-
const SyncEditorValue = ({ incomingValue })=>{
|
|
61
|
+
const useAcceptIncomingChanges = (incomingValue)=>{
|
|
94
62
|
const editor = (0, _hooks.usePlateSelectors)().editor();
|
|
95
63
|
const lastIncomingValue = _react.useRef(incomingValue);
|
|
96
64
|
_react.useEffect(()=>{
|
|
@@ -98,10 +66,36 @@ const SyncEditorValue = ({ incomingValue })=>{
|
|
|
98
66
|
return;
|
|
99
67
|
}
|
|
100
68
|
lastIncomingValue.current = incomingValue;
|
|
101
|
-
|
|
69
|
+
(0, _transforms.setEditorValue)(editor, incomingValue);
|
|
102
70
|
}, [
|
|
103
71
|
editor,
|
|
104
72
|
incomingValue
|
|
105
73
|
]);
|
|
74
|
+
};
|
|
75
|
+
const useOnValueChanged = (onChange)=>{
|
|
76
|
+
const editor = (0, _hooks.usePlateSelectors)().editor();
|
|
77
|
+
const setEditorOnChange = (0, _platecore.usePlateActions)().onChange();
|
|
78
|
+
_react.useEffect(()=>{
|
|
79
|
+
const cb = (0, _callbacks.createOnChangeCallback)(onChange);
|
|
80
|
+
setEditorOnChange({
|
|
81
|
+
fn: (document)=>{
|
|
82
|
+
const operations = editor?.operations.filter((op)=>{
|
|
83
|
+
return op.type !== 'set_selection';
|
|
84
|
+
});
|
|
85
|
+
if (operations.length === 0) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
cb(document);
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
}, [
|
|
92
|
+
editor,
|
|
93
|
+
onChange,
|
|
94
|
+
setEditorOnChange
|
|
95
|
+
]);
|
|
96
|
+
};
|
|
97
|
+
const SyncEditorChanges = ({ incomingValue , onChange })=>{
|
|
98
|
+
useAcceptIncomingChanges(incomingValue);
|
|
99
|
+
useOnValueChanged(onChange);
|
|
106
100
|
return null;
|
|
107
101
|
};
|
|
@@ -9,7 +9,6 @@ Object.defineProperty(exports, "createOnChangeCallback", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _contentfulslatejsadapter = require("@contentful/contentful-slatejs-adapter");
|
|
12
|
-
const _fastdeepequal = _interop_require_default(require("fast-deep-equal"));
|
|
13
12
|
const _debounce = _interop_require_default(require("lodash/debounce"));
|
|
14
13
|
const _Schema = _interop_require_default(require("../constants/Schema"));
|
|
15
14
|
const _removeInternalMarks = require("./removeInternalMarks");
|
|
@@ -18,13 +17,7 @@ function _interop_require_default(obj) {
|
|
|
18
17
|
default: obj
|
|
19
18
|
};
|
|
20
19
|
}
|
|
21
|
-
const createOnChangeCallback = (handler)=>{
|
|
22
|
-
let cache = null;
|
|
23
|
-
return (0, _debounce.default)((document)=>{
|
|
24
|
-
if ((0, _fastdeepequal.default)(document, cache)) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
cache = document;
|
|
20
|
+
const createOnChangeCallback = (handler)=>(0, _debounce.default)((document)=>{
|
|
28
21
|
const doc = (0, _removeInternalMarks.removeInternalMarks)((0, _contentfulslatejsadapter.toContentfulDocument)({
|
|
29
22
|
document: document,
|
|
30
23
|
schema: _Schema.default
|
|
@@ -32,4 +25,3 @@ const createOnChangeCallback = (handler)=>{
|
|
|
32
25
|
const cleanedDocument = (0, _removeInternalMarks.removeInternalMarks)(doc);
|
|
33
26
|
handler?.(cleanedDocument);
|
|
34
27
|
}, 500);
|
|
35
|
-
};
|
|
@@ -15,9 +15,6 @@ _export(exports, {
|
|
|
15
15
|
normalizeInitialValue: function() {
|
|
16
16
|
return normalizeInitialValue;
|
|
17
17
|
},
|
|
18
|
-
withoutNormalizing: function() {
|
|
19
|
-
return withoutNormalizing;
|
|
20
|
-
},
|
|
21
18
|
focusEditor: function() {
|
|
22
19
|
return focusEditor;
|
|
23
20
|
},
|
|
@@ -88,9 +85,6 @@ const normalizeInitialValue = (options, initialValue)=>{
|
|
|
88
85
|
});
|
|
89
86
|
return editor.children;
|
|
90
87
|
};
|
|
91
|
-
const withoutNormalizing = (editor, fn)=>{
|
|
92
|
-
return _platecore.withoutNormalizing(editor, fn);
|
|
93
|
-
};
|
|
94
88
|
const focusEditor = (editor, target)=>{
|
|
95
89
|
_platecore.focusEditor(editor, target);
|
|
96
90
|
};
|
|
@@ -12,6 +12,9 @@ _export(exports, {
|
|
|
12
12
|
normalize: function() {
|
|
13
13
|
return normalize;
|
|
14
14
|
},
|
|
15
|
+
withoutNormalizing: function() {
|
|
16
|
+
return withoutNormalizing;
|
|
17
|
+
},
|
|
15
18
|
setSelection: function() {
|
|
16
19
|
return setSelection;
|
|
17
20
|
},
|
|
@@ -77,9 +80,13 @@ _export(exports, {
|
|
|
77
80
|
},
|
|
78
81
|
deleteFragment: function() {
|
|
79
82
|
return deleteFragment;
|
|
83
|
+
},
|
|
84
|
+
setEditorValue: function() {
|
|
85
|
+
return setEditorValue;
|
|
80
86
|
}
|
|
81
87
|
});
|
|
82
88
|
const _platecore = _interop_require_wildcard(require("@udecode/plate-core"));
|
|
89
|
+
const _queries = require("./queries");
|
|
83
90
|
function _getRequireWildcardCache(nodeInterop) {
|
|
84
91
|
if (typeof WeakMap !== "function") return null;
|
|
85
92
|
var cacheBabelInterop = new WeakMap();
|
|
@@ -124,6 +131,9 @@ const normalize = (editor, options = {
|
|
|
124
131
|
})=>{
|
|
125
132
|
return _platecore.normalizeEditor(editor, options);
|
|
126
133
|
};
|
|
134
|
+
const withoutNormalizing = (editor, fn)=>{
|
|
135
|
+
return _platecore.withoutNormalizing(editor, fn);
|
|
136
|
+
};
|
|
127
137
|
const setSelection = (editor, props)=>{
|
|
128
138
|
return _platecore.setSelection(editor, props);
|
|
129
139
|
};
|
|
@@ -193,3 +203,35 @@ const moveNodes = (editor, opts)=>{
|
|
|
193
203
|
const deleteFragment = (editor, options)=>{
|
|
194
204
|
return _platecore.deleteFragment(editor, options);
|
|
195
205
|
};
|
|
206
|
+
const setEditorValue = (editor, nodes)=>{
|
|
207
|
+
withoutNormalizing(editor, ()=>{
|
|
208
|
+
const children = [
|
|
209
|
+
...editor.children
|
|
210
|
+
];
|
|
211
|
+
children.forEach((node)=>editor.apply({
|
|
212
|
+
type: 'remove_node',
|
|
213
|
+
path: [
|
|
214
|
+
0
|
|
215
|
+
],
|
|
216
|
+
node
|
|
217
|
+
}));
|
|
218
|
+
if (nodes) {
|
|
219
|
+
const nodesArray = (0, _queries.isNode)(nodes) ? [
|
|
220
|
+
nodes
|
|
221
|
+
] : nodes;
|
|
222
|
+
nodesArray.forEach((node, i)=>{
|
|
223
|
+
editor.apply({
|
|
224
|
+
type: 'insert_node',
|
|
225
|
+
path: [
|
|
226
|
+
i
|
|
227
|
+
],
|
|
228
|
+
node
|
|
229
|
+
});
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
const point = (0, _queries.getEndPoint)(editor, []);
|
|
233
|
+
if (point) {
|
|
234
|
+
select(editor, point);
|
|
235
|
+
}
|
|
236
|
+
});
|
|
237
|
+
};
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "moveListItemDown", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _platelist = require("@udecode/plate-list");
|
|
12
|
-
const
|
|
12
|
+
const _internal = require("../../../internal");
|
|
13
13
|
const _queries = require("../../../internal/queries");
|
|
14
14
|
const _transforms = require("../../../internal/transforms");
|
|
15
15
|
const moveListItemDown = (editor, { list , listItem })=>{
|
|
@@ -28,7 +28,7 @@ const moveListItemDown = (editor, { list , listItem })=>{
|
|
|
28
28
|
type: (0, _platelist.getListTypes)(editor)
|
|
29
29
|
}));
|
|
30
30
|
const newPath = (0, _queries.getNextPath)((0, _queries.getLastChildPath)(subList ?? previousSiblingItem));
|
|
31
|
-
(0,
|
|
31
|
+
(0, _internal.withoutNormalizing)(editor, ()=>{
|
|
32
32
|
if (!subList) {
|
|
33
33
|
(0, _transforms.wrapNodes)(editor, {
|
|
34
34
|
type: listNode.type,
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "moveListItems", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _platelist = require("@udecode/plate-list");
|
|
12
|
-
const
|
|
12
|
+
const _internal = require("../../../internal");
|
|
13
13
|
const _queries = require("../../../internal/queries");
|
|
14
14
|
const _moveListItemDown = require("./moveListItemDown");
|
|
15
15
|
const moveListItems = (editor, { increase =true , at =editor.selection ?? undefined } = {})=>{
|
|
@@ -36,7 +36,7 @@ const moveListItems = (editor, { increase =true , at =editor.selection ?? undefi
|
|
|
36
36
|
}
|
|
37
37
|
});
|
|
38
38
|
const licPathRefsToMove = increase ? highestLicPathRefs : highestLicPathRefs.reverse();
|
|
39
|
-
(0,
|
|
39
|
+
(0, _internal.withoutNormalizing)(editor, ()=>{
|
|
40
40
|
licPathRefsToMove.forEach((licPathRef)=>{
|
|
41
41
|
const licPath = licPathRef.unref();
|
|
42
42
|
if (!licPath) return;
|
|
@@ -10,8 +10,8 @@ Object.defineProperty(exports, "toggleList", {
|
|
|
10
10
|
});
|
|
11
11
|
const _richtexttypes = require("@contentful/rich-text-types");
|
|
12
12
|
const _platelist = require("@udecode/plate-list");
|
|
13
|
+
const _internal = require("../../../internal");
|
|
13
14
|
const _constants = require("../../../internal/constants");
|
|
14
|
-
const _misc = require("../../../internal/misc");
|
|
15
15
|
const _queries = require("../../../internal/queries");
|
|
16
16
|
const _transforms = require("../../../internal/transforms");
|
|
17
17
|
const _unwrapList = require("./unwrapList");
|
|
@@ -19,7 +19,7 @@ const listTypes = [
|
|
|
19
19
|
_richtexttypes.BLOCKS.UL_LIST,
|
|
20
20
|
_richtexttypes.BLOCKS.OL_LIST
|
|
21
21
|
];
|
|
22
|
-
const toggleList = (editor, { type })=>(0,
|
|
22
|
+
const toggleList = (editor, { type })=>(0, _internal.withoutNormalizing)(editor, ()=>{
|
|
23
23
|
if (!editor.selection) {
|
|
24
24
|
return;
|
|
25
25
|
}
|
|
@@ -7,13 +7,12 @@ import { css, cx } from 'emotion';
|
|
|
7
7
|
import deepEquals from 'fast-deep-equal';
|
|
8
8
|
import noop from 'lodash/noop';
|
|
9
9
|
import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
|
|
10
|
-
import { createOnChangeCallback } from './helpers/callbacks';
|
|
11
10
|
import { toSlateValue } from './helpers/toSlateValue';
|
|
12
11
|
import { normalizeInitialValue } from './internal/misc';
|
|
13
12
|
import { getPlugins, disableCorePlugins } from './plugins';
|
|
14
13
|
import { styles } from './RichTextEditor.styles';
|
|
15
14
|
import { SdkProvider } from './SdkProvider';
|
|
16
|
-
import {
|
|
15
|
+
import { SyncEditorChanges } from './SyncEditorChanges';
|
|
17
16
|
import Toolbar from './Toolbar';
|
|
18
17
|
import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
|
|
19
18
|
export const ConnectedRichTextEditor = (props)=>{
|
|
@@ -24,7 +23,6 @@ export const ConnectedRichTextEditor = (props)=>{
|
|
|
24
23
|
onAction,
|
|
25
24
|
restrictedMarks
|
|
26
25
|
]);
|
|
27
|
-
const handleChange = props.onChange;
|
|
28
26
|
const initialValue = React.useMemo(()=>{
|
|
29
27
|
return normalizeInitialValue({
|
|
30
28
|
plugins,
|
|
@@ -34,11 +32,6 @@ export const ConnectedRichTextEditor = (props)=>{
|
|
|
34
32
|
props.value,
|
|
35
33
|
plugins
|
|
36
34
|
]);
|
|
37
|
-
const onChange = React.useMemo(()=>createOnChangeCallback((document)=>{
|
|
38
|
-
handleChange?.(document);
|
|
39
|
-
}), [
|
|
40
|
-
handleChange
|
|
41
|
-
]);
|
|
42
35
|
const classNames = cx(styles.editor, props.minHeight !== undefined ? css({
|
|
43
36
|
minHeight: props.minHeight
|
|
44
37
|
}) : undefined, props.maxHeight !== undefined ? css({
|
|
@@ -55,14 +48,14 @@ export const ConnectedRichTextEditor = (props)=>{
|
|
|
55
48
|
id: id,
|
|
56
49
|
initialValue: initialValue,
|
|
57
50
|
plugins: plugins,
|
|
58
|
-
disableCorePlugins: disableCorePlugins
|
|
59
|
-
onChange: onChange
|
|
51
|
+
disableCorePlugins: disableCorePlugins
|
|
60
52
|
}, !props.isToolbarHidden && React.createElement(StickyToolbarWrapper, {
|
|
61
53
|
isDisabled: props.isDisabled
|
|
62
54
|
}, React.createElement(Toolbar, {
|
|
63
55
|
isDisabled: props.isDisabled
|
|
64
|
-
})), React.createElement(
|
|
65
|
-
incomingValue: initialValue
|
|
56
|
+
})), React.createElement(SyncEditorChanges, {
|
|
57
|
+
incomingValue: initialValue,
|
|
58
|
+
onChange: props.onChange
|
|
66
59
|
}), React.createElement(Plate, {
|
|
67
60
|
id: id,
|
|
68
61
|
editableProps: {
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { usePlateActions } from '@udecode/plate-core';
|
|
3
|
+
import equal from 'fast-deep-equal';
|
|
4
|
+
import { createOnChangeCallback } from './helpers/callbacks';
|
|
5
|
+
import { usePlateSelectors } from './internal/hooks';
|
|
6
|
+
import { setEditorValue } from './internal/transforms';
|
|
7
|
+
const useAcceptIncomingChanges = (incomingValue)=>{
|
|
8
|
+
const editor = usePlateSelectors().editor();
|
|
9
|
+
const lastIncomingValue = React.useRef(incomingValue);
|
|
10
|
+
React.useEffect(()=>{
|
|
11
|
+
if (equal(lastIncomingValue.current, incomingValue)) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
lastIncomingValue.current = incomingValue;
|
|
15
|
+
setEditorValue(editor, incomingValue);
|
|
16
|
+
}, [
|
|
17
|
+
editor,
|
|
18
|
+
incomingValue
|
|
19
|
+
]);
|
|
20
|
+
};
|
|
21
|
+
const useOnValueChanged = (onChange)=>{
|
|
22
|
+
const editor = usePlateSelectors().editor();
|
|
23
|
+
const setEditorOnChange = usePlateActions().onChange();
|
|
24
|
+
React.useEffect(()=>{
|
|
25
|
+
const cb = createOnChangeCallback(onChange);
|
|
26
|
+
setEditorOnChange({
|
|
27
|
+
fn: (document)=>{
|
|
28
|
+
const operations = editor?.operations.filter((op)=>{
|
|
29
|
+
return op.type !== 'set_selection';
|
|
30
|
+
});
|
|
31
|
+
if (operations.length === 0) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
cb(document);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}, [
|
|
38
|
+
editor,
|
|
39
|
+
onChange,
|
|
40
|
+
setEditorOnChange
|
|
41
|
+
]);
|
|
42
|
+
};
|
|
43
|
+
export const SyncEditorChanges = ({ incomingValue , onChange })=>{
|
|
44
|
+
useAcceptIncomingChanges(incomingValue);
|
|
45
|
+
useOnValueChanged(onChange);
|
|
46
|
+
return null;
|
|
47
|
+
};
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
|
|
2
|
-
import equal from 'fast-deep-equal';
|
|
3
2
|
import debounce from 'lodash/debounce';
|
|
4
3
|
import schema from '../constants/Schema';
|
|
5
4
|
import { removeInternalMarks } from './removeInternalMarks';
|
|
6
|
-
export const createOnChangeCallback = (handler)=>{
|
|
7
|
-
let cache = null;
|
|
8
|
-
return debounce((document)=>{
|
|
9
|
-
if (equal(document, cache)) {
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
cache = document;
|
|
5
|
+
export const createOnChangeCallback = (handler)=>debounce((document)=>{
|
|
13
6
|
const doc = removeInternalMarks(toContentfulDocument({
|
|
14
7
|
document: document,
|
|
15
8
|
schema: schema
|
|
@@ -17,4 +10,3 @@ export const createOnChangeCallback = (handler)=>{
|
|
|
17
10
|
const cleanedDocument = removeInternalMarks(doc);
|
|
18
11
|
handler?.(cleanedDocument);
|
|
19
12
|
}, 500);
|
|
20
|
-
};
|
|
@@ -13,9 +13,6 @@ export const normalizeInitialValue = (options, initialValue)=>{
|
|
|
13
13
|
});
|
|
14
14
|
return editor.children;
|
|
15
15
|
};
|
|
16
|
-
export const withoutNormalizing = (editor, fn)=>{
|
|
17
|
-
return p.withoutNormalizing(editor, fn);
|
|
18
|
-
};
|
|
19
16
|
export const focusEditor = (editor, target)=>{
|
|
20
17
|
p.focusEditor(editor, target);
|
|
21
18
|
};
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import * as p from '@udecode/plate-core';
|
|
2
|
+
import { getEndPoint, isNode } from './queries';
|
|
2
3
|
export const normalize = (editor, options = {
|
|
3
4
|
force: true
|
|
4
5
|
})=>{
|
|
5
6
|
return p.normalizeEditor(editor, options);
|
|
6
7
|
};
|
|
8
|
+
export const withoutNormalizing = (editor, fn)=>{
|
|
9
|
+
return p.withoutNormalizing(editor, fn);
|
|
10
|
+
};
|
|
7
11
|
export const setSelection = (editor, props)=>{
|
|
8
12
|
return p.setSelection(editor, props);
|
|
9
13
|
};
|
|
@@ -73,3 +77,35 @@ export const moveNodes = (editor, opts)=>{
|
|
|
73
77
|
export const deleteFragment = (editor, options)=>{
|
|
74
78
|
return p.deleteFragment(editor, options);
|
|
75
79
|
};
|
|
80
|
+
export const setEditorValue = (editor, nodes)=>{
|
|
81
|
+
withoutNormalizing(editor, ()=>{
|
|
82
|
+
const children = [
|
|
83
|
+
...editor.children
|
|
84
|
+
];
|
|
85
|
+
children.forEach((node)=>editor.apply({
|
|
86
|
+
type: 'remove_node',
|
|
87
|
+
path: [
|
|
88
|
+
0
|
|
89
|
+
],
|
|
90
|
+
node
|
|
91
|
+
}));
|
|
92
|
+
if (nodes) {
|
|
93
|
+
const nodesArray = isNode(nodes) ? [
|
|
94
|
+
nodes
|
|
95
|
+
] : nodes;
|
|
96
|
+
nodesArray.forEach((node, i)=>{
|
|
97
|
+
editor.apply({
|
|
98
|
+
type: 'insert_node',
|
|
99
|
+
path: [
|
|
100
|
+
i
|
|
101
|
+
],
|
|
102
|
+
node
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
const point = getEndPoint(editor, []);
|
|
107
|
+
if (point) {
|
|
108
|
+
select(editor, point);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getListTypes } from '@udecode/plate-list';
|
|
2
|
-
import { withoutNormalizing } from '../../../internal
|
|
2
|
+
import { withoutNormalizing } from '../../../internal';
|
|
3
3
|
import { getNodeEntry, getNodeChildren, getNextPath, getPreviousPath, getLastChildPath, match } from '../../../internal/queries';
|
|
4
4
|
import { wrapNodes, moveNodes } from '../../../internal/transforms';
|
|
5
5
|
export const moveListItemDown = (editor, { list , listItem })=>{
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { isListNested, ELEMENT_LIC, getListItemEntry, moveListItemUp } from '@udecode/plate-list';
|
|
2
|
-
import { withoutNormalizing } from '../../../internal
|
|
2
|
+
import { withoutNormalizing } from '../../../internal';
|
|
3
3
|
import { getNodeEntries, getPluginType, createPathRef, getParentPath, isAncestorPath } from '../../../internal/queries';
|
|
4
4
|
import { moveListItemDown } from './moveListItemDown';
|
|
5
5
|
export const moveListItems = (editor, { increase =true , at =editor.selection ?? undefined } = {})=>{
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { BLOCKS } from '@contentful/rich-text-types';
|
|
2
2
|
import { ELEMENT_LIC } from '@udecode/plate-list';
|
|
3
3
|
import { getListItemEntry } from '@udecode/plate-list';
|
|
4
|
+
import { withoutNormalizing } from '../../../internal';
|
|
4
5
|
import { ELEMENT_DEFAULT } from '../../../internal/constants';
|
|
5
|
-
import { withoutNormalizing } from '../../../internal/misc';
|
|
6
6
|
import { findNode, getNodeEntries, isRangeCollapsed, getRangeEdges, isRangeAcrossBlocks, getParentNode, getPluginType, getCommonNode, getRangeStart, getRangeEnd } from '../../../internal/queries';
|
|
7
7
|
import { setNodes, wrapNodes } from '../../../internal/transforms';
|
|
8
8
|
import { unwrapList } from './unwrapList';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as Contentful from '@contentful/rich-text-types';
|
|
2
|
+
import { Value } from './internal/types';
|
|
3
|
+
export type SyncEditorStateProps = {
|
|
4
|
+
incomingValue?: Value;
|
|
5
|
+
onChange?: (doc: Contentful.Document) => unknown;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* A void component that's responsible for keeping the editor
|
|
9
|
+
* state in sync with incoming changes (aka. external updates) and
|
|
10
|
+
* triggering onChange events.
|
|
11
|
+
*
|
|
12
|
+
* This component is a hack to work around the limitation of Plate v17+
|
|
13
|
+
* where we can no longer access the editor instance outside the Plate
|
|
14
|
+
* provider.
|
|
15
|
+
*/
|
|
16
|
+
export declare const SyncEditorChanges: ({ incomingValue, onChange }: SyncEditorStateProps) => null;
|
|
@@ -48,7 +48,6 @@ export declare const createPlateEditor: (options?: CreatePlateEditorOptions) =>
|
|
|
48
48
|
* examples.
|
|
49
49
|
*/
|
|
50
50
|
export declare const normalizeInitialValue: (options: CreatePlateEditorOptions, initialValue?: Value) => Value;
|
|
51
|
-
export declare const withoutNormalizing: (editor: PlateEditor, fn: () => boolean | void) => boolean;
|
|
52
51
|
export declare const focusEditor: (editor: PlateEditor, target?: Location) => void;
|
|
53
52
|
export declare const blurEditor: (editor: PlateEditor) => void;
|
|
54
53
|
export declare const selectEditor: (editor: PlateEditor, opts: p.SelectEditorOptions) => void;
|
|
@@ -6,6 +6,7 @@ import { PlateEditor, Node, ToggleNodeTypeOptions, EditorNodesOptions, BaseRange
|
|
|
6
6
|
* Apply editor normalization rules
|
|
7
7
|
*/
|
|
8
8
|
export declare const normalize: (editor: PlateEditor, options?: s.EditorNormalizeOptions) => void;
|
|
9
|
+
export declare const withoutNormalizing: (editor: PlateEditor, fn: () => boolean | void) => boolean;
|
|
9
10
|
/**
|
|
10
11
|
* Set the selection to a location
|
|
11
12
|
*/
|
|
@@ -31,3 +32,11 @@ export declare const deleteText: (editor: PlateEditor, opts?: Parameters<typeof
|
|
|
31
32
|
export declare const removeNodes: (editor: PlateEditor, opts?: p.RemoveNodesOptions<Value>) => void;
|
|
32
33
|
export declare const moveNodes: (editor: PlateEditor, opts?: p.MoveNodesOptions<Value>) => void;
|
|
33
34
|
export declare const deleteFragment: (editor: PlateEditor, options?: s.EditorFragmentDeletionOptions | undefined) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Plate api doesn't allow to modify (easily) the editor value
|
|
37
|
+
* programmatically after the editor instance is created.
|
|
38
|
+
*
|
|
39
|
+
* This function is inspired by:
|
|
40
|
+
* https://github.com/udecode/plate/issues/1269#issuecomment-1057643622
|
|
41
|
+
*/
|
|
42
|
+
export declare const setEditorValue: (editor: PlateEditor, nodes?: Node[]) => void;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Add items as needed. Don't forget to adjust hyperscript.d.ts
|
|
5
5
|
*/
|
|
6
|
-
export declare const jsx: <S extends "text" | "selection" | "editor" | "
|
|
6
|
+
export declare const jsx: <S extends "text" | "selection" | "editor" | "element" | "anchor" | "focus" | "cursor" | "fragment">(tagName: S, attributes?: Object | undefined, ...children: any[]) => ReturnType<({
|
|
7
7
|
anchor: typeof import("slate-hyperscript/dist/creators").createAnchor;
|
|
8
8
|
cursor: typeof import("slate-hyperscript/dist/creators").createCursor;
|
|
9
9
|
editor: (tagName: string, attributes: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/field-editor-rich-text",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.2",
|
|
4
4
|
"source": "./src/index.tsx",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"@contentful/f36-icons": "^4.1.1",
|
|
45
45
|
"@contentful/f36-tokens": "^4.0.0",
|
|
46
46
|
"@contentful/f36-utils": "^4.19.0",
|
|
47
|
-
"@contentful/field-editor-reference": "^5.13.
|
|
48
|
-
"@contentful/field-editor-shared": "^1.3.
|
|
47
|
+
"@contentful/field-editor-reference": "^5.13.2",
|
|
48
|
+
"@contentful/field-editor-shared": "^1.3.1",
|
|
49
49
|
"@contentful/rich-text-plain-text-renderer": "^16.0.4",
|
|
50
50
|
"@contentful/rich-text-types": "16.1.0",
|
|
51
51
|
"@popperjs/core": "^2.11.5",
|
|
@@ -74,12 +74,12 @@
|
|
|
74
74
|
"react-dom": ">=16.14.0"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
|
-
"@contentful/field-editor-test-utils": "^1.4.
|
|
77
|
+
"@contentful/field-editor-test-utils": "^1.4.1",
|
|
78
78
|
"@contentful/rich-text-react-renderer": "^15.16.4",
|
|
79
79
|
"@types/is-hotkey": "^0.1.6",
|
|
80
80
|
"@udecode/plate-test-utils": "^3.2.0",
|
|
81
81
|
"prism-react-renderer": "2.0.5",
|
|
82
82
|
"react": ">=16.14.0"
|
|
83
83
|
},
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "ca904b19ca794a2c40d82e1f7ede9e0be3560f22"
|
|
85
85
|
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import equal from 'fast-deep-equal';
|
|
3
|
-
import { usePlateSelectors } from './internal/hooks';
|
|
4
|
-
import { withoutNormalizing } from './internal/misc';
|
|
5
|
-
import { isNode, getEndPoint } from './internal/queries';
|
|
6
|
-
import { select } from './internal/transforms';
|
|
7
|
-
const setEditorContent = (editor, nodes)=>{
|
|
8
|
-
withoutNormalizing(editor, ()=>{
|
|
9
|
-
const children = [
|
|
10
|
-
...editor.children
|
|
11
|
-
];
|
|
12
|
-
children.forEach((node)=>editor.apply({
|
|
13
|
-
type: 'remove_node',
|
|
14
|
-
path: [
|
|
15
|
-
0
|
|
16
|
-
],
|
|
17
|
-
node
|
|
18
|
-
}));
|
|
19
|
-
if (nodes) {
|
|
20
|
-
const nodesArray = isNode(nodes) ? [
|
|
21
|
-
nodes
|
|
22
|
-
] : nodes;
|
|
23
|
-
nodesArray.forEach((node, i)=>{
|
|
24
|
-
editor.apply({
|
|
25
|
-
type: 'insert_node',
|
|
26
|
-
path: [
|
|
27
|
-
i
|
|
28
|
-
],
|
|
29
|
-
node
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
const point = getEndPoint(editor, []);
|
|
34
|
-
if (point) {
|
|
35
|
-
select(editor, point);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
export const SyncEditorValue = ({ incomingValue })=>{
|
|
40
|
-
const editor = usePlateSelectors().editor();
|
|
41
|
-
const lastIncomingValue = React.useRef(incomingValue);
|
|
42
|
-
React.useEffect(()=>{
|
|
43
|
-
if (equal(lastIncomingValue.current, incomingValue)) {
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
lastIncomingValue.current = incomingValue;
|
|
47
|
-
setEditorContent(editor, incomingValue);
|
|
48
|
-
}, [
|
|
49
|
-
editor,
|
|
50
|
-
incomingValue
|
|
51
|
-
]);
|
|
52
|
-
return null;
|
|
53
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Value } from './internal/types';
|
|
2
|
-
export type SyncEditorStateProps = {
|
|
3
|
-
incomingValue?: Value;
|
|
4
|
-
};
|
|
5
|
-
/**
|
|
6
|
-
* A void component that's responsible for keeping the editor
|
|
7
|
-
* state in sync with incoming changes (aka. external updates)
|
|
8
|
-
*
|
|
9
|
-
* This component is a hack to workaround the limitation of Plate v17+
|
|
10
|
-
* where we can no longer access the editor instance outside the Plate
|
|
11
|
-
* provider.
|
|
12
|
-
*/
|
|
13
|
-
export declare const SyncEditorValue: ({ incomingValue }: SyncEditorStateProps) => null;
|