@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.
- package/dist/cjs/ReactEditorView.js +6 -6
- package/dist/cjs/components/ChildNodeViews.js +6 -6
- package/dist/cjs/components/CustomNodeView.js +77 -121
- package/dist/cjs/components/DefaultNodeView.js +67 -0
- package/dist/cjs/components/DocNodeView.js +33 -32
- package/dist/cjs/components/NodeView.js +31 -21
- package/dist/cjs/components/ProseMirror.js +20 -9
- package/dist/cjs/components/ProseMirrorDoc.js +7 -27
- package/dist/cjs/components/ReactNodeView.js +96 -58
- package/dist/cjs/hooks/useEditor.js +1 -1
- package/dist/cjs/hooks/useIgnoreMutation.js +1 -1
- package/dist/cjs/hooks/useNodeViewDescriptor.js +121 -78
- package/dist/cjs/hooks/useSelectNode.js +9 -7
- package/dist/cjs/hooks/useStopEvent.js +1 -1
- package/dist/cjs/plugins/beforeInputPlugin.js +12 -0
- package/dist/cjs/viewdesc.js +95 -17
- package/dist/esm/ReactEditorView.js +6 -6
- package/dist/esm/components/ChildNodeViews.js +6 -6
- package/dist/esm/components/CustomNodeView.js +78 -122
- package/dist/esm/components/DefaultNodeView.js +16 -0
- package/dist/esm/components/DocNodeView.js +33 -32
- package/dist/esm/components/NodeView.js +32 -22
- package/dist/esm/components/ProseMirror.js +20 -9
- package/dist/esm/components/ProseMirrorDoc.js +7 -28
- package/dist/esm/components/ReactNodeView.js +97 -59
- package/dist/esm/hooks/useEditor.js +1 -1
- package/dist/esm/hooks/useIgnoreMutation.js +1 -1
- package/dist/esm/hooks/useNodeViewDescriptor.js +123 -80
- package/dist/esm/hooks/useSelectNode.js +9 -7
- package/dist/esm/hooks/useStopEvent.js +1 -1
- package/dist/esm/plugins/beforeInputPlugin.js +12 -0
- package/dist/esm/viewdesc.js +92 -17
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/ReactEditorView.d.ts +3 -2
- package/dist/types/components/CustomNodeView.d.ts +1 -1
- package/dist/types/components/DefaultNodeView.d.ts +3 -0
- package/dist/types/components/DocNodeView.d.ts +8 -13
- package/dist/types/components/NodeView.d.ts +4 -4
- package/dist/types/components/NodeViewComponentProps.d.ts +3 -4
- package/dist/types/components/ProseMirrorDoc.d.ts +14 -8
- package/dist/types/components/ReactNodeView.d.ts +3 -1
- package/dist/types/contexts/IgnoreMutationContext.d.ts +2 -1
- package/dist/types/contexts/NodeViewContext.d.ts +3 -1
- package/dist/types/contexts/SelectNodeContext.d.ts +3 -1
- package/dist/types/contexts/StopEventContext.d.ts +2 -1
- package/dist/types/hooks/useNodeViewDescriptor.d.ts +18 -10
- package/dist/types/hooks/useSelectNode.d.ts +2 -1
- package/dist/types/viewdesc.d.ts +25 -8
- package/package.json +3 -3
- package/dist/cjs/hooks/useClientOnly.js +0 -19
- package/dist/esm/hooks/useClientOnly.js +0 -9
- 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
|
-
|
|
75
|
-
this
|
|
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:
|
|
395
|
+
component: _SeparatorHackView.SeparatorHackView,
|
|
396
396
|
marks: [],
|
|
397
397
|
offset: lastChild?.offset ?? 0,
|
|
398
|
-
index: (lastChild?.index ?? 0) +
|
|
399
|
-
key: "trailing-hack-
|
|
398
|
+
index: (lastChild?.index ?? 0) + 2,
|
|
399
|
+
key: "trailing-hack-img"
|
|
400
400
|
}, {
|
|
401
401
|
type: "hack",
|
|
402
|
-
component:
|
|
402
|
+
component: _TrailingHackView.TrailingHackView,
|
|
403
403
|
marks: [],
|
|
404
404
|
offset: lastChild?.offset ?? 0,
|
|
405
|
-
index: (lastChild?.index ?? 0) +
|
|
406
|
-
key: "trailing-hack-
|
|
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 {
|
|
63
|
-
const
|
|
64
|
-
|
|
65
|
-
const
|
|
66
|
-
const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
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
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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
|
-
|
|
162
|
-
|
|
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
|
-
|
|
165
|
-
|
|
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
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
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
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}
|
|
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
|
-
|
|
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 {
|
|
57
|
+
let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
|
|
63
58
|
const innerRef = (0, _react.useRef)(null);
|
|
64
|
-
(0, _react.useImperativeHandle)(ref, ()=>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
73
|
-
|
|
67
|
+
node,
|
|
68
|
+
getPos,
|
|
69
|
+
decorations,
|
|
70
|
+
innerDecorations
|
|
74
71
|
]);
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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:
|
|
93
|
-
}))
|
|
94
|
-
|
|
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
|
|
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(
|
|
57
|
-
|
|
58
|
-
const
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
|
69
|
-
|
|
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
|
|
75
|
-
const
|
|
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
|
-
|
|
81
|
-
|
|
90
|
+
getPos,
|
|
91
|
+
decorations,
|
|
92
|
+
innerDecorations
|
|
82
93
|
}), [
|
|
83
94
|
className,
|
|
84
95
|
node,
|
|
85
|
-
|
|
86
|
-
|
|
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
|
|
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
|
|
67
|
-
|
|
68
|
-
|
|
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
|
+
});
|