@handlewithcare/react-prosemirror 3.1.0-tiptap.48 → 3.1.0-tiptap.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/useComponentEventListeners.js +46 -5
- package/dist/cjs/hooks/useEditor.js +6 -6
- package/dist/cjs/tiptap/hooks/useEditor.js +349 -0
- package/dist/cjs/tiptap/hooks/useTiptapEditor.js +2 -2
- package/dist/esm/hooks/useComponentEventListeners.js +53 -12
- package/dist/esm/hooks/useEditor.js +6 -6
- package/dist/esm/tiptap/hooks/useEditor.js +339 -0
- package/dist/esm/tiptap/hooks/useTiptapEditor.js +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/TextNodeView.d.ts +2 -2
- package/dist/types/constants.d.ts +1 -1
- package/dist/types/contexts/EditorContext.d.ts +1 -1
- package/dist/types/hooks/useComponentEventListeners.d.ts +11 -10
- package/dist/types/hooks/useEditor.d.ts +2 -2
- package/dist/types/hooks/useEditorEventListener.d.ts +1 -1
- package/dist/types/props.d.ts +26 -26
- package/dist/types/tiptap/hooks/useEditor.d.ts +38 -0
- package/dist/types/tiptap/hooks/useTiptapEditor.d.ts +1 -1
- package/dist/types/viewdesc.d.ts +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { Node } from "prosemirror-model";
|
|
|
2
2
|
import { DOMEventMap, Decoration } from "prosemirror-view";
|
|
3
3
|
import { Component, MutableRefObject } from "react";
|
|
4
4
|
import { AbstractEditorView } from "../AbstractEditorView.js";
|
|
5
|
-
import { EventHandler } from "../
|
|
5
|
+
import { EventHandler } from "../hooks/useComponentEventListeners.js";
|
|
6
6
|
import { CompositionViewDesc, TextViewDesc, ViewDesc } from "../viewdesc.js";
|
|
7
7
|
type Props = {
|
|
8
8
|
view: AbstractEditorView;
|
|
@@ -21,7 +21,7 @@ export declare class TextNodeView extends Component<Props> {
|
|
|
21
21
|
containsCompositionNodeText: boolean;
|
|
22
22
|
shouldProtect(props: Props): boolean;
|
|
23
23
|
handleCompositionEnd: () => void;
|
|
24
|
-
create():
|
|
24
|
+
create(): TextViewDesc | CompositionViewDesc | null;
|
|
25
25
|
update(): boolean;
|
|
26
26
|
destroy(): void;
|
|
27
27
|
updateEffect(): void;
|
|
@@ -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<"
|
|
3
|
+
export declare const EMPTY_SCHEMA: Schema<"text" | "doc", any>;
|
|
4
4
|
export declare const EMPTY_STATE: EditorState;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { DOMEventMap } from "prosemirror-view";
|
|
2
2
|
import { MutableRefObject } from "react";
|
|
3
3
|
import { AbstractEditorView } from "../AbstractEditorView.js";
|
|
4
|
-
import type { EventHandler } from "../
|
|
4
|
+
import type { EventHandler } from "../hooks/useComponentEventListeners.js";
|
|
5
5
|
export interface EditorContextValue {
|
|
6
6
|
view: AbstractEditorView;
|
|
7
7
|
flushSyncRef: MutableRefObject<boolean>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type { DOMEventMap } from "prosemirror-view";
|
|
2
|
-
|
|
1
|
+
import type { DOMEventMap, EditorView } from "prosemirror-view";
|
|
2
|
+
export type EventHandler<EventType extends keyof DOMEventMap = keyof DOMEventMap> = (view: EditorView, event: DOMEventMap[EventType]) => boolean | void;
|
|
3
|
+
export type HandleDOMEvents = Record<keyof DOMEventMap, EventHandler | undefined>;
|
|
3
4
|
/**
|
|
4
5
|
* Produces a plugin that can be used with ProseMirror to handle DOM
|
|
5
6
|
* events at the EditorView.dom element.
|
|
@@ -14,20 +15,20 @@ import { EventHandler } from "../plugins/componentEventListeners.js";
|
|
|
14
15
|
* @privateRemarks
|
|
15
16
|
*
|
|
16
17
|
* This hook uses a combination of mutable and immutable updates to give
|
|
17
|
-
* us precise control over when we re-create the
|
|
18
|
+
* us precise control over when we re-create the event listeners.
|
|
18
19
|
*
|
|
19
|
-
* The
|
|
20
|
+
* The hook has a mutable reference to the set of handlers for each
|
|
20
21
|
* event type, but the set of event types is static. This means that we
|
|
21
|
-
* need to produce a new
|
|
22
|
-
* registered. We avoid producing a new
|
|
23
|
-
* scenario to avoid the performance overhead of
|
|
24
|
-
* in the EditorView.
|
|
22
|
+
* need to produce a new handleDOMEVents record whenever a new event type is
|
|
23
|
+
* registered. We avoid producing a new record in any other
|
|
24
|
+
* scenario to avoid the performance overhead of re-registering the event
|
|
25
|
+
* listeners in the EditorView.
|
|
25
26
|
*
|
|
26
27
|
* To accomplish this, we shallowly clone the registry whenever a new event
|
|
27
28
|
* type is registered.
|
|
28
29
|
*/
|
|
29
|
-
export declare function useComponentEventListeners(): {
|
|
30
|
+
export declare function useComponentEventListeners(existingHandlers: HandleDOMEvents | undefined): {
|
|
30
31
|
registerEventListener: (eventType: keyof DOMEventMap, handler: EventHandler) => void;
|
|
31
32
|
unregisterEventListener: (eventType: keyof DOMEventMap, handler: EventHandler) => void;
|
|
32
|
-
|
|
33
|
+
handleDOMEvents: HandleDOMEvents;
|
|
33
34
|
};
|
|
@@ -21,8 +21,8 @@ export declare function useEditor<T extends HTMLElement = HTMLElement>(mount: T
|
|
|
21
21
|
editor: {
|
|
22
22
|
view: AbstractEditorView;
|
|
23
23
|
flushSyncRef: import("react").MutableRefObject<boolean>;
|
|
24
|
-
registerEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("
|
|
25
|
-
unregisterEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("
|
|
24
|
+
registerEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("./useComponentEventListeners.js").EventHandler<keyof import("prosemirror-view").DOMEventMap>) => void;
|
|
25
|
+
unregisterEventListener: (eventType: keyof import("prosemirror-view").DOMEventMap, handler: import("./useComponentEventListeners.js").EventHandler<keyof import("prosemirror-view").DOMEventMap>) => void;
|
|
26
26
|
isStatic: boolean;
|
|
27
27
|
};
|
|
28
28
|
cursorWrapper: Decoration | null;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DOMEventMap } from "prosemirror-view";
|
|
2
|
-
import type { EventHandler } from "
|
|
2
|
+
import type { EventHandler } from "./useComponentEventListeners.js";
|
|
3
3
|
/**
|
|
4
4
|
* Attaches an event listener at the `EditorView`'s DOM node. See
|
|
5
5
|
* [the ProseMirror docs](https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents)
|
package/dist/types/props.d.ts
CHANGED
|
@@ -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?: "
|
|
907
|
+
autoCapitalize?: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters" | undefined;
|
|
908
908
|
autoFocus?: boolean | undefined;
|
|
909
|
-
contentEditable?: (boolean | "
|
|
909
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
|
|
910
910
|
contextMenu?: string | undefined;
|
|
911
911
|
dir?: string | undefined;
|
|
912
|
-
draggable?: (boolean | "
|
|
913
|
-
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "
|
|
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 | "
|
|
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?: "
|
|
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 | "
|
|
953
|
-
"aria-autocomplete"?: "
|
|
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 | "
|
|
957
|
-
"aria-checked"?: boolean | "
|
|
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 | "
|
|
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 | "
|
|
968
|
-
"aria-dropeffect"?: "
|
|
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 | "
|
|
970
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
971
971
|
"aria-flowto"?: string | undefined;
|
|
972
|
-
"aria-grabbed"?: (boolean | "
|
|
973
|
-
"aria-haspopup"?: boolean | "
|
|
974
|
-
"aria-hidden"?: (boolean | "
|
|
975
|
-
"aria-invalid"?: boolean | "
|
|
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 | "
|
|
982
|
-
"aria-multiline"?: (boolean | "
|
|
983
|
-
"aria-multiselectable"?: (boolean | "
|
|
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 | "
|
|
989
|
-
"aria-readonly"?: (boolean | "
|
|
990
|
-
"aria-relevant"?: "text" | "
|
|
991
|
-
"aria-required"?: (boolean | "
|
|
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 | "
|
|
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,38 @@
|
|
|
1
|
+
import { Editor, type EditorOptions } from "@tiptap/core";
|
|
2
|
+
import { DependencyList } from "react";
|
|
3
|
+
/**
|
|
4
|
+
* The options for the `useEditor` hook.
|
|
5
|
+
*/
|
|
6
|
+
export type UseEditorOptions = Partial<EditorOptions> & {
|
|
7
|
+
/**
|
|
8
|
+
* Whether to render the editor on the first render.
|
|
9
|
+
* If client-side rendering, set this to `true`.
|
|
10
|
+
* If server-side rendering, set this to `false`.
|
|
11
|
+
* @default true
|
|
12
|
+
*/
|
|
13
|
+
immediatelyRender?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Whether to re-render the editor on each transaction.
|
|
16
|
+
* This is legacy behavior that will be removed in future versions.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
shouldRerenderOnTransaction?: boolean;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* This hook allows you to create an editor instance.
|
|
23
|
+
* @param options The editor options
|
|
24
|
+
* @param deps The dependencies to watch for changes
|
|
25
|
+
* @returns The editor instance
|
|
26
|
+
* @example const editor = useEditor({ extensions: [...] })
|
|
27
|
+
*/
|
|
28
|
+
export declare function useEditor(options: UseEditorOptions & {
|
|
29
|
+
immediatelyRender: false;
|
|
30
|
+
}, deps?: DependencyList): Editor | null;
|
|
31
|
+
/**
|
|
32
|
+
* This hook allows you to create an editor instance.
|
|
33
|
+
* @param options The editor options
|
|
34
|
+
* @param deps The dependencies to watch for changes
|
|
35
|
+
* @returns The editor instance
|
|
36
|
+
* @example const editor = useEditor({ extensions: [...] })
|
|
37
|
+
*/
|
|
38
|
+
export declare function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEditor } from "@tiptap/react";
|
|
2
1
|
import { DependencyList } from "react";
|
|
2
|
+
import { useEditor } from "./useEditor.js";
|
|
3
3
|
export type UseTiptapEditorOptions = Omit<Parameters<typeof useEditor>[0], "element">;
|
|
4
4
|
export declare function useTiptapEditor(options: UseTiptapEditorOptions, deps?: DependencyList): import("@tiptap/core").Editor;
|
package/dist/types/viewdesc.d.ts
CHANGED
|
@@ -119,7 +119,7 @@ export declare class NodeViewDesc extends ViewDesc {
|
|
|
119
119
|
parseRule(): Omit<TagParseRule, "tag"> | null;
|
|
120
120
|
matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
|
|
121
121
|
get size(): number;
|
|
122
|
-
get border():
|
|
122
|
+
get border(): 0 | 1;
|
|
123
123
|
updateChildren(_view: EditorView, _pos: number): void;
|
|
124
124
|
update(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): boolean;
|
|
125
125
|
updateInner(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource, view: EditorView): void;
|