@handlewithcare/react-prosemirror 3.1.0-tiptap.41 → 3.1.0-tiptap.42
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 +70 -74
- package/dist/cjs/StaticEditorView.js +18 -21
- package/dist/cjs/browser.js +1 -3
- package/dist/cjs/commands/reorderSiblings.js +9 -13
- package/dist/cjs/components/ChildNodeViews.js +68 -71
- package/dist/cjs/components/CursorWrapper.js +26 -17
- package/dist/cjs/components/LayoutGroup.js +12 -16
- package/dist/cjs/components/NativeWidgetView.js +15 -19
- package/dist/cjs/components/OutputSpec.js +9 -13
- package/dist/cjs/components/ProseMirror.js +37 -27
- package/dist/cjs/components/ProseMirrorDoc.js +25 -18
- package/dist/cjs/components/SeparatorHackView.js +17 -20
- package/dist/cjs/components/TextNodeView.js +22 -20
- package/dist/cjs/components/TrailingHackView.js +13 -17
- package/dist/cjs/components/WidgetView.js +14 -18
- package/dist/cjs/components/marks/DefaultMarkView.js +27 -15
- package/dist/cjs/components/marks/MarkView.js +32 -23
- package/dist/cjs/components/marks/MarkViewConstructorView.js +38 -22
- package/dist/cjs/components/marks/ReactMarkView.js +27 -16
- package/dist/cjs/components/nodes/DefaultNodeView.js +27 -15
- package/dist/cjs/components/nodes/DocNodeView.js +12 -16
- package/dist/cjs/components/nodes/NodeView.js +33 -26
- package/dist/cjs/components/nodes/NodeViewConstructorView.js +45 -29
- package/dist/cjs/components/nodes/ReactNodeView.js +39 -27
- package/dist/cjs/constants.js +6 -10
- package/dist/cjs/contexts/ChildDescriptionsContext.js +1 -3
- package/dist/cjs/contexts/EditorContext.js +1 -3
- package/dist/cjs/contexts/EditorStateContext.js +1 -3
- package/dist/cjs/contexts/IgnoreMutationContext.js +1 -3
- package/dist/cjs/contexts/LayoutGroupContext.js +1 -3
- package/dist/cjs/contexts/NodeViewContext.js +1 -3
- package/dist/cjs/contexts/SelectNodeContext.js +1 -3
- package/dist/cjs/contexts/StopEventContext.js +1 -3
- package/dist/cjs/decorations/ReactWidgetType.js +13 -19
- package/dist/cjs/decorations/computeDocDeco.js +3 -5
- package/dist/cjs/decorations/iterDeco.js +17 -19
- package/dist/cjs/decorations/viewDecorations.js +12 -15
- package/dist/cjs/dom.js +13 -34
- package/dist/cjs/findDOMNode.js +5 -9
- package/dist/cjs/hooks/useClientLayoutEffect.js +1 -3
- package/dist/cjs/hooks/useComponentEventListeners.js +6 -7
- package/dist/cjs/hooks/useEditor.js +30 -28
- package/dist/cjs/hooks/useEditorEffect.js +7 -9
- package/dist/cjs/hooks/useEditorEventCallback.js +7 -9
- package/dist/cjs/hooks/useEditorEventListener.js +6 -8
- package/dist/cjs/hooks/useEditorState.js +3 -5
- package/dist/cjs/hooks/useEffectEvent.js +1 -3
- package/dist/cjs/hooks/useForceUpdate.js +1 -3
- package/dist/cjs/hooks/useIgnoreMutation.js +7 -9
- package/dist/cjs/hooks/useIsEditorStatic.js +5 -5
- package/dist/cjs/hooks/useIsNodeSelected.js +3 -5
- package/dist/cjs/hooks/useLayoutGroupEffect.js +5 -7
- package/dist/cjs/hooks/useMarkViewDescription.js +25 -24
- package/dist/cjs/hooks/useNodePos.js +5 -7
- package/dist/cjs/hooks/useNodeViewDescription.js +28 -29
- package/dist/cjs/hooks/useReactKeys.js +5 -7
- package/dist/cjs/hooks/useSelectNode.js +8 -10
- package/dist/cjs/hooks/useStopEvent.js +7 -9
- package/dist/cjs/index.js +34 -66
- package/dist/cjs/plugins/beforeInputPlugin.js +23 -20
- package/dist/cjs/plugins/componentEventListeners.js +6 -8
- package/dist/cjs/plugins/componentEventListenersPlugin.js +6 -8
- package/dist/cjs/plugins/reactKeys.js +10 -15
- package/dist/cjs/props.js +19 -23
- package/dist/cjs/refs.js +1 -3
- package/dist/cjs/testing/editorViewTestHelpers.js +47 -40
- package/dist/cjs/testing/setupProseMirrorView.js +4 -7
- package/dist/cjs/tiptap/ReactProseMirrorNodeView.js +6 -10
- package/dist/cjs/tiptap/TiptapEditor.js +14 -15
- package/dist/cjs/tiptap/TiptapEditorContent.js +28 -18
- package/dist/cjs/tiptap/TiptapEditorView.js +34 -23
- package/dist/cjs/tiptap/contexts/TiptapEditorContext.js +1 -3
- package/dist/cjs/tiptap/extensions/ReactProseMirror.js +6 -8
- package/dist/cjs/tiptap/extensions/ReactProseMirrorCommands.js +3 -5
- package/dist/cjs/tiptap/extensions/commands/updateAttributes.js +2 -4
- package/dist/cjs/tiptap/hooks/useIsInReactProseMirror.js +3 -5
- package/dist/cjs/tiptap/hooks/useTiptapEditor.js +14 -12
- package/dist/cjs/tiptap/hooks/useTiptapEditorEffect.js +10 -12
- package/dist/cjs/tiptap/hooks/useTiptapEditorEventCallback.js +4 -6
- package/dist/cjs/tiptap/index.js +18 -36
- package/dist/cjs/tiptap/tiptapNodeView.js +62 -48
- package/dist/cjs/viewdesc.js +95 -119
- package/dist/esm/ReactEditorView.js +66 -68
- package/dist/esm/StaticEditorView.js +17 -18
- package/dist/esm/commands/reorderSiblings.js +5 -5
- package/dist/esm/components/ChildNodeViews.js +36 -33
- package/dist/esm/components/CursorWrapper.js +18 -5
- 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 +17 -3
- package/dist/esm/components/ProseMirrorDoc.js +19 -6
- package/dist/esm/components/SeparatorHackView.js +4 -3
- package/dist/esm/components/TextNodeView.js +10 -6
- package/dist/esm/components/TrailingHackView.js +2 -2
- package/dist/esm/components/WidgetView.js +3 -3
- package/dist/esm/components/marks/DefaultMarkView.js +22 -6
- package/dist/esm/components/marks/MarkView.js +24 -11
- package/dist/esm/components/marks/MarkViewConstructorView.js +27 -7
- package/dist/esm/components/marks/ReactMarkView.js +18 -3
- package/dist/esm/components/nodes/DefaultNodeView.js +22 -6
- package/dist/esm/components/nodes/DocNodeView.js +2 -2
- package/dist/esm/components/nodes/NodeView.js +24 -11
- package/dist/esm/components/nodes/NodeViewConstructorView.js +31 -11
- package/dist/esm/components/nodes/ReactNodeView.js +22 -6
- package/dist/esm/decorations/ReactWidgetType.js +8 -10
- package/dist/esm/decorations/iterDeco.js +13 -13
- package/dist/esm/decorations/viewDecorations.js +6 -7
- package/dist/esm/dom.js +2 -1
- package/dist/esm/findDOMNode.js +1 -1
- package/dist/esm/hooks/useComponentEventListeners.js +3 -2
- package/dist/esm/hooks/useEditor.js +9 -5
- 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 +3 -1
- package/dist/esm/hooks/useMarkViewDescription.js +10 -7
- package/dist/esm/hooks/useNodeViewDescription.js +8 -7
- package/dist/esm/hooks/useReactKeys.js +1 -1
- package/dist/esm/plugins/beforeInputPlugin.js +17 -12
- package/dist/esm/plugins/reactKeys.js +4 -3
- package/dist/esm/props.js +15 -15
- package/dist/esm/testing/editorViewTestHelpers.js +31 -20
- package/dist/esm/testing/setupProseMirrorView.js +2 -1
- package/dist/esm/tiptap/ReactProseMirrorNodeView.js +5 -7
- package/dist/esm/tiptap/TiptapEditor.js +10 -9
- package/dist/esm/tiptap/TiptapEditorContent.js +18 -4
- package/dist/esm/tiptap/TiptapEditorView.js +23 -8
- 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 +8 -4
- package/dist/esm/tiptap/hooks/useTiptapEditorEffect.js +4 -4
- package/dist/esm/tiptap/hooks/useTiptapEditorEventCallback.js +1 -1
- package/dist/esm/tiptap/tiptapNodeView.js +38 -20
- package/dist/esm/viewdesc.js +72 -74
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/constants.d.ts +1 -1
- package/dist/types/props.d.ts +8 -8
- package/dist/types/viewdesc.d.ts +3 -1
- package/package.json +2 -1
|
@@ -1,3 +1,17 @@
|
|
|
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
|
+
}
|
|
1
15
|
import { EditorContext } from "@tiptap/react";
|
|
2
16
|
import cx from "classnames";
|
|
3
17
|
import React, { useCallback, useMemo, useState } from "react";
|
|
@@ -7,9 +21,10 @@ import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
|
|
|
7
21
|
/**
|
|
8
22
|
* Render a Tiptap-compatible React ProseMirror editor.
|
|
9
23
|
*/ export function TiptapEditorView(param) {
|
|
10
|
-
let { editor, nodeViewComponents, markViewComponents, children, static: isStatic = false
|
|
24
|
+
let { editor , nodeViewComponents , markViewComponents , children , static: isStatic = false } = param;
|
|
25
|
+
var ref;
|
|
11
26
|
const [isEditorInitialized, setIsEditorInitialized] = useState(editor.isInitialized);
|
|
12
|
-
const attributesProp = editor.options.editorProps
|
|
27
|
+
const attributesProp = (ref = editor.options.editorProps) === null || ref === void 0 ? void 0 : ref.attributes;
|
|
13
28
|
const [attributes, setAttributes] = useState(typeof attributesProp === "function" ? attributesProp(editor.state) : attributesProp);
|
|
14
29
|
const forceUpdate = useForceUpdate();
|
|
15
30
|
const dispatchTransaction = useCallback((tr)=>{
|
|
@@ -32,10 +47,10 @@ import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
|
|
|
32
47
|
attributes: {
|
|
33
48
|
role: "textbox",
|
|
34
49
|
...attributes,
|
|
35
|
-
class: cx(attributes
|
|
50
|
+
class: cx(attributes === null || attributes === void 0 ? void 0 : attributes.class, "tiptap")
|
|
36
51
|
}
|
|
37
52
|
};
|
|
38
|
-
const { nodeViews, markViews
|
|
53
|
+
const { nodeViews , markViews } = editor.isDestroyed ? {
|
|
39
54
|
nodeViews: undefined,
|
|
40
55
|
markViews: undefined
|
|
41
56
|
} : editor.view.props;
|
|
@@ -59,16 +74,16 @@ import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
|
|
|
59
74
|
onEditorDeinitialize,
|
|
60
75
|
onEditorInitialize
|
|
61
76
|
]);
|
|
62
|
-
return /*#__PURE__*/ React.createElement(ProseMirror, {
|
|
63
|
-
static: isStatic
|
|
64
|
-
|
|
77
|
+
return /*#__PURE__*/ React.createElement(ProseMirror, _extends({
|
|
78
|
+
static: isStatic
|
|
79
|
+
}, editorProps, {
|
|
65
80
|
markViewComponents: markViewComponents,
|
|
66
81
|
markViews: markViews,
|
|
67
82
|
nodeViewComponents: nodeViewComponents,
|
|
68
83
|
nodeViews: nodeViews,
|
|
69
84
|
state: editor.state,
|
|
70
85
|
dispatchTransaction: dispatchTransaction
|
|
71
|
-
}, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
|
|
86
|
+
}), /*#__PURE__*/ React.createElement(EditorContext.Provider, {
|
|
72
87
|
value: contextValue
|
|
73
88
|
}, /*#__PURE__*/ React.createElement(TiptapEditorContext.Provider, {
|
|
74
89
|
value: tiptapEditorContextValue
|
|
@@ -21,7 +21,7 @@ export const ReactProseMirror = Extension.create({
|
|
|
21
21
|
* and keep the other two in relative order, set `order` to `[1, 2, 0]`.
|
|
22
22
|
*/ reorderSiblings (initialPos, order) {
|
|
23
23
|
return function reorderSiblingsCommand(param) {
|
|
24
|
-
let { tr, state, dispatch
|
|
24
|
+
let { tr , state , dispatch } = param;
|
|
25
25
|
return reorderSiblingsOnTransaction(initialPos, order, tr, state, dispatch);
|
|
26
26
|
};
|
|
27
27
|
}
|
|
@@ -4,7 +4,7 @@ import { getMarkType, getNodeType, getSchemaTypeNameByName } from "@tiptap/core"
|
|
|
4
4
|
export const updateAttributes = function(typeOrName) {
|
|
5
5
|
let attributes = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
6
6
|
return (param)=>{
|
|
7
|
-
let { tr, state, dispatch
|
|
7
|
+
let { tr , state , dispatch } = param;
|
|
8
8
|
let nodeType = null;
|
|
9
9
|
let markType = null;
|
|
10
10
|
const schemaType = getSchemaTypeNameByName(typeof typeOrName === "string" ? typeOrName : typeOrName.name, state.schema);
|
|
@@ -1,15 +1,19 @@
|
|
|
1
|
+
var // @ts-expect-error private property
|
|
2
|
+
_editor;
|
|
1
3
|
import { useEditor } from "@tiptap/react";
|
|
2
4
|
import { StaticEditorView } from "../../StaticEditorView.js";
|
|
3
5
|
import { ReactProseMirror } from "../extensions/ReactProseMirror.js";
|
|
4
6
|
import { ReactProseMirrorCommands } from "../extensions/ReactProseMirrorCommands.js";
|
|
5
7
|
export function useTiptapEditor(options, deps) {
|
|
8
|
+
var ref;
|
|
9
|
+
var _extensions;
|
|
6
10
|
const extensions = [
|
|
7
11
|
ReactProseMirror,
|
|
8
|
-
...options.extensions
|
|
12
|
+
...(_extensions = options.extensions) !== null && _extensions !== void 0 ? _extensions : []
|
|
9
13
|
];
|
|
10
14
|
// If a consumer explicitly disables core extensions (or the Commands core extension)
|
|
11
15
|
// do not re-add our custom Commands
|
|
12
|
-
if (options.enableCoreExtensions === false || typeof options.enableCoreExtensions === "object" && options
|
|
16
|
+
if (options.enableCoreExtensions === false || typeof options.enableCoreExtensions === "object" && (options === null || options === void 0 ? void 0 : (ref = options.enableCoreExtensions) === null || ref === void 0 ? void 0 : ref.commands) === false) {
|
|
13
17
|
// Do nothing
|
|
14
18
|
} else {
|
|
15
19
|
options.enableCoreExtensions = {
|
|
@@ -23,8 +27,8 @@ export function useTiptapEditor(options, deps) {
|
|
|
23
27
|
extensions,
|
|
24
28
|
element: null
|
|
25
29
|
}, deps);
|
|
26
|
-
|
|
27
|
-
editor.editorView
|
|
30
|
+
var _editorView;
|
|
31
|
+
(_editorView = (_editor = editor).editorView) !== null && _editorView !== void 0 ? _editorView : _editor.editorView = new StaticEditorView({
|
|
28
32
|
// @ts-expect-error private property
|
|
29
33
|
state: editor.editorState,
|
|
30
34
|
...editor.options.editorProps,
|
|
@@ -22,11 +22,11 @@ import { TiptapEditorContext } from "../contexts/TiptapEditorContext.js";
|
|
|
22
22
|
* as a child of the TiptapEditorView component, including
|
|
23
23
|
* React node view components.
|
|
24
24
|
*/ export function useTiptapEditorEffect(effect, dependencies) {
|
|
25
|
-
const { view
|
|
26
|
-
const { editor
|
|
27
|
-
const { isEditorInitialized
|
|
25
|
+
const { view } = useContext(EditorContext);
|
|
26
|
+
const { editor } = useCurrentEditor();
|
|
27
|
+
const { isEditorInitialized } = useContext(TiptapEditorContext);
|
|
28
28
|
useEditorEffect(()=>{
|
|
29
|
-
if (editor
|
|
29
|
+
if ((editor === null || editor === void 0 ? void 0 : editor.view) instanceof ReactEditorView && view instanceof ReactEditorView && isEditorInitialized) {
|
|
30
30
|
return effect(editor);
|
|
31
31
|
}
|
|
32
32
|
// The rules of hooks want to be able to statically
|
|
@@ -17,7 +17,7 @@ function assertEditor(editor) {
|
|
|
17
17
|
* React node view components.
|
|
18
18
|
*/ export function useTiptapEditorEventCallback(callback) {
|
|
19
19
|
const ref = useRef(callback);
|
|
20
|
-
const { editor
|
|
20
|
+
const { editor } = useCurrentEditor();
|
|
21
21
|
useEditorEffect(()=>{
|
|
22
22
|
ref.current = callback;
|
|
23
23
|
}, [
|
|
@@ -1,3 +1,17 @@
|
|
|
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
|
+
}
|
|
1
15
|
import { getAttributesFromExtensions, getRenderedAttributes } from "@tiptap/core";
|
|
2
16
|
import { ReactNodeViewContext, useCurrentEditor } from "@tiptap/react";
|
|
3
17
|
import cx from "classnames";
|
|
@@ -35,14 +49,16 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
35
49
|
* }
|
|
36
50
|
* ```
|
|
37
51
|
*/ export function tiptapNodeView(param) {
|
|
38
|
-
let { component: WrappedComponent, extension, as, className =
|
|
52
|
+
let { component: WrappedComponent , extension , as , className ="" , attrs , contentDOMElementTag: InnerTag = "div" , stopEvent , ignoreMutation } = param;
|
|
39
53
|
const TiptapNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function TiptapNodeView(param, ref) {
|
|
40
|
-
let { children, nodeProps, ...props } = param;
|
|
41
|
-
const { node, getPos, decorations, innerDecorations, contentDOMRef
|
|
42
|
-
const OuterTag = as
|
|
43
|
-
const { editor
|
|
44
|
-
|
|
45
|
-
const
|
|
54
|
+
let { children , nodeProps , ...props } = param;
|
|
55
|
+
const { node , getPos , decorations , innerDecorations , contentDOMRef } = nodeProps;
|
|
56
|
+
const OuterTag = as !== null && as !== void 0 ? as : node.type.isInline ? "span" : "div";
|
|
57
|
+
const { editor } = useCurrentEditor();
|
|
58
|
+
var ref1;
|
|
59
|
+
const extensionManager = (ref1 = editor === null || editor === void 0 ? void 0 : editor.extensionManager) !== null && ref1 !== void 0 ? ref1 : null;
|
|
60
|
+
var ref2;
|
|
61
|
+
const extensions = (ref2 = extensionManager === null || extensionManager === void 0 ? void 0 : extensionManager.extensions) !== null && ref2 !== void 0 ? ref2 : null;
|
|
46
62
|
const selected = useIsNodeSelected();
|
|
47
63
|
const isDraggingRef = useRef(false);
|
|
48
64
|
const htmlAttributes = useMemo(()=>{
|
|
@@ -79,9 +95,10 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
79
95
|
isDraggingRef.current = nodeView.isDragging;
|
|
80
96
|
return result;
|
|
81
97
|
}
|
|
82
|
-
|
|
98
|
+
var ref;
|
|
99
|
+
const result1 = (ref = nodeView.stopEvent(event)) !== null && ref !== void 0 ? ref : false;
|
|
83
100
|
isDraggingRef.current = nodeView.isDragging;
|
|
84
|
-
return
|
|
101
|
+
return result1;
|
|
85
102
|
});
|
|
86
103
|
useIgnoreMutation(function(_, mutation) {
|
|
87
104
|
if (ignoreMutation) {
|
|
@@ -104,15 +121,16 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
104
121
|
node,
|
|
105
122
|
view: editor.view
|
|
106
123
|
}, this.dom, this.contentDOM);
|
|
107
|
-
|
|
124
|
+
var ref;
|
|
125
|
+
return (ref = nodeView.ignoreMutation(mutation)) !== null && ref !== void 0 ? ref : false;
|
|
108
126
|
});
|
|
109
|
-
const { extraClassName, htmlProps
|
|
127
|
+
const { extraClassName , htmlProps } = useMemo(()=>{
|
|
110
128
|
if (!attrs) return {};
|
|
111
129
|
const resolvedAttrs = typeof attrs === "function" ? attrs({
|
|
112
130
|
node,
|
|
113
131
|
HTMLAttributes: htmlAttributes
|
|
114
132
|
}) : attrs;
|
|
115
|
-
const { className: extraClassName, ...htmlProps } = htmlAttrsToReactProps(resolvedAttrs);
|
|
133
|
+
const { className: extraClassName , ...htmlProps } = htmlAttrsToReactProps(resolvedAttrs);
|
|
116
134
|
return {
|
|
117
135
|
extraClassName,
|
|
118
136
|
htmlProps
|
|
@@ -121,7 +139,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
121
139
|
htmlAttributes,
|
|
122
140
|
node
|
|
123
141
|
]);
|
|
124
|
-
const finalClassName = cx("react-renderer",
|
|
142
|
+
const finalClassName = cx("react-renderer", "node-".concat(node.type.name), props.className, className, extraClassName, {
|
|
125
143
|
"ProseMirror-selectednode": selected
|
|
126
144
|
});
|
|
127
145
|
const updateAttributes = useEditorEventCallback((_, attributes)=>{
|
|
@@ -129,7 +147,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
129
147
|
return;
|
|
130
148
|
}
|
|
131
149
|
editor.commands.command((param)=>{
|
|
132
|
-
let { tr
|
|
150
|
+
let { tr } = param;
|
|
133
151
|
const pos = getPos();
|
|
134
152
|
tr.setNodeMarkup(pos, undefined, {
|
|
135
153
|
...node.attrs,
|
|
@@ -189,12 +207,11 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
189
207
|
if (!editor) return null;
|
|
190
208
|
return /*#__PURE__*/ React.createElement(ReactNodeViewContext.Provider, {
|
|
191
209
|
value: nodeViewContext
|
|
192
|
-
}, /*#__PURE__*/ React.createElement(OuterTag, {
|
|
193
|
-
ref: finalRef
|
|
194
|
-
|
|
195
|
-
...htmlProps,
|
|
210
|
+
}, /*#__PURE__*/ React.createElement(OuterTag, _extends({
|
|
211
|
+
ref: finalRef
|
|
212
|
+
}, props, htmlProps, {
|
|
196
213
|
className: finalClassName
|
|
197
|
-
}, /*#__PURE__*/ React.createElement(WrappedComponent, {
|
|
214
|
+
}), /*#__PURE__*/ React.createElement(WrappedComponent, {
|
|
198
215
|
node: node,
|
|
199
216
|
getPos: getPos,
|
|
200
217
|
view: editor.view,
|
|
@@ -208,6 +225,7 @@ import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallba
|
|
|
208
225
|
deleteNode: deleteNode
|
|
209
226
|
})));
|
|
210
227
|
}));
|
|
211
|
-
|
|
228
|
+
var _displayName;
|
|
229
|
+
TiptapNodeView.displayName = "TiptapNodeView(".concat((_displayName = WrappedComponent.displayName) !== null && _displayName !== void 0 ? _displayName : "Anonymous", ")");
|
|
212
230
|
return TiptapNodeView;
|
|
213
231
|
}
|
package/dist/esm/viewdesc.js
CHANGED
|
@@ -22,26 +22,6 @@ const NOT_DIRTY = 0, CHILD_DIRTY = 1, CONTENT_DIRTY = 2, NODE_DIRTY = 3;
|
|
|
22
22
|
// Superclass for the various kinds of descriptions. Defines their
|
|
23
23
|
// basic structure and shared methods.
|
|
24
24
|
export class ViewDesc {
|
|
25
|
-
parent;
|
|
26
|
-
children;
|
|
27
|
-
getPos;
|
|
28
|
-
dom;
|
|
29
|
-
contentDOM;
|
|
30
|
-
dirty;
|
|
31
|
-
node;
|
|
32
|
-
constructor(parent, children, getPos, dom, // This is the node that holds the child views. It may be null for
|
|
33
|
-
// descs that don't have children.
|
|
34
|
-
contentDOM){
|
|
35
|
-
this.parent = parent;
|
|
36
|
-
this.children = children;
|
|
37
|
-
this.getPos = getPos;
|
|
38
|
-
this.dom = dom;
|
|
39
|
-
this.contentDOM = contentDOM;
|
|
40
|
-
this.dirty = NOT_DIRTY;
|
|
41
|
-
// An expando property on the DOM node provides a link back to its
|
|
42
|
-
// description.
|
|
43
|
-
dom.pmViewDesc = this;
|
|
44
|
-
}
|
|
45
25
|
// Used to check whether a given description corresponds to a
|
|
46
26
|
// widget/mark/node.
|
|
47
27
|
matchesWidget(_widget) {
|
|
@@ -121,15 +101,15 @@ export class ViewDesc {
|
|
|
121
101
|
while(domBefore && !((desc = domBefore.pmViewDesc) && desc.parent == this))domBefore = domBefore.previousSibling;
|
|
122
102
|
return domBefore ? this.posBeforeChild(desc) + desc.size : this.posAtStart;
|
|
123
103
|
} else {
|
|
124
|
-
let domAfter,
|
|
104
|
+
let domAfter, desc1;
|
|
125
105
|
if (dom == this.contentDOM) {
|
|
126
106
|
domAfter = dom.childNodes[offset];
|
|
127
107
|
} else {
|
|
128
108
|
while(dom.parentNode != this.contentDOM)dom = dom.parentNode;
|
|
129
109
|
domAfter = dom.nextSibling;
|
|
130
110
|
}
|
|
131
|
-
while(domAfter && !((
|
|
132
|
-
return domAfter ? this.posBeforeChild(
|
|
111
|
+
while(domAfter && !((desc1 = domAfter.pmViewDesc) && desc1.parent == this))domAfter = domAfter.nextSibling;
|
|
112
|
+
return domAfter ? this.posBeforeChild(desc1) : this.posAtEnd;
|
|
133
113
|
}
|
|
134
114
|
}
|
|
135
115
|
// Otherwise, use various heuristics, falling back on the bias
|
|
@@ -148,12 +128,12 @@ export class ViewDesc {
|
|
|
148
128
|
}
|
|
149
129
|
if (search.previousSibling) break;
|
|
150
130
|
}
|
|
151
|
-
if (atEnd == null && offset == dom.childNodes.length) for(let
|
|
152
|
-
if (
|
|
131
|
+
if (atEnd == null && offset == dom.childNodes.length) for(let search1 = dom;; search1 = search1.parentNode){
|
|
132
|
+
if (search1 == this.dom) {
|
|
153
133
|
atEnd = true;
|
|
154
134
|
break;
|
|
155
135
|
}
|
|
156
|
-
if (
|
|
136
|
+
if (search1.nextSibling) break;
|
|
157
137
|
}
|
|
158
138
|
}
|
|
159
139
|
return (atEnd == null ? bias > 0 : atEnd) ? this.posAtEnd : this.posAtStart;
|
|
@@ -191,8 +171,8 @@ export class ViewDesc {
|
|
|
191
171
|
const end = offset + child.size;
|
|
192
172
|
if (offset == pos && end != offset) {
|
|
193
173
|
while(!child.border && child.children.length){
|
|
194
|
-
for(let
|
|
195
|
-
const inner = child.children[
|
|
174
|
+
for(let i1 = 0; i1 < child.children.length; i1++){
|
|
175
|
+
const inner = child.children[i1];
|
|
196
176
|
if (inner.size) {
|
|
197
177
|
child = inner;
|
|
198
178
|
break;
|
|
@@ -230,23 +210,23 @@ export class ViewDesc {
|
|
|
230
210
|
}
|
|
231
211
|
// Scan towards the first useable node
|
|
232
212
|
if (side <= 0) {
|
|
233
|
-
let
|
|
213
|
+
let prev1, enter = true;
|
|
234
214
|
for(;; i--, enter = false){
|
|
235
|
-
|
|
236
|
-
if (!
|
|
215
|
+
prev1 = i ? this.children[i - 1] : null;
|
|
216
|
+
if (!prev1 || prev1.dom.parentNode == this.contentDOM) break;
|
|
237
217
|
}
|
|
238
|
-
if (
|
|
218
|
+
if (prev1 && side && enter && !prev1.border && !prev1.domAtom) return prev1.domFromPos(prev1.size, side);
|
|
239
219
|
return {
|
|
240
220
|
node: this.contentDOM,
|
|
241
|
-
offset:
|
|
221
|
+
offset: prev1 ? domIndex(prev1.dom) + 1 : 0
|
|
242
222
|
};
|
|
243
223
|
} else {
|
|
244
|
-
let next,
|
|
245
|
-
for(;; i++,
|
|
224
|
+
let next, enter1 = true;
|
|
225
|
+
for(;; i++, enter1 = false){
|
|
246
226
|
next = i < this.children.length ? this.children[i] : null;
|
|
247
227
|
if (!next || next.dom.parentNode == this.contentDOM) break;
|
|
248
228
|
}
|
|
249
|
-
if (next &&
|
|
229
|
+
if (next && enter1 && !next.border && !next.domAtom) return next.domFromPos(0, side);
|
|
250
230
|
return {
|
|
251
231
|
node: this.contentDOM,
|
|
252
232
|
offset: next ? domIndex(next.dom) : this.contentDOM.childNodes.length
|
|
@@ -284,8 +264,8 @@ export class ViewDesc {
|
|
|
284
264
|
}
|
|
285
265
|
if (fromOffset > -1 && (end > to || i == this.children.length - 1)) {
|
|
286
266
|
to = end;
|
|
287
|
-
for(let
|
|
288
|
-
const next = this.children[
|
|
267
|
+
for(let j1 = i + 1; j1 < this.children.length; j1++){
|
|
268
|
+
const next = this.children[j1];
|
|
289
269
|
if (next.size && next.dom.parentNode == this.contentDOM && !next.emptyChildAt(-1)) {
|
|
290
270
|
toOffset = domIndex(next.dom);
|
|
291
271
|
break;
|
|
@@ -312,7 +292,7 @@ export class ViewDesc {
|
|
|
312
292
|
return child.size == 0 || child.emptyChildAt(side);
|
|
313
293
|
}
|
|
314
294
|
domAfterPos(pos) {
|
|
315
|
-
const { node, offset
|
|
295
|
+
const { node , offset } = this.domFromPos(pos, 0);
|
|
316
296
|
if (node.nodeType != 1 || offset == node.childNodes.length) throw new RangeError("No node after pos " + pos);
|
|
317
297
|
// @ts-expect-error ...
|
|
318
298
|
return node.childNodes[offset];
|
|
@@ -341,11 +321,12 @@ export class ViewDesc {
|
|
|
341
321
|
// the cursor sometimes inexplicable visually lags behind its
|
|
342
322
|
// reported position in such situations (#1092).
|
|
343
323
|
if ((browser.gecko || browser.safari) && anchor == head) {
|
|
344
|
-
const { node, offset } = anchorDOM;
|
|
324
|
+
const { node , offset: offset1 } = anchorDOM;
|
|
345
325
|
if (node.nodeType == 3) {
|
|
346
|
-
|
|
326
|
+
var ref;
|
|
327
|
+
brKludge = !!(offset1 && ((ref = node.nodeValue) === null || ref === void 0 ? void 0 : ref[offset1 - 1]) == "\n");
|
|
347
328
|
// Issue #1128
|
|
348
|
-
if (brKludge &&
|
|
329
|
+
if (brKludge && offset1 == node.nodeValue.length) {
|
|
349
330
|
for(let scan = node, after; scan; scan = scan.parentNode){
|
|
350
331
|
if (after = scan.nextSibling) {
|
|
351
332
|
if (after.nodeName == "BR") anchorDOM = headDOM = {
|
|
@@ -359,7 +340,7 @@ export class ViewDesc {
|
|
|
359
340
|
}
|
|
360
341
|
}
|
|
361
342
|
} else {
|
|
362
|
-
const prev = node.childNodes[
|
|
343
|
+
const prev = node.childNodes[offset1 - 1];
|
|
363
344
|
// @ts-expect-error ...
|
|
364
345
|
brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false");
|
|
365
346
|
}
|
|
@@ -367,8 +348,8 @@ export class ViewDesc {
|
|
|
367
348
|
// Firefox can act strangely when the selection is in front of an
|
|
368
349
|
// uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
|
|
369
350
|
if (browser.gecko && selRange.focusNode && selRange.focusNode != headDOM.node && selRange.focusNode.nodeType == 1) {
|
|
370
|
-
const
|
|
371
|
-
if (
|
|
351
|
+
const after1 = selRange.focusNode.childNodes[selRange.focusOffset];
|
|
352
|
+
if (after1 && after1.contentEditable == "false") force = true;
|
|
372
353
|
}
|
|
373
354
|
if (!(force || brKludge && browser.safari) && isEquivalentPosition(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && isEquivalentPosition(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
|
|
374
355
|
// Selection.extend can be used to create an 'inverted' selection
|
|
@@ -444,15 +425,24 @@ export class ViewDesc {
|
|
|
444
425
|
get ignoreForSelection() {
|
|
445
426
|
return false;
|
|
446
427
|
}
|
|
428
|
+
isText(_text) {
|
|
429
|
+
return false;
|
|
430
|
+
}
|
|
431
|
+
constructor(parent, children, getPos, dom, contentDOM){
|
|
432
|
+
this.parent = parent;
|
|
433
|
+
this.children = children;
|
|
434
|
+
this.getPos = getPos;
|
|
435
|
+
this.dom = dom;
|
|
436
|
+
this.contentDOM = contentDOM;
|
|
437
|
+
this.dirty = NOT_DIRTY;
|
|
438
|
+
// An expando property on the DOM node provides a link back to its
|
|
439
|
+
// description.
|
|
440
|
+
dom.pmViewDesc = this;
|
|
441
|
+
}
|
|
447
442
|
}
|
|
448
443
|
// A widget desc represents a widget decoration, which is a DOM node
|
|
449
444
|
// drawn between the document nodes.
|
|
450
445
|
export class WidgetViewDesc extends ViewDesc {
|
|
451
|
-
widget;
|
|
452
|
-
constructor(parent, getPos, widget, dom){
|
|
453
|
-
super(parent, [], getPos, dom, null), this.widget = widget;
|
|
454
|
-
this.widget = widget;
|
|
455
|
-
}
|
|
456
446
|
matchesWidget(widget) {
|
|
457
447
|
return this.dirty == NOT_DIRTY && widget.type.eq(this.widget.type);
|
|
458
448
|
}
|
|
@@ -477,13 +467,13 @@ export class WidgetViewDesc extends ViewDesc {
|
|
|
477
467
|
get side() {
|
|
478
468
|
return this.widget.type.side;
|
|
479
469
|
}
|
|
470
|
+
constructor(parent, getPos, widget, dom){
|
|
471
|
+
super(parent, [], getPos, dom, null);
|
|
472
|
+
this.widget = widget;
|
|
473
|
+
this.widget = widget;
|
|
474
|
+
}
|
|
480
475
|
}
|
|
481
476
|
export class CompositionViewDesc extends ViewDesc {
|
|
482
|
-
textDOM;
|
|
483
|
-
text;
|
|
484
|
-
constructor(parent, getPos, dom, textDOM, text){
|
|
485
|
-
super(parent, [], getPos, dom, null), this.textDOM = textDOM, this.text = text;
|
|
486
|
-
}
|
|
487
477
|
get size() {
|
|
488
478
|
return this.text.length;
|
|
489
479
|
}
|
|
@@ -500,6 +490,11 @@ export class CompositionViewDesc extends ViewDesc {
|
|
|
500
490
|
ignoreMutation(mut) {
|
|
501
491
|
return mut.type === "characterData" && mut.target.nodeValue == mut.oldValue;
|
|
502
492
|
}
|
|
493
|
+
constructor(parent, getPos, dom, textDOM, text){
|
|
494
|
+
super(parent, [], getPos, dom, null);
|
|
495
|
+
this.textDOM = textDOM;
|
|
496
|
+
this.text = text;
|
|
497
|
+
}
|
|
503
498
|
}
|
|
504
499
|
// A mark desc represents a mark. May have multiple children,
|
|
505
500
|
// depending on how the mark is split. Note that marks are drawn using
|
|
@@ -507,11 +502,6 @@ export class CompositionViewDesc extends ViewDesc {
|
|
|
507
502
|
// some cases they will be split more often than would appear
|
|
508
503
|
// necessary.
|
|
509
504
|
export class MarkViewDesc extends ViewDesc {
|
|
510
|
-
mark;
|
|
511
|
-
spec;
|
|
512
|
-
constructor(parent, children, getPos, mark, dom, contentDOM, spec){
|
|
513
|
-
super(parent, children, getPos, dom, contentDOM), this.mark = mark, this.spec = spec;
|
|
514
|
-
}
|
|
515
505
|
parseRule() {
|
|
516
506
|
if (this.dirty & NODE_DIRTY || this.mark.type.spec.reparseInView) return null;
|
|
517
507
|
return {
|
|
@@ -540,18 +530,16 @@ export class MarkViewDesc extends ViewDesc {
|
|
|
540
530
|
if (this.spec.destroy) this.spec.destroy();
|
|
541
531
|
super.destroy();
|
|
542
532
|
}
|
|
533
|
+
constructor(parent, children, getPos, mark, dom, contentDOM, spec){
|
|
534
|
+
super(parent, children, getPos, dom, contentDOM);
|
|
535
|
+
this.mark = mark;
|
|
536
|
+
this.spec = spec;
|
|
537
|
+
}
|
|
543
538
|
}
|
|
544
539
|
// Node view descs are the main, most common type of view desc, and
|
|
545
540
|
// correspond to an actual node in the document. Unlike mark descs,
|
|
546
541
|
// they populate their child array themselves.
|
|
547
542
|
export class NodeViewDesc extends ViewDesc {
|
|
548
|
-
node;
|
|
549
|
-
outerDeco;
|
|
550
|
-
innerDeco;
|
|
551
|
-
nodeDOM;
|
|
552
|
-
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM){
|
|
553
|
-
super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM;
|
|
554
|
-
}
|
|
555
543
|
parseRule() {
|
|
556
544
|
// Experimental kludge to allow opt-in re-parsing of nodes
|
|
557
545
|
if (this.node.type.spec.reparseInView) return null;
|
|
@@ -630,11 +618,15 @@ export class NodeViewDesc extends ViewDesc {
|
|
|
630
618
|
get domAtom() {
|
|
631
619
|
return this.node.isAtom;
|
|
632
620
|
}
|
|
621
|
+
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM){
|
|
622
|
+
super(parent, children, getPos, dom, contentDOM);
|
|
623
|
+
this.node = node;
|
|
624
|
+
this.outerDeco = outerDeco;
|
|
625
|
+
this.innerDeco = innerDeco;
|
|
626
|
+
this.nodeDOM = nodeDOM;
|
|
627
|
+
}
|
|
633
628
|
}
|
|
634
629
|
export class TextViewDesc extends NodeViewDesc {
|
|
635
|
-
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, nodeDOM){
|
|
636
|
-
super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM);
|
|
637
|
-
}
|
|
638
630
|
parseRule() {
|
|
639
631
|
let skip = this.nodeDOM.parentNode;
|
|
640
632
|
while(skip && skip != this.dom && !skip.pmIsDeco)skip = skip.parentNode;
|
|
@@ -668,6 +660,12 @@ export class TextViewDesc extends NodeViewDesc {
|
|
|
668
660
|
get domAtom() {
|
|
669
661
|
return false;
|
|
670
662
|
}
|
|
663
|
+
isText(text) {
|
|
664
|
+
return this.node.text == text;
|
|
665
|
+
}
|
|
666
|
+
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, nodeDOM){
|
|
667
|
+
super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM);
|
|
668
|
+
}
|
|
671
669
|
}
|
|
672
670
|
// A dummy desc used to tag trailing BR or IMG nodes created to work
|
|
673
671
|
// around contentEditable terribleness.
|
|
@@ -691,10 +689,6 @@ export class TrailingHackViewDesc extends ViewDesc {
|
|
|
691
689
|
// extra checks only have to be made for nodes that are actually
|
|
692
690
|
// customized.
|
|
693
691
|
let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
|
|
694
|
-
spec;
|
|
695
|
-
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec){
|
|
696
|
-
super(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM), this.spec = spec;
|
|
697
|
-
}
|
|
698
692
|
// A custom `update` method gets to decide whether the update goes
|
|
699
693
|
// through. If it does, and there's a `contentDOM` node, our logic
|
|
700
694
|
// updates the children.
|
|
@@ -729,6 +723,10 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
|
|
|
729
723
|
ignoreMutation(mutation) {
|
|
730
724
|
return this.spec.ignoreMutation ? this.spec.ignoreMutation.call(this, mutation) : super.ignoreMutation(mutation);
|
|
731
725
|
}
|
|
726
|
+
constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec){
|
|
727
|
+
super(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM);
|
|
728
|
+
this.spec = spec;
|
|
729
|
+
}
|
|
732
730
|
};
|
|
733
731
|
export class ReactMarkViewDesc extends MarkViewDesc {
|
|
734
732
|
destroy() {
|