@handlewithcare/react-prosemirror 2.4.12 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/AbstractEditorView.js +4 -0
- package/dist/cjs/ReactEditorView.js +156 -0
- package/dist/cjs/StaticEditorView.js +86 -0
- package/dist/cjs/components/ChildNodeViews.js +59 -30
- package/dist/cjs/components/CustomNodeView.js +9 -25
- package/dist/cjs/components/DocNodeView.js +6 -15
- package/dist/cjs/components/MarkView.js +1 -2
- package/dist/cjs/components/NativeWidgetView.js +2 -3
- package/dist/cjs/components/NodeView.js +1 -1
- package/dist/cjs/components/ProseMirror.js +11 -14
- package/dist/cjs/components/ReactNodeView.js +3 -4
- package/dist/cjs/components/SeparatorHackView.js +1 -2
- package/dist/cjs/components/TextNodeView.js +4 -5
- package/dist/cjs/components/TrailingHackView.js +1 -2
- package/dist/cjs/components/WidgetView.js +2 -4
- package/dist/cjs/constants.js +33 -0
- package/dist/cjs/hooks/useEditor.js +32 -228
- package/dist/cjs/hooks/useEditorEffect.js +2 -2
- package/dist/cjs/hooks/useEditorEventCallback.js +8 -5
- package/dist/cjs/hooks/useNodeViewDescriptor.js +10 -10
- package/dist/cjs/hooks/useReactKeys.js +1 -1
- package/dist/cjs/testing/editorViewTestHelpers.js +0 -2
- package/dist/cjs/viewdesc.js +10 -9
- package/dist/esm/AbstractEditorView.js +1 -0
- package/dist/esm/ReactEditorView.js +156 -0
- package/dist/esm/StaticEditorView.js +76 -0
- package/dist/esm/components/ChildNodeViews.js +60 -32
- package/dist/esm/components/CustomNodeView.js +9 -25
- package/dist/esm/components/DocNodeView.js +6 -15
- package/dist/esm/components/MarkView.js +1 -2
- package/dist/esm/components/NativeWidgetView.js +2 -3
- package/dist/esm/components/NodeView.js +1 -1
- package/dist/esm/components/ProseMirror.js +11 -14
- package/dist/esm/components/ReactNodeView.js +3 -4
- package/dist/esm/components/SeparatorHackView.js +1 -2
- package/dist/esm/components/TextNodeView.js +4 -5
- package/dist/esm/components/TrailingHackView.js +1 -2
- package/dist/esm/components/WidgetView.js +2 -4
- package/dist/esm/constants.js +15 -0
- package/dist/esm/hooks/useEditor.js +28 -217
- package/dist/esm/hooks/useEditorEffect.js +2 -2
- package/dist/esm/hooks/useEditorEventCallback.js +8 -5
- package/dist/esm/hooks/useNodeViewDescriptor.js +10 -10
- package/dist/esm/hooks/useReactKeys.js +1 -1
- package/dist/esm/testing/editorViewTestHelpers.js +0 -2
- package/dist/esm/viewdesc.js +3 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/AbstractEditorView.d.ts +27 -0
- package/dist/types/ReactEditorView.d.ts +79 -0
- package/dist/types/StaticEditorView.d.ts +24 -0
- package/dist/types/components/ChildNodeViews.d.ts +2 -2
- package/dist/types/components/CustomNodeView.d.ts +2 -2
- package/dist/types/components/DocNodeView.d.ts +2 -5
- package/dist/types/components/MarkView.d.ts +2 -2
- package/dist/types/components/NativeWidgetView.d.ts +2 -2
- package/dist/types/components/NodeView.d.ts +2 -2
- package/dist/types/components/ReactNodeView.d.ts +2 -2
- package/dist/types/components/SeparatorHackView.d.ts +2 -2
- package/dist/types/components/TextNodeView.d.ts +4 -3
- package/dist/types/components/TrailingHackView.d.ts +2 -2
- package/dist/types/components/WidgetView.d.ts +2 -2
- package/dist/types/constants.d.ts +4 -0
- package/dist/types/contexts/EditorContext.d.ts +6 -4
- package/dist/types/decorations/computeDocDeco.d.ts +3 -2
- package/dist/types/decorations/viewDecorations.d.ts +3 -2
- package/dist/types/hooks/useEditor.d.ts +5 -46
- package/dist/types/hooks/useNodeViewDescriptor.d.ts +1 -1
- package/dist/types/hooks/useReactKeys.d.ts +1 -1
- package/dist/types/props.d.ts +3 -3
- package/dist/types/viewdesc.d.ts +6 -5
- package/package.json +6 -2
- package/dist/cjs/components/Editor.js +0 -28
- package/dist/cjs/components/NodeViews.js +0 -73
- package/dist/cjs/components/__tests__/LayoutGroup.test.js +0 -141
- package/dist/cjs/components/__tests__/ProseMirror.test.js +0 -255
- package/dist/cjs/contexts/NodeViewsContext.js +0 -10
- package/dist/cjs/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -107
- package/dist/cjs/hooks/__tests__/useNodeViews.test.js +0 -159
- package/dist/cjs/hooks/useEditorView.js +0 -100
- package/dist/cjs/hooks/useNodePos.js +0 -69
- package/dist/cjs/hooks/useNodeViews.js +0 -100
- package/dist/cjs/nodeViews/createReactNodeViewConstructor.js +0 -244
- package/dist/cjs/nodeViews/phrasingContentTags.js +0 -57
- package/dist/cjs/plugins/__tests__/react.test.js +0 -139
- package/dist/cjs/plugins/react.js +0 -71
- package/dist/cjs/selection/SelectionDOMObserver.js +0 -171
- package/dist/cjs/selection/hasFocusAndSelection.js +0 -35
- package/dist/cjs/selection/selectionFromDOM.js +0 -77
- package/dist/cjs/selection/selectionToDOM.js +0 -226
- package/dist/cjs/ssr.js +0 -85
- package/dist/esm/components/Editor.js +0 -15
- package/dist/esm/components/NodeViews.js +0 -26
- package/dist/esm/components/__tests__/LayoutGroup.test.js +0 -98
- package/dist/esm/components/__tests__/ProseMirror.test.js +0 -207
- package/dist/esm/contexts/NodeViewsContext.js +0 -9
- package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js +0 -98
- package/dist/esm/hooks/__tests__/useNodeViews.test.js +0 -116
- package/dist/esm/hooks/useEditorView.js +0 -99
- package/dist/esm/hooks/useNodePos.js +0 -16
- package/dist/esm/hooks/useNodeViews.js +0 -53
- package/dist/esm/nodeViews/createReactNodeViewConstructor.js +0 -214
- package/dist/esm/nodeViews/phrasingContentTags.js +0 -49
- package/dist/esm/plugins/__tests__/react.test.js +0 -135
- package/dist/esm/plugins/react.js +0 -64
- package/dist/esm/selection/SelectionDOMObserver.js +0 -161
- package/dist/esm/selection/hasFocusAndSelection.js +0 -17
- package/dist/esm/selection/selectionFromDOM.js +0 -59
- package/dist/esm/selection/selectionToDOM.js +0 -196
- package/dist/esm/ssr.js +0 -82
- package/dist/types/components/Editor.d.ts +0 -7
- package/dist/types/components/NodeViews.d.ts +0 -6
- package/dist/types/components/__tests__/LayoutGroup.test.d.ts +0 -1
- package/dist/types/contexts/NodeViewsContext.d.ts +0 -19
- package/dist/types/hooks/__tests__/useEditorViewLayoutEffect.test.d.ts +0 -1
- package/dist/types/hooks/__tests__/useNodeViews.test.d.ts +0 -1
- package/dist/types/hooks/useEditorView.d.ts +0 -23
- package/dist/types/hooks/useNodePos.d.ts +0 -9
- package/dist/types/hooks/useNodeViews.d.ts +0 -5
- package/dist/types/nodeViews/createReactNodeViewConstructor.d.ts +0 -48
- package/dist/types/nodeViews/phrasingContentTags.d.ts +0 -1
- package/dist/types/plugins/__tests__/react.test.d.ts +0 -1
- package/dist/types/plugins/react.d.ts +0 -21
- package/dist/types/selection/SelectionDOMObserver.d.ts +0 -33
- package/dist/types/selection/hasFocusAndSelection.d.ts +0 -3
- package/dist/types/selection/selectionFromDOM.d.ts +0 -4
- package/dist/types/selection/selectionToDOM.d.ts +0 -9
- package/dist/types/ssr.d.ts +0 -19
|
@@ -8,7 +8,6 @@ Object.defineProperty(exports, "ProseMirror", {
|
|
|
8
8
|
return ProseMirror;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
-
const _prosemirrorview = require("prosemirror-view");
|
|
12
11
|
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
13
12
|
const _EditorContext = require("../contexts/EditorContext.js");
|
|
14
13
|
const _EditorStateContext = require("../contexts/EditorStateContext.js");
|
|
@@ -59,7 +58,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
|
|
|
59
58
|
}
|
|
60
59
|
return newObj;
|
|
61
60
|
}
|
|
62
|
-
const EMPTY_OUTER_DECOS = [];
|
|
63
61
|
function ProseMirrorInner(param) {
|
|
64
62
|
let { className, children, nodeViews, customNodeViews, ...props } = param;
|
|
65
63
|
const [mount, setMount] = (0, _react.useState)(null);
|
|
@@ -67,26 +65,25 @@ function ProseMirrorInner(param) {
|
|
|
67
65
|
...props,
|
|
68
66
|
nodeViews: customNodeViews
|
|
69
67
|
});
|
|
70
|
-
const innerDecos = editor.view ? (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper) : _prosemirrorview.DecorationSet.empty;
|
|
71
|
-
const outerDecos = editor.view ? (0, _computeDocDeco.computeDocDeco)(editor.view) : EMPTY_OUTER_DECOS;
|
|
72
68
|
const nodeViewContextValue = (0, _react.useMemo)(()=>({
|
|
73
69
|
nodeViews: nodeViews ?? {}
|
|
74
70
|
}), [
|
|
75
71
|
nodeViews
|
|
76
72
|
]);
|
|
73
|
+
const node = state.doc;
|
|
74
|
+
const innerDeco = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
|
|
75
|
+
const outerDeco = (0, _computeDocDeco.computeDocDeco)(editor.view);
|
|
77
76
|
const docNodeViewContextValue = (0, _react.useMemo)(()=>({
|
|
78
|
-
className
|
|
79
|
-
setMount
|
|
80
|
-
node
|
|
81
|
-
innerDeco
|
|
82
|
-
outerDeco
|
|
83
|
-
viewDesc: editor.docViewDescRef.current
|
|
77
|
+
className,
|
|
78
|
+
setMount,
|
|
79
|
+
node,
|
|
80
|
+
innerDeco,
|
|
81
|
+
outerDeco
|
|
84
82
|
}), [
|
|
85
83
|
className,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
outerDecos
|
|
84
|
+
node,
|
|
85
|
+
innerDeco,
|
|
86
|
+
outerDeco
|
|
90
87
|
]);
|
|
91
88
|
return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
|
|
92
89
|
value: editor
|
|
@@ -63,14 +63,13 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
|
|
|
63
63
|
const domRef = (0, _react.useRef)(null);
|
|
64
64
|
const nodeDomRef = (0, _react.useRef)(null);
|
|
65
65
|
const contentDomRef = (0, _react.useRef)(null);
|
|
66
|
-
const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
|
|
67
66
|
const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
|
|
68
67
|
let element = null;
|
|
69
68
|
const Component = nodeViews[node.type.name];
|
|
70
69
|
const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
|
|
71
70
|
node
|
|
72
71
|
]);
|
|
73
|
-
const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node,
|
|
72
|
+
const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPos, domRef, nodeDomRef, innerDeco, outerDeco, contentDomRef);
|
|
74
73
|
const finalProps = {
|
|
75
74
|
...props,
|
|
76
75
|
...!hasContentDOM && nodeDomRef.current?.tagName !== "BR" && {
|
|
@@ -79,11 +78,11 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
|
|
|
79
78
|
};
|
|
80
79
|
const nodeProps = (0, _react.useMemo)(()=>({
|
|
81
80
|
node: node,
|
|
82
|
-
getPos:
|
|
81
|
+
getPos: getPos,
|
|
83
82
|
decorations: outerDeco,
|
|
84
83
|
innerDecorations: innerDeco
|
|
85
84
|
}), [
|
|
86
|
-
|
|
85
|
+
getPos,
|
|
87
86
|
innerDeco,
|
|
88
87
|
node,
|
|
89
88
|
outerDeco
|
|
@@ -83,11 +83,10 @@ function SeparatorHackView(param) {
|
|
|
83
83
|
}
|
|
84
84
|
if (!ref.current) return;
|
|
85
85
|
if (!viewDescRef.current) {
|
|
86
|
-
viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [],
|
|
86
|
+
viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
|
|
87
87
|
} else {
|
|
88
88
|
viewDescRef.current.parent = parentRef.current;
|
|
89
89
|
viewDescRef.current.dom = ref.current;
|
|
90
|
-
viewDescRef.current.getPos = ()=>getPos.current();
|
|
91
90
|
}
|
|
92
91
|
if (!siblingsRef.current.includes(viewDescRef.current)) {
|
|
93
92
|
siblingsRef.current.push(viewDescRef.current);
|
|
@@ -47,8 +47,8 @@ let TextNodeView = class TextNodeView extends _react.Component {
|
|
|
47
47
|
// when a composition was started that produces a new text node.
|
|
48
48
|
// Otherwise we just rely on re-rendering the renderRef
|
|
49
49
|
if (!dom) {
|
|
50
|
-
if (!view
|
|
51
|
-
this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current,
|
|
50
|
+
if (!view.composing) return;
|
|
51
|
+
this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
|
|
52
52
|
// actually find the correct DOM nodes from here,
|
|
53
53
|
// so we let our parent do it.
|
|
54
54
|
// Passing a valid element here just so that the
|
|
@@ -61,12 +61,11 @@ let TextNodeView = class TextNodeView extends _react.Component {
|
|
|
61
61
|
textNode = textNode.firstChild;
|
|
62
62
|
}
|
|
63
63
|
if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
|
|
64
|
-
this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [],
|
|
64
|
+
this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
|
|
65
65
|
} else {
|
|
66
66
|
this.viewDescRef.parent = parentRef.current;
|
|
67
67
|
this.viewDescRef.children = [];
|
|
68
68
|
this.viewDescRef.node = node;
|
|
69
|
-
this.viewDescRef.getPos = ()=>getPos.current();
|
|
70
69
|
this.viewDescRef.outerDeco = decorations;
|
|
71
70
|
this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
|
|
72
71
|
this.viewDescRef.dom = dom;
|
|
@@ -102,7 +101,7 @@ let TextNodeView = class TextNodeView extends _react.Component {
|
|
|
102
101
|
// an active composition and the selection is in this node,
|
|
103
102
|
// we freeze the DOM of this element so that it doesn't
|
|
104
103
|
// interrupt the composition
|
|
105
|
-
if (view
|
|
104
|
+
if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
|
|
106
105
|
return this.renderRef;
|
|
107
106
|
}
|
|
108
107
|
this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
|
|
@@ -73,11 +73,10 @@ function TrailingHackView(param) {
|
|
|
73
73
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
74
74
|
if (!ref.current) return;
|
|
75
75
|
if (!viewDescRef.current) {
|
|
76
|
-
viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [],
|
|
76
|
+
viewDescRef.current = new _viewdesc.TrailingHackViewDesc(parentRef.current, [], getPos, ref.current, null);
|
|
77
77
|
} else {
|
|
78
78
|
viewDescRef.current.parent = parentRef.current;
|
|
79
79
|
viewDescRef.current.dom = ref.current;
|
|
80
|
-
viewDescRef.current.getPos = ()=>getPos.current();
|
|
81
80
|
}
|
|
82
81
|
if (!siblingsRef.current.includes(viewDescRef.current)) {
|
|
83
82
|
siblingsRef.current.push(viewDescRef.current);
|
|
@@ -57,7 +57,6 @@ function WidgetView(param) {
|
|
|
57
57
|
let { widget, getPos } = param;
|
|
58
58
|
const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
|
|
59
59
|
const viewDescRef = (0, _react.useRef)(null);
|
|
60
|
-
const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
|
|
61
60
|
const domRef = (0, _react.useRef)(null);
|
|
62
61
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
63
62
|
const siblings = siblingsRef.current;
|
|
@@ -74,11 +73,10 @@ function WidgetView(param) {
|
|
|
74
73
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
75
74
|
if (!domRef.current) return;
|
|
76
75
|
if (!viewDescRef.current) {
|
|
77
|
-
viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current,
|
|
76
|
+
viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, getPos, widget, domRef.current);
|
|
78
77
|
} else {
|
|
79
78
|
viewDescRef.current.parent = parentRef.current;
|
|
80
79
|
viewDescRef.current.widget = widget;
|
|
81
|
-
viewDescRef.current.getPos = ()=>getPos.current();
|
|
82
80
|
viewDescRef.current.dom = domRef.current;
|
|
83
81
|
}
|
|
84
82
|
if (!siblingsRef.current.includes(viewDescRef.current)) {
|
|
@@ -90,7 +88,7 @@ function WidgetView(param) {
|
|
|
90
88
|
return Component && /*#__PURE__*/ _react.default.createElement(Component, {
|
|
91
89
|
ref: domRef,
|
|
92
90
|
widget: widget,
|
|
93
|
-
getPos:
|
|
91
|
+
getPos: getPos,
|
|
94
92
|
contentEditable: false
|
|
95
93
|
});
|
|
96
94
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
EMPTY_SCHEMA: function() {
|
|
13
|
+
return EMPTY_SCHEMA;
|
|
14
|
+
},
|
|
15
|
+
EMPTY_STATE: function() {
|
|
16
|
+
return EMPTY_STATE;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _prosemirrormodel = require("prosemirror-model");
|
|
20
|
+
const _prosemirrorstate = require("prosemirror-state");
|
|
21
|
+
const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
|
|
22
|
+
nodes: {
|
|
23
|
+
doc: {
|
|
24
|
+
content: "text*"
|
|
25
|
+
},
|
|
26
|
+
text: {
|
|
27
|
+
inline: true
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const EMPTY_STATE = _prosemirrorstate.EditorState.create({
|
|
32
|
+
schema: EMPTY_SCHEMA
|
|
33
|
+
});
|
|
@@ -2,194 +2,21 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
ReactEditorView: function() {
|
|
13
|
-
return ReactEditorView;
|
|
14
|
-
},
|
|
15
|
-
useEditor: function() {
|
|
5
|
+
Object.defineProperty(exports, "useEditor", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
16
8
|
return useEditor;
|
|
17
9
|
}
|
|
18
10
|
});
|
|
19
|
-
const _prosemirrormodel = require("prosemirror-model");
|
|
20
|
-
const _prosemirrorstate = require("prosemirror-state");
|
|
21
|
-
const _prosemirrorview = require("prosemirror-view");
|
|
22
11
|
const _react = require("react");
|
|
23
12
|
const _reactdom = require("react-dom");
|
|
13
|
+
const _ReactEditorView = require("../ReactEditorView.js");
|
|
14
|
+
const _StaticEditorView = require("../StaticEditorView.js");
|
|
15
|
+
const _constants = require("../constants.js");
|
|
24
16
|
const _beforeInputPlugin = require("../plugins/beforeInputPlugin.js");
|
|
25
|
-
const _SelectionDOMObserver = require("../selection/SelectionDOMObserver.js");
|
|
26
|
-
const _ssr = require("../ssr.js");
|
|
27
|
-
const _viewdesc = require("../viewdesc.js");
|
|
28
17
|
const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
|
|
29
18
|
const _useComponentEventListeners = require("./useComponentEventListeners.js");
|
|
30
19
|
const _useForceUpdate = require("./useForceUpdate.js");
|
|
31
|
-
function buildNodeViews(view) {
|
|
32
|
-
const result = Object.create(null);
|
|
33
|
-
function add(obj) {
|
|
34
|
-
for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
35
|
-
result[prop] = obj[prop];
|
|
36
|
-
}
|
|
37
|
-
view.someProp("nodeViews", add);
|
|
38
|
-
view.someProp("markViews", add);
|
|
39
|
-
return result;
|
|
40
|
-
}
|
|
41
|
-
function changedNodeViews(a, b) {
|
|
42
|
-
let nA = 0, nB = 0;
|
|
43
|
-
for(const prop in a){
|
|
44
|
-
if (a[prop] != b[prop]) return true;
|
|
45
|
-
nA++;
|
|
46
|
-
}
|
|
47
|
-
for(const _ in b)nB++;
|
|
48
|
-
return nA != nB;
|
|
49
|
-
}
|
|
50
|
-
function changedProps(a, b) {
|
|
51
|
-
for (const prop of Object.keys(a)){
|
|
52
|
-
if (a[prop] !== b[prop]) return true;
|
|
53
|
-
}
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
function getEditable(view) {
|
|
57
|
-
return !view.someProp("editable", (value)=>value(view.state) === false);
|
|
58
|
-
}
|
|
59
|
-
let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
|
|
60
|
-
shouldUpdatePluginViews = false;
|
|
61
|
-
oldProps;
|
|
62
|
-
_props;
|
|
63
|
-
ready;
|
|
64
|
-
constructor(place, props){
|
|
65
|
-
// Call the superclass constructor with an empty
|
|
66
|
-
// document and limited props. We'll set everything
|
|
67
|
-
// else ourselves.
|
|
68
|
-
const cleanup = (0, _ssr.setSsrStubs)();
|
|
69
|
-
super(place, {
|
|
70
|
-
state: _prosemirrorstate.EditorState.create({
|
|
71
|
-
schema: props.state.schema
|
|
72
|
-
})
|
|
73
|
-
});
|
|
74
|
-
cleanup();
|
|
75
|
-
this.ready = props.ready;
|
|
76
|
-
this.shouldUpdatePluginViews = true;
|
|
77
|
-
this._props = props;
|
|
78
|
-
this.oldProps = {
|
|
79
|
-
state: props.state
|
|
80
|
-
};
|
|
81
|
-
this.state = props.state;
|
|
82
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
83
|
-
this.domObserver.stop();
|
|
84
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
85
|
-
this.domObserver = new _SelectionDOMObserver.SelectionDOMObserver(this);
|
|
86
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
87
|
-
this.domObserver.start();
|
|
88
|
-
this.editable = getEditable(this);
|
|
89
|
-
// Destroy the DOM created by the default
|
|
90
|
-
// ProseMirror ViewDesc implementation; we
|
|
91
|
-
// have a NodeViewDesc from React instead.
|
|
92
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
93
|
-
this.docView.dom.replaceChildren();
|
|
94
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
95
|
-
this.nodeViews = buildNodeViews(this);
|
|
96
|
-
// @ts-expect-error We're making use of knowledge of internal attributes here
|
|
97
|
-
this.docView = props.docView;
|
|
98
|
-
}
|
|
99
|
-
/**
|
|
100
|
-
* Whether the EditorView's updateStateInner method thinks that the
|
|
101
|
-
* docView needs to be blown away and redrawn.
|
|
102
|
-
*
|
|
103
|
-
* @privateremarks
|
|
104
|
-
*
|
|
105
|
-
* When ProseMirror View detects that the EditorState has been reconfigured
|
|
106
|
-
* to provide new custom node views, it calls an internal function that
|
|
107
|
-
* we can't override in order to recreate the entire editor DOM.
|
|
108
|
-
*
|
|
109
|
-
* This property mimics that check, so that we can replace the EditorView
|
|
110
|
-
* with another of our own, preventing ProseMirror View from taking over
|
|
111
|
-
* DOM management responsibility.
|
|
112
|
-
*/ get needsRedraw() {
|
|
113
|
-
if (this.oldProps.state.plugins === this._props.state.plugins && this._props.plugins === this.oldProps.plugins) {
|
|
114
|
-
return false;
|
|
115
|
-
}
|
|
116
|
-
const newNodeViews = buildNodeViews(this);
|
|
117
|
-
// @ts-expect-error Internal property
|
|
118
|
-
return changedNodeViews(this.nodeViews, newNodeViews);
|
|
119
|
-
}
|
|
120
|
-
/**
|
|
121
|
-
* Like setProps, but without executing any side effects.
|
|
122
|
-
* Safe to use in a component render method.
|
|
123
|
-
*/ pureSetProps(props) {
|
|
124
|
-
// this.oldProps = this.props;
|
|
125
|
-
this._props = {
|
|
126
|
-
...this._props,
|
|
127
|
-
...props
|
|
128
|
-
};
|
|
129
|
-
this.state = this._props.state;
|
|
130
|
-
this.editable = getEditable(this);
|
|
131
|
-
}
|
|
132
|
-
/**
|
|
133
|
-
* Triggers any side effects that have been queued by previous
|
|
134
|
-
* calls to pureSetProps.
|
|
135
|
-
*/ runPendingEffects() {
|
|
136
|
-
if (changedProps(this.props, this.oldProps)) {
|
|
137
|
-
const newProps = this.props;
|
|
138
|
-
this._props = this.oldProps;
|
|
139
|
-
this.state = this._props.state;
|
|
140
|
-
this.update(newProps);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
update(props) {
|
|
144
|
-
super.update(props);
|
|
145
|
-
// Ensure that side effects aren't re-triggered until
|
|
146
|
-
// pureSetProps is called again
|
|
147
|
-
this.oldProps = props;
|
|
148
|
-
}
|
|
149
|
-
updatePluginViews(prevState) {
|
|
150
|
-
if (this.shouldUpdatePluginViews) {
|
|
151
|
-
// @ts-expect-error We're making use of knowledge of internal methods here
|
|
152
|
-
super.updatePluginViews(prevState);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
// We want to trigger the default EditorView cleanup, but without
|
|
156
|
-
// the actual view.dom cleanup (which React will have already handled).
|
|
157
|
-
// So we give the EditorView a dummy DOM element and ask it to clean up
|
|
158
|
-
destroy() {
|
|
159
|
-
// If needsRedraw returns true, then we will destroy and recreate
|
|
160
|
-
// the EditorView, but will likely leave the ProseMirrorDoc node as-is.
|
|
161
|
-
// In this case, this.dom will still be connected when destroy runs, and
|
|
162
|
-
// it will be reused for the next EditorView, so we need to manually reset
|
|
163
|
-
// it.
|
|
164
|
-
if (this.dom.isConnected) {
|
|
165
|
-
// We need to manually execute this code from super.destroy(),
|
|
166
|
-
// because when super.destroy() runs, it will have been given a dummy
|
|
167
|
-
// dom node
|
|
168
|
-
// @ts-expect-error Internal property - input
|
|
169
|
-
for(const type in this.input.eventHandlers){
|
|
170
|
-
// @ts-expect-error Internal property - input
|
|
171
|
-
this.dom.removeEventListener(type, this.input.eventHandlers[type]);
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
// @ts-expect-error we're intentionally overwriting this property
|
|
175
|
-
// to prevent side effects
|
|
176
|
-
this.dom = document.createElement("div");
|
|
177
|
-
super.destroy();
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
const EMPTY_SCHEMA = new _prosemirrormodel.Schema({
|
|
181
|
-
nodes: {
|
|
182
|
-
doc: {
|
|
183
|
-
content: "text*"
|
|
184
|
-
},
|
|
185
|
-
text: {
|
|
186
|
-
inline: true
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
});
|
|
190
|
-
const EMPTY_STATE = _prosemirrorstate.EditorState.create({
|
|
191
|
-
schema: EMPTY_SCHEMA
|
|
192
|
-
});
|
|
193
20
|
let didWarnValueDefaultValue = false;
|
|
194
21
|
function useEditor(mount, options) {
|
|
195
22
|
if (process.env.NODE_ENV !== "production") {
|
|
@@ -201,7 +28,7 @@ function useEditor(mount, options) {
|
|
|
201
28
|
const flushSyncRef = (0, _react.useRef)(true);
|
|
202
29
|
const [cursorWrapper, _setCursorWrapper] = (0, _react.useState)(null);
|
|
203
30
|
const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
|
|
204
|
-
const defaultState = options.defaultState ?? EMPTY_STATE;
|
|
31
|
+
const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
|
|
205
32
|
const [_state, setState] = (0, _react.useState)(defaultState);
|
|
206
33
|
const state = options.state ?? _state;
|
|
207
34
|
const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
|
|
@@ -241,30 +68,18 @@ function useEditor(mount, options) {
|
|
|
241
68
|
options.dispatchTransaction,
|
|
242
69
|
options.state
|
|
243
70
|
]);
|
|
244
|
-
const cleanup = (0, _ssr.setSsrStubs)();
|
|
245
|
-
const tempDom = document.createElement("div");
|
|
246
|
-
cleanup();
|
|
247
|
-
const docViewDescRef = (0, _react.useRef)(new _viewdesc.NodeViewDesc(undefined, [], ()=>-1, state.doc, [], _prosemirrorview.DecorationSet.empty, tempDom, null, tempDom, ()=>false, ()=>{
|
|
248
|
-
/* The doc node can't have a node selection*/ }, ()=>{
|
|
249
|
-
/* The doc node can't have a node selection*/ }, ()=>false));
|
|
250
71
|
const directEditorProps = {
|
|
251
72
|
...options,
|
|
252
73
|
state,
|
|
253
74
|
plugins,
|
|
254
|
-
dispatchTransaction
|
|
255
|
-
docView: docViewDescRef.current,
|
|
256
|
-
ready: true
|
|
75
|
+
dispatchTransaction
|
|
257
76
|
};
|
|
258
|
-
const [view, setView] = (0, _react.useState)(
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
()=>new ReactEditorView(null, {
|
|
262
|
-
...directEditorProps,
|
|
263
|
-
ready: false
|
|
264
|
-
}));
|
|
77
|
+
const [view, setView] = (0, _react.useState)(()=>{
|
|
78
|
+
return new _StaticEditorView.StaticEditorView(directEditorProps);
|
|
79
|
+
});
|
|
265
80
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
266
81
|
return ()=>{
|
|
267
|
-
view
|
|
82
|
+
view.destroy();
|
|
268
83
|
};
|
|
269
84
|
}, [
|
|
270
85
|
view
|
|
@@ -274,44 +89,33 @@ function useEditor(mount, options) {
|
|
|
274
89
|
// so this is not a concern.
|
|
275
90
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
276
91
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
277
|
-
if (
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
}
|
|
289
|
-
|
|
290
|
-
// but we need to convince EditorView's constructor not to
|
|
291
|
-
// clear out the DOM when passed a mount that already has
|
|
292
|
-
// content in it, otherwise React blows up when it tries
|
|
293
|
-
// to clean up.
|
|
294
|
-
if (view.needsRedraw) {
|
|
295
|
-
setView(null);
|
|
296
|
-
return;
|
|
92
|
+
if (mount !== view.dom) {
|
|
93
|
+
if (mount) {
|
|
94
|
+
const view = new _ReactEditorView.ReactEditorView({
|
|
95
|
+
mount
|
|
96
|
+
}, directEditorProps);
|
|
97
|
+
view.dom.addEventListener("compositionend", forceUpdate);
|
|
98
|
+
setView(view);
|
|
99
|
+
} else {
|
|
100
|
+
const view = new _StaticEditorView.StaticEditorView(directEditorProps);
|
|
101
|
+
setView(view);
|
|
102
|
+
}
|
|
103
|
+
} else if (view instanceof _ReactEditorView.ReactEditorView) {
|
|
104
|
+
view.commitPendingEffects();
|
|
297
105
|
}
|
|
298
|
-
// @ts-expect-error Internal property - domObserver
|
|
299
|
-
view?.domObserver.selectionToDOM();
|
|
300
|
-
view?.runPendingEffects();
|
|
301
106
|
});
|
|
302
|
-
view
|
|
107
|
+
view.update(directEditorProps);
|
|
303
108
|
const editor = (0, _react.useMemo)(()=>({
|
|
304
|
-
view
|
|
305
|
-
registerEventListener,
|
|
306
|
-
unregisterEventListener,
|
|
109
|
+
view,
|
|
307
110
|
cursorWrapper,
|
|
308
|
-
|
|
309
|
-
|
|
111
|
+
flushSyncRef,
|
|
112
|
+
registerEventListener,
|
|
113
|
+
unregisterEventListener
|
|
310
114
|
}), [
|
|
311
|
-
|
|
115
|
+
cursorWrapper,
|
|
312
116
|
registerEventListener,
|
|
313
117
|
unregisterEventListener,
|
|
314
|
-
|
|
118
|
+
view
|
|
315
119
|
]);
|
|
316
120
|
return {
|
|
317
121
|
editor,
|
|
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useEditorEffect", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _react = require("react");
|
|
12
|
+
const _ReactEditorView = require("../ReactEditorView.js");
|
|
12
13
|
const _EditorContext = require("../contexts/EditorContext.js");
|
|
13
14
|
const _useLayoutGroupEffect = require("./useLayoutGroupEffect.js");
|
|
14
15
|
function useEditorEffect(effect, dependencies) {
|
|
@@ -21,8 +22,7 @@ function useEditorEffect(effect, dependencies) {
|
|
|
21
22
|
// every time it changes, because it will most likely
|
|
22
23
|
// be defined inline and run on every re-render.
|
|
23
24
|
(0, _useLayoutGroupEffect.useLayoutGroupEffect)(()=>{
|
|
24
|
-
|
|
25
|
-
if (view?.docView && view.ready) {
|
|
25
|
+
if (view instanceof _ReactEditorView.ReactEditorView) {
|
|
26
26
|
flushSyncRef.current = false;
|
|
27
27
|
const result = effect(view);
|
|
28
28
|
flushSyncRef.current = true;
|
|
@@ -9,8 +9,15 @@ Object.defineProperty(exports, "useEditorEventCallback", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _react = require("react");
|
|
12
|
+
const _ReactEditorView = require("../ReactEditorView.js");
|
|
12
13
|
const _EditorContext = require("../contexts/EditorContext.js");
|
|
13
14
|
const _useEditorEffect = require("./useEditorEffect.js");
|
|
15
|
+
function assertIsReactEditorView(view) {
|
|
16
|
+
if (view instanceof _ReactEditorView.ReactEditorView) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
throw new DOMException("ProseMirror document is not mounted", "InvalidStateError");
|
|
20
|
+
}
|
|
14
21
|
function useEditorEventCallback(callback) {
|
|
15
22
|
const ref = (0, _react.useRef)(callback);
|
|
16
23
|
const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
|
|
@@ -23,11 +30,7 @@ function useEditorEventCallback(callback) {
|
|
|
23
30
|
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
|
|
24
31
|
args[_key] = arguments[_key];
|
|
25
32
|
}
|
|
26
|
-
|
|
27
|
-
// while view is null, since view is only ever set to
|
|
28
|
-
// null in a layout effect that then immediately triggers
|
|
29
|
-
// a re-render which sets view to a new EditorView
|
|
30
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
33
|
+
assertIsReactEditorView(view);
|
|
31
34
|
return ref.current(view, ...args);
|
|
32
35
|
}, [
|
|
33
36
|
view
|
|
@@ -13,10 +13,10 @@ const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js
|
|
|
13
13
|
const _EditorContext = require("../contexts/EditorContext.js");
|
|
14
14
|
const _viewdesc = require("../viewdesc.js");
|
|
15
15
|
const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
|
|
16
|
-
function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations,
|
|
16
|
+
function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, contentDOMRef) {
|
|
17
17
|
const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
|
|
18
18
|
const [hasContentDOM, setHasContentDOM] = (0, _react.useState)(true);
|
|
19
|
-
const nodeViewDescRef = (0, _react.useRef)(
|
|
19
|
+
const nodeViewDescRef = (0, _react.useRef)();
|
|
20
20
|
const stopEvent = (0, _react.useRef)(()=>false);
|
|
21
21
|
const setStopEvent = (0, _react.useCallback)((newStopEvent)=>{
|
|
22
22
|
stopEvent.current = newStopEvent;
|
|
@@ -26,12 +26,12 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
|
|
|
26
26
|
ignoreMutation.current = newIgnoreMutation;
|
|
27
27
|
}, []);
|
|
28
28
|
const selectNode = (0, _react.useRef)(()=>{
|
|
29
|
-
if (!nodeDomRef.current
|
|
29
|
+
if (!nodeDomRef.current) return;
|
|
30
30
|
if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
|
|
31
31
|
if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).draggable = true;
|
|
32
32
|
});
|
|
33
33
|
const deselectNode = (0, _react.useRef)(()=>{
|
|
34
|
-
if (!nodeDomRef.current
|
|
34
|
+
if (!nodeDomRef.current) return;
|
|
35
35
|
if (nodeDomRef.current.nodeType == 1) {
|
|
36
36
|
nodeDomRef.current.classList.remove("ProseMirror-selectednode");
|
|
37
37
|
if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).removeAttribute("draggable");
|
|
@@ -57,15 +57,14 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
|
|
|
57
57
|
]);
|
|
58
58
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
59
59
|
(0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
|
|
60
|
-
if (!
|
|
60
|
+
if (!nodeDomRef.current) return;
|
|
61
61
|
const firstChildDesc = childDescriptors.current[0];
|
|
62
62
|
if (!nodeViewDescRef.current) {
|
|
63
|
-
nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
|
|
63
|
+
nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, contentDOMRef?.current ?? firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
|
|
64
64
|
} else {
|
|
65
65
|
nodeViewDescRef.current.parent = parentRef.current;
|
|
66
66
|
nodeViewDescRef.current.children = childDescriptors.current;
|
|
67
67
|
nodeViewDescRef.current.node = node;
|
|
68
|
-
nodeViewDescRef.current.getPos = getPos;
|
|
69
68
|
nodeViewDescRef.current.outerDeco = outerDecorations;
|
|
70
69
|
nodeViewDescRef.current.innerDeco = innerDecorations;
|
|
71
70
|
nodeViewDescRef.current.dom = domRef?.current ?? nodeDomRef.current;
|
|
@@ -98,12 +97,13 @@ function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecoration
|
|
|
98
97
|
childDesc.textDOM = textDOM;
|
|
99
98
|
childDesc.text = textDOM.data;
|
|
100
99
|
childDesc.textDOM.pmViewDesc = childDesc;
|
|
101
|
-
//
|
|
102
|
-
view
|
|
100
|
+
// It should not be possible to be in a composition because one could
|
|
101
|
+
// not start between the renders that switch the view type.
|
|
102
|
+
view.input.compositionNodes.push(childDesc);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
105
|
return ()=>{
|
|
106
|
-
if (nodeViewDescRef.current?.children[0] instanceof _viewdesc.CompositionViewDesc && !view
|
|
106
|
+
if (nodeViewDescRef.current?.children[0] instanceof _viewdesc.CompositionViewDesc && !view.composing) {
|
|
107
107
|
nodeViewDescRef.current?.children[0].dom.parentNode?.removeChild(nodeViewDescRef.current?.children[0].dom);
|
|
108
108
|
}
|
|
109
109
|
};
|
|
@@ -13,5 +13,5 @@ const _EditorContext = require("../contexts/EditorContext.js");
|
|
|
13
13
|
const _reactKeys = require("../plugins/reactKeys.js");
|
|
14
14
|
function useReactKeys() {
|
|
15
15
|
const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
|
|
16
|
-
return
|
|
16
|
+
return _reactKeys.reactKeysPluginKey.getState(view.state);
|
|
17
17
|
}
|
|
@@ -85,8 +85,6 @@ function tempEditor(param) {
|
|
|
85
85
|
}, /*#__PURE__*/ _react1.default.createElement(Test, null), /*#__PURE__*/ _react1.default.createElement(_ProseMirrorDoc.ProseMirrorDoc, null)));
|
|
86
86
|
return view;
|
|
87
87
|
}
|
|
88
|
-
// We need two renders for the hasContentDOM state to settle
|
|
89
|
-
rerenderEditor();
|
|
90
88
|
return {
|
|
91
89
|
view: view,
|
|
92
90
|
rerender: rerenderEditor,
|