@handlewithcare/react-prosemirror 2.4.12 → 2.5.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.
Files changed (149) hide show
  1. package/dist/cjs/AbstractEditorView.js +4 -0
  2. package/dist/cjs/ReactEditorView.js +156 -0
  3. package/dist/cjs/StaticEditorView.js +86 -0
  4. package/dist/cjs/components/ChildNodeViews.js +58 -29
  5. package/dist/cjs/components/CustomNodeView.js +77 -137
  6. package/dist/cjs/{hooks/useNodePos.js → components/DefaultNodeView.js} +24 -26
  7. package/dist/cjs/components/DocNodeView.js +33 -41
  8. package/dist/cjs/components/MarkView.js +1 -2
  9. package/dist/cjs/components/NativeWidgetView.js +2 -3
  10. package/dist/cjs/components/NodeView.js +31 -21
  11. package/dist/cjs/components/ProseMirror.js +25 -17
  12. package/dist/cjs/components/ProseMirrorDoc.js +7 -27
  13. package/dist/cjs/components/ReactNodeView.js +98 -61
  14. package/dist/cjs/components/SeparatorHackView.js +1 -2
  15. package/dist/cjs/components/TextNodeView.js +4 -5
  16. package/dist/cjs/components/TrailingHackView.js +1 -2
  17. package/dist/cjs/components/WidgetView.js +2 -4
  18. package/dist/cjs/constants.js +33 -0
  19. package/dist/cjs/hooks/useEditor.js +33 -229
  20. package/dist/cjs/hooks/useEditorEffect.js +2 -2
  21. package/dist/cjs/hooks/useEditorEventCallback.js +8 -5
  22. package/dist/cjs/hooks/useIgnoreMutation.js +1 -1
  23. package/dist/cjs/hooks/useNodeViewDescriptor.js +123 -80
  24. package/dist/cjs/hooks/useReactKeys.js +1 -1
  25. package/dist/cjs/hooks/useSelectNode.js +9 -7
  26. package/dist/cjs/hooks/useStopEvent.js +1 -1
  27. package/dist/cjs/plugins/beforeInputPlugin.js +12 -0
  28. package/dist/cjs/testing/editorViewTestHelpers.js +0 -2
  29. package/dist/cjs/viewdesc.js +104 -25
  30. package/dist/esm/AbstractEditorView.js +1 -0
  31. package/dist/esm/ReactEditorView.js +156 -0
  32. package/dist/esm/StaticEditorView.js +76 -0
  33. package/dist/esm/components/ChildNodeViews.js +59 -31
  34. package/dist/esm/components/CustomNodeView.js +78 -138
  35. package/dist/esm/components/DefaultNodeView.js +16 -0
  36. package/dist/esm/components/DocNodeView.js +33 -41
  37. package/dist/esm/components/MarkView.js +1 -2
  38. package/dist/esm/components/NativeWidgetView.js +2 -3
  39. package/dist/esm/components/NodeView.js +32 -22
  40. package/dist/esm/components/ProseMirror.js +25 -17
  41. package/dist/esm/components/ProseMirrorDoc.js +7 -28
  42. package/dist/esm/components/ReactNodeView.js +99 -62
  43. package/dist/esm/components/SeparatorHackView.js +1 -2
  44. package/dist/esm/components/TextNodeView.js +4 -5
  45. package/dist/esm/components/TrailingHackView.js +1 -2
  46. package/dist/esm/components/WidgetView.js +2 -4
  47. package/dist/esm/constants.js +15 -0
  48. package/dist/esm/hooks/useEditor.js +29 -218
  49. package/dist/esm/hooks/useEditorEffect.js +2 -2
  50. package/dist/esm/hooks/useEditorEventCallback.js +8 -5
  51. package/dist/esm/hooks/useIgnoreMutation.js +1 -1
  52. package/dist/esm/hooks/useNodeViewDescriptor.js +125 -82
  53. package/dist/esm/hooks/useReactKeys.js +1 -1
  54. package/dist/esm/hooks/useSelectNode.js +9 -7
  55. package/dist/esm/hooks/useStopEvent.js +1 -1
  56. package/dist/esm/plugins/beforeInputPlugin.js +12 -0
  57. package/dist/esm/testing/editorViewTestHelpers.js +0 -2
  58. package/dist/esm/viewdesc.js +94 -18
  59. package/dist/tsconfig.tsbuildinfo +1 -1
  60. package/dist/types/AbstractEditorView.d.ts +27 -0
  61. package/dist/types/ReactEditorView.d.ts +80 -0
  62. package/dist/types/StaticEditorView.d.ts +24 -0
  63. package/dist/types/components/ChildNodeViews.d.ts +2 -2
  64. package/dist/types/components/CustomNodeView.d.ts +3 -3
  65. package/dist/types/components/DefaultNodeView.d.ts +3 -0
  66. package/dist/types/components/DocNodeView.d.ts +9 -17
  67. package/dist/types/components/MarkView.d.ts +2 -2
  68. package/dist/types/components/NativeWidgetView.d.ts +2 -2
  69. package/dist/types/components/NodeView.d.ts +5 -5
  70. package/dist/types/components/NodeViewComponentProps.d.ts +3 -4
  71. package/dist/types/components/ProseMirrorDoc.d.ts +14 -8
  72. package/dist/types/components/ReactNodeView.d.ts +4 -2
  73. package/dist/types/components/SeparatorHackView.d.ts +2 -2
  74. package/dist/types/components/TextNodeView.d.ts +4 -3
  75. package/dist/types/components/TrailingHackView.d.ts +2 -2
  76. package/dist/types/components/WidgetView.d.ts +2 -2
  77. package/dist/types/constants.d.ts +4 -0
  78. package/dist/types/contexts/EditorContext.d.ts +6 -4
  79. package/dist/types/contexts/IgnoreMutationContext.d.ts +2 -1
  80. package/dist/types/contexts/NodeViewContext.d.ts +3 -1
  81. package/dist/types/contexts/SelectNodeContext.d.ts +3 -1
  82. package/dist/types/contexts/StopEventContext.d.ts +2 -1
  83. package/dist/types/decorations/computeDocDeco.d.ts +3 -2
  84. package/dist/types/decorations/viewDecorations.d.ts +3 -2
  85. package/dist/types/hooks/useEditor.d.ts +5 -46
  86. package/dist/types/hooks/useNodeViewDescriptor.d.ts +18 -10
  87. package/dist/types/hooks/useReactKeys.d.ts +1 -1
  88. package/dist/types/hooks/useSelectNode.d.ts +2 -1
  89. package/dist/types/props.d.ts +3 -3
  90. package/dist/types/viewdesc.d.ts +29 -11
  91. package/package.json +7 -3
  92. package/dist/cjs/components/Editor.js +0 -28
  93. package/dist/cjs/components/NodeViews.js +0 -73
  94. package/dist/cjs/components/__tests__/LayoutGroup.test.js +0 -141
  95. package/dist/cjs/components/__tests__/ProseMirror.test.js +0 -255
  96. package/dist/cjs/contexts/NodeViewsContext.js +0 -10
  97. package/dist/cjs/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -107
  98. package/dist/cjs/hooks/__tests__/useNodeViews.test.js +0 -159
  99. package/dist/cjs/hooks/useClientOnly.js +0 -19
  100. package/dist/cjs/hooks/useEditorView.js +0 -100
  101. package/dist/cjs/hooks/useNodeViews.js +0 -100
  102. package/dist/cjs/nodeViews/createReactNodeViewConstructor.js +0 -244
  103. package/dist/cjs/nodeViews/phrasingContentTags.js +0 -57
  104. package/dist/cjs/plugins/__tests__/react.test.js +0 -139
  105. package/dist/cjs/plugins/react.js +0 -71
  106. package/dist/cjs/selection/SelectionDOMObserver.js +0 -171
  107. package/dist/cjs/selection/hasFocusAndSelection.js +0 -35
  108. package/dist/cjs/selection/selectionFromDOM.js +0 -77
  109. package/dist/cjs/selection/selectionToDOM.js +0 -226
  110. package/dist/cjs/ssr.js +0 -85
  111. package/dist/esm/components/Editor.js +0 -15
  112. package/dist/esm/components/NodeViews.js +0 -26
  113. package/dist/esm/components/__tests__/LayoutGroup.test.js +0 -98
  114. package/dist/esm/components/__tests__/ProseMirror.test.js +0 -207
  115. package/dist/esm/contexts/NodeViewsContext.js +0 -9
  116. package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -98
  117. package/dist/esm/hooks/__tests__/useNodeViews.test.js +0 -116
  118. package/dist/esm/hooks/useClientOnly.js +0 -9
  119. package/dist/esm/hooks/useEditorView.js +0 -99
  120. package/dist/esm/hooks/useNodePos.js +0 -16
  121. package/dist/esm/hooks/useNodeViews.js +0 -53
  122. package/dist/esm/nodeViews/createReactNodeViewConstructor.js +0 -214
  123. package/dist/esm/nodeViews/phrasingContentTags.js +0 -49
  124. package/dist/esm/plugins/__tests__/react.test.js +0 -135
  125. package/dist/esm/plugins/react.js +0 -64
  126. package/dist/esm/selection/SelectionDOMObserver.js +0 -161
  127. package/dist/esm/selection/hasFocusAndSelection.js +0 -17
  128. package/dist/esm/selection/selectionFromDOM.js +0 -59
  129. package/dist/esm/selection/selectionToDOM.js +0 -196
  130. package/dist/esm/ssr.js +0 -82
  131. package/dist/types/components/Editor.d.ts +0 -7
  132. package/dist/types/components/NodeViews.d.ts +0 -6
  133. package/dist/types/components/__tests__/LayoutGroup.test.d.ts +0 -1
  134. package/dist/types/contexts/NodeViewsContext.d.ts +0 -19
  135. package/dist/types/hooks/__tests__/useEditorViewLayoutEffect.test.d.ts +0 -1
  136. package/dist/types/hooks/__tests__/useNodeViews.test.d.ts +0 -1
  137. package/dist/types/hooks/useClientOnly.d.ts +0 -1
  138. package/dist/types/hooks/useEditorView.d.ts +0 -23
  139. package/dist/types/hooks/useNodePos.d.ts +0 -9
  140. package/dist/types/hooks/useNodeViews.d.ts +0 -5
  141. package/dist/types/nodeViews/createReactNodeViewConstructor.d.ts +0 -48
  142. package/dist/types/nodeViews/phrasingContentTags.d.ts +0 -1
  143. package/dist/types/plugins/__tests__/react.test.d.ts +0 -1
  144. package/dist/types/plugins/react.d.ts +0 -21
  145. package/dist/types/selection/SelectionDOMObserver.d.ts +0 -33
  146. package/dist/types/selection/hasFocusAndSelection.d.ts +0 -3
  147. package/dist/types/selection/selectionFromDOM.d.ts +0 -4
  148. package/dist/types/selection/selectionToDOM.d.ts +0 -9
  149. package/dist/types/ssr.d.ts +0 -19
@@ -1,244 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- REACT_NODE_VIEW: ()=>REACT_NODE_VIEW,
13
- findNodeKeyUp: ()=>findNodeKeyUp,
14
- createReactNodeViewConstructor: ()=>createReactNodeViewConstructor
15
- });
16
- const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
17
- const _reactDom = require("react-dom");
18
- const _nodeViewsContextJs = require("../contexts/NodeViewsContext.js");
19
- const _useEditorEffectJs = require("../hooks/useEditorEffect.js");
20
- const _useNodePosJs = require("../hooks/useNodePos.js");
21
- const _reactJs = require("../plugins/react.js");
22
- const _phrasingContentTagsJs = require("./phrasingContentTags.js");
23
- function _getRequireWildcardCache(nodeInterop) {
24
- if (typeof WeakMap !== "function") return null;
25
- var cacheBabelInterop = new WeakMap();
26
- var cacheNodeInterop = new WeakMap();
27
- return (_getRequireWildcardCache = function(nodeInterop) {
28
- return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
29
- })(nodeInterop);
30
- }
31
- function _interopRequireWildcard(obj, nodeInterop) {
32
- if (!nodeInterop && obj && obj.__esModule) {
33
- return obj;
34
- }
35
- if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
36
- return {
37
- default: obj
38
- };
39
- }
40
- var cache = _getRequireWildcardCache(nodeInterop);
41
- if (cache && cache.has(obj)) {
42
- return cache.get(obj);
43
- }
44
- var newObj = {};
45
- var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
46
- for(var key in obj){
47
- if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
48
- var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
49
- if (desc && (desc.get || desc.set)) {
50
- Object.defineProperty(newObj, key, desc);
51
- } else {
52
- newObj[key] = obj[key];
53
- }
54
- }
55
- }
56
- newObj.default = obj;
57
- if (cache) {
58
- cache.set(obj, newObj);
59
- }
60
- return newObj;
61
- }
62
- const REACT_NODE_VIEW = Symbol("react node view");
63
- let didWarnReactPlugin = false;
64
- function findNodeKeyUp(editorView, pos) {
65
- const pluginState = _reactJs.reactPluginKey.getState(editorView.state);
66
- if (!pluginState) return _reactJs.ROOT_NODE_KEY;
67
- const $pos = editorView.state.doc.resolve(pos);
68
- for(let d = $pos.depth; d > 0; d--){
69
- const ancestorNodeTypeName = $pos.node(d).type.name;
70
- const ancestorNodeView = editorView.props.nodeViews?.[ancestorNodeTypeName];
71
- if (!ancestorNodeView?.[REACT_NODE_VIEW]) continue;
72
- const ancestorPos = $pos.before(d);
73
- const ancestorKey = pluginState.posToKey.get(ancestorPos);
74
- if (ancestorKey) return ancestorKey;
75
- }
76
- return _reactJs.ROOT_NODE_KEY;
77
- }
78
- function createReactNodeViewConstructor(nodeViewConstructor, registerPortal) {
79
- function nodeViewConstructorWrapper(node, editorView, getPos, decorations, innerDecorations) {
80
- const nodeView = nodeViewConstructor(node, editorView, getPos, decorations, innerDecorations);
81
- const { component: NodeView } = nodeView;
82
- if (!NodeView) {
83
- return nodeView;
84
- }
85
- const reactPluginState = _reactJs.reactPluginKey.getState(editorView.state);
86
- if (!reactPluginState) {
87
- if (!didWarnReactPlugin) {
88
- console.error("The React ProseMirror plugin is required to use React node views. " + "Make sure to add it to the ProseMirror editor state.");
89
- didWarnReactPlugin = true;
90
- }
91
- return nodeView;
92
- }
93
- const { dom , contentDOM } = nodeView;
94
- // Use a span if the provided contentDOM is in the "phrasing" content
95
- // category. Otherwise use a div. This is our best attempt at not
96
- // breaking the intended content model, for now.
97
- //
98
- // https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content
99
- const ContentDOMWrapper = contentDOM && (_phrasingContentTagsJs.phrasingContentTags.includes(contentDOM.tagName.toLocaleLowerCase()) ? "span" : "div");
100
- const nodeKey = reactPluginState.posToKey.get(getPos()) ?? (0, _reactJs.createNodeKey)();
101
- /**
102
- * Wrapper component to provide some imperative handles for updating
103
- * and re-rendering its child. Takes and renders an arbitrary ElementType
104
- * that expects NodeViewComponentProps as props.
105
- */ const NodeViewWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function NodeViewWrapper(param, ref) {
106
- let { initialState } = param;
107
- const [node, setNode] = (0, _react.useState)(initialState.node);
108
- const [decorations, setDecorations] = (0, _react.useState)(initialState.decorations);
109
- const [isSelected, setIsSelected] = (0, _react.useState)(initialState.isSelected);
110
- const nodeViews = (0, _react.useContext)(_nodeViewsContextJs.NodeViewsContext);
111
- const childNodeViews = nodeViews[nodeKey];
112
- const [childNodeViewPortals, setChildNodeViewPortals] = (0, _react.useState)(childNodeViews?.map((param)=>{
113
- let { portal } = param;
114
- return portal;
115
- }));
116
- // `getPos` is technically derived from the EditorView
117
- // state, so it's not safe to call until after the EditorView
118
- // has been updated
119
- (0, _useEditorEffectJs.useEditorEffect)(()=>{
120
- setChildNodeViewPortals(childNodeViews?.sort((a, b)=>a.getPos() - b.getPos()).map((param)=>{
121
- let { portal } = param;
122
- return portal;
123
- }));
124
- }, [
125
- childNodeViews
126
- ]);
127
- const [contentDOMWrapper, setContentDOMWrapper] = (0, _react.useState)(null);
128
- const [contentDOMParent, setContentDOMParent] = (0, _react.useState)(null);
129
- (0, _react.useImperativeHandle)(ref, ()=>({
130
- node,
131
- contentDOMWrapper: contentDOMWrapper,
132
- contentDOMParent: contentDOMParent,
133
- setNode,
134
- setDecorations,
135
- setIsSelected
136
- }), [
137
- node,
138
- contentDOMWrapper,
139
- contentDOMParent
140
- ]);
141
- return /*#__PURE__*/ _react.default.createElement(_useNodePosJs.NodePosProvider, {
142
- nodeKey: nodeKey
143
- }, /*#__PURE__*/ _react.default.createElement(NodeView, {
144
- node: node,
145
- decorations: decorations,
146
- isSelected: isSelected
147
- }, childNodeViewPortals, ContentDOMWrapper && /*#__PURE__*/ _react.default.createElement(ContentDOMWrapper, {
148
- style: {
149
- display: "contents"
150
- },
151
- ref: (nextContentDOMWrapper)=>{
152
- setContentDOMWrapper(nextContentDOMWrapper);
153
- // we preserve a reference to the contentDOMWrapper'
154
- // parent so that later we can reassemble the DOM hierarchy
155
- // React expects when cleaning up the ContentDOMWrapper element
156
- if (nextContentDOMWrapper?.parentNode) {
157
- setContentDOMParent(nextContentDOMWrapper.parentNode);
158
- }
159
- }
160
- })));
161
- });
162
- NodeViewWrapper.displayName = `NodeView(${NodeView.displayName ?? NodeView.name})`;
163
- let componentRef = null;
164
- const element = /*#__PURE__*/ _react.default.createElement(NodeViewWrapper, {
165
- initialState: {
166
- node,
167
- decorations,
168
- isSelected: false
169
- },
170
- ref: (c)=>{
171
- componentRef = c;
172
- if (!componentRef || componentRef.node.isLeaf) return;
173
- const contentDOMWrapper = componentRef.contentDOMWrapper;
174
- if (!contentDOMWrapper || !(contentDOMWrapper instanceof HTMLElement)) {
175
- return;
176
- }
177
- // We always set contentDOM when !node.isLeaf, which is checked above
178
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
179
- contentDOMWrapper.appendChild(contentDOM);
180
- // Synchronize the ProseMirror selection to the DOM, because mounting the
181
- // component changes the DOM outside of a ProseMirror update.
182
- const { node } = componentRef;
183
- const pos = getPos();
184
- const end = pos + node.nodeSize;
185
- const { from , to } = editorView.state.selection;
186
- if (editorView.hasFocus() && pos < from && to < end) {
187
- // This call seems like it should be a no-op, given the editor already has
188
- // focus, but it causes ProseMirror to synchronize the DOM selection with
189
- // its state again, placing the DOM selection in a reasonable place within
190
- // the node.
191
- editorView.focus();
192
- }
193
- }
194
- });
195
- const portal = /*#__PURE__*/ (0, _reactDom.createPortal)(element, dom, nodeKey);
196
- const unregisterPortal = registerPortal(editorView, getPos, portal);
197
- return {
198
- ignoreMutation (record) {
199
- return !contentDOM?.contains(record.target);
200
- },
201
- ...nodeView,
202
- selectNode () {
203
- componentRef?.setIsSelected(true);
204
- nodeView.selectNode?.();
205
- },
206
- deselectNode () {
207
- componentRef?.setIsSelected(false);
208
- nodeView.deselectNode?.();
209
- },
210
- update (node, decorations, innerDecorations) {
211
- // If this node view's parent has been removed from the registry, we
212
- // need to rebuild it and its children with new registry keys
213
- const positionRegistry = _reactJs.reactPluginKey.getState(editorView.state);
214
- if (positionRegistry && nodeKey !== positionRegistry.posToKey.get(getPos())) {
215
- return false;
216
- }
217
- if (nodeView.update?.(node, decorations, innerDecorations) === false) {
218
- return false;
219
- }
220
- if (node.type === componentRef?.node.type) {
221
- componentRef?.setNode(node);
222
- componentRef?.setDecorations(decorations);
223
- return true;
224
- }
225
- return false;
226
- },
227
- destroy () {
228
- // React expects the contentDOMParent to be a child of the
229
- // DOM element where the portal was mounted, but in some situations
230
- // contenteditable may have already detached the contentDOMParent
231
- // from the DOM. Here we attempt to reassemble the DOM that React
232
- // expects when cleaning up the portal.
233
- if (componentRef?.contentDOMParent) {
234
- this.dom.appendChild(componentRef.contentDOMParent);
235
- }
236
- unregisterPortal();
237
- nodeView.destroy?.();
238
- }
239
- };
240
- }
241
- return Object.assign(nodeViewConstructorWrapper, {
242
- [REACT_NODE_VIEW]: true
243
- });
244
- }
@@ -1,57 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "phrasingContentTags", {
6
- enumerable: true,
7
- get: ()=>phrasingContentTags
8
- });
9
- const phrasingContentTags = [
10
- "abbr",
11
- "audio",
12
- "b",
13
- "bdo",
14
- "br",
15
- "button",
16
- "canvas",
17
- "cite",
18
- "code",
19
- "data",
20
- "datalist",
21
- "dfn",
22
- "em",
23
- "embed",
24
- "i",
25
- "iframe",
26
- "img",
27
- "input",
28
- "kbd",
29
- "keygen",
30
- "label",
31
- "mark",
32
- "math",
33
- "meter",
34
- "noscript",
35
- "object",
36
- "output",
37
- "picture",
38
- "progress",
39
- "q",
40
- "ruby",
41
- "s",
42
- "samp",
43
- "script",
44
- "select",
45
- "small",
46
- "span",
47
- "strong",
48
- "sub",
49
- "sup",
50
- "svg",
51
- "textarea",
52
- "time",
53
- "u",
54
- "var",
55
- "video",
56
- "wbr"
57
- ];
@@ -1,139 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-non-null-assertion */ "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- const _prosemirrorModel = require("prosemirror-model");
6
- const _prosemirrorState = require("prosemirror-state");
7
- const _prosemirrorTransform = require("prosemirror-transform");
8
- const _reactJs = require("../react.js");
9
- const schema = new _prosemirrorModel.Schema({
10
- nodes: {
11
- doc: {
12
- content: "block+"
13
- },
14
- paragraph: {
15
- group: "block",
16
- content: "inline*"
17
- },
18
- list: {
19
- group: "block",
20
- content: "list_item+"
21
- },
22
- list_item: {
23
- content: "paragraph+"
24
- },
25
- text: {
26
- group: "inline"
27
- }
28
- }
29
- });
30
- describe("reactNodeViewPlugin", ()=>{
31
- it("should create a unique key for each node", ()=>{
32
- const editorState = _prosemirrorState.EditorState.create({
33
- doc: schema.topNodeType.create(null, [
34
- schema.nodes.paragraph.create(),
35
- schema.nodes.paragraph.create(),
36
- schema.nodes.paragraph.create()
37
- ]),
38
- plugins: [
39
- (0, _reactJs.react)()
40
- ]
41
- });
42
- const pluginState = _reactJs.reactPluginKey.getState(editorState);
43
- expect(pluginState.posToKey.size).toBe(3);
44
- });
45
- it("should maintain key stability when possible", ()=>{
46
- const initialEditorState = _prosemirrorState.EditorState.create({
47
- doc: schema.topNodeType.create(null, [
48
- schema.nodes.paragraph.create(),
49
- schema.nodes.paragraph.create(),
50
- schema.nodes.paragraph.create()
51
- ]),
52
- plugins: [
53
- (0, _reactJs.react)()
54
- ]
55
- });
56
- const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
57
- const nextEditorState = initialEditorState.apply(initialEditorState.tr.insertText("Hello, world!", 1));
58
- const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
59
- expect(Array.from(nextPluginState.keyToPos.keys())).toEqual(Array.from(initialPluginState.keyToPos.keys()));
60
- });
61
- it("should create unique keys for new nodes", ()=>{
62
- const initialEditorState = _prosemirrorState.EditorState.create({
63
- doc: schema.topNodeType.create(null, [
64
- schema.nodes.paragraph.create(),
65
- schema.nodes.paragraph.create(),
66
- schema.nodes.paragraph.create()
67
- ]),
68
- plugins: [
69
- (0, _reactJs.react)()
70
- ]
71
- });
72
- const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
73
- const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(0, schema.nodes.list.createAndFill()));
74
- const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
75
- // Adds new keys for new nodes
76
- expect(nextPluginState.keyToPos.size).toBe(6);
77
- // Maintains keys for previous nodes that are still there
78
- Array.from(initialPluginState.keyToPos.keys()).forEach((key)=>{
79
- expect(Array.from(nextPluginState.keyToPos.keys())).toContain(key);
80
- });
81
- });
82
- it("should maintain key stability when splitting a node", ()=>{
83
- const initialEditorState = _prosemirrorState.EditorState.create({
84
- doc: schema.topNodeType.create(null, [
85
- schema.nodes.list.create(null, [
86
- schema.nodes.list_item.create(null, [
87
- schema.nodes.paragraph.create(null, [
88
- schema.text("first")
89
- ])
90
- ])
91
- ])
92
- ]),
93
- plugins: [
94
- (0, _reactJs.react)()
95
- ]
96
- });
97
- const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
98
- const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(1, schema.nodes.list_item.create(null, [
99
- schema.nodes.paragraph.create(null, [
100
- schema.text("second")
101
- ])
102
- ])));
103
- const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
104
- // The new list item was inserted before the original one,
105
- // pushing it further into the document. The original list
106
- // item should keep its original key, and the new list item
107
- // should be assigned a new one
108
- expect(nextPluginState.posToKey.get(11)).toBe(initialPluginState.posToKey.get(1));
109
- expect(nextPluginState.posToKey.get(1)).not.toBe(initialPluginState.posToKey.get(1));
110
- });
111
- it("should maintain key stability when wrapping a node", ()=>{
112
- const initialEditorState = _prosemirrorState.EditorState.create({
113
- doc: schema.topNodeType.create(null, [
114
- schema.nodes.paragraph.create(null, [
115
- schema.text("content")
116
- ])
117
- ]),
118
- plugins: [
119
- (0, _reactJs.react)()
120
- ]
121
- });
122
- const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
123
- const start = 1;
124
- const end = 9;
125
- const tr = initialEditorState.tr.delete(start, end);
126
- const $start = tr.doc.resolve(start);
127
- const range = $start.blockRange();
128
- const wrapping = range && (0, _prosemirrorTransform.findWrapping)(range, schema.nodes.list, null);
129
- tr.wrap(range, wrapping);
130
- const nextEditorState = initialEditorState.apply(tr);
131
- const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
132
- // The new list and list item nodes were wrapped around the
133
- // paragraph, pushing it further into the document. The paragraph
134
- // should keep its original key, and the new nodes
135
- // should be assigned a new one
136
- expect(nextPluginState.posToKey.get(2)).toBe(initialPluginState.posToKey.get(0));
137
- expect(nextPluginState.posToKey.get(0)).not.toBe(initialPluginState.posToKey.get(0));
138
- });
139
- });
@@ -1,71 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- ROOT_NODE_KEY: ()=>ROOT_NODE_KEY,
13
- createNodeKey: ()=>createNodeKey,
14
- reactPluginKey: ()=>reactPluginKey,
15
- react: ()=>react
16
- });
17
- const _prosemirrorState = require("prosemirror-state");
18
- const ROOT_NODE_KEY = Symbol("@nytimes/react-prosemirror/root-node-key");
19
- function createNodeKey() {
20
- return Math.floor(Math.random() * 0xffffff).toString(16);
21
- }
22
- const reactPluginKey = new _prosemirrorState.PluginKey("@nytimes/react-prosemirror/react");
23
- function react() {
24
- return new _prosemirrorState.Plugin({
25
- key: reactPluginKey,
26
- state: {
27
- init (_, state) {
28
- const next = {
29
- posToKey: new Map(),
30
- keyToPos: new Map()
31
- };
32
- state.doc.descendants((node, pos)=>{
33
- if (node.isText) return false;
34
- const key = createNodeKey();
35
- next.posToKey.set(pos, key);
36
- next.keyToPos.set(key, pos);
37
- return true;
38
- });
39
- return next;
40
- },
41
- /**
42
- * Keeps node keys (mostly) stable across transactions.
43
- *
44
- * To accomplish this, we map each node position backwards
45
- * through the transaction to identify its previous position,
46
- * and thereby retrieve its previous key.
47
- */ apply (tr, value, _, newState) {
48
- if (!tr.docChanged) return value;
49
- const next = {
50
- posToKey: new Map(),
51
- keyToPos: new Map()
52
- };
53
- for (const [pos, key] of value.posToKey.entries()){
54
- const { pos: newPos , deleted } = tr.mapping.mapResult(pos);
55
- if (deleted) continue;
56
- next.posToKey.set(newPos, key);
57
- next.keyToPos.set(key, newPos);
58
- }
59
- newState.doc.descendants((node, pos)=>{
60
- if (node.isText) return false;
61
- if (next.posToKey.has(pos)) return true;
62
- const key = createNodeKey();
63
- next.posToKey.set(pos, key);
64
- next.keyToPos.set(key, pos);
65
- return true;
66
- });
67
- return next;
68
- }
69
- }
70
- });
71
- }
@@ -1,171 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "SelectionDOMObserver", {
6
- enumerable: true,
7
- get: function() {
8
- return SelectionDOMObserver;
9
- }
10
- });
11
- const _prosemirrorstate = require("prosemirror-state");
12
- const _browser = require("../browser.js");
13
- const _dom = require("../dom.js");
14
- const _hasFocusAndSelection = require("./hasFocusAndSelection.js");
15
- const _selectionFromDOM = require("./selectionFromDOM.js");
16
- const _selectionToDOM = require("./selectionToDOM.js");
17
- let SelectionState = class SelectionState {
18
- anchorNode = null;
19
- anchorOffset = 0;
20
- focusNode = null;
21
- focusOffset = 0;
22
- set(sel) {
23
- this.anchorNode = sel.anchorNode;
24
- this.anchorOffset = sel.anchorOffset;
25
- this.focusNode = sel.focusNode;
26
- this.focusOffset = sel.focusOffset;
27
- }
28
- clear() {
29
- this.anchorNode = this.focusNode = null;
30
- }
31
- eq(sel) {
32
- return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset && sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset;
33
- }
34
- };
35
- let SelectionDOMObserver = class SelectionDOMObserver {
36
- view;
37
- flushingSoon;
38
- currentSelection;
39
- suppressingSelectionUpdates;
40
- constructor(view){
41
- this.view = view;
42
- this.flushingSoon = -1;
43
- this.currentSelection = new SelectionState();
44
- this.suppressingSelectionUpdates = false;
45
- this.view = view;
46
- this.onSelectionChange = this.onSelectionChange.bind(this);
47
- }
48
- connectSelection() {
49
- this.view.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
50
- }
51
- disconnectSelection() {
52
- this.view.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
53
- }
54
- stop() {
55
- this.disconnectSelection();
56
- }
57
- start() {
58
- this.connectSelection();
59
- }
60
- suppressSelectionUpdates() {
61
- this.suppressingSelectionUpdates = true;
62
- setTimeout(()=>this.suppressingSelectionUpdates = false, 50);
63
- }
64
- setCurSelection() {
65
- // @ts-expect-error Internal method
66
- this.currentSelection.set(this.view.domSelectionRange());
67
- }
68
- ignoreSelectionChange(sel) {
69
- if (!sel.focusNode) return true;
70
- const ancestors = new Set();
71
- let container;
72
- for(let scan = sel.focusNode; scan; scan = (0, _dom.parentNode)(scan))ancestors.add(scan);
73
- for(let scan = sel.anchorNode; scan; scan = (0, _dom.parentNode)(scan))if (ancestors.has(scan)) {
74
- container = scan;
75
- break;
76
- }
77
- // @ts-expect-error Internal property (docView)
78
- const desc = container && this.view.docView.nearestDesc(container);
79
- if (desc && desc.ignoreMutation({
80
- type: "selection",
81
- target: container?.nodeType == 3 ? container?.parentNode : container
82
- })) {
83
- this.setCurSelection();
84
- return true;
85
- }
86
- return;
87
- }
88
- registerMutation() {
89
- // pass
90
- }
91
- flushSoon() {
92
- if (this.flushingSoon < 0) this.flushingSoon = window.setTimeout(()=>{
93
- this.flushingSoon = -1;
94
- this.flush();
95
- }, 20);
96
- }
97
- updateSelection() {
98
- const { view } = this;
99
- const compositionID = // @ts-expect-error Internal property (input)
100
- view.input.compositionPendingChanges || // @ts-expect-error Internal property (input)
101
- (view.composing ? view.input.compositionID : 0);
102
- // @ts-expect-error Internal property (input)
103
- view.input.compositionPendingChanges = 0;
104
- const origin = // @ts-expect-error Internal property (input)
105
- view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null;
106
- const newSel = (0, _selectionFromDOM.selectionFromDOM)(view, origin);
107
- if (newSel && !view.state.selection.eq(newSel)) {
108
- const tr = view.state.tr.setSelection(newSel);
109
- if (origin == "pointer") tr.setMeta("pointer", true);
110
- else if (origin == "key") tr.scrollIntoView();
111
- if (compositionID) tr.setMeta("composition", compositionID);
112
- view.dispatch(tr);
113
- }
114
- }
115
- selectionToDOM() {
116
- const { view } = this;
117
- (0, _selectionToDOM.selectionToDOM)(view);
118
- // @ts-expect-error Internal property (domSelectionRange)
119
- const sel = view.domSelectionRange();
120
- this.currentSelection.set(sel);
121
- }
122
- flush() {
123
- const { view } = this;
124
- // @ts-expect-error Internal property (docView)
125
- if (!view.docView || this.flushingSoon > -1) return;
126
- // @ts-expect-error Internal property (domSelectionRange)
127
- const sel = view.domSelectionRange();
128
- const newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && (0, _hasFocusAndSelection.hasFocusAndSelection)(view) && !this.ignoreSelectionChange(sel);
129
- let readSel = null;
130
- // If it looks like the browser has reset the selection to the
131
- // start of the document after focus, restore the selection from
132
- // the state
133
- if (newSel && // @ts-expect-error Internal property (input)
134
- view.input.lastFocus > Date.now() - 200 && // @ts-expect-error Internal property (input)
135
- Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 && (0, _dom.selectionCollapsed)(sel) && (readSel = (0, _selectionFromDOM.selectionFromDOM)(view)) && readSel.eq(_prosemirrorstate.Selection.near(view.state.doc.resolve(0), 1))) {
136
- // @ts-expect-error Internal property (input)
137
- view.input.lastFocus = 0;
138
- (0, _selectionToDOM.selectionToDOM)(view);
139
- this.currentSelection.set(sel);
140
- // @ts-expect-error Internal property (scrollToSelection)
141
- view.scrollToSelection();
142
- } else if (newSel) {
143
- this.updateSelection();
144
- if (!this.currentSelection.eq(sel)) (0, _selectionToDOM.selectionToDOM)(view);
145
- this.currentSelection.set(sel);
146
- }
147
- }
148
- forceFlush() {
149
- if (this.flushingSoon > -1) {
150
- window.clearTimeout(this.flushingSoon);
151
- this.flushingSoon = -1;
152
- this.flush();
153
- }
154
- }
155
- onSelectionChange() {
156
- if (!(0, _hasFocusAndSelection.hasFocusAndSelection)(this.view)) return;
157
- if (this.view.composing) return;
158
- if (this.suppressingSelectionUpdates) return (0, _selectionToDOM.selectionToDOM)(this.view);
159
- // Deletions on IE11 fire their events in the wrong order, giving
160
- // us a selection change event before the DOM changes are
161
- // reported.
162
- if (_browser.browser.ie && _browser.browser.ie_version <= 11 && !this.view.state.selection.empty) {
163
- // @ts-expect-error Internal method
164
- const sel = this.view.domSelectionRange();
165
- // Selection.isCollapsed isn't reliable on IE
166
- if (sel.focusNode && (0, _selectionToDOM.isEquivalentPosition)(sel.focusNode, sel.focusOffset, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
167
- sel.anchorNode, sel.anchorOffset)) return this.flushSoon();
168
- }
169
- this.flush();
170
- }
171
- };