@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.
Files changed (143) hide show
  1. package/README.md +140 -75
  2. package/dist/cjs/StaticEditorView.js +0 -3
  3. package/dist/cjs/components/ChildNodeViews.js +4 -4
  4. package/dist/cjs/components/NativeWidgetView.js +2 -2
  5. package/dist/cjs/components/OutputSpec.js +10 -3
  6. package/dist/cjs/components/ProseMirror.js +11 -17
  7. package/dist/cjs/components/SeparatorHackView.js +2 -2
  8. package/dist/cjs/components/TrailingHackView.js +2 -2
  9. package/dist/cjs/components/WidgetView.js +2 -2
  10. package/dist/cjs/components/marks/DefaultMarkView.js +2 -1
  11. package/dist/cjs/components/marks/MarkView.js +2 -2
  12. package/dist/cjs/components/marks/{CustomMarkView.js → MarkViewConstructorView.js} +16 -7
  13. package/dist/cjs/components/marks/ReactMarkView.js +26 -6
  14. package/dist/cjs/components/nodes/DefaultNodeView.js +3 -2
  15. package/dist/cjs/components/nodes/DocNodeView.js +7 -6
  16. package/dist/cjs/components/nodes/NodeView.js +17 -6
  17. package/dist/cjs/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js} +22 -9
  18. package/dist/cjs/components/nodes/ReactNodeView.js +59 -17
  19. package/dist/cjs/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js} +3 -3
  20. package/dist/cjs/hooks/useEditor.js +0 -4
  21. package/dist/cjs/hooks/useEditorEventCallback.js +1 -1
  22. package/dist/cjs/hooks/useMarkViewDescription.js +24 -21
  23. package/dist/cjs/hooks/useNodePos.js +18 -0
  24. package/dist/cjs/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js} +30 -25
  25. package/dist/cjs/index.js +8 -0
  26. package/dist/cjs/refs.js +28 -0
  27. package/dist/cjs/viewdesc.js +18 -5
  28. package/dist/esm/StaticEditorView.js +0 -3
  29. package/dist/esm/components/ChildNodeViews.js +4 -4
  30. package/dist/esm/components/NativeWidgetView.js +2 -2
  31. package/dist/esm/components/OutputSpec.js +10 -3
  32. package/dist/esm/components/ProseMirror.js +11 -17
  33. package/dist/esm/components/SeparatorHackView.js +2 -2
  34. package/dist/esm/components/TrailingHackView.js +2 -2
  35. package/dist/esm/components/WidgetView.js +2 -2
  36. package/dist/esm/components/marks/DefaultMarkView.js +2 -1
  37. package/dist/esm/components/marks/MarkView.js +2 -2
  38. package/dist/esm/components/marks/{CustomMarkView.js → MarkViewConstructorView.js} +14 -5
  39. package/dist/esm/components/marks/ReactMarkView.js +26 -6
  40. package/dist/esm/components/nodes/DefaultNodeView.js +3 -2
  41. package/dist/esm/components/nodes/DocNodeView.js +8 -7
  42. package/dist/esm/components/nodes/NodeView.js +7 -4
  43. package/dist/esm/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js} +20 -7
  44. package/dist/esm/components/nodes/ReactNodeView.js +59 -17
  45. package/dist/esm/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js} +1 -1
  46. package/dist/esm/hooks/useEditor.js +0 -4
  47. package/dist/esm/hooks/useEditorEffect.js +0 -4
  48. package/dist/esm/hooks/useEditorEventCallback.js +6 -4
  49. package/dist/esm/hooks/useMarkViewDescription.js +26 -23
  50. package/dist/esm/hooks/useNodePos.js +15 -0
  51. package/dist/esm/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js} +29 -24
  52. package/dist/esm/index.js +2 -0
  53. package/dist/esm/refs.js +18 -0
  54. package/dist/esm/viewdesc.js +13 -6
  55. package/dist/tsconfig.tsbuildinfo +1 -1
  56. package/dist/types/AbstractEditorView.d.ts +0 -1
  57. package/dist/types/StaticEditorView.d.ts +0 -1
  58. package/dist/types/components/OutputSpec.d.ts +2 -1
  59. package/dist/types/components/ProseMirror.d.ts +3 -11
  60. package/dist/types/components/ProseMirrorDoc.d.ts +2 -2
  61. package/dist/types/components/marks/DefaultMarkView.d.ts +1 -1
  62. package/dist/types/components/marks/MarkViewComponentProps.d.ts +4 -3
  63. package/dist/types/components/marks/{CustomMarkView.d.ts → MarkViewConstructorView.d.ts} +1 -1
  64. package/dist/types/components/nodes/DefaultNodeView.d.ts +1 -1
  65. package/dist/types/components/nodes/DocNodeView.d.ts +2 -2
  66. package/dist/types/components/nodes/NodeView.d.ts +1 -0
  67. package/dist/types/components/nodes/NodeViewComponentProps.d.ts +4 -3
  68. package/dist/types/components/{CustomNodeView.d.ts → nodes/NodeViewConstructorView.d.ts} +1 -1
  69. package/dist/types/constants.d.ts +1 -1
  70. package/dist/types/contexts/{ChildDescriptorsContext.d.ts → ChildDescriptionsContext.d.ts} +1 -1
  71. package/dist/types/hooks/useEditorEffect.d.ts +0 -4
  72. package/dist/types/hooks/useEditorEventCallback.d.ts +6 -4
  73. package/dist/types/hooks/useMarkViewDescription.d.ts +6 -9
  74. package/dist/types/hooks/useNodePos.d.ts +9 -0
  75. package/dist/types/hooks/{useNodeViewDescriptor.d.ts → useNodeViewDescription.d.ts} +5 -9
  76. package/dist/types/index.d.ts +2 -0
  77. package/dist/types/props.d.ts +26 -26
  78. package/dist/types/refs.d.ts +2 -0
  79. package/dist/types/viewdesc.d.ts +4 -0
  80. package/package.json +12 -20
  81. package/dist/cjs/components/CustomNodeView.js +0 -132
  82. package/dist/cjs/components/DefaultNodeView.js +0 -67
  83. package/dist/cjs/components/DocNodeView.js +0 -96
  84. package/dist/cjs/components/MarkView.js +0 -119
  85. package/dist/cjs/components/NodeView.js +0 -86
  86. package/dist/cjs/components/NodeViewComponentProps.js +0 -4
  87. package/dist/cjs/components/ReactNodeView.js +0 -174
  88. package/dist/cjs/components/marks/OldMarkView.js +0 -120
  89. package/dist/cjs/tiptap/ReactProseMirrorNodeView.js +0 -26
  90. package/dist/cjs/tiptap/TiptapEditor.js +0 -34
  91. package/dist/cjs/tiptap/TiptapEditorContent.js +0 -142
  92. package/dist/cjs/tiptap/TiptapEditorView.js +0 -118
  93. package/dist/cjs/tiptap/TiptapNodeView.js +0 -26
  94. package/dist/cjs/tiptap/contexts/TiptapEditorContext.js +0 -12
  95. package/dist/cjs/tiptap/extensions/ReactProseMirror.js +0 -40
  96. package/dist/cjs/tiptap/hooks/useIsInReactProseMirror.js +0 -15
  97. package/dist/cjs/tiptap/hooks/useTiptapEditor.js +0 -43
  98. package/dist/cjs/tiptap/hooks/useTiptapEditorEffect.js +0 -35
  99. package/dist/cjs/tiptap/hooks/useTiptapEditorEventCallback.js +0 -35
  100. package/dist/cjs/tiptap/index.js +0 -48
  101. package/dist/cjs/tiptap/tiptapNodeView.js +0 -237
  102. package/dist/esm/components/CustomNodeView.js +0 -81
  103. package/dist/esm/components/DefaultNodeView.js +0 -16
  104. package/dist/esm/components/DocNodeView.js +0 -45
  105. package/dist/esm/components/MarkView.js +0 -68
  106. package/dist/esm/components/NodeView.js +0 -35
  107. package/dist/esm/components/NodeViewComponentProps.js +0 -1
  108. package/dist/esm/components/ReactNodeView.js +0 -123
  109. package/dist/esm/components/marks/OldMarkView.js +0 -69
  110. package/dist/esm/tiptap/ReactProseMirrorNodeView.js +0 -22
  111. package/dist/esm/tiptap/TiptapEditor.js +0 -24
  112. package/dist/esm/tiptap/TiptapEditorContent.js +0 -91
  113. package/dist/esm/tiptap/TiptapEditorView.js +0 -69
  114. package/dist/esm/tiptap/TiptapNodeView.js +0 -22
  115. package/dist/esm/tiptap/contexts/TiptapEditorContext.js +0 -2
  116. package/dist/esm/tiptap/extensions/ReactProseMirror.js +0 -30
  117. package/dist/esm/tiptap/hooks/useIsInReactProseMirror.js +0 -5
  118. package/dist/esm/tiptap/hooks/useTiptapEditor.js +0 -33
  119. package/dist/esm/tiptap/hooks/useTiptapEditorEffect.js +0 -42
  120. package/dist/esm/tiptap/hooks/useTiptapEditorEventCallback.js +0 -35
  121. package/dist/esm/tiptap/index.js +0 -9
  122. package/dist/esm/tiptap/tiptapNodeView.js +0 -205
  123. package/dist/types/components/DefaultNodeView.d.ts +0 -3
  124. package/dist/types/components/DocNodeView.d.ts +0 -12
  125. package/dist/types/components/MarkView.d.ts +0 -9
  126. package/dist/types/components/NodeView.d.ts +0 -11
  127. package/dist/types/components/NodeViewComponentProps.d.ts +0 -12
  128. package/dist/types/components/ReactNodeView.d.ts +0 -13
  129. package/dist/types/components/marks/OldMarkView.d.ts +0 -10
  130. package/dist/types/components/nodes/CustomNodeView.d.ts +0 -12
  131. package/dist/types/tiptap/ReactProseMirrorNodeView.d.ts +0 -15
  132. package/dist/types/tiptap/TiptapEditor.d.ts +0 -6
  133. package/dist/types/tiptap/TiptapEditorContent.d.ts +0 -19
  134. package/dist/types/tiptap/TiptapEditorView.d.ts +0 -16
  135. package/dist/types/tiptap/TiptapNodeView.d.ts +0 -15
  136. package/dist/types/tiptap/contexts/TiptapEditorContext.d.ts +0 -6
  137. package/dist/types/tiptap/extensions/ReactProseMirror.d.ts +0 -9
  138. package/dist/types/tiptap/hooks/useIsInReactProseMirror.d.ts +0 -1
  139. package/dist/types/tiptap/hooks/useTiptapEditor.d.ts +0 -4
  140. package/dist/types/tiptap/hooks/useTiptapEditorEffect.d.ts +0 -21
  141. package/dist/types/tiptap/hooks/useTiptapEditorEventCallback.d.ts +0 -13
  142. package/dist/types/tiptap/index.d.ts +0 -9
  143. 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,2 +0,0 @@
1
- import { createContext } from "react";
2
- export const TiptapEditorContext = createContext(null);
@@ -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,5 +0,0 @@
1
- import { useContext } from "react";
2
- import { EditorContext } from "../../contexts/EditorContext.js";
3
- export function useIsInReactProseMirror() {
4
- return useContext(EditorContext) !== null;
5
- }
@@ -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
- }
@@ -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,3 +0,0 @@
1
- import React from "react";
2
- import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
3
- export declare const DefaultNodeView: React.ForwardRefExoticComponent<Omit<NodeViewComponentProps, "ref"> & React.RefAttributes<HTMLElement>>;
@@ -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 {};