@handlewithcare/react-prosemirror 2.9.0-tiptap.24 → 3.0.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/README.md +140 -75
- package/dist/cjs/StaticEditorView.js +0 -3
- package/dist/cjs/components/ChildNodeViews.js +4 -4
- package/dist/cjs/components/NativeWidgetView.js +2 -2
- package/dist/cjs/components/OutputSpec.js +10 -3
- package/dist/cjs/components/ProseMirror.js +11 -17
- package/dist/cjs/components/SeparatorHackView.js +2 -2
- package/dist/cjs/components/TrailingHackView.js +2 -2
- package/dist/cjs/components/WidgetView.js +2 -2
- package/dist/cjs/components/marks/DefaultMarkView.js +2 -1
- package/dist/cjs/components/marks/MarkView.js +2 -2
- package/dist/cjs/components/marks/{CustomMarkView.js → MarkViewConstructorView.js} +16 -7
- package/dist/cjs/components/marks/ReactMarkView.js +26 -6
- package/dist/cjs/components/nodes/DefaultNodeView.js +3 -2
- package/dist/cjs/components/nodes/DocNodeView.js +7 -6
- package/dist/cjs/components/nodes/NodeView.js +17 -6
- package/dist/cjs/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js} +22 -9
- package/dist/cjs/components/nodes/ReactNodeView.js +59 -17
- package/dist/cjs/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js} +3 -3
- package/dist/cjs/hooks/useEditor.js +0 -4
- package/dist/cjs/hooks/useEditorEventCallback.js +1 -1
- package/dist/cjs/hooks/useMarkViewDescription.js +24 -21
- package/dist/cjs/hooks/useNodePos.js +18 -0
- package/dist/cjs/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js} +30 -25
- package/dist/cjs/index.js +8 -0
- package/dist/cjs/refs.js +28 -0
- package/dist/cjs/viewdesc.js +18 -5
- package/dist/esm/StaticEditorView.js +0 -3
- package/dist/esm/components/ChildNodeViews.js +4 -4
- package/dist/esm/components/NativeWidgetView.js +2 -2
- package/dist/esm/components/OutputSpec.js +10 -3
- package/dist/esm/components/ProseMirror.js +11 -17
- package/dist/esm/components/SeparatorHackView.js +2 -2
- package/dist/esm/components/TrailingHackView.js +2 -2
- package/dist/esm/components/WidgetView.js +2 -2
- package/dist/esm/components/marks/DefaultMarkView.js +2 -1
- package/dist/esm/components/marks/MarkView.js +2 -2
- package/dist/esm/components/marks/{CustomMarkView.js → MarkViewConstructorView.js} +14 -5
- package/dist/esm/components/marks/ReactMarkView.js +26 -6
- package/dist/esm/components/nodes/DefaultNodeView.js +3 -2
- package/dist/esm/components/nodes/DocNodeView.js +8 -7
- package/dist/esm/components/nodes/NodeView.js +7 -4
- package/dist/esm/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js} +20 -7
- package/dist/esm/components/nodes/ReactNodeView.js +59 -17
- package/dist/esm/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js} +1 -1
- package/dist/esm/hooks/useEditor.js +0 -4
- package/dist/esm/hooks/useEditorEffect.js +0 -4
- package/dist/esm/hooks/useEditorEventCallback.js +6 -4
- package/dist/esm/hooks/useMarkViewDescription.js +26 -23
- package/dist/esm/hooks/useNodePos.js +15 -0
- package/dist/esm/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js} +29 -24
- package/dist/esm/index.js +2 -0
- package/dist/esm/refs.js +18 -0
- package/dist/esm/viewdesc.js +13 -6
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/AbstractEditorView.d.ts +0 -1
- package/dist/types/StaticEditorView.d.ts +0 -1
- package/dist/types/components/OutputSpec.d.ts +2 -1
- package/dist/types/components/ProseMirror.d.ts +3 -11
- package/dist/types/components/ProseMirrorDoc.d.ts +2 -2
- package/dist/types/components/marks/DefaultMarkView.d.ts +1 -1
- package/dist/types/components/marks/MarkViewComponentProps.d.ts +4 -3
- package/dist/types/components/marks/{CustomMarkView.d.ts → MarkViewConstructorView.d.ts} +1 -1
- package/dist/types/components/nodes/DefaultNodeView.d.ts +1 -1
- package/dist/types/components/nodes/DocNodeView.d.ts +2 -2
- package/dist/types/components/nodes/NodeView.d.ts +1 -0
- package/dist/types/components/nodes/NodeViewComponentProps.d.ts +4 -3
- package/dist/types/components/{CustomNodeView.d.ts → nodes/NodeViewConstructorView.d.ts} +1 -1
- package/dist/types/constants.d.ts +1 -1
- package/dist/types/contexts/{ChildDescriptorsContext.d.ts → ChildDescriptionsContext.d.ts} +1 -1
- package/dist/types/hooks/useEditorEffect.d.ts +0 -4
- package/dist/types/hooks/useEditorEventCallback.d.ts +6 -4
- package/dist/types/hooks/useMarkViewDescription.d.ts +6 -9
- package/dist/types/hooks/useNodePos.d.ts +9 -0
- package/dist/types/hooks/{useNodeViewDescriptor.d.ts → useNodeViewDescription.d.ts} +5 -9
- package/dist/types/index.d.ts +2 -0
- package/dist/types/props.d.ts +26 -26
- package/dist/types/refs.d.ts +2 -0
- package/dist/types/viewdesc.d.ts +4 -0
- package/package.json +12 -20
- package/dist/cjs/components/CustomNodeView.js +0 -132
- package/dist/cjs/components/DefaultNodeView.js +0 -67
- package/dist/cjs/components/DocNodeView.js +0 -96
- package/dist/cjs/components/MarkView.js +0 -119
- package/dist/cjs/components/NodeView.js +0 -86
- package/dist/cjs/components/NodeViewComponentProps.js +0 -4
- package/dist/cjs/components/ReactNodeView.js +0 -174
- package/dist/cjs/components/marks/OldMarkView.js +0 -120
- package/dist/cjs/tiptap/ReactProseMirrorNodeView.js +0 -26
- package/dist/cjs/tiptap/TiptapEditor.js +0 -34
- package/dist/cjs/tiptap/TiptapEditorContent.js +0 -142
- package/dist/cjs/tiptap/TiptapEditorView.js +0 -118
- package/dist/cjs/tiptap/TiptapNodeView.js +0 -26
- package/dist/cjs/tiptap/contexts/TiptapEditorContext.js +0 -12
- package/dist/cjs/tiptap/extensions/ReactProseMirror.js +0 -40
- package/dist/cjs/tiptap/hooks/useIsInReactProseMirror.js +0 -15
- package/dist/cjs/tiptap/hooks/useTiptapEditor.js +0 -43
- package/dist/cjs/tiptap/hooks/useTiptapEditorEffect.js +0 -35
- package/dist/cjs/tiptap/hooks/useTiptapEditorEventCallback.js +0 -35
- package/dist/cjs/tiptap/index.js +0 -48
- package/dist/cjs/tiptap/tiptapNodeView.js +0 -237
- package/dist/esm/components/CustomNodeView.js +0 -81
- package/dist/esm/components/DefaultNodeView.js +0 -16
- package/dist/esm/components/DocNodeView.js +0 -45
- package/dist/esm/components/MarkView.js +0 -68
- package/dist/esm/components/NodeView.js +0 -35
- package/dist/esm/components/NodeViewComponentProps.js +0 -1
- package/dist/esm/components/ReactNodeView.js +0 -123
- package/dist/esm/components/marks/OldMarkView.js +0 -69
- package/dist/esm/tiptap/ReactProseMirrorNodeView.js +0 -22
- package/dist/esm/tiptap/TiptapEditor.js +0 -24
- package/dist/esm/tiptap/TiptapEditorContent.js +0 -91
- package/dist/esm/tiptap/TiptapEditorView.js +0 -69
- package/dist/esm/tiptap/TiptapNodeView.js +0 -22
- package/dist/esm/tiptap/contexts/TiptapEditorContext.js +0 -2
- package/dist/esm/tiptap/extensions/ReactProseMirror.js +0 -30
- package/dist/esm/tiptap/hooks/useIsInReactProseMirror.js +0 -5
- package/dist/esm/tiptap/hooks/useTiptapEditor.js +0 -33
- package/dist/esm/tiptap/hooks/useTiptapEditorEffect.js +0 -42
- package/dist/esm/tiptap/hooks/useTiptapEditorEventCallback.js +0 -35
- package/dist/esm/tiptap/index.js +0 -9
- package/dist/esm/tiptap/tiptapNodeView.js +0 -205
- package/dist/types/components/DefaultNodeView.d.ts +0 -3
- package/dist/types/components/DocNodeView.d.ts +0 -12
- package/dist/types/components/MarkView.d.ts +0 -9
- package/dist/types/components/NodeView.d.ts +0 -11
- package/dist/types/components/NodeViewComponentProps.d.ts +0 -12
- package/dist/types/components/ReactNodeView.d.ts +0 -13
- package/dist/types/components/marks/OldMarkView.d.ts +0 -10
- package/dist/types/components/nodes/CustomNodeView.d.ts +0 -12
- package/dist/types/tiptap/ReactProseMirrorNodeView.d.ts +0 -15
- package/dist/types/tiptap/TiptapEditor.d.ts +0 -6
- package/dist/types/tiptap/TiptapEditorContent.d.ts +0 -19
- package/dist/types/tiptap/TiptapEditorView.d.ts +0 -16
- package/dist/types/tiptap/TiptapNodeView.d.ts +0 -15
- package/dist/types/tiptap/contexts/TiptapEditorContext.d.ts +0 -6
- package/dist/types/tiptap/extensions/ReactProseMirror.d.ts +0 -9
- package/dist/types/tiptap/hooks/useIsInReactProseMirror.d.ts +0 -1
- package/dist/types/tiptap/hooks/useTiptapEditor.d.ts +0 -4
- package/dist/types/tiptap/hooks/useTiptapEditorEffect.d.ts +0 -21
- package/dist/types/tiptap/hooks/useTiptapEditorEventCallback.d.ts +0 -13
- package/dist/types/tiptap/index.d.ts +0 -9
- package/dist/types/tiptap/tiptapNodeView.d.ts +0 -50
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { NodeView } from "@tiptap/core";
|
|
2
|
-
/**
|
|
3
|
-
* Subclass of Tiptap's NodeView to be used in tiptapNodeView.
|
|
4
|
-
*
|
|
5
|
-
* Allows us to pass in an existing dom and contentODM from React ProseMirror's
|
|
6
|
-
* ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
|
|
7
|
-
* methods
|
|
8
|
-
*/ export class ReactProseMirrorNodeView extends NodeView {
|
|
9
|
-
_dom;
|
|
10
|
-
_contentDOM;
|
|
11
|
-
constructor(component, props, dom, contentDOM, options){
|
|
12
|
-
super(component, props, options);
|
|
13
|
-
this._dom = dom;
|
|
14
|
-
this._contentDOM = contentDOM;
|
|
15
|
-
}
|
|
16
|
-
get dom() {
|
|
17
|
-
return this._dom;
|
|
18
|
-
}
|
|
19
|
-
get contentDOM() {
|
|
20
|
-
return this._contentDOM;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { Editor } from "@tiptap/core";
|
|
2
|
-
import { EditorState } from "prosemirror-state";
|
|
3
|
-
import { StaticEditorView } from "../StaticEditorView.js";
|
|
4
|
-
export class TiptapEditor extends Editor {
|
|
5
|
-
constructor(options = {}){
|
|
6
|
-
super({
|
|
7
|
-
...options,
|
|
8
|
-
element: null
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
get view() {
|
|
12
|
-
return(// @ts-expect-error private property
|
|
13
|
-
this.editorView ?? new StaticEditorView({
|
|
14
|
-
state: EditorState.create({
|
|
15
|
-
schema: this.extensionManager.schema
|
|
16
|
-
}),
|
|
17
|
-
...this.options.editorProps,
|
|
18
|
-
attributes: {
|
|
19
|
-
role: "textbox",
|
|
20
|
-
...this.options.editorProps.attributes
|
|
21
|
-
}
|
|
22
|
-
}));
|
|
23
|
-
}
|
|
24
|
-
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import React, { useContext, useSyncExternalStore } from "react";
|
|
2
|
-
import { createPortal } from "react-dom";
|
|
3
|
-
import { ProseMirrorDoc } from "../components/ProseMirrorDoc.js";
|
|
4
|
-
import { useEditorEffect } from "../hooks/useEditorEffect.js";
|
|
5
|
-
import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
|
|
6
|
-
/**
|
|
7
|
-
* This component renders all of the editor's registered "React renderers".
|
|
8
|
-
*/ const Portals = (param)=>{
|
|
9
|
-
let { contentComponent } = param;
|
|
10
|
-
const renderers = useSyncExternalStore(contentComponent.subscribe, contentComponent.getSnapshot, contentComponent.getServerSnapshot);
|
|
11
|
-
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.values(renderers));
|
|
12
|
-
};
|
|
13
|
-
function getInstance() {
|
|
14
|
-
const subscribers = new Set();
|
|
15
|
-
let renderers = {};
|
|
16
|
-
return {
|
|
17
|
-
/**
|
|
18
|
-
* Subscribe to the editor instance's changes.
|
|
19
|
-
*/ subscribe (callback) {
|
|
20
|
-
subscribers.add(callback);
|
|
21
|
-
return ()=>{
|
|
22
|
-
subscribers.delete(callback);
|
|
23
|
-
};
|
|
24
|
-
},
|
|
25
|
-
getSnapshot () {
|
|
26
|
-
return renderers;
|
|
27
|
-
},
|
|
28
|
-
getServerSnapshot () {
|
|
29
|
-
return renderers;
|
|
30
|
-
},
|
|
31
|
-
/**
|
|
32
|
-
* Adds a new React Renderer to the editor.
|
|
33
|
-
*/ setRenderer (id, renderer) {
|
|
34
|
-
renderers = {
|
|
35
|
-
...renderers,
|
|
36
|
-
[id]: /*#__PURE__*/ createPortal(renderer.reactElement, renderer.element, id)
|
|
37
|
-
};
|
|
38
|
-
subscribers.forEach((subscriber)=>subscriber());
|
|
39
|
-
},
|
|
40
|
-
/**
|
|
41
|
-
* Removes a React Renderer from the editor.
|
|
42
|
-
*/ removeRenderer (id) {
|
|
43
|
-
const nextRenderers = {
|
|
44
|
-
...renderers
|
|
45
|
-
};
|
|
46
|
-
delete nextRenderers[id];
|
|
47
|
-
renderers = nextRenderers;
|
|
48
|
-
subscribers.forEach((subscriber)=>subscriber());
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
export function TiptapEditorContent(param) {
|
|
53
|
-
let { editor: editorProp, ...props } = param;
|
|
54
|
-
const editor = editorProp;
|
|
55
|
-
const { onEditorInitialize, onEditorDeinitialize } = useContext(TiptapEditorContext);
|
|
56
|
-
useEditorEffect((view)=>{
|
|
57
|
-
if (editor.view === view) {
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
// @ts-expect-error private property
|
|
61
|
-
editor.editorView = view;
|
|
62
|
-
editor.contentComponent = getInstance();
|
|
63
|
-
// @ts-expect-error private method
|
|
64
|
-
editor.injectCSS();
|
|
65
|
-
const dom = view.dom;
|
|
66
|
-
dom.editor = editor;
|
|
67
|
-
setTimeout(()=>{
|
|
68
|
-
if (editor.isDestroyed) {
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
71
|
-
editor.commands.focus(editor.options.autofocus);
|
|
72
|
-
editor.emit("create", {
|
|
73
|
-
editor
|
|
74
|
-
});
|
|
75
|
-
editor.isInitialized = true;
|
|
76
|
-
onEditorInitialize();
|
|
77
|
-
});
|
|
78
|
-
return ()=>{
|
|
79
|
-
editor.isInitialized = false;
|
|
80
|
-
editor.contentComponent = null;
|
|
81
|
-
onEditorDeinitialize();
|
|
82
|
-
};
|
|
83
|
-
}, [
|
|
84
|
-
editor,
|
|
85
|
-
onEditorDeinitialize,
|
|
86
|
-
onEditorInitialize
|
|
87
|
-
]);
|
|
88
|
-
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ProseMirrorDoc, props), editor?.contentComponent && /*#__PURE__*/ React.createElement(Portals, {
|
|
89
|
-
contentComponent: editor.contentComponent
|
|
90
|
-
}));
|
|
91
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { EditorContext } from "@tiptap/react";
|
|
2
|
-
import React, { useCallback, useMemo, useState } from "react";
|
|
3
|
-
import { ProseMirror } from "../components/ProseMirror.js";
|
|
4
|
-
import { useForceUpdate } from "../hooks/useForceUpdate.js";
|
|
5
|
-
import { TiptapEditorContext } from "./contexts/TiptapEditorContext.js";
|
|
6
|
-
/**
|
|
7
|
-
* Render a Tiptap-compatible React ProseMirror editor.
|
|
8
|
-
*/ export function TiptapEditorView(param) {
|
|
9
|
-
let { editor, nodeViews, markViews, children, static: isStatic = false } = param;
|
|
10
|
-
const [isEditorInitialized, setIsEditorInitialized] = useState(editor.isInitialized);
|
|
11
|
-
const forceUpdate = useForceUpdate();
|
|
12
|
-
const dispatchTransaction = useCallback((tr)=>{
|
|
13
|
-
// @ts-expect-error calling private method
|
|
14
|
-
editor.dispatchTransaction(tr);
|
|
15
|
-
// Tiptap's dispatchTransaction doesn't trigger
|
|
16
|
-
// a re-render, so we need to manually force
|
|
17
|
-
// one to ensure that React stays in sync.
|
|
18
|
-
forceUpdate();
|
|
19
|
-
}, [
|
|
20
|
-
editor,
|
|
21
|
-
forceUpdate
|
|
22
|
-
]);
|
|
23
|
-
const initialEditorProps = {
|
|
24
|
-
...editor.options.editorProps,
|
|
25
|
-
attributes: {
|
|
26
|
-
role: "textbox",
|
|
27
|
-
...editor.options.editorProps?.attributes
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const { nodeViews: customNodeViews, markViews: customMarkViews } = editor.isDestroyed ? {
|
|
31
|
-
nodeViews: undefined,
|
|
32
|
-
markViews: undefined
|
|
33
|
-
} : editor.view.props;
|
|
34
|
-
const contextValue = useMemo(()=>({
|
|
35
|
-
editor
|
|
36
|
-
}), [
|
|
37
|
-
editor
|
|
38
|
-
]);
|
|
39
|
-
const onEditorInitialize = useCallback(()=>{
|
|
40
|
-
setIsEditorInitialized(true);
|
|
41
|
-
}, []);
|
|
42
|
-
const onEditorDeinitialize = useCallback(()=>{
|
|
43
|
-
setIsEditorInitialized(false);
|
|
44
|
-
}, []);
|
|
45
|
-
const tiptapEditorContextValue = useMemo(()=>({
|
|
46
|
-
isEditorInitialized,
|
|
47
|
-
onEditorInitialize,
|
|
48
|
-
onEditorDeinitialize
|
|
49
|
-
}), [
|
|
50
|
-
isEditorInitialized,
|
|
51
|
-
onEditorDeinitialize,
|
|
52
|
-
onEditorInitialize
|
|
53
|
-
]);
|
|
54
|
-
return /*#__PURE__*/ React.createElement(ProseMirror, {
|
|
55
|
-
static: isStatic,
|
|
56
|
-
className: "tiptap",
|
|
57
|
-
...initialEditorProps,
|
|
58
|
-
markViews: markViews,
|
|
59
|
-
customMarkViews: customMarkViews,
|
|
60
|
-
nodeViews: nodeViews,
|
|
61
|
-
customNodeViews: customNodeViews,
|
|
62
|
-
state: editor.state,
|
|
63
|
-
dispatchTransaction: dispatchTransaction
|
|
64
|
-
}, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
|
|
65
|
-
value: contextValue
|
|
66
|
-
}, /*#__PURE__*/ React.createElement(TiptapEditorContext.Provider, {
|
|
67
|
-
value: tiptapEditorContextValue
|
|
68
|
-
}, children)));
|
|
69
|
-
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { NodeView } from "@tiptap/core";
|
|
2
|
-
/**
|
|
3
|
-
* Subclass of Tiptap's NodeView to be used in tiptapNodeView.
|
|
4
|
-
*
|
|
5
|
-
* Allows us to pass in an existing dom and contentODM from React ProseMirror's
|
|
6
|
-
* ViewDesc, so that we can call Tiptap's default stopEvent and ignoreMutation
|
|
7
|
-
* methods
|
|
8
|
-
*/ export class ReactProseMirrorNodeView extends NodeView {
|
|
9
|
-
_dom;
|
|
10
|
-
_contentDOM;
|
|
11
|
-
constructor(component, props, dom, contentDOM, options){
|
|
12
|
-
super(component, props, options);
|
|
13
|
-
this._dom = dom;
|
|
14
|
-
this._contentDOM = contentDOM;
|
|
15
|
-
}
|
|
16
|
-
get dom() {
|
|
17
|
-
return this._dom;
|
|
18
|
-
}
|
|
19
|
-
get contentDOM() {
|
|
20
|
-
return this._contentDOM;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { Extension } from "@tiptap/core";
|
|
2
|
-
import { reorderSiblingsOnTransaction } from "../../commands/reorderSiblings.js";
|
|
3
|
-
import { reactKeys } from "../../plugins/reactKeys.js";
|
|
4
|
-
export const ReactProseMirror = Extension.create({
|
|
5
|
-
name: "@handlewithcare/react-prosemirror/reactKeys",
|
|
6
|
-
addProseMirrorPlugins () {
|
|
7
|
-
return [
|
|
8
|
-
reactKeys()
|
|
9
|
-
];
|
|
10
|
-
},
|
|
11
|
-
addCommands () {
|
|
12
|
-
return {
|
|
13
|
-
/**
|
|
14
|
-
* Command that reorders the adjacent nodes starting
|
|
15
|
-
* at the provided position.
|
|
16
|
-
*
|
|
17
|
-
* @param pos - The `start` position of the parent of the nodes being reordered
|
|
18
|
-
* @param order - The new order for the nodes, expressed as an array of indices. For
|
|
19
|
-
* example, to swap the first two nodes in a set of three, `order`
|
|
20
|
-
* would be set to `[1, 0, 2]`. To move the first node to the end,
|
|
21
|
-
* and keep the other two in relative order, set `order` to `[1, 2, 0]`.
|
|
22
|
-
*/ reorderSiblings (initialPos, order) {
|
|
23
|
-
return function reorderSiblingsCommand(param) {
|
|
24
|
-
let { tr, state, dispatch } = param;
|
|
25
|
-
return reorderSiblingsOnTransaction(initialPos, order, tr, state, dispatch);
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
});
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { useEditor } from "@tiptap/react";
|
|
2
|
-
import { StaticEditorView } from "../../StaticEditorView.js";
|
|
3
|
-
export function useTiptapEditor(options, deps) {
|
|
4
|
-
const editor = useEditor({
|
|
5
|
-
...options,
|
|
6
|
-
element: null
|
|
7
|
-
}, deps);
|
|
8
|
-
// @ts-expect-error private property
|
|
9
|
-
editor.editorView ??= new StaticEditorView({
|
|
10
|
-
// @ts-expect-error private property
|
|
11
|
-
state: editor.editorState,
|
|
12
|
-
...editor.options.editorProps,
|
|
13
|
-
attributes: {
|
|
14
|
-
role: "textbox",
|
|
15
|
-
...editor.options.editorProps.attributes
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
// @ts-expect-error private property
|
|
19
|
-
const stateHasPlugins = !!editor.editorState.plugins.length;
|
|
20
|
-
const stateNeedsReconfigure = !stateHasPlugins && !editor.isDestroyed;
|
|
21
|
-
if (stateNeedsReconfigure) {
|
|
22
|
-
const managerPlugins = editor.extensionManager.plugins;
|
|
23
|
-
if (managerPlugins.length) {
|
|
24
|
-
// @ts-expect-error private property
|
|
25
|
-
editor.editorState = editor.editorState.reconfigure({
|
|
26
|
-
plugins: editor.extensionManager.plugins
|
|
27
|
-
});
|
|
28
|
-
// @ts-expect-error private property
|
|
29
|
-
editor.editorView.updateState(editor.editorState);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return editor;
|
|
33
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { useCurrentEditor } from "@tiptap/react";
|
|
2
|
-
import { useContext } from "react";
|
|
3
|
-
import { ReactEditorView } from "../../ReactEditorView.js";
|
|
4
|
-
import { EditorContext } from "../../contexts/EditorContext.js";
|
|
5
|
-
import { useEditorEffect } from "../../hooks/useEditorEffect.js";
|
|
6
|
-
import { TiptapEditorContext } from "../contexts/TiptapEditorContext.js";
|
|
7
|
-
/**
|
|
8
|
-
* Registers a layout effect to run after the EditorView has
|
|
9
|
-
* been updated with the latest EditorState and Decorations.
|
|
10
|
-
*
|
|
11
|
-
* Effects can take a Tiptap Editor instance as an argument.
|
|
12
|
-
* This hook should be used to execute layout effects that
|
|
13
|
-
* depend on the Editor, such as for positioning DOM
|
|
14
|
-
* nodes based on ProseMirror positions.
|
|
15
|
-
*
|
|
16
|
-
* Layout effects registered with this hook still fire
|
|
17
|
-
* synchronously after all DOM mutations, but they do so
|
|
18
|
-
* _after_ the Editor has been updated, even when the
|
|
19
|
-
* Editor lives in an ancestor component.
|
|
20
|
-
*
|
|
21
|
-
* This hook can only be used in a component that is mounted
|
|
22
|
-
* as a child of the TiptapEditorView component, including
|
|
23
|
-
* React node view components.
|
|
24
|
-
*/ export function useTiptapEditorEffect(effect, dependencies) {
|
|
25
|
-
const { view } = useContext(EditorContext);
|
|
26
|
-
const { editor } = useCurrentEditor();
|
|
27
|
-
const { isEditorInitialized } = useContext(TiptapEditorContext);
|
|
28
|
-
useEditorEffect(()=>{
|
|
29
|
-
if (editor?.view instanceof ReactEditorView && view instanceof ReactEditorView && isEditorInitialized) {
|
|
30
|
-
return effect(editor);
|
|
31
|
-
}
|
|
32
|
-
// The rules of hooks want to be able to statically
|
|
33
|
-
// verify the dependencies for the effect, but this will
|
|
34
|
-
// have already happened at the call-site.
|
|
35
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
36
|
-
}, dependencies && [
|
|
37
|
-
editor,
|
|
38
|
-
view,
|
|
39
|
-
isEditorInitialized,
|
|
40
|
-
...dependencies
|
|
41
|
-
]);
|
|
42
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { useCurrentEditor } from "@tiptap/react";
|
|
2
|
-
import { useCallback, useRef } from "react";
|
|
3
|
-
import { useEditorEffect } from "../../hooks/useEditorEffect.js";
|
|
4
|
-
function assertEditor(editor) {
|
|
5
|
-
if (editor) return;
|
|
6
|
-
throw new DOMException("Tiptap Editor is not initialized", "InvalidStateError");
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* Returns a stable function reference to be used as an
|
|
10
|
-
* event handler callback.
|
|
11
|
-
*
|
|
12
|
-
* The callback will be called with the Tiptap Editor instance
|
|
13
|
-
* as its first argument.
|
|
14
|
-
*
|
|
15
|
-
* This hook can only be used in a component that is mounted
|
|
16
|
-
* as a child of the TiptapEditorView component, including
|
|
17
|
-
* React node view components.
|
|
18
|
-
*/ export function useTiptapEditorEventCallback(callback) {
|
|
19
|
-
const ref = useRef(callback);
|
|
20
|
-
const { editor } = useCurrentEditor();
|
|
21
|
-
useEditorEffect(()=>{
|
|
22
|
-
ref.current = callback;
|
|
23
|
-
}, [
|
|
24
|
-
callback
|
|
25
|
-
]);
|
|
26
|
-
return useCallback(function() {
|
|
27
|
-
for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
|
|
28
|
-
args[_key] = arguments[_key];
|
|
29
|
-
}
|
|
30
|
-
assertEditor(editor);
|
|
31
|
-
return ref.current(editor, ...args);
|
|
32
|
-
}, [
|
|
33
|
-
editor
|
|
34
|
-
]);
|
|
35
|
-
}
|
package/dist/esm/tiptap/index.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export { tiptapNodeView } from "./tiptapNodeView.js";
|
|
2
|
-
export { TiptapEditorView } from "./TiptapEditorView.js";
|
|
3
|
-
export { TiptapEditorContent } from "./TiptapEditorContent.js";
|
|
4
|
-
export { useTiptapEditorEffect } from "./hooks/useTiptapEditorEffect.js";
|
|
5
|
-
export { useIsInReactProseMirror } from "./hooks/useIsInReactProseMirror.js";
|
|
6
|
-
export { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
|
|
7
|
-
export { TiptapEditor } from "./TiptapEditor.js";
|
|
8
|
-
export { useTiptapEditor } from "./hooks/useTiptapEditor.js";
|
|
9
|
-
export { ReactProseMirror } from "./extensions/ReactProseMirror.js";
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
import { getAttributesFromExtensions, getRenderedAttributes } from "@tiptap/core";
|
|
2
|
-
import { ReactNodeViewContext, useCurrentEditor } from "@tiptap/react";
|
|
3
|
-
import cx from "classnames";
|
|
4
|
-
import React, { forwardRef, memo, useMemo } from "react";
|
|
5
|
-
import { useEditorEventCallback } from "../hooks/useEditorEventCallback.js";
|
|
6
|
-
import { useIgnoreMutation } from "../hooks/useIgnoreMutation.js";
|
|
7
|
-
import { useIsNodeSelected } from "../hooks/useIsNodeSelected.js";
|
|
8
|
-
import { useStopEvent } from "../hooks/useStopEvent.js";
|
|
9
|
-
import { htmlAttrsToReactProps } from "../props.js";
|
|
10
|
-
import { ReactProseMirrorNodeView } from "./ReactProseMirrorNodeView.js";
|
|
11
|
-
import { useTiptapEditorEventCallback } from "./hooks/useTiptapEditorEventCallback.js";
|
|
12
|
-
/**
|
|
13
|
-
* Convert a Tiptap node view component to a React ProseMirror node view component
|
|
14
|
-
*
|
|
15
|
-
* Given a Tiptap-compatible React component and a Tiptap extension, returns
|
|
16
|
-
* a React component that can be passed to React ProseMirror as a custom node view.
|
|
17
|
-
*
|
|
18
|
-
* Example:
|
|
19
|
-
*
|
|
20
|
-
* ```tsx
|
|
21
|
-
* const nodeViews = {
|
|
22
|
-
* codeBlock: nodeView({
|
|
23
|
-
* component: function CodeBlock(nodeViewProps) {
|
|
24
|
-
* return (
|
|
25
|
-
* <AnnotatableNodeViewWrapper {...nodeViewProps}>
|
|
26
|
-
* <pre>
|
|
27
|
-
* <NodeViewContent as="code" />
|
|
28
|
-
* </pre>
|
|
29
|
-
* </AnnotatableNodeViewWrapper>
|
|
30
|
-
* )
|
|
31
|
-
* },
|
|
32
|
-
* extension: CodeBlockExtension,
|
|
33
|
-
* }),
|
|
34
|
-
* }
|
|
35
|
-
* ```
|
|
36
|
-
*/ export function tiptapNodeView(param) {
|
|
37
|
-
let { component: WrappedComponent, extension, as, className = "", attrs, contentDOMElementTag: InnerTag = "div", stopEvent, ignoreMutation } = param;
|
|
38
|
-
const TiptapNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function TiptapNodeView(param, ref) {
|
|
39
|
-
let { children, nodeProps, ...props } = param;
|
|
40
|
-
const { node, getPos, decorations, innerDecorations } = nodeProps;
|
|
41
|
-
const OuterTag = as ?? (node.type.isInline ? "span" : "div");
|
|
42
|
-
const { editor } = useCurrentEditor();
|
|
43
|
-
const extensionManager = editor?.extensionManager ?? null;
|
|
44
|
-
const extensions = extensionManager?.extensions ?? null;
|
|
45
|
-
const selected = useIsNodeSelected();
|
|
46
|
-
const htmlAttributes = useMemo(()=>{
|
|
47
|
-
if (!extensions) return {};
|
|
48
|
-
const attributes = getAttributesFromExtensions(extensions);
|
|
49
|
-
const extensionAttributes = attributes.filter((attribute)=>attribute.type === extension.name);
|
|
50
|
-
return getRenderedAttributes(node, extensionAttributes);
|
|
51
|
-
}, [
|
|
52
|
-
extensions,
|
|
53
|
-
node
|
|
54
|
-
]);
|
|
55
|
-
useStopEvent(function(_, event) {
|
|
56
|
-
if (stopEvent) {
|
|
57
|
-
return stopEvent.call({
|
|
58
|
-
name: extension.name,
|
|
59
|
-
editor,
|
|
60
|
-
type: node.type
|
|
61
|
-
}, {
|
|
62
|
-
event
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
if (!editor || !(this.dom instanceof HTMLElement)) return false;
|
|
66
|
-
const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
|
|
67
|
-
extension,
|
|
68
|
-
decorations,
|
|
69
|
-
editor,
|
|
70
|
-
getPos,
|
|
71
|
-
HTMLAttributes: htmlAttributes,
|
|
72
|
-
innerDecorations,
|
|
73
|
-
node,
|
|
74
|
-
view: editor.view
|
|
75
|
-
}, this.dom, this.contentDOM);
|
|
76
|
-
return nodeView.stopEvent(event) ?? false;
|
|
77
|
-
});
|
|
78
|
-
useIgnoreMutation(function(_, mutation) {
|
|
79
|
-
if (ignoreMutation) {
|
|
80
|
-
return ignoreMutation.call({
|
|
81
|
-
name: extension.name,
|
|
82
|
-
editor,
|
|
83
|
-
type: node.type
|
|
84
|
-
}, {
|
|
85
|
-
mutation
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
if (!editor || !(this.dom instanceof HTMLElement)) return false;
|
|
89
|
-
const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
|
|
90
|
-
extension,
|
|
91
|
-
decorations,
|
|
92
|
-
editor,
|
|
93
|
-
getPos,
|
|
94
|
-
HTMLAttributes: htmlAttributes,
|
|
95
|
-
innerDecorations,
|
|
96
|
-
node,
|
|
97
|
-
view: editor.view
|
|
98
|
-
}, this.dom, this.contentDOM);
|
|
99
|
-
return nodeView.ignoreMutation(mutation) ?? false;
|
|
100
|
-
});
|
|
101
|
-
const { extraClassName, htmlProps } = useMemo(()=>{
|
|
102
|
-
if (!attrs) return {};
|
|
103
|
-
const resolvedAttrs = typeof attrs === "function" ? attrs({
|
|
104
|
-
node,
|
|
105
|
-
HTMLAttributes: htmlAttributes
|
|
106
|
-
}) : attrs;
|
|
107
|
-
const { className: extraClassName, ...htmlProps } = htmlAttrsToReactProps(resolvedAttrs);
|
|
108
|
-
return {
|
|
109
|
-
extraClassName,
|
|
110
|
-
htmlProps
|
|
111
|
-
};
|
|
112
|
-
}, [
|
|
113
|
-
htmlAttributes,
|
|
114
|
-
node
|
|
115
|
-
]);
|
|
116
|
-
const finalClassName = cx("react-renderer", `node-${node.type.name}`, props.className, className, extraClassName, {
|
|
117
|
-
"ProseMirror-selectednode": selected
|
|
118
|
-
});
|
|
119
|
-
const updateAttributes = useEditorEventCallback((_, attributes)=>{
|
|
120
|
-
if (!editor) {
|
|
121
|
-
return;
|
|
122
|
-
}
|
|
123
|
-
editor.commands.command((param)=>{
|
|
124
|
-
let { tr } = param;
|
|
125
|
-
const pos = getPos();
|
|
126
|
-
tr.setNodeMarkup(pos, undefined, {
|
|
127
|
-
...node.attrs,
|
|
128
|
-
...attributes
|
|
129
|
-
});
|
|
130
|
-
return true;
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
|
-
const deleteNode = useEditorEventCallback(()=>{
|
|
134
|
-
if (!editor) {
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
const from = getPos();
|
|
138
|
-
const to = from + node.nodeSize;
|
|
139
|
-
editor.commands.deleteRange({
|
|
140
|
-
from,
|
|
141
|
-
to
|
|
142
|
-
});
|
|
143
|
-
});
|
|
144
|
-
const nodeViewContent = useMemo(()=>/*#__PURE__*/ React.createElement(InnerTag, {
|
|
145
|
-
"data-node-view-content-inner": node.type.name,
|
|
146
|
-
style: {
|
|
147
|
-
whitespace: "inherit"
|
|
148
|
-
}
|
|
149
|
-
}, children), [
|
|
150
|
-
children,
|
|
151
|
-
node.type.name
|
|
152
|
-
]);
|
|
153
|
-
const onDragStart = useTiptapEditorEventCallback((editor, event)=>{
|
|
154
|
-
// TODO: We should probably just merge this with our own
|
|
155
|
-
// ref, I'm being lazy since we are providing this
|
|
156
|
-
// ref in the first place (in ReactNodeView), so we know
|
|
157
|
-
// it's an object
|
|
158
|
-
const dom = typeof ref === "object" ? ref?.current : null;
|
|
159
|
-
if (!dom) return;
|
|
160
|
-
const viewDesc = dom.pmViewDesc;
|
|
161
|
-
if (!viewDesc) return;
|
|
162
|
-
const nodeView = new ReactProseMirrorNodeView(WrappedComponent, {
|
|
163
|
-
extension,
|
|
164
|
-
decorations,
|
|
165
|
-
editor,
|
|
166
|
-
getPos,
|
|
167
|
-
HTMLAttributes: htmlAttributes,
|
|
168
|
-
innerDecorations,
|
|
169
|
-
node,
|
|
170
|
-
view: editor.view
|
|
171
|
-
}, viewDesc.dom, viewDesc.contentDOM);
|
|
172
|
-
return nodeView.onDragStart(event);
|
|
173
|
-
});
|
|
174
|
-
const nodeViewContext = useMemo(()=>({
|
|
175
|
-
nodeViewContentChildren: nodeViewContent,
|
|
176
|
-
onDragStart
|
|
177
|
-
}), [
|
|
178
|
-
nodeViewContent,
|
|
179
|
-
onDragStart
|
|
180
|
-
]);
|
|
181
|
-
if (!editor) return null;
|
|
182
|
-
return /*#__PURE__*/ React.createElement(ReactNodeViewContext.Provider, {
|
|
183
|
-
value: nodeViewContext
|
|
184
|
-
}, /*#__PURE__*/ React.createElement(OuterTag, {
|
|
185
|
-
ref: ref,
|
|
186
|
-
...props,
|
|
187
|
-
...htmlProps,
|
|
188
|
-
className: finalClassName
|
|
189
|
-
}, /*#__PURE__*/ React.createElement(WrappedComponent, {
|
|
190
|
-
node: node,
|
|
191
|
-
getPos: getPos,
|
|
192
|
-
view: editor.view,
|
|
193
|
-
editor: editor,
|
|
194
|
-
decorations: decorations,
|
|
195
|
-
innerDecorations: innerDecorations,
|
|
196
|
-
extension: extension,
|
|
197
|
-
HTMLAttributes: htmlAttributes,
|
|
198
|
-
selected: selected,
|
|
199
|
-
updateAttributes: updateAttributes,
|
|
200
|
-
deleteNode: deleteNode
|
|
201
|
-
})));
|
|
202
|
-
}));
|
|
203
|
-
TiptapNodeView.displayName = `TiptapNodeView(${WrappedComponent.displayName ?? "Anonymous"})`;
|
|
204
|
-
return TiptapNodeView;
|
|
205
|
-
} // const defaultOnDragStart = NodeView.
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Node } from "prosemirror-model";
|
|
2
|
-
import { Decoration, DecorationSource } from "prosemirror-view";
|
|
3
|
-
import React, { HTMLProps, ReactElement } from "react";
|
|
4
|
-
export interface DocNodeViewProps extends Omit<HTMLProps<HTMLElement>, "as"> {
|
|
5
|
-
as?: ReactElement;
|
|
6
|
-
node: Node;
|
|
7
|
-
getPos: () => number;
|
|
8
|
-
decorations: readonly Decoration[];
|
|
9
|
-
innerDecorations: DecorationSource;
|
|
10
|
-
setMount: (mount: HTMLElement | null) => void;
|
|
11
|
-
}
|
|
12
|
-
export declare const DocNodeView: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<DocNodeViewProps, "ref"> & React.RefAttributes<HTMLElement>>>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Mark } from "prosemirror-model";
|
|
2
|
-
import React, { ReactNode } from "react";
|
|
3
|
-
type Props = {
|
|
4
|
-
mark: Mark;
|
|
5
|
-
getPos: () => number;
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
};
|
|
8
|
-
export declare const MarkView: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>>;
|
|
9
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Node } from "prosemirror-model";
|
|
2
|
-
import { Decoration, DecorationSource } from "prosemirror-view";
|
|
3
|
-
import React from "react";
|
|
4
|
-
type Props = {
|
|
5
|
-
node: Node;
|
|
6
|
-
getPos: () => number;
|
|
7
|
-
outerDeco: readonly Decoration[];
|
|
8
|
-
innerDeco: DecorationSource;
|
|
9
|
-
};
|
|
10
|
-
export declare const NodeView: React.NamedExoticComponent<Props>;
|
|
11
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { Node } from "prosemirror-model";
|
|
2
|
-
import { Decoration, DecorationSource } from "prosemirror-view";
|
|
3
|
-
import { AllHTMLAttributes, LegacyRef } from "react";
|
|
4
|
-
export interface NodeViewComponentProps extends AllHTMLAttributes<HTMLElement> {
|
|
5
|
-
nodeProps: {
|
|
6
|
-
decorations: readonly Decoration[];
|
|
7
|
-
innerDecorations: DecorationSource;
|
|
8
|
-
node: Node;
|
|
9
|
-
getPos: () => number;
|
|
10
|
-
};
|
|
11
|
-
ref: LegacyRef<any>;
|
|
12
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Node } from "prosemirror-model";
|
|
2
|
-
import { Decoration, DecorationSource } from "prosemirror-view";
|
|
3
|
-
import React, { ComponentType } from "react";
|
|
4
|
-
import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
|
|
5
|
-
type Props = {
|
|
6
|
-
component: ComponentType<NodeViewComponentProps>;
|
|
7
|
-
outerDeco: readonly Decoration[];
|
|
8
|
-
getPos: () => number;
|
|
9
|
-
node: Node;
|
|
10
|
-
innerDeco: DecorationSource;
|
|
11
|
-
};
|
|
12
|
-
export declare const ReactNodeView: React.NamedExoticComponent<Props>;
|
|
13
|
-
export {};
|