@handlewithcare/react-prosemirror 2.8.0 → 2.9.0-tiptap.24

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 (83) hide show
  1. package/dist/cjs/StaticEditorView.js +3 -0
  2. package/dist/cjs/commands/reorderSiblings.js +60 -45
  3. package/dist/cjs/components/CustomNodeView.js +132 -0
  4. package/dist/cjs/components/DefaultNodeView.js +67 -0
  5. package/dist/cjs/components/DocNodeView.js +96 -0
  6. package/dist/cjs/components/MarkView.js +119 -0
  7. package/dist/cjs/components/NodeView.js +86 -0
  8. package/dist/cjs/components/NodeViewComponentProps.js +4 -0
  9. package/dist/cjs/components/ReactNodeView.js +174 -0
  10. package/dist/cjs/components/nodes/ReactNodeView.js +4 -4
  11. package/dist/cjs/hooks/useEditor.js +4 -0
  12. package/dist/cjs/hooks/useEditorEventCallback.js +1 -1
  13. package/dist/cjs/tiptap/ReactProseMirrorNodeView.js +26 -0
  14. package/dist/cjs/tiptap/TiptapEditor.js +34 -0
  15. package/dist/cjs/tiptap/TiptapEditorContent.js +142 -0
  16. package/dist/cjs/tiptap/TiptapEditorView.js +118 -0
  17. package/dist/cjs/tiptap/TiptapNodeView.js +26 -0
  18. package/dist/cjs/tiptap/contexts/TiptapEditorContext.js +12 -0
  19. package/dist/cjs/tiptap/extensions/ReactProseMirror.js +40 -0
  20. package/dist/cjs/tiptap/hooks/useIsInReactProseMirror.js +15 -0
  21. package/dist/cjs/tiptap/hooks/useTiptapEditor.js +43 -0
  22. package/dist/cjs/tiptap/hooks/useTiptapEditorEffect.js +35 -0
  23. package/dist/cjs/tiptap/hooks/useTiptapEditorEventCallback.js +35 -0
  24. package/dist/cjs/tiptap/index.js +48 -0
  25. package/dist/cjs/tiptap/tiptapNodeView.js +237 -0
  26. package/dist/cjs/viewdesc.js +5 -5
  27. package/dist/esm/StaticEditorView.js +3 -0
  28. package/dist/esm/commands/reorderSiblings.js +49 -42
  29. package/dist/esm/components/CustomNodeView.js +81 -0
  30. package/dist/esm/components/DefaultNodeView.js +16 -0
  31. package/dist/esm/components/DocNodeView.js +45 -0
  32. package/dist/esm/components/MarkView.js +68 -0
  33. package/dist/esm/components/NodeView.js +35 -0
  34. package/dist/esm/components/NodeViewComponentProps.js +1 -0
  35. package/dist/esm/components/ReactNodeView.js +123 -0
  36. package/dist/esm/components/nodes/ReactNodeView.js +4 -4
  37. package/dist/esm/hooks/useEditor.js +4 -0
  38. package/dist/esm/hooks/useEditorEffect.js +4 -0
  39. package/dist/esm/hooks/useEditorEventCallback.js +4 -6
  40. package/dist/esm/tiptap/ReactProseMirrorNodeView.js +22 -0
  41. package/dist/esm/tiptap/TiptapEditor.js +24 -0
  42. package/dist/esm/tiptap/TiptapEditorContent.js +91 -0
  43. package/dist/esm/tiptap/TiptapEditorView.js +69 -0
  44. package/dist/esm/tiptap/TiptapNodeView.js +22 -0
  45. package/dist/esm/tiptap/contexts/TiptapEditorContext.js +2 -0
  46. package/dist/esm/tiptap/extensions/ReactProseMirror.js +30 -0
  47. package/dist/esm/tiptap/hooks/useIsInReactProseMirror.js +5 -0
  48. package/dist/esm/tiptap/hooks/useTiptapEditor.js +33 -0
  49. package/dist/esm/tiptap/hooks/useTiptapEditorEffect.js +42 -0
  50. package/dist/esm/tiptap/hooks/useTiptapEditorEventCallback.js +35 -0
  51. package/dist/esm/tiptap/index.js +9 -0
  52. package/dist/esm/tiptap/tiptapNodeView.js +205 -0
  53. package/dist/esm/viewdesc.js +5 -5
  54. package/dist/tsconfig.tsbuildinfo +1 -1
  55. package/dist/types/AbstractEditorView.d.ts +1 -0
  56. package/dist/types/StaticEditorView.d.ts +1 -0
  57. package/dist/types/commands/__tests__/reorderSiblings.test.d.ts +1 -0
  58. package/dist/types/commands/reorderSiblings.d.ts +3 -1
  59. package/dist/types/components/CustomNodeView.d.ts +12 -0
  60. package/dist/types/components/DefaultNodeView.d.ts +3 -0
  61. package/dist/types/components/DocNodeView.d.ts +12 -0
  62. package/dist/types/components/MarkView.d.ts +9 -0
  63. package/dist/types/components/NodeView.d.ts +11 -0
  64. package/dist/types/components/NodeViewComponentProps.d.ts +12 -0
  65. package/dist/types/components/ReactNodeView.d.ts +13 -0
  66. package/dist/types/constants.d.ts +1 -1
  67. package/dist/types/hooks/useEditorEffect.d.ts +4 -0
  68. package/dist/types/hooks/useEditorEventCallback.d.ts +4 -6
  69. package/dist/types/props.d.ts +26 -26
  70. package/dist/types/tiptap/ReactProseMirrorNodeView.d.ts +15 -0
  71. package/dist/types/tiptap/TiptapEditor.d.ts +6 -0
  72. package/dist/types/tiptap/TiptapEditorContent.d.ts +19 -0
  73. package/dist/types/tiptap/TiptapEditorView.d.ts +16 -0
  74. package/dist/types/tiptap/TiptapNodeView.d.ts +15 -0
  75. package/dist/types/tiptap/contexts/TiptapEditorContext.d.ts +6 -0
  76. package/dist/types/tiptap/extensions/ReactProseMirror.d.ts +9 -0
  77. package/dist/types/tiptap/hooks/useIsInReactProseMirror.d.ts +1 -0
  78. package/dist/types/tiptap/hooks/useTiptapEditor.d.ts +4 -0
  79. package/dist/types/tiptap/hooks/useTiptapEditorEffect.d.ts +21 -0
  80. package/dist/types/tiptap/hooks/useTiptapEditorEventCallback.d.ts +13 -0
  81. package/dist/types/tiptap/index.d.ts +9 -0
  82. package/dist/types/tiptap/tiptapNodeView.d.ts +50 -0
  83. package/package.json +19 -11
@@ -11,6 +11,7 @@ export interface AbstractEditorView {
11
11
  readonly nodeViews: NodeViewSet;
12
12
  readonly props: DirectEditorProps;
13
13
  readonly state: EditorState;
14
+ readonly isDestroyed: boolean;
14
15
  setProps(props: Partial<DirectEditorProps>): void;
15
16
  update(props: DirectEditorProps): void;
16
17
  updateState(state: EditorState): void;
@@ -9,6 +9,7 @@ export declare class StaticEditorView implements AbstractEditorView {
9
9
  get dom(): null;
10
10
  get editable(): boolean;
11
11
  get state(): EditorState;
12
+ get isDestroyed(): boolean;
12
13
  setProps(props: Partial<DirectEditorProps>): void;
13
14
  update(props: DirectEditorProps): void;
14
15
  updateState(state: EditorState): void;
@@ -1,4 +1,5 @@
1
- import { Command } from "prosemirror-state";
1
+ import { Command, EditorState, Transaction } from "prosemirror-state";
2
+ import { EditorView } from "prosemirror-view";
2
3
  /**
3
4
  * Create a command function that reorders the adjacent nodes starting
4
5
  * at the provided position.
@@ -10,3 +11,4 @@ import { Command } from "prosemirror-state";
10
11
  * and keep the other two in relative order, set `order` to `[1, 2, 0]`.
11
12
  */
12
13
  export declare function reorderSiblings(pos: number, order: number[]): Command;
14
+ export declare function reorderSiblingsOnTransaction(pos: number, order: number[], tr: Transaction, state: EditorState, dispatch?: EditorView["dispatch"]): boolean;
@@ -0,0 +1,12 @@
1
+ import { Node } from "prosemirror-model";
2
+ import { Decoration, DecorationSource, NodeViewConstructor } from "prosemirror-view";
3
+ import React from "react";
4
+ interface Props {
5
+ constructor: NodeViewConstructor;
6
+ node: Node;
7
+ getPos: () => number;
8
+ innerDeco: DecorationSource;
9
+ outerDeco: readonly Decoration[];
10
+ }
11
+ export declare const CustomNodeView: React.NamedExoticComponent<Props>;
12
+ export {};
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import { NodeViewComponentProps } from "./NodeViewComponentProps.js";
3
+ export declare const DefaultNodeView: React.ForwardRefExoticComponent<Omit<NodeViewComponentProps, "ref"> & React.RefAttributes<HTMLElement>>;
@@ -0,0 +1,12 @@
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>>>;
@@ -0,0 +1,9 @@
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 {};
@@ -0,0 +1,11 @@
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 {};
@@ -0,0 +1,12 @@
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
+ }
@@ -0,0 +1,13 @@
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 {};
@@ -1,4 +1,4 @@
1
1
  import { Schema } from "prosemirror-model";
2
2
  import { EditorState } from "prosemirror-state";
3
- export declare const EMPTY_SCHEMA: Schema<"doc" | "text", any>;
3
+ export declare const EMPTY_SCHEMA: Schema<"text" | "doc", any>;
4
4
  export declare const EMPTY_STATE: EditorState;
@@ -13,5 +13,9 @@ import type { DependencyList } from "react";
13
13
  * synchronously after all DOM mutations, but they do so
14
14
  * _after_ the EditorView has been updated, even when the
15
15
  * EditorView lives in an ancestor component.
16
+ *
17
+ * This hook can only be used in a component that is mounted
18
+ * as a child of the TiptapEditorView component, including
19
+ * React node view components.
16
20
  */
17
21
  export declare function useEditorEffect(effect: (editorView: EditorView) => void | (() => void), dependencies?: DependencyList): void;
@@ -6,10 +6,8 @@ import type { EditorView } from "prosemirror-view";
6
6
  * The callback will be called with the EditorView instance
7
7
  * as its first argument.
8
8
  *
9
- * This hook is dependent on both the
10
- * `EditorViewContext.Provider` and the
11
- * `DeferredLayoutEffectProvider`. It can only be used in a
12
- * component that is mounted as a child of both of these
13
- * providers.
9
+ * This hook can only be used in a component that is mounted
10
+ * as a child of the TiptapEditorView component, including
11
+ * React node view components.
14
12
  */
15
- export declare function useEditorEventCallback<T extends unknown[], R>(callback: (view: EditorView, ...args: T) => R): (...args: T) => R;
13
+ export declare function useEditorEventCallback<This, T extends unknown[], R>(callback: (this: This, view: EditorView, ...args: T) => R): (this: This, ...args: T) => R;
@@ -904,19 +904,19 @@ export declare function mergeReactProps(a: HTMLProps<HTMLElement>, b: HTMLProps<
904
904
  suppressContentEditableWarning?: boolean | undefined;
905
905
  suppressHydrationWarning?: boolean | undefined;
906
906
  accessKey?: string | undefined;
907
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
907
+ autoCapitalize?: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined;
908
908
  autoFocus?: boolean | undefined;
909
- contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
909
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
910
910
  contextMenu?: string | undefined;
911
911
  dir?: string | undefined;
912
- draggable?: (boolean | "false" | "true") | undefined;
913
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
912
+ draggable?: (boolean | "true" | "false") | undefined;
913
+ enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
914
914
  hidden?: boolean | undefined;
915
915
  id?: string | undefined;
916
916
  lang?: string | undefined;
917
917
  nonce?: string | undefined;
918
918
  slot?: string | undefined;
919
- spellCheck?: (boolean | "false" | "true") | undefined;
919
+ spellCheck?: (boolean | "true" | "false") | undefined;
920
920
  tabIndex?: number | undefined;
921
921
  title?: string | undefined;
922
922
  translate?: "yes" | "no" | undefined;
@@ -944,57 +944,57 @@ export declare function mergeReactProps(a: HTMLProps<HTMLElement>, b: HTMLProps<
944
944
  results?: number | undefined;
945
945
  security?: string | undefined;
946
946
  unselectable?: "off" | "on" | undefined;
947
- inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
947
+ inputMode?: "search" | "text" | "none" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
948
948
  is?: string | undefined;
949
949
  exportparts?: string | undefined;
950
950
  part?: string | undefined;
951
951
  "aria-activedescendant"?: string | undefined;
952
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
953
- "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
952
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
953
+ "aria-autocomplete"?: "list" | "none" | "both" | "inline" | undefined;
954
954
  "aria-braillelabel"?: string | undefined;
955
955
  "aria-brailleroledescription"?: string | undefined;
956
- "aria-busy"?: (boolean | "false" | "true") | undefined;
957
- "aria-checked"?: boolean | "false" | "true" | "mixed" | undefined;
956
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
957
+ "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
958
958
  "aria-colcount"?: number | undefined;
959
959
  "aria-colindex"?: number | undefined;
960
960
  "aria-colindextext"?: string | undefined;
961
961
  "aria-colspan"?: number | undefined;
962
962
  "aria-controls"?: string | undefined;
963
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
963
+ "aria-current"?: boolean | "time" | "step" | "date" | "true" | "false" | "page" | "location" | undefined;
964
964
  "aria-describedby"?: string | undefined;
965
965
  "aria-description"?: string | undefined;
966
966
  "aria-details"?: string | undefined;
967
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
968
- "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
967
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
968
+ "aria-dropeffect"?: "copy" | "link" | "none" | "move" | "execute" | "popup" | undefined;
969
969
  "aria-errormessage"?: string | undefined;
970
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
970
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
971
971
  "aria-flowto"?: string | undefined;
972
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
973
- "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
974
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
975
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
972
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
973
+ "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
974
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
975
+ "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
976
976
  "aria-keyshortcuts"?: string | undefined;
977
977
  "aria-label"?: string | undefined;
978
978
  "aria-labelledby"?: string | undefined;
979
979
  "aria-level"?: number | undefined;
980
980
  "aria-live"?: "off" | "assertive" | "polite" | undefined;
981
- "aria-modal"?: (boolean | "false" | "true") | undefined;
982
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
983
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
981
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
982
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
983
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
984
984
  "aria-orientation"?: "horizontal" | "vertical" | undefined;
985
985
  "aria-owns"?: string | undefined;
986
986
  "aria-placeholder"?: string | undefined;
987
987
  "aria-posinset"?: number | undefined;
988
- "aria-pressed"?: boolean | "false" | "true" | "mixed" | undefined;
989
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
990
- "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
991
- "aria-required"?: (boolean | "false" | "true") | undefined;
988
+ "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
989
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
990
+ "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
991
+ "aria-required"?: (boolean | "true" | "false") | undefined;
992
992
  "aria-roledescription"?: string | undefined;
993
993
  "aria-rowcount"?: number | undefined;
994
994
  "aria-rowindex"?: number | undefined;
995
995
  "aria-rowindextext"?: string | undefined;
996
996
  "aria-rowspan"?: number | undefined;
997
- "aria-selected"?: (boolean | "false" | "true") | undefined;
997
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
998
998
  "aria-setsize"?: number | undefined;
999
999
  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
1000
1000
  "aria-valuemax"?: number | undefined;
@@ -0,0 +1,15 @@
1
+ import { Editor, NodeView, NodeViewRendererOptions, NodeViewRendererProps } 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
+ */
9
+ export declare class ReactProseMirrorNodeView<Component, NodeEditor extends Editor = Editor, Options extends NodeViewRendererOptions = NodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
10
+ private _dom;
11
+ private _contentDOM;
12
+ constructor(component: Component, props: NodeViewRendererProps, dom: HTMLElement, contentDOM: HTMLElement | null, options?: Partial<Options>);
13
+ get dom(): HTMLElement;
14
+ get contentDOM(): HTMLElement | null;
15
+ }
@@ -0,0 +1,6 @@
1
+ import { Editor, type EditorOptions } from "@tiptap/core";
2
+ import type { EditorView } from "prosemirror-view";
3
+ export declare class TiptapEditor extends Editor {
4
+ constructor(options?: Partial<EditorOptions>);
5
+ get view(): EditorView;
6
+ }
@@ -0,0 +1,19 @@
1
+ import { Editor } from "@tiptap/core";
2
+ import { ReactRenderer } from "@tiptap/react";
3
+ import React, { ForwardedRef, HTMLProps, ReactPortal } from "react";
4
+ export type ContentComponent = {
5
+ setRenderer(id: string, renderer: ReactRenderer): void;
6
+ removeRenderer(id: string): void;
7
+ subscribe: (callback: () => void) => () => void;
8
+ getSnapshot: () => Record<string, ReactPortal>;
9
+ getServerSnapshot: () => Record<string, ReactPortal>;
10
+ };
11
+ export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
12
+ editor: Editor | null;
13
+ innerRef?: ForwardedRef<HTMLDivElement | null>;
14
+ }
15
+ interface Props extends Omit<HTMLProps<HTMLElement>, "as"> {
16
+ editor: Editor;
17
+ }
18
+ export declare function TiptapEditorContent({ editor: editorProp, ...props }: Props): React.JSX.Element;
19
+ export {};
@@ -0,0 +1,16 @@
1
+ import { Editor } from "@tiptap/core";
2
+ import React, { ComponentType, ReactNode } from "react";
3
+ import { MarkViewComponentProps } from "../components/marks/MarkViewComponentProps.js";
4
+ import { NodeViewComponentProps } from "../components/nodes/NodeViewComponentProps.js";
5
+ interface Props {
6
+ editor: Editor;
7
+ nodeViews?: Record<string, ComponentType<NodeViewComponentProps>>;
8
+ markViews?: Record<string, ComponentType<MarkViewComponentProps>>;
9
+ children?: ReactNode;
10
+ static?: boolean;
11
+ }
12
+ /**
13
+ * Render a Tiptap-compatible React ProseMirror editor.
14
+ */
15
+ export declare function TiptapEditorView({ editor, nodeViews, markViews, children, static: isStatic, }: Props): React.JSX.Element;
16
+ export {};
@@ -0,0 +1,15 @@
1
+ import { Editor, NodeView, NodeViewRendererOptions, NodeViewRendererProps } 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
+ */
9
+ export declare class ReactProseMirrorNodeView<Component, NodeEditor extends Editor = Editor, Options extends NodeViewRendererOptions = NodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
10
+ private _dom;
11
+ private _contentDOM;
12
+ constructor(component: Component, props: NodeViewRendererProps, dom: HTMLElement, contentDOM: HTMLElement | null, options?: Partial<Options>);
13
+ get dom(): HTMLElement;
14
+ get contentDOM(): HTMLElement | null;
15
+ }
@@ -0,0 +1,6 @@
1
+ export interface TiptapEditorContextValue {
2
+ isEditorInitialized: boolean;
3
+ onEditorInitialize: () => void;
4
+ onEditorDeinitialize: () => void;
5
+ }
6
+ export declare const TiptapEditorContext: import("react").Context<TiptapEditorContextValue>;
@@ -0,0 +1,9 @@
1
+ import { Extension } from "@tiptap/core";
2
+ declare module "@tiptap/core" {
3
+ interface Commands<ReturnType> {
4
+ reactProseMirrorCommands: {
5
+ reorderSiblings: (pos: number, order: number[]) => ReturnType;
6
+ };
7
+ }
8
+ }
9
+ export declare const ReactProseMirror: Extension<any, any>;
@@ -0,0 +1 @@
1
+ export declare function useIsInReactProseMirror(): boolean;
@@ -0,0 +1,4 @@
1
+ import { useEditor } from "@tiptap/react";
2
+ import { DependencyList } from "react";
3
+ export type UseTiptapEditorOptions = Omit<Parameters<typeof useEditor>[0], "element">;
4
+ export declare function useTiptapEditor(options: UseTiptapEditorOptions, deps?: DependencyList): import("@tiptap/core").Editor;
@@ -0,0 +1,21 @@
1
+ import { Editor } from "@tiptap/core";
2
+ import { DependencyList } from "react";
3
+ /**
4
+ * Registers a layout effect to run after the EditorView has
5
+ * been updated with the latest EditorState and Decorations.
6
+ *
7
+ * Effects can take a Tiptap Editor instance as an argument.
8
+ * This hook should be used to execute layout effects that
9
+ * depend on the Editor, such as for positioning DOM
10
+ * nodes based on ProseMirror positions.
11
+ *
12
+ * Layout effects registered with this hook still fire
13
+ * synchronously after all DOM mutations, but they do so
14
+ * _after_ the Editor has been updated, even when the
15
+ * Editor lives in an ancestor component.
16
+ *
17
+ * This hook can only be used in a component that is mounted
18
+ * as a child of the TiptapEditorView component, including
19
+ * React node view components.
20
+ */
21
+ export declare function useTiptapEditorEffect(effect: (editor: Editor) => void | (() => void), dependencies?: DependencyList): void;
@@ -0,0 +1,13 @@
1
+ import { Editor } from "@tiptap/core";
2
+ /**
3
+ * Returns a stable function reference to be used as an
4
+ * event handler callback.
5
+ *
6
+ * The callback will be called with the Tiptap Editor instance
7
+ * as its first argument.
8
+ *
9
+ * This hook can only be used in a component that is mounted
10
+ * as a child of the TiptapEditorView component, including
11
+ * React node view components.
12
+ */
13
+ export declare function useTiptapEditorEventCallback<T extends unknown[], R>(callback: (editor: Editor, ...args: T) => R): (...args: T) => R;
@@ -0,0 +1,9 @@
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 { type UseTiptapEditorOptions, useTiptapEditor, } from "./hooks/useTiptapEditor.js";
9
+ export { ReactProseMirror } from "./extensions/ReactProseMirror.js";
@@ -0,0 +1,50 @@
1
+ import { type ReactNodeViewProps } from "@tiptap/react";
2
+ import { type Node as ProseMirrorNode } from "prosemirror-model";
3
+ import { ViewMutationRecord } from "prosemirror-view";
4
+ import React, { type ComponentType, ElementType, Ref } from "react";
5
+ import { NodeViewComponentProps } from "../components/nodes/NodeViewComponentProps.js";
6
+ export interface TiptapNodeViewProps {
7
+ component: ComponentType<Omit<ReactNodeViewProps, "ref"> & {
8
+ ref?: Ref<HTMLElement | null>;
9
+ }>;
10
+ extension: ReactNodeViewProps["extension"];
11
+ className?: string | undefined;
12
+ attrs?: Record<string, string> | ((props: {
13
+ node: ProseMirrorNode;
14
+ HTMLAttributes: Record<string, unknown>;
15
+ }) => Record<string, string>) | undefined;
16
+ as?: ElementType | undefined;
17
+ stopEvent?: ((props: {
18
+ event: Event;
19
+ }) => boolean) | null;
20
+ ignoreMutation?: ((props: {
21
+ mutation: ViewMutationRecord;
22
+ }) => boolean) | null;
23
+ contentDOMElementTag?: ElementType | undefined;
24
+ }
25
+ /**
26
+ * Convert a Tiptap node view component to a React ProseMirror node view component
27
+ *
28
+ * Given a Tiptap-compatible React component and a Tiptap extension, returns
29
+ * a React component that can be passed to React ProseMirror as a custom node view.
30
+ *
31
+ * Example:
32
+ *
33
+ * ```tsx
34
+ * const nodeViews = {
35
+ * codeBlock: nodeView({
36
+ * component: function CodeBlock(nodeViewProps) {
37
+ * return (
38
+ * <AnnotatableNodeViewWrapper {...nodeViewProps}>
39
+ * <pre>
40
+ * <NodeViewContent as="code" />
41
+ * </pre>
42
+ * </AnnotatableNodeViewWrapper>
43
+ * )
44
+ * },
45
+ * extension: CodeBlockExtension,
46
+ * }),
47
+ * }
48
+ * ```
49
+ */
50
+ export declare function tiptapNodeView({ component: WrappedComponent, extension, as, className, attrs, contentDOMElementTag: InnerTag, stopEvent, ignoreMutation, }: TiptapNodeViewProps): React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<NodeViewComponentProps, "ref"> & React.RefAttributes<HTMLElement | null>>>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handlewithcare/react-prosemirror",
3
- "version": "2.8.0",
3
+ "version": "2.9.0-tiptap.24",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "dist/cjs/index.js",
@@ -12,6 +12,11 @@
12
12
  "import": "./dist/esm/index.js",
13
13
  "require": "./dist/cjs/index.js"
14
14
  },
15
+ "./tiptap": {
16
+ "types": "./dist/types/tiptap/index.d.ts",
17
+ "import": "./dist/esm/tiptap/index.js",
18
+ "require": "./dist/cjs/tiptap/index.js"
19
+ },
15
20
  "./src": "./src/index.ts"
16
21
  },
17
22
  "files": [
@@ -94,17 +99,17 @@
94
99
  "mdast-util-gfm-table": "^2.0.0",
95
100
  "micromark-extension-gfm-table": "^2.1.1",
96
101
  "prettier": "^2.8.3",
97
- "prosemirror-commands": "^1.5.0",
98
- "prosemirror-gapcursor": "^1.3.2",
99
- "prosemirror-history": "^1.4.1",
100
- "prosemirror-inputrules": "^1.4.0",
101
- "prosemirror-keymap": "^1.2.1",
102
- "prosemirror-model": "^1.25.1",
103
- "prosemirror-schema-list": "^1.2.2",
104
- "prosemirror-state": "^1.4.3",
105
- "prosemirror-tables": "^1.3.7",
102
+ "prosemirror-commands": "^1.7.1",
103
+ "prosemirror-gapcursor": "^1.4.0",
104
+ "prosemirror-history": "^1.5.0",
105
+ "prosemirror-inputrules": "^1.5.1",
106
+ "prosemirror-keymap": "^1.2.3",
107
+ "prosemirror-model": "^1.25.4",
108
+ "prosemirror-schema-list": "^1.5.1",
109
+ "prosemirror-state": "^1.4.4",
110
+ "prosemirror-tables": "^1.8.5",
106
111
  "prosemirror-test-builder": "^1.1.1",
107
- "prosemirror-transform": "^1.8.0",
112
+ "prosemirror-transform": "^1.10.5",
108
113
  "prosemirror-view": "1.41.4",
109
114
  "react": "^18.2.0",
110
115
  "react-dom": "^18.2.0",
@@ -131,6 +136,9 @@
131
136
  "node": ">=16.9"
132
137
  },
133
138
  "dependencies": {
139
+ "@tiptap/core": "^3.15.3",
140
+ "@tiptap/pm": "^3.15.3",
141
+ "@tiptap/react": "^3.15.3",
134
142
  "classnames": "^2.3.2"
135
143
  },
136
144
  "publishConfig": {