@handlewithcare/react-prosemirror 2.5.0 → 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 (52) hide show
  1. package/dist/cjs/ReactEditorView.js +6 -6
  2. package/dist/cjs/components/ChildNodeViews.js +6 -6
  3. package/dist/cjs/components/CustomNodeView.js +77 -121
  4. package/dist/cjs/components/DefaultNodeView.js +67 -0
  5. package/dist/cjs/components/DocNodeView.js +33 -32
  6. package/dist/cjs/components/NodeView.js +31 -21
  7. package/dist/cjs/components/ProseMirror.js +20 -9
  8. package/dist/cjs/components/ProseMirrorDoc.js +7 -27
  9. package/dist/cjs/components/ReactNodeView.js +96 -58
  10. package/dist/cjs/hooks/useEditor.js +1 -1
  11. package/dist/cjs/hooks/useIgnoreMutation.js +1 -1
  12. package/dist/cjs/hooks/useNodeViewDescriptor.js +121 -78
  13. package/dist/cjs/hooks/useSelectNode.js +9 -7
  14. package/dist/cjs/hooks/useStopEvent.js +1 -1
  15. package/dist/cjs/plugins/beforeInputPlugin.js +12 -0
  16. package/dist/cjs/viewdesc.js +95 -17
  17. package/dist/esm/ReactEditorView.js +6 -6
  18. package/dist/esm/components/ChildNodeViews.js +6 -6
  19. package/dist/esm/components/CustomNodeView.js +78 -122
  20. package/dist/esm/components/DefaultNodeView.js +16 -0
  21. package/dist/esm/components/DocNodeView.js +33 -32
  22. package/dist/esm/components/NodeView.js +32 -22
  23. package/dist/esm/components/ProseMirror.js +20 -9
  24. package/dist/esm/components/ProseMirrorDoc.js +7 -28
  25. package/dist/esm/components/ReactNodeView.js +97 -59
  26. package/dist/esm/hooks/useEditor.js +1 -1
  27. package/dist/esm/hooks/useIgnoreMutation.js +1 -1
  28. package/dist/esm/hooks/useNodeViewDescriptor.js +123 -80
  29. package/dist/esm/hooks/useSelectNode.js +9 -7
  30. package/dist/esm/hooks/useStopEvent.js +1 -1
  31. package/dist/esm/plugins/beforeInputPlugin.js +12 -0
  32. package/dist/esm/viewdesc.js +92 -17
  33. package/dist/tsconfig.tsbuildinfo +1 -1
  34. package/dist/types/ReactEditorView.d.ts +3 -2
  35. package/dist/types/components/CustomNodeView.d.ts +1 -1
  36. package/dist/types/components/DefaultNodeView.d.ts +3 -0
  37. package/dist/types/components/DocNodeView.d.ts +8 -13
  38. package/dist/types/components/NodeView.d.ts +4 -4
  39. package/dist/types/components/NodeViewComponentProps.d.ts +3 -4
  40. package/dist/types/components/ProseMirrorDoc.d.ts +14 -8
  41. package/dist/types/components/ReactNodeView.d.ts +3 -1
  42. package/dist/types/contexts/IgnoreMutationContext.d.ts +2 -1
  43. package/dist/types/contexts/NodeViewContext.d.ts +3 -1
  44. package/dist/types/contexts/SelectNodeContext.d.ts +3 -1
  45. package/dist/types/contexts/StopEventContext.d.ts +2 -1
  46. package/dist/types/hooks/useNodeViewDescriptor.d.ts +18 -10
  47. package/dist/types/hooks/useSelectNode.d.ts +2 -1
  48. package/dist/types/viewdesc.d.ts +25 -8
  49. package/package.json +3 -3
  50. package/dist/cjs/hooks/useClientOnly.js +0 -19
  51. package/dist/esm/hooks/useClientOnly.js +0 -9
  52. package/dist/types/hooks/useClientOnly.d.ts +0 -1
@@ -33,9 +33,6 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
33
33
  nextProps;
34
34
  prevState;
35
35
  constructor(place, props){
36
- // By the time the editor view mounts this should exist.
37
- // We assume it is not possible to set the mount point otherwise.
38
- const docView = place.mount.pmViewDesc;
39
36
  // Prevent the base class from destroying the React-managed nodes.
40
37
  // Restore them below after invoking the base class constructor.
41
38
  const reactContent = [
@@ -71,8 +68,11 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
71
68
  this.nextProps = props;
72
69
  this.state = props.state;
73
70
  this.nodeViews = buildNodeViews(this);
74
- this.docView = docView;
75
- this.dom.pmViewDesc = docView;
71
+ // Destroy the document view description that the base class makes.
72
+ // A React document view will assign itself to this attribute later.
73
+ this.docView.destroy();
74
+ // @ts-expect-error this violates the typing but class does it, too.
75
+ this.docView = null;
76
76
  }
77
77
  get props() {
78
78
  return this.nextProps;
@@ -87,7 +87,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
87
87
  const prevProps = this.nextProps;
88
88
  this.nextProps = props;
89
89
  this.state = props.state;
90
- if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins) {
90
+ if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins || prevProps.nodeViews !== props.nodeViews) {
91
91
  const nodeViews = buildNodeViews(this);
92
92
  if (changedNodeViews(this.nodeViews, nodeViews)) {
93
93
  this.nodeViews = nodeViews;
@@ -392,18 +392,18 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
392
392
  /\n$/.test(lastChild.node.text)) {
393
393
  children.push({
394
394
  type: "hack",
395
- component: _TrailingHackView.TrailingHackView,
395
+ component: _SeparatorHackView.SeparatorHackView,
396
396
  marks: [],
397
397
  offset: lastChild?.offset ?? 0,
398
- index: (lastChild?.index ?? 0) + 1,
399
- key: "trailing-hack-br"
398
+ index: (lastChild?.index ?? 0) + 2,
399
+ key: "trailing-hack-img"
400
400
  }, {
401
401
  type: "hack",
402
- component: _SeparatorHackView.SeparatorHackView,
402
+ component: _TrailingHackView.TrailingHackView,
403
403
  marks: [],
404
404
  offset: lastChild?.offset ?? 0,
405
- index: (lastChild?.index ?? 0) + 2,
406
- key: "trailing-hack-img"
405
+ index: (lastChild?.index ?? 0) + 1,
406
+ key: "trailing-hack-br"
407
407
  });
408
408
  }
409
409
  }
@@ -8,13 +8,10 @@ Object.defineProperty(exports, "CustomNodeView", {
8
8
  return CustomNodeView;
9
9
  }
10
10
  });
11
+ const _prosemirrormodel = require("prosemirror-model");
11
12
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
13
  const _reactdom = require("react-dom");
13
14
  const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
14
- const _EditorContext = require("../contexts/EditorContext.js");
15
- const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
16
- const _useClientOnly = require("../hooks/useClientOnly.js");
17
- const _useForceUpdate = require("../hooks/useForceUpdate.js");
18
15
  const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
19
16
  const _ChildNodeViews = require("./ChildNodeViews.js");
20
17
  function _getRequireWildcardCache(nodeInterop) {
@@ -59,130 +56,89 @@ function _interop_require_wildcard(obj, nodeInterop) {
59
56
  return newObj;
60
57
  }
61
58
  const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(param) {
62
- let { customNodeView, node, getPos, innerDeco, outerDeco } = param;
63
- const editor = (0, _react.useContext)(_EditorContext.EditorContext);
64
- // Only ReactEditorView supports custom node views.
65
- const view = editor.view;
66
- const domRef = (0, _react.useRef)(null);
67
- const nodeDomRef = (0, _react.useRef)(null);
68
- const contentDomRef = (0, _react.useRef)(null);
69
- const nodeRef = (0, _react.useRef)(node);
70
- nodeRef.current = node;
71
- const outerDecoRef = (0, _react.useRef)(outerDeco);
72
- outerDecoRef.current = outerDeco;
73
- const innerDecoRef = (0, _react.useRef)(innerDeco);
74
- innerDecoRef.current = innerDeco;
75
- const customNodeViewRootRef = (0, _react.useRef)(null);
76
- const customNodeViewRef = (0, _react.useRef)(null);
77
- const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
78
- const isOnClient = (0, _useClientOnly.useClientOnly)();
79
- // In Strict/Concurrent mode, layout effects can be destroyed/re-run
80
- // independently of renders. We need to ensure that if the
81
- // destructor that destroys the node view is called, we then recreate
82
- // the node view when the layout effect is re-run.
83
- (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
84
- if (!customNodeViewRef.current) {
85
- customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
86
- if (customNodeViewRef.current.stopEvent) {
87
- setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
88
- }
89
- if (customNodeViewRef.current.selectNode) {
90
- setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
91
- }
92
- if (customNodeViewRef.current.ignoreMutation) {
93
- setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
94
- }
95
- // If we've reconstructed the nodeview, then we need to
96
- // recreate the portal into its contentDOM, which happens
97
- // during the render. So we need to trigger a re-render!
98
- forceUpdate();
99
- }
100
- if (!customNodeViewRootRef.current) return;
101
- const { dom } = customNodeViewRef.current;
102
- if (customNodeViewRootRef.current.firstChild === dom) {
103
- return;
104
- }
105
- nodeDomRef.current = customNodeViewRootRef.current;
106
- customNodeViewRootRef.current.appendChild(dom);
107
- const nodeView = customNodeViewRef.current;
108
- return ()=>{
109
- nodeView.destroy?.();
110
- customNodeViewRef.current = null;
111
- };
112
- // setStopEvent, setSelectNodee, and setIgnoreMutation are all stable
113
- // functions and don't need to be added to the dependencies. They also
114
- // can't be, because they come from useNodeViewDescriptor, which
115
- // _has_ to be called after this hook, so that the effects run
116
- // in the correct order
117
- // eslint-disable-next-line react-hooks/exhaustive-deps
118
- }, [
119
- customNodeView,
120
- getPos,
121
- view
122
- ]);
123
- (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
124
- if (!customNodeView || !customNodeViewRef.current) return;
125
- const { destroy, update } = customNodeViewRef.current;
126
- const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
127
- if (updated) return;
128
- destroy?.call(customNodeViewRef.current);
129
- if (!customNodeViewRootRef.current) return;
130
- customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
131
- const { dom } = customNodeViewRef.current;
132
- nodeDomRef.current = customNodeViewRootRef.current;
133
- customNodeViewRootRef.current.appendChild(dom);
134
- }, [
135
- customNodeView,
136
- view,
137
- innerDeco,
59
+ let { constructor, node, getPos, innerDeco, outerDeco } = param;
60
+ const ref = (0, _react.useRef)(null);
61
+ const innerRef = (0, _react.useRef)(null);
62
+ const [selected, setSelected] = (0, _react.useState)(false);
63
+ const nodeProps = (0, _react.useMemo)(()=>({
64
+ node,
65
+ getPos,
66
+ decorations: outerDeco,
67
+ innerDecorations: innerDeco
68
+ }), [
138
69
  node,
70
+ getPos,
139
71
  outerDeco,
140
- getPos
141
- ]);
142
- const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPos, domRef, nodeDomRef, innerDeco, outerDeco, contentDomRef);
143
- const childContextValue = (0, _react.useMemo)(()=>({
144
- parentRef: nodeViewDescRef,
145
- siblingsRef: childDescriptors
146
- }), [
147
- childDescriptors,
148
- nodeViewDescRef
72
+ innerDeco
149
73
  ]);
150
- if (!isOnClient) return null;
151
- // In order to render the correct element with the correct
152
- // props below, we have to call the customNodeView in the
153
- // render function here. We only do this once, and the
154
- // results are stored in a ref but not actually appended
155
- // to the DOM until a client effect
156
- if (!customNodeViewRef.current) {
157
- customNodeViewRef.current = customNodeView(nodeRef.current, view, getPos, outerDecoRef.current, innerDecoRef.current);
158
- if (customNodeViewRef.current.stopEvent) {
159
- setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
74
+ const createNodeView = function() {
75
+ for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
76
+ args[_key] = arguments[_key];
77
+ }
78
+ const nodeView = constructor(...args);
79
+ if (!nodeView || !nodeView.dom) {
80
+ const spec = node.type.spec.toDOM?.(node);
81
+ if (!spec) {
82
+ throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
83
+ }
84
+ return _prosemirrormodel.DOMSerializer.renderSpec(document, spec, null);
160
85
  }
161
- if (customNodeViewRef.current.selectNode) {
162
- setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
86
+ return nodeView;
87
+ };
88
+ const { childContextValue, contentDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, function() {
89
+ for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
90
+ args[_key] = arguments[_key];
163
91
  }
164
- if (customNodeViewRef.current.ignoreMutation) {
165
- setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
92
+ setSelected(false);
93
+ const nodeView = createNodeView(...args);
94
+ const contentDOM = nodeView.contentDOM;
95
+ const nodeDOM = nodeView.dom;
96
+ const wrapperDOM = innerRef.current ?? ref.current;
97
+ wrapperDOM.appendChild(nodeDOM);
98
+ if (!contentDOM && nodeDOM instanceof HTMLElement && nodeDOM.tagName !== "BR") {
99
+ if (!nodeDOM.hasAttribute("contenteditable")) {
100
+ nodeDOM.contentEditable = "false";
101
+ }
166
102
  }
167
- }
168
- const { contentDOM } = customNodeViewRef.current;
169
- contentDomRef.current = contentDOM ?? null;
170
- const element = /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
171
- ref: customNodeViewRootRef,
172
- contentEditable: !!contentDOM,
173
- suppressContentEditableWarning: true
174
- }, contentDOM && /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
103
+ return {
104
+ ...nodeView,
105
+ destroy () {
106
+ if (nodeView.destroy) {
107
+ nodeView.destroy();
108
+ }
109
+ wrapperDOM.removeChild(nodeDOM);
110
+ },
111
+ selectNode: nodeView.selectNode?.bind(nodeView) ?? (()=>{
112
+ if (nodeDOM instanceof HTMLElement) {
113
+ nodeDOM.classList.add("ProseMirror-selectednode");
114
+ }
115
+ setSelected(true);
116
+ }),
117
+ deselectNode: nodeView.deselectNode?.bind(nodeView) ?? (()=>{
118
+ if (nodeDOM instanceof HTMLElement) {
119
+ nodeDOM.classList.remove("ProseMirror-selectednode");
120
+ }
121
+ setSelected(false);
122
+ }),
123
+ stopEvent: nodeView.stopEvent?.bind(nodeView),
124
+ ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
125
+ };
126
+ }, nodeProps);
127
+ const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
128
+ value: childContextValue
129
+ }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
175
130
  getPos: getPos,
176
131
  node: node,
177
132
  innerDecorations: innerDeco
178
- }), contentDOM));
179
- const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
180
- outerDeco.some((d)=>d.type.attrs.nodeName) ? {
181
- ref: domRef
182
- } : // we've already passed the domRef to the NodeView component
183
- // as a prop
184
- undefined);
185
- return /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
186
- value: childContextValue
187
- }, decoratedElement);
133
+ })), contentDOM) : null;
134
+ const innerElement = /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
135
+ ref: innerRef
136
+ }, children);
137
+ const props = {
138
+ ...selected || node.type.spec.draggable ? {
139
+ draggable: true
140
+ } : null,
141
+ ref
142
+ };
143
+ return /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
188
144
  });
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "DefaultNodeView", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return DefaultNodeView;
9
+ }
10
+ });
11
+ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
+ const _OutputSpec = require("./OutputSpec.js");
13
+ function _getRequireWildcardCache(nodeInterop) {
14
+ if (typeof WeakMap !== "function") return null;
15
+ var cacheBabelInterop = new WeakMap();
16
+ var cacheNodeInterop = new WeakMap();
17
+ return (_getRequireWildcardCache = function(nodeInterop) {
18
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
19
+ })(nodeInterop);
20
+ }
21
+ function _interop_require_wildcard(obj, nodeInterop) {
22
+ if (!nodeInterop && obj && obj.__esModule) {
23
+ return obj;
24
+ }
25
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
26
+ return {
27
+ default: obj
28
+ };
29
+ }
30
+ var cache = _getRequireWildcardCache(nodeInterop);
31
+ if (cache && cache.has(obj)) {
32
+ return cache.get(obj);
33
+ }
34
+ var newObj = {
35
+ __proto__: null
36
+ };
37
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
38
+ for(var key in obj){
39
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
40
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
41
+ if (desc && (desc.get || desc.set)) {
42
+ Object.defineProperty(newObj, key, desc);
43
+ } else {
44
+ newObj[key] = obj[key];
45
+ }
46
+ }
47
+ }
48
+ newObj.default = obj;
49
+ if (cache) {
50
+ cache.set(obj, newObj);
51
+ }
52
+ return newObj;
53
+ }
54
+ const DefaultNodeView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultNodeView(param, ref) {
55
+ let { nodeProps: { node }, children, ...props } = param;
56
+ const spec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
57
+ node
58
+ ]);
59
+ if (!spec) {
60
+ throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
61
+ }
62
+ return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
63
+ ...props,
64
+ outputSpec: spec,
65
+ ref: ref
66
+ }, children);
67
+ });
@@ -1,6 +1,4 @@
1
- // TODO: I must be missing something, but I do not know why
2
- // this linting rule is only broken in this file
3
- /* eslint-disable react/prop-types */ "use strict";
1
+ "use strict";
4
2
  Object.defineProperty(exports, "__esModule", {
5
3
  value: true
6
4
  });
@@ -55,41 +53,44 @@ function _interop_require_wildcard(obj, nodeInterop) {
55
53
  }
56
54
  return newObj;
57
55
  }
58
- function getPos() {
59
- return -1;
60
- }
61
56
  const DocNodeView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forwardRef)(function DocNodeView(param, ref) {
62
- let { className, node, innerDeco, outerDeco, as, ...elementProps } = param;
57
+ let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
63
58
  const innerRef = (0, _react.useRef)(null);
64
- (0, _react.useImperativeHandle)(ref, ()=>{
65
- return innerRef.current;
66
- }, []);
67
- const { childDescriptors, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPos, innerRef, innerRef, innerDeco, outerDeco, innerRef);
68
- const childContextValue = (0, _react.useMemo)(()=>({
69
- parentRef: nodeViewDescRef,
70
- siblingsRef: childDescriptors
59
+ (0, _react.useImperativeHandle)(ref, ()=>innerRef.current);
60
+ (0, _react.useImperativeHandle)(setMount, ()=>innerRef.current);
61
+ const nodeProps = (0, _react.useMemo)(()=>({
62
+ node,
63
+ getPos,
64
+ decorations,
65
+ innerDecorations
71
66
  }), [
72
- childDescriptors,
73
- nodeViewDescRef
67
+ node,
68
+ getPos,
69
+ decorations,
70
+ innerDecorations
74
71
  ]);
75
- const props = {
76
- ...elementProps,
77
- ref: innerRef,
78
- className,
79
- suppressContentEditableWarning: true
80
- };
81
- const element = as ? /*#__PURE__*/ (0, _react.cloneElement)(as, props, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
82
- value: childContextValue
83
- }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
84
- getPos: getPos,
85
- node: node,
86
- innerDecorations: innerDeco
87
- }))) : /*#__PURE__*/ (0, _react.createElement)("div", props, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
72
+ const { childContextValue } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(innerRef, ()=>{
73
+ const dom = innerRef.current;
74
+ return {
75
+ dom,
76
+ contentDOM: dom,
77
+ update () {
78
+ return true;
79
+ }
80
+ };
81
+ }, nodeProps);
82
+ const children = /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
88
83
  value: childContextValue
89
84
  }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
90
85
  getPos: getPos,
91
86
  node: node,
92
- innerDecorations: innerDeco
93
- })));
94
- return outerDeco.reduce(_ChildNodeViews.wrapInDeco, element);
87
+ innerDecorations: innerDecorations
88
+ }));
89
+ const props = {
90
+ ...elementProps,
91
+ suppressContentEditableWarning: true,
92
+ ref: innerRef
93
+ };
94
+ const element = as ? /*#__PURE__*/ (0, _react.cloneElement)(as, props, children) : /*#__PURE__*/ (0, _react.createElement)("div", props, children);
95
+ return nodeProps.decorations.reduce(_ChildNodeViews.wrapInDeco, element);
95
96
  }));
@@ -9,8 +9,9 @@ Object.defineProperty(exports, "NodeView", {
9
9
  }
10
10
  });
11
11
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
12
- const _EditorContext = require("../contexts/EditorContext.js");
12
+ const _NodeViewContext = require("../contexts/NodeViewContext.js");
13
13
  const _CustomNodeView = require("./CustomNodeView.js");
14
+ const _DefaultNodeView = require("./DefaultNodeView.js");
14
15
  const _ReactNodeView = require("./ReactNodeView.js");
15
16
  function _getRequireWildcardCache(nodeInterop) {
16
17
  if (typeof WeakMap !== "function") return null;
@@ -53,24 +54,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
53
54
  }
54
55
  return newObj;
55
56
  }
56
- const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
57
- let { outerDeco, getPos, node, innerDeco, ...props } = param;
58
- const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
59
- const customNodeView = view.nodeViews[node.type.name];
60
- if (customNodeView) {
61
- return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
62
- customNodeView: customNodeView,
63
- node: node,
64
- innerDeco: innerDeco,
65
- outerDeco: outerDeco,
66
- getPos: getPos
67
- });
68
- }
69
- return /*#__PURE__*/ _react.default.createElement(_ReactNodeView.ReactNodeView, {
70
- node: node,
71
- innerDeco: innerDeco,
72
- outerDeco: outerDeco,
73
- getPos: getPos,
74
- ...props
75
- });
57
+ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
58
+ const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
59
+ const component = components[props.node.type.name] ?? _DefaultNodeView.DefaultNodeView;
60
+ const constructor = constructors[props.node.type.name];
61
+ // Construct a wrapper component so that the node view remounts when either
62
+ // its component or constructor changes. A React node view would remount if
63
+ // its underlying component changed without this wrapper, but a custom node
64
+ // view otherwise uses the same React components for all custom node views.
65
+ const Component = (0, _react.useMemo)(()=>{
66
+ if (constructor) {
67
+ return function NodeView(props) {
68
+ return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
69
+ constructor: constructor,
70
+ ...props
71
+ });
72
+ };
73
+ } else {
74
+ return function NodeView(props) {
75
+ return /*#__PURE__*/ _react.default.createElement(_ReactNodeView.ReactNodeView, {
76
+ component: component,
77
+ ...props
78
+ });
79
+ };
80
+ }
81
+ }, [
82
+ constructor,
83
+ component
84
+ ]);
85
+ return /*#__PURE__*/ _react.default.createElement(Component, props);
76
86
  });
@@ -58,6 +58,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
58
58
  }
59
59
  return newObj;
60
60
  }
61
+ function getPos() {
62
+ return -1;
63
+ }
61
64
  function ProseMirrorInner(param) {
62
65
  let { className, children, nodeViews, customNodeViews, ...props } = param;
63
66
  const [mount, setMount] = (0, _react.useState)(null);
@@ -65,25 +68,33 @@ function ProseMirrorInner(param) {
65
68
  ...props,
66
69
  nodeViews: customNodeViews
67
70
  });
68
- const nodeViewContextValue = (0, _react.useMemo)(()=>({
69
- nodeViews: nodeViews ?? {}
70
- }), [
71
+ const nodeViewConstructors = editor.view.nodeViews;
72
+ const nodeViewContextValue = (0, _react.useMemo)(()=>{
73
+ return {
74
+ components: {
75
+ ...nodeViews
76
+ },
77
+ constructors: nodeViewConstructors
78
+ };
79
+ }, [
80
+ nodeViewConstructors,
71
81
  nodeViews
72
82
  ]);
73
83
  const node = state.doc;
74
- const innerDeco = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
75
- const outerDeco = (0, _computeDocDeco.computeDocDeco)(editor.view);
84
+ const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
85
+ const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
76
86
  const docNodeViewContextValue = (0, _react.useMemo)(()=>({
77
87
  className,
78
88
  setMount,
79
89
  node,
80
- innerDeco,
81
- outerDeco
90
+ getPos,
91
+ decorations,
92
+ innerDecorations
82
93
  }), [
83
94
  className,
84
95
  node,
85
- innerDeco,
86
- outerDeco
96
+ decorations,
97
+ innerDecorations
87
98
  ]);
88
99
  return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
89
100
  value: editor
@@ -13,11 +13,10 @@ _export(exports, {
13
13
  return DocNodeViewContext;
14
14
  },
15
15
  ProseMirrorDoc: function() {
16
- return ForwardedProseMirrorDoc;
16
+ return ProseMirrorDoc;
17
17
  }
18
18
  });
19
19
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
20
- const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
21
20
  const _DocNodeView = require("./DocNodeView.js");
22
21
  function _getRequireWildcardCache(nodeInterop) {
23
22
  if (typeof WeakMap !== "function") return null;
@@ -61,32 +60,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
61
60
  return newObj;
62
61
  }
63
62
  const DocNodeViewContext = /*#__PURE__*/ (0, _react.createContext)(null);
64
- function ProseMirrorDoc(param, ref) {
63
+ const ProseMirrorDoc = /*#__PURE__*/ (0, _react.forwardRef)(function ProseMirrorDoc(param, ref) {
65
64
  let { as, ...props } = param;
66
- const childDescriptors = (0, _react.useRef)([]);
67
- const innerRef = (0, _react.useRef)(null);
68
- const { setMount, ...docProps } = (0, _react.useContext)(DocNodeViewContext);
69
- const viewDescRef = (0, _react.useRef)(undefined);
70
- (0, _react.useImperativeHandle)(ref, ()=>{
71
- return innerRef.current;
72
- }, []);
73
- const childContextValue = (0, _react.useMemo)(()=>({
74
- parentRef: viewDescRef,
75
- siblingsRef: childDescriptors
76
- }), [
77
- childDescriptors,
78
- viewDescRef
79
- ]);
80
- return /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
81
- value: childContextValue
82
- }, /*#__PURE__*/ _react.default.createElement(_DocNodeView.DocNodeView, {
83
- ref: (el)=>{
84
- innerRef.current = el;
85
- setMount(el);
86
- },
65
+ const docProps = (0, _react.useContext)(DocNodeViewContext);
66
+ return /*#__PURE__*/ _react.default.createElement(_DocNodeView.DocNodeView, {
67
+ ref: ref,
87
68
  ...props,
88
69
  ...docProps,
89
70
  as: as
90
- }));
91
- }
92
- const ForwardedProseMirrorDoc = /*#__PURE__*/ (0, _react.forwardRef)(ProseMirrorDoc);
71
+ });
72
+ });