@handlewithcare/react-prosemirror 3.1.0-tiptap.42 → 3.1.0-tiptap.44
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/README.md +26 -0
- package/dist/cjs/ReactEditorView.js +74 -70
- package/dist/cjs/StaticEditorView.js +21 -18
- package/dist/cjs/browser.js +3 -1
- package/dist/cjs/commands/reorderSiblings.js +13 -9
- package/dist/cjs/components/ChildNodeViews.js +74 -69
- package/dist/cjs/components/CursorWrapper.js +20 -34
- package/dist/cjs/components/LayoutGroup.js +16 -12
- package/dist/cjs/components/NativeWidgetView.js +19 -15
- package/dist/cjs/components/OutputSpec.js +13 -9
- package/dist/cjs/components/ProseMirror.js +27 -37
- package/dist/cjs/components/ProseMirrorDoc.js +18 -25
- package/dist/cjs/components/SeparatorHackView.js +20 -17
- package/dist/cjs/components/TextNodeView.js +20 -22
- package/dist/cjs/components/TrailingHackView.js +17 -13
- package/dist/cjs/components/WidgetView.js +18 -14
- package/dist/cjs/components/marks/DefaultMarkView.js +15 -27
- package/dist/cjs/components/marks/MarkView.js +23 -32
- package/dist/cjs/components/marks/MarkViewConstructorView.js +22 -38
- package/dist/cjs/components/marks/ReactMarkView.js +16 -27
- package/dist/cjs/components/nodes/DefaultNodeView.js +15 -27
- package/dist/cjs/components/nodes/DocNodeView.js +16 -12
- package/dist/cjs/components/nodes/NodeView.js +26 -33
- package/dist/cjs/components/nodes/NodeViewConstructorView.js +29 -45
- package/dist/cjs/components/nodes/ReactNodeView.js +27 -39
- package/dist/cjs/constants.js +10 -6
- package/dist/cjs/contexts/ChildDescriptionsContext.js +3 -1
- package/dist/cjs/contexts/EditorContext.js +3 -1
- package/dist/cjs/contexts/EditorStateContext.js +3 -1
- package/dist/cjs/contexts/IgnoreMutationContext.js +3 -1
- package/dist/cjs/contexts/LayoutGroupContext.js +3 -1
- package/dist/cjs/contexts/NodeViewContext.js +3 -1
- package/dist/cjs/contexts/SelectNodeContext.js +3 -1
- package/dist/cjs/contexts/StopEventContext.js +3 -1
- package/dist/cjs/decorations/ReactWidgetType.js +19 -13
- package/dist/cjs/decorations/computeDocDeco.js +5 -3
- package/dist/cjs/decorations/iterDeco.js +19 -17
- package/dist/cjs/decorations/viewDecorations.js +15 -12
- package/dist/cjs/dom.js +34 -13
- package/dist/cjs/findDOMNode.js +9 -5
- package/dist/cjs/hooks/useClientLayoutEffect.js +3 -1
- package/dist/cjs/hooks/useComponentEventListeners.js +7 -6
- package/dist/cjs/hooks/useEditor.js +29 -32
- package/dist/cjs/hooks/useEditorEffect.js +9 -7
- package/dist/cjs/hooks/useEditorEventCallback.js +9 -7
- package/dist/cjs/hooks/useEditorEventListener.js +8 -6
- package/dist/cjs/hooks/useEditorState.js +5 -3
- package/dist/cjs/hooks/useEffectEvent.js +3 -1
- package/dist/cjs/hooks/useForceUpdate.js +3 -1
- package/dist/cjs/hooks/useIgnoreMutation.js +9 -7
- package/dist/cjs/hooks/useIsEditorStatic.js +5 -5
- package/dist/cjs/hooks/useIsNodeSelected.js +5 -3
- package/dist/cjs/hooks/useLayoutGroupEffect.js +7 -5
- package/dist/cjs/hooks/useMarkViewDescription.js +31 -25
- package/dist/cjs/hooks/useNodePos.js +7 -5
- package/dist/cjs/hooks/useNodeViewDescription.js +32 -28
- package/dist/cjs/hooks/useReactKeys.js +7 -5
- package/dist/cjs/hooks/useSelectNode.js +10 -8
- package/dist/cjs/hooks/useStopEvent.js +9 -7
- package/dist/cjs/index.js +66 -34
- package/dist/cjs/plugins/beforeInputPlugin.js +51 -24
- package/dist/cjs/plugins/componentEventListeners.js +8 -6
- package/dist/cjs/plugins/componentEventListenersPlugin.js +8 -6
- package/dist/cjs/plugins/reactKeys.js +15 -10
- package/dist/cjs/props.js +23 -19
- package/dist/cjs/refs.js +3 -1
- package/dist/cjs/testing/editorViewTestHelpers.js +40 -47
- package/dist/cjs/testing/setupProseMirrorView.js +7 -4
- package/dist/cjs/tiptap/ReactProseMirrorNodeView.js +10 -6
- package/dist/cjs/tiptap/TiptapEditor.js +15 -14
- package/dist/cjs/tiptap/TiptapEditorContent.js +18 -28
- package/dist/cjs/tiptap/TiptapEditorView.js +23 -34
- package/dist/cjs/tiptap/contexts/TiptapEditorContext.js +3 -1
- package/dist/cjs/tiptap/extensions/ReactProseMirror.js +8 -6
- package/dist/cjs/tiptap/extensions/ReactProseMirrorCommands.js +5 -3
- package/dist/cjs/tiptap/extensions/commands/updateAttributes.js +4 -2
- package/dist/cjs/tiptap/hooks/useIsInReactProseMirror.js +5 -3
- package/dist/cjs/tiptap/hooks/useTiptapEditor.js +12 -14
- package/dist/cjs/tiptap/hooks/useTiptapEditorEffect.js +12 -10
- package/dist/cjs/tiptap/hooks/useTiptapEditorEventCallback.js +6 -4
- package/dist/cjs/tiptap/index.js +36 -18
- package/dist/cjs/tiptap/tiptapNodeView.js +48 -62
- package/dist/cjs/viewdesc.js +119 -89
- package/dist/esm/ReactEditorView.js +68 -66
- package/dist/esm/StaticEditorView.js +18 -17
- package/dist/esm/commands/reorderSiblings.js +5 -5
- package/dist/esm/components/ChildNodeViews.js +36 -37
- package/dist/esm/components/CursorWrapper.js +10 -28
- package/dist/esm/components/LayoutGroup.js +1 -1
- package/dist/esm/components/NativeWidgetView.js +2 -2
- package/dist/esm/components/OutputSpec.js +1 -1
- package/dist/esm/components/ProseMirror.js +4 -18
- package/dist/esm/components/ProseMirrorDoc.js +6 -19
- package/dist/esm/components/SeparatorHackView.js +3 -4
- package/dist/esm/components/TextNodeView.js +6 -10
- package/dist/esm/components/TrailingHackView.js +2 -2
- package/dist/esm/components/WidgetView.js +3 -3
- package/dist/esm/components/marks/DefaultMarkView.js +6 -22
- package/dist/esm/components/marks/MarkView.js +11 -24
- package/dist/esm/components/marks/MarkViewConstructorView.js +7 -27
- package/dist/esm/components/marks/ReactMarkView.js +3 -18
- package/dist/esm/components/nodes/DefaultNodeView.js +6 -22
- package/dist/esm/components/nodes/DocNodeView.js +2 -2
- package/dist/esm/components/nodes/NodeView.js +11 -24
- package/dist/esm/components/nodes/NodeViewConstructorView.js +11 -31
- package/dist/esm/components/nodes/ReactNodeView.js +6 -22
- package/dist/esm/decorations/ReactWidgetType.js +10 -8
- package/dist/esm/decorations/iterDeco.js +13 -13
- package/dist/esm/decorations/viewDecorations.js +7 -6
- package/dist/esm/dom.js +1 -2
- package/dist/esm/findDOMNode.js +1 -1
- package/dist/esm/hooks/useComponentEventListeners.js +2 -3
- package/dist/esm/hooks/useEditor.js +6 -11
- package/dist/esm/hooks/useEditorEffect.js +1 -1
- package/dist/esm/hooks/useEditorEventCallback.js +1 -1
- package/dist/esm/hooks/useEditorEventListener.js +1 -1
- package/dist/esm/hooks/useIsEditorStatic.js +1 -3
- package/dist/esm/hooks/useMarkViewDescription.js +14 -10
- package/dist/esm/hooks/useNodeViewDescription.js +10 -8
- package/dist/esm/hooks/useReactKeys.js +1 -1
- package/dist/esm/plugins/beforeInputPlugin.js +44 -19
- package/dist/esm/plugins/reactKeys.js +3 -4
- package/dist/esm/props.js +15 -15
- package/dist/esm/testing/editorViewTestHelpers.js +20 -31
- package/dist/esm/testing/setupProseMirrorView.js +1 -2
- package/dist/esm/tiptap/ReactProseMirrorNodeView.js +7 -5
- package/dist/esm/tiptap/TiptapEditor.js +9 -10
- package/dist/esm/tiptap/TiptapEditorContent.js +4 -18
- package/dist/esm/tiptap/TiptapEditorView.js +8 -23
- package/dist/esm/tiptap/extensions/ReactProseMirror.js +1 -1
- package/dist/esm/tiptap/extensions/commands/updateAttributes.js +1 -1
- package/dist/esm/tiptap/hooks/useTiptapEditor.js +4 -8
- package/dist/esm/tiptap/hooks/useTiptapEditorEffect.js +4 -4
- package/dist/esm/tiptap/hooks/useTiptapEditorEventCallback.js +1 -1
- package/dist/esm/tiptap/tiptapNodeView.js +20 -38
- package/dist/esm/viewdesc.js +74 -66
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/constants.d.ts +1 -1
- package/dist/types/contexts/EditorContext.d.ts +1 -2
- package/dist/types/hooks/useEditor.d.ts +1 -1
- package/dist/types/props.d.ts +8 -8
- package/dist/types/testing/editorViewTestHelpers.d.ts +1 -0
- package/package.json +1 -2
|
@@ -30,6 +30,62 @@ function changedNodeViews(a, b) {
|
|
|
30
30
|
* latest, uncommitted props. The base class can then be told to update when the
|
|
31
31
|
* React effects are commit an update, applying the pending, uncommitted props.
|
|
32
32
|
*/ export class ReactEditorView extends EditorView {
|
|
33
|
+
nextProps;
|
|
34
|
+
prevState;
|
|
35
|
+
_destroyed;
|
|
36
|
+
constructor(place, props){
|
|
37
|
+
// Prevent the base class from destroying the React-managed nodes.
|
|
38
|
+
// Restore them below after invoking the base class constructor.
|
|
39
|
+
const reactContent = [
|
|
40
|
+
...place.mount.childNodes
|
|
41
|
+
];
|
|
42
|
+
// Prevent the base class from mutating the React-managed attributes.
|
|
43
|
+
// Restore them below after invoking the base class constructor.
|
|
44
|
+
const reactAttrs = [
|
|
45
|
+
...place.mount.attributes
|
|
46
|
+
];
|
|
47
|
+
for (const attr of reactAttrs){
|
|
48
|
+
place.mount.removeAttributeNode(attr);
|
|
49
|
+
}
|
|
50
|
+
try {
|
|
51
|
+
// Call the superclass constructor with only a state and no plugins.
|
|
52
|
+
// We'll set everything else ourselves and apply props during layout.
|
|
53
|
+
super(place, {
|
|
54
|
+
state: EMPTY_STATE
|
|
55
|
+
});
|
|
56
|
+
this.domObserver.stop();
|
|
57
|
+
this.domObserver.observer = null;
|
|
58
|
+
this.domObserver.queue = [];
|
|
59
|
+
const originalOnSelectionChange = this.domObserver.onSelectionChange;
|
|
60
|
+
this.domObserver.onSelectionChange = ()=>{
|
|
61
|
+
// During a composition, we completely pause React-driven
|
|
62
|
+
// selection and DOM updates. Compositions are "fragile";
|
|
63
|
+
// in Safari, even updating the selection to the same
|
|
64
|
+
// position it's already set to will end the current
|
|
65
|
+
// composition.
|
|
66
|
+
if (this.composing) return;
|
|
67
|
+
originalOnSelectionChange();
|
|
68
|
+
};
|
|
69
|
+
} finally{
|
|
70
|
+
place.mount.replaceChildren(...reactContent);
|
|
71
|
+
for (const attr of place.mount.attributes){
|
|
72
|
+
place.mount.removeAttributeNode(attr);
|
|
73
|
+
}
|
|
74
|
+
for (const attr of reactAttrs){
|
|
75
|
+
place.mount.setAttributeNode(attr);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
this.prevState = EMPTY_STATE;
|
|
79
|
+
this.nextProps = props;
|
|
80
|
+
this.state = props.state;
|
|
81
|
+
this.nodeViews = buildNodeViews(this);
|
|
82
|
+
// Destroy the document view description that the base class makes.
|
|
83
|
+
// A React document view will assign itself to this attribute later.
|
|
84
|
+
this.docView.destroy();
|
|
85
|
+
// @ts-expect-error this violates the typing but class does it, too.
|
|
86
|
+
this.docView = null;
|
|
87
|
+
this._destroyed = false;
|
|
88
|
+
}
|
|
33
89
|
get props() {
|
|
34
90
|
return this.nextProps;
|
|
35
91
|
}
|
|
@@ -79,22 +135,21 @@ function changedNodeViews(a, b) {
|
|
|
79
135
|
return result;
|
|
80
136
|
}
|
|
81
137
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
return result1;
|
|
138
|
+
for (const plugin of this.props.plugins ?? []){
|
|
139
|
+
const prop = plugin.props[propName];
|
|
140
|
+
if (prop != null) {
|
|
141
|
+
const result = f ? f(prop) : prop;
|
|
142
|
+
if (result) {
|
|
143
|
+
return result;
|
|
89
144
|
}
|
|
90
145
|
}
|
|
91
146
|
}
|
|
92
|
-
for (const
|
|
93
|
-
const
|
|
94
|
-
if (
|
|
95
|
-
const
|
|
96
|
-
if (
|
|
97
|
-
return
|
|
147
|
+
for (const plugin of this.state.plugins){
|
|
148
|
+
const prop = plugin.props[propName];
|
|
149
|
+
if (prop != null) {
|
|
150
|
+
const result = f ? f(prop) : prop;
|
|
151
|
+
if (result) {
|
|
152
|
+
return result;
|
|
98
153
|
}
|
|
99
154
|
}
|
|
100
155
|
}
|
|
@@ -134,57 +189,4 @@ function changedNodeViews(a, b) {
|
|
|
134
189
|
// Store the new previous state.
|
|
135
190
|
this.prevState = this.state;
|
|
136
191
|
}
|
|
137
|
-
constructor(place, props){
|
|
138
|
-
// Prevent the base class from destroying the React-managed nodes.
|
|
139
|
-
// Restore them below after invoking the base class constructor.
|
|
140
|
-
const reactContent = [
|
|
141
|
-
...place.mount.childNodes
|
|
142
|
-
];
|
|
143
|
-
// Prevent the base class from mutating the React-managed attributes.
|
|
144
|
-
// Restore them below after invoking the base class constructor.
|
|
145
|
-
const reactAttrs = [
|
|
146
|
-
...place.mount.attributes
|
|
147
|
-
];
|
|
148
|
-
for (const attr of reactAttrs){
|
|
149
|
-
place.mount.removeAttributeNode(attr);
|
|
150
|
-
}
|
|
151
|
-
try {
|
|
152
|
-
// Call the superclass constructor with only a state and no plugins.
|
|
153
|
-
// We'll set everything else ourselves and apply props during layout.
|
|
154
|
-
super(place, {
|
|
155
|
-
state: EMPTY_STATE
|
|
156
|
-
});
|
|
157
|
-
this.domObserver.stop();
|
|
158
|
-
this.domObserver.observer = null;
|
|
159
|
-
this.domObserver.queue = [];
|
|
160
|
-
const originalOnSelectionChange = this.domObserver.onSelectionChange;
|
|
161
|
-
this.domObserver.onSelectionChange = ()=>{
|
|
162
|
-
// During a composition, we completely pause React-driven
|
|
163
|
-
// selection and DOM updates. Compositions are "fragile";
|
|
164
|
-
// in Safari, even updating the selection to the same
|
|
165
|
-
// position it's already set to will end the current
|
|
166
|
-
// composition.
|
|
167
|
-
if (this.composing) return;
|
|
168
|
-
originalOnSelectionChange();
|
|
169
|
-
};
|
|
170
|
-
} finally{
|
|
171
|
-
place.mount.replaceChildren(...reactContent);
|
|
172
|
-
for (const attr1 of place.mount.attributes){
|
|
173
|
-
place.mount.removeAttributeNode(attr1);
|
|
174
|
-
}
|
|
175
|
-
for (const attr2 of reactAttrs){
|
|
176
|
-
place.mount.setAttributeNode(attr2);
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
this.prevState = EMPTY_STATE;
|
|
180
|
-
this.nextProps = props;
|
|
181
|
-
this.state = props.state;
|
|
182
|
-
this.nodeViews = buildNodeViews(this);
|
|
183
|
-
// Destroy the document view description that the base class makes.
|
|
184
|
-
// A React document view will assign itself to this attribute later.
|
|
185
|
-
this.docView.destroy();
|
|
186
|
-
// @ts-expect-error this violates the typing but class does it, too.
|
|
187
|
-
this.docView = null;
|
|
188
|
-
this._destroyed = false;
|
|
189
|
-
}
|
|
190
192
|
}
|
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
export class StaticEditorView {
|
|
2
|
+
props;
|
|
3
|
+
nodeViews;
|
|
4
|
+
constructor(props){
|
|
5
|
+
this.props = props;
|
|
6
|
+
this.nodeViews = {};
|
|
7
|
+
}
|
|
2
8
|
get composing() {
|
|
3
9
|
return false;
|
|
4
10
|
}
|
|
@@ -36,22 +42,21 @@ export class StaticEditorView {
|
|
|
36
42
|
return result;
|
|
37
43
|
}
|
|
38
44
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
return result1;
|
|
45
|
+
for (const plugin of this.props.plugins ?? []){
|
|
46
|
+
const prop = plugin.props[propName];
|
|
47
|
+
if (prop != null) {
|
|
48
|
+
const result = f ? f(prop) : prop;
|
|
49
|
+
if (result) {
|
|
50
|
+
return result;
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
|
-
for (const
|
|
50
|
-
const
|
|
51
|
-
if (
|
|
52
|
-
const
|
|
53
|
-
if (
|
|
54
|
-
return
|
|
54
|
+
for (const plugin of this.state.plugins){
|
|
55
|
+
const prop = plugin.props[propName];
|
|
56
|
+
if (prop != null) {
|
|
57
|
+
const result = f ? f(prop) : prop;
|
|
58
|
+
if (result) {
|
|
59
|
+
return result;
|
|
55
60
|
}
|
|
56
61
|
}
|
|
57
62
|
}
|
|
@@ -71,8 +76,4 @@ export class StaticEditorView {
|
|
|
71
76
|
domSelection() {
|
|
72
77
|
return null;
|
|
73
78
|
}
|
|
74
|
-
constructor(props){
|
|
75
|
-
this.props = props;
|
|
76
|
-
this.nodeViews = {};
|
|
77
|
-
}
|
|
78
79
|
}
|
|
@@ -48,13 +48,13 @@ export function reorderSiblingsOnTransaction(pos, order, tr, state, dispatch) {
|
|
|
48
48
|
start = pos;
|
|
49
49
|
const newPositions = [];
|
|
50
50
|
for(let i = 0; i < reordered.length; i++){
|
|
51
|
-
const
|
|
51
|
+
const node = reordered[i];
|
|
52
52
|
newPositions[order[i]] = start;
|
|
53
|
-
start +=
|
|
53
|
+
start += node.nodeSize;
|
|
54
54
|
}
|
|
55
|
-
for(let
|
|
56
|
-
const oldPosition = oldPositions[
|
|
57
|
-
const newPosition = newPositions[
|
|
55
|
+
for(let i = 0; i < oldPositions.length; i++){
|
|
56
|
+
const oldPosition = oldPositions[i];
|
|
57
|
+
const newPosition = newPositions[i];
|
|
58
58
|
meta.overrides[oldPosition] = newPosition;
|
|
59
59
|
}
|
|
60
60
|
tr.setMeta(reactKeysPluginKey, meta);
|
|
@@ -13,13 +13,13 @@ import { WidgetView } from "./WidgetView.js";
|
|
|
13
13
|
import { MarkView } from "./marks/MarkView.js";
|
|
14
14
|
import { NodeView } from "./nodes/NodeView.js";
|
|
15
15
|
export function wrapInDeco(reactNode, deco) {
|
|
16
|
-
const { nodeName
|
|
16
|
+
const { nodeName, ...attrs } = deco.type.attrs;
|
|
17
17
|
const props = htmlAttrsToReactProps(attrs);
|
|
18
18
|
// We auto-wrap text nodes in spans so that we can apply attributes
|
|
19
19
|
// and styles, but we want to avoid double-wrapping the same
|
|
20
20
|
// text node
|
|
21
21
|
if (nodeName || typeof reactNode === "string") {
|
|
22
|
-
return /*#__PURE__*/ createElement(nodeName
|
|
22
|
+
return /*#__PURE__*/ createElement(nodeName ?? "span", props, reactNode);
|
|
23
23
|
}
|
|
24
24
|
return /*#__PURE__*/ cloneElement(reactNode, mergeReactProps(reactNode.props, props));
|
|
25
25
|
}
|
|
@@ -27,8 +27,8 @@ function areChildrenEqual(a, b) {
|
|
|
27
27
|
return a.type === b.type && a.marks.every((mark)=>mark.isInSet(b.marks)) && b.marks.every((mark)=>mark.isInSet(a.marks)) && a.key === b.key && (a.type !== "node" || b.type !== "node" || a.node.eq(b.node) && sameOuterDeco(a.outerDeco, b.outerDeco) && a.innerDeco.eq(b.innerDeco)) && a.widget === b.widget;
|
|
28
28
|
}
|
|
29
29
|
const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
|
|
30
|
-
let { child
|
|
31
|
-
const { view
|
|
30
|
+
let { child, getInnerPos } = param;
|
|
31
|
+
const { view } = useContext(EditorContext);
|
|
32
32
|
const childRef = useRef(child);
|
|
33
33
|
childRef.current = child;
|
|
34
34
|
const getPos = useCallback(()=>{
|
|
@@ -49,9 +49,9 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
|
|
|
49
49
|
getPos: getPos
|
|
50
50
|
}) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Consumer, {
|
|
51
51
|
key: child.key
|
|
52
|
-
}, (param)
|
|
53
|
-
let { siblingsRef
|
|
54
|
-
return React.createElement(TextNodeView, {
|
|
52
|
+
}, (param)=>{
|
|
53
|
+
let { siblingsRef, parentRef } = param;
|
|
54
|
+
return /*#__PURE__*/ React.createElement(TextNodeView, {
|
|
55
55
|
view: view,
|
|
56
56
|
node: child.node,
|
|
57
57
|
getPos: getPos,
|
|
@@ -68,7 +68,7 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
|
|
|
68
68
|
});
|
|
69
69
|
});
|
|
70
70
|
const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
|
|
71
|
-
let { childViews
|
|
71
|
+
let { childViews, getInnerPos } = param;
|
|
72
72
|
const firstChild = childViews[0];
|
|
73
73
|
const firstChildRef = useRef(firstChild);
|
|
74
74
|
firstChildRef.current = firstChild;
|
|
@@ -102,11 +102,9 @@ const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
|
|
|
102
102
|
}));
|
|
103
103
|
});
|
|
104
104
|
const InlineView = /*#__PURE__*/ memo(function InlineView(param) {
|
|
105
|
-
let { getInnerPos
|
|
105
|
+
let { getInnerPos, childViews } = param;
|
|
106
106
|
// const editorState = useEditorState();
|
|
107
107
|
const partitioned = childViews.reduce((acc, child)=>{
|
|
108
|
-
var // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
109
|
-
ref;
|
|
110
108
|
const lastPartition = acc[acc.length - 1];
|
|
111
109
|
if (!lastPartition) {
|
|
112
110
|
return [
|
|
@@ -124,7 +122,8 @@ const InlineView = /*#__PURE__*/ memo(function InlineView(param) {
|
|
|
124
122
|
]
|
|
125
123
|
];
|
|
126
124
|
}
|
|
127
|
-
if (!child.marks.length && !lastChild.marks.length || child.marks.length && lastChild.marks.length &&
|
|
125
|
+
if (!child.marks.length && !lastChild.marks.length || child.marks.length && lastChild.marks.length && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
126
|
+
child.marks[0]?.eq(lastChild.marks[0])) {
|
|
128
127
|
return [
|
|
129
128
|
...acc.slice(0, acc.length - 1),
|
|
130
129
|
[
|
|
@@ -152,22 +151,22 @@ const InlineView = /*#__PURE__*/ memo(function InlineView(param) {
|
|
|
152
151
|
});
|
|
153
152
|
function createKey(innerPos, offset, index, type, posToKey, widget) {
|
|
154
153
|
const pos = innerPos + offset;
|
|
155
|
-
const key = posToKey
|
|
154
|
+
const key = posToKey?.get(pos);
|
|
156
155
|
if (type === "widget" || type === "native-widget") {
|
|
157
156
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
158
157
|
if (widget.type.spec.key) // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
159
158
|
return widget.type.spec.key;
|
|
160
159
|
if (type === "widget") {
|
|
161
160
|
// eslint-disable-next-line no-console
|
|
162
|
-
console.warn(
|
|
161
|
+
console.warn(`Widget at position ${pos} doesn't have a key specified. React ProseMirror will generate a key partially based on this widget’s index into its parent’s children. This can cause issues if there are multiple adjacent widgets.`);
|
|
163
162
|
}
|
|
164
|
-
return
|
|
163
|
+
return `${key}-${index}`;
|
|
165
164
|
}
|
|
166
165
|
if (key) return key;
|
|
167
166
|
// if (!doc) return pos;
|
|
168
167
|
const parentPos = innerPos - 1;
|
|
169
|
-
const parentKey = posToKey
|
|
170
|
-
if (parentKey) return
|
|
168
|
+
const parentKey = posToKey?.get(parentPos);
|
|
169
|
+
if (parentKey) return `${parentKey}-${offset}`;
|
|
171
170
|
return pos;
|
|
172
171
|
}
|
|
173
172
|
function adjustWidgetMarksForward(lastNodeChild, widgetChild) {
|
|
@@ -186,14 +185,16 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
|
|
|
186
185
|
const child = widgetChildren[i];
|
|
187
186
|
if (// Using internal Decoration property, "type"
|
|
188
187
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
189
|
-
child.widget.type.side < 0
|
|
188
|
+
child.widget.type.side < 0 || // Using internal Decoration property, "type"
|
|
189
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
190
|
+
child.widget.type.spec.marks) {
|
|
190
191
|
continue;
|
|
191
192
|
}
|
|
192
193
|
child.marks = child.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);
|
|
193
194
|
}
|
|
194
195
|
}
|
|
195
196
|
const ChildElement = /*#__PURE__*/ memo(function ChildElement(param) {
|
|
196
|
-
let { child
|
|
197
|
+
let { child, getInnerPos } = param;
|
|
197
198
|
const childRef = useRef(child);
|
|
198
199
|
childRef.current = child;
|
|
199
200
|
const getPos = useCallback(()=>{
|
|
@@ -244,7 +245,7 @@ function createChildElements(children, getInnerPos) {
|
|
|
244
245
|
});
|
|
245
246
|
}
|
|
246
247
|
export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param) {
|
|
247
|
-
let { getPos
|
|
248
|
+
let { getPos, node, innerDecorations } = param;
|
|
248
249
|
const reactKeys = useReactKeys();
|
|
249
250
|
const getInnerPos = useCallback(()=>getPos() + 1, [
|
|
250
251
|
getPos
|
|
@@ -255,12 +256,11 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
|
|
|
255
256
|
let widgetChildren = [];
|
|
256
257
|
let lastNodeChild = null;
|
|
257
258
|
iterDeco(node, innerDecorations, (widget, isNative, offset, index)=>{
|
|
258
|
-
var _marks;
|
|
259
259
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
260
|
-
const widgetMarks =
|
|
260
|
+
const widgetMarks = widget.type.spec.marks ?? [];
|
|
261
261
|
let key;
|
|
262
262
|
if (isNative) {
|
|
263
|
-
key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys
|
|
263
|
+
key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys?.posToKey, widget);
|
|
264
264
|
const child = {
|
|
265
265
|
type: "native-widget",
|
|
266
266
|
widget,
|
|
@@ -277,8 +277,8 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
|
|
|
277
277
|
}
|
|
278
278
|
keysSeen.set(key, keysSeen.size);
|
|
279
279
|
} else {
|
|
280
|
-
key = createKey(getInnerPos(), offset, index, "widget", reactKeys
|
|
281
|
-
const
|
|
280
|
+
key = createKey(getInnerPos(), offset, index, "widget", reactKeys?.posToKey, widget);
|
|
281
|
+
const child = {
|
|
282
282
|
type: "widget",
|
|
283
283
|
widget: widget,
|
|
284
284
|
marks: widgetMarks,
|
|
@@ -286,19 +286,19 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
|
|
|
286
286
|
index,
|
|
287
287
|
key
|
|
288
288
|
};
|
|
289
|
-
const
|
|
290
|
-
if (
|
|
291
|
-
|
|
289
|
+
const prevChild = childMap.get(key);
|
|
290
|
+
if (prevChild && areChildrenEqual(prevChild, child)) {
|
|
291
|
+
prevChild.offset = offset;
|
|
292
292
|
} else {
|
|
293
|
-
childMap.set(key,
|
|
293
|
+
childMap.set(key, child);
|
|
294
294
|
}
|
|
295
295
|
keysSeen.set(key, keysSeen.size);
|
|
296
296
|
}
|
|
297
|
-
const
|
|
298
|
-
widgetChildren.push(
|
|
297
|
+
const child = childMap.get(key);
|
|
298
|
+
widgetChildren.push(child);
|
|
299
299
|
adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
|
|
300
300
|
}, (childNode, outerDeco, innerDeco, offset, index)=>{
|
|
301
|
-
const key = createKey(getInnerPos(), offset, index, "node", reactKeys
|
|
301
|
+
const key = createKey(getInnerPos(), offset, index, "node", reactKeys?.posToKey);
|
|
302
302
|
const child = {
|
|
303
303
|
type: "node",
|
|
304
304
|
node: childNode,
|
|
@@ -335,20 +335,19 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
|
|
|
335
335
|
if (!lastChild || lastChild.type !== "node" || lastChild.node.isInline && !lastChild.node.isText || // RegExp.test actually handles undefined just fine
|
|
336
336
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
337
337
|
/\n$/.test(lastChild.node.text)) {
|
|
338
|
-
var ref, ref1, ref2, ref3;
|
|
339
338
|
children.push({
|
|
340
339
|
type: "hack",
|
|
341
340
|
component: SeparatorHackView,
|
|
342
341
|
marks: [],
|
|
343
|
-
offset:
|
|
344
|
-
index: (
|
|
342
|
+
offset: lastChild?.offset ?? 0,
|
|
343
|
+
index: (lastChild?.index ?? 0) + 2,
|
|
345
344
|
key: "trailing-hack-img"
|
|
346
345
|
}, {
|
|
347
346
|
type: "hack",
|
|
348
347
|
component: TrailingHackView,
|
|
349
348
|
marks: [],
|
|
350
|
-
offset:
|
|
351
|
-
index: (
|
|
349
|
+
offset: lastChild?.offset ?? 0,
|
|
350
|
+
index: (lastChild?.index ?? 0) + 1,
|
|
352
351
|
key: "trailing-hack-br"
|
|
353
352
|
});
|
|
354
353
|
}
|
|
@@ -1,23 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
_extends = Object.assign || function(target) {
|
|
3
|
-
for(var i = 1; i < arguments.length; i++){
|
|
4
|
-
var source = arguments[i];
|
|
5
|
-
for(var key in source){
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
-
target[key] = source[key];
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
return target;
|
|
12
|
-
};
|
|
13
|
-
return _extends.apply(this, arguments);
|
|
14
|
-
}
|
|
15
|
-
import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
|
|
1
|
+
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
|
16
2
|
import { domIndex } from "../dom.js";
|
|
17
3
|
import { useEditorEffect } from "../hooks/useEditorEffect.js";
|
|
18
4
|
export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
|
|
19
|
-
let { widget
|
|
20
|
-
const [shouldRender, setShouldRender] = useState(true);
|
|
5
|
+
let { widget, getPos, ...props } = param;
|
|
21
6
|
const innerRef = useRef(null);
|
|
22
7
|
useImperativeHandle(ref, ()=>{
|
|
23
8
|
return innerRef.current;
|
|
@@ -28,26 +13,23 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
|
|
|
28
13
|
view.domObserver.disconnectSelection();
|
|
29
14
|
// @ts-expect-error Internal property - domSelection
|
|
30
15
|
const domSel = view.domSelection();
|
|
31
|
-
const range = document.createRange();
|
|
32
16
|
const node = innerRef.current;
|
|
33
17
|
const img = node.nodeName == "IMG";
|
|
34
|
-
if (img
|
|
35
|
-
|
|
18
|
+
if (img) {
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
20
|
+
domSel.collapse(node.parentNode, domIndex(node) + 1);
|
|
36
21
|
} else {
|
|
37
|
-
|
|
22
|
+
domSel.collapse(node, 0);
|
|
38
23
|
}
|
|
39
|
-
range.collapse(false);
|
|
40
|
-
domSel.removeAllRanges();
|
|
41
|
-
domSel.addRange(range);
|
|
42
|
-
setShouldRender(false);
|
|
43
24
|
// @ts-expect-error Internal property - domObserver
|
|
44
25
|
view.domObserver.connectSelection();
|
|
45
26
|
}, []);
|
|
46
|
-
return
|
|
27
|
+
return /*#__PURE__*/ React.createElement("img", {
|
|
47
28
|
ref: innerRef,
|
|
48
29
|
className: "ProseMirror-separator",
|
|
49
30
|
// eslint-disable-next-line react/no-unknown-property
|
|
50
31
|
"mark-placeholder": "true",
|
|
51
|
-
alt: ""
|
|
52
|
-
|
|
32
|
+
alt: "",
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
53
35
|
});
|
|
@@ -9,7 +9,7 @@ import { useForceUpdate } from "../hooks/useForceUpdate.js";
|
|
|
9
9
|
* effects that run after all descendants within the group have processed their
|
|
10
10
|
* regular layout effects.
|
|
11
11
|
*/ export function LayoutGroup(param) {
|
|
12
|
-
let { children
|
|
12
|
+
let { children } = param;
|
|
13
13
|
const createQueue = useRef(new Set()).current;
|
|
14
14
|
const destroyQueue = useRef(new Set()).current;
|
|
15
15
|
const isMounted = useRef(false);
|
|
@@ -4,8 +4,8 @@ import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
|
|
|
4
4
|
import { useEditorEffect } from "../hooks/useEditorEffect.js";
|
|
5
5
|
import { WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
|
|
6
6
|
export function NativeWidgetView(param) {
|
|
7
|
-
let { widget
|
|
8
|
-
const { siblingsRef
|
|
7
|
+
let { widget, getPos } = param;
|
|
8
|
+
const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
|
|
9
9
|
const viewDescRef = useRef(null);
|
|
10
10
|
const rootDomRef = useRef(null);
|
|
11
11
|
useClientLayoutEffect(()=>{
|
|
@@ -22,7 +22,7 @@ import { useMergedDOMRefs } from "../refs.js";
|
|
|
22
22
|
return false;
|
|
23
23
|
}
|
|
24
24
|
const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function OutputSpec(param, ref) {
|
|
25
|
-
let { outputSpec
|
|
25
|
+
let { outputSpec, isMark, contentDOMRef, children, ...propOverrides } = param;
|
|
26
26
|
const mergedRef = useMergedDOMRefs(ref, contentDOMRef);
|
|
27
27
|
if (typeof outputSpec === "string") {
|
|
28
28
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, outputSpec);
|
|
@@ -1,17 +1,3 @@
|
|
|
1
|
-
function _extends() {
|
|
2
|
-
_extends = Object.assign || function(target) {
|
|
3
|
-
for(var i = 1; i < arguments.length; i++){
|
|
4
|
-
var source = arguments[i];
|
|
5
|
-
for(var key in source){
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
-
target[key] = source[key];
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
return target;
|
|
12
|
-
};
|
|
13
|
-
return _extends.apply(this, arguments);
|
|
14
|
-
}
|
|
15
1
|
import React, { useMemo, useState } from "react";
|
|
16
2
|
import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
|
|
17
3
|
import { EditorContext } from "../contexts/EditorContext.js";
|
|
@@ -34,9 +20,9 @@ const rootChildDescriptionsContextValue = {
|
|
|
34
20
|
}
|
|
35
21
|
};
|
|
36
22
|
function ProseMirrorInner(param) {
|
|
37
|
-
let { children
|
|
23
|
+
let { children, nodeViewComponents, markViewComponents, ...props } = param;
|
|
38
24
|
const [mount, setMount] = useState(null);
|
|
39
|
-
const { editor , state
|
|
25
|
+
const { editor, cursorWrapper, state } = useEditor(mount, props);
|
|
40
26
|
const nodeViewConstructors = editor.view.nodeViews;
|
|
41
27
|
const nodeViewContextValue = useMemo(()=>{
|
|
42
28
|
return {
|
|
@@ -53,7 +39,7 @@ function ProseMirrorInner(param) {
|
|
|
53
39
|
]);
|
|
54
40
|
const node = state.doc;
|
|
55
41
|
const decorations = computeDocDeco(editor.view);
|
|
56
|
-
const innerDecorations = viewDecorations(editor.view,
|
|
42
|
+
const innerDecorations = viewDecorations(editor.view, cursorWrapper);
|
|
57
43
|
const docNodeViewContextValue = useMemo(()=>({
|
|
58
44
|
setMount,
|
|
59
45
|
node,
|
|
@@ -78,5 +64,5 @@ function ProseMirrorInner(param) {
|
|
|
78
64
|
}, children)))));
|
|
79
65
|
}
|
|
80
66
|
export function ProseMirror(props) {
|
|
81
|
-
return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner,
|
|
67
|
+
return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props));
|
|
82
68
|
}
|
|
@@ -1,26 +1,13 @@
|
|
|
1
|
-
function _extends() {
|
|
2
|
-
_extends = Object.assign || function(target) {
|
|
3
|
-
for(var i = 1; i < arguments.length; i++){
|
|
4
|
-
var source = arguments[i];
|
|
5
|
-
for(var key in source){
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7
|
-
target[key] = source[key];
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
return target;
|
|
12
|
-
};
|
|
13
|
-
return _extends.apply(this, arguments);
|
|
14
|
-
}
|
|
15
1
|
import React, { createContext, forwardRef, useContext } from "react";
|
|
16
2
|
import { DocNodeView } from "./nodes/DocNodeView.js";
|
|
17
3
|
export const DocNodeViewContext = /*#__PURE__*/ createContext(null);
|
|
18
4
|
export const ProseMirrorDoc = /*#__PURE__*/ forwardRef(function ProseMirrorDoc(param, ref) {
|
|
19
|
-
let { as
|
|
5
|
+
let { as, ...props } = param;
|
|
20
6
|
const docProps = useContext(DocNodeViewContext);
|
|
21
|
-
return /*#__PURE__*/ React.createElement(DocNodeView,
|
|
22
|
-
ref: ref
|
|
23
|
-
|
|
7
|
+
return /*#__PURE__*/ React.createElement(DocNodeView, {
|
|
8
|
+
ref: ref,
|
|
9
|
+
...props,
|
|
10
|
+
...docProps,
|
|
24
11
|
as: as
|
|
25
|
-
})
|
|
12
|
+
});
|
|
26
13
|
});
|
|
@@ -4,8 +4,8 @@ import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.j
|
|
|
4
4
|
import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
|
|
5
5
|
import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
|
|
6
6
|
export function SeparatorHackView(param) {
|
|
7
|
-
let { getPos
|
|
8
|
-
const { siblingsRef
|
|
7
|
+
let { getPos } = param;
|
|
8
|
+
const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
|
|
9
9
|
const viewDescRef = useRef(null);
|
|
10
10
|
const ref = useRef(null);
|
|
11
11
|
const [shouldRender, setShouldRender] = useState(false);
|
|
@@ -25,10 +25,9 @@ export function SeparatorHackView(param) {
|
|
|
25
25
|
// we call setShouldRender conditionally
|
|
26
26
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27
27
|
useClientLayoutEffect(()=>{
|
|
28
|
-
var ref1;
|
|
29
28
|
const nonHackSiblings = siblingsRef.current.filter((viewdesc)=>!(viewdesc instanceof TrailingHackViewDesc));
|
|
30
29
|
const lastSibling = nonHackSiblings[nonHackSiblings.length - 1];
|
|
31
|
-
if ((browser.safari || browser.chrome) &&
|
|
30
|
+
if ((browser.safari || browser.chrome) && lastSibling?.dom?.contentEditable == "false") {
|
|
32
31
|
setShouldRender(true);
|
|
33
32
|
return;
|
|
34
33
|
}
|