UNPKG

5.79 kBTypeScriptView Raw
1import { BaseEditor, Editor, Node, Path, Point, Range } from 'slate';
2import { TextDiff } from '../utils/diff-text';
3import { DOMNode, DOMPoint, DOMRange, DOMSelection, DOMStaticRange } from '../utils/dom';
4import { Key } from '../utils/key';
5/**
6 * A React and DOM-specific version of the `Editor` interface.
7 */
8export interface ReactEditor extends BaseEditor {
9 hasEditableTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
10 hasRange: (editor: ReactEditor, range: Range) => boolean;
11 hasSelectableTarget: (editor: ReactEditor, target: EventTarget | null) => boolean;
12 hasTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
13 insertData: (data: DataTransfer) => void;
14 insertFragmentData: (data: DataTransfer) => boolean;
15 insertTextData: (data: DataTransfer) => boolean;
16 isTargetInsideNonReadonlyVoid: (editor: ReactEditor, target: EventTarget | null) => boolean;
17 setFragmentData: (data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut') => void;
18}
19export interface ReactEditorInterface {
20 /**
21 * Experimental and android specific: Get pending diffs
22 */
23 androidPendingDiffs: (editor: Editor) => TextDiff[] | undefined;
24 /**
25 * Experimental and android specific: Flush all pending diffs and cancel composition at the next possible time.
26 */
27 androidScheduleFlush: (editor: Editor) => void;
28 /**
29 * Blur the editor.
30 */
31 blur: (editor: ReactEditor) => void;
32 /**
33 * Deselect the editor.
34 */
35 deselect: (editor: ReactEditor) => void;
36 /**
37 * Find the DOM node that implements DocumentOrShadowRoot for the editor.
38 */
39 findDocumentOrShadowRoot: (editor: ReactEditor) => Document | ShadowRoot;
40 /**
41 * Get the target range from a DOM `event`.
42 */
43 findEventRange: (editor: ReactEditor, event: any) => Range;
44 /**
45 * Find a key for a Slate node.
46 */
47 findKey: (editor: ReactEditor, node: Node) => Key;
48 /**
49 * Find the path of Slate node.
50 */
51 findPath: (editor: ReactEditor, node: Node) => Path;
52 /**
53 * Focus the editor.
54 */
55 focus: (editor: ReactEditor, options?: {
56 retries: number;
57 }) => void;
58 /**
59 * Return the host window of the current editor.
60 */
61 getWindow: (editor: ReactEditor) => Window;
62 /**
63 * Check if a DOM node is within the editor.
64 */
65 hasDOMNode: (editor: ReactEditor, target: DOMNode, options?: {
66 editable?: boolean;
67 }) => boolean;
68 /**
69 * Check if the target is editable and in the editor.
70 */
71 hasEditableTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
72 /**
73 *
74 */
75 hasRange: (editor: ReactEditor, range: Range) => boolean;
76 /**
77 * Check if the target can be selectable
78 */
79 hasSelectableTarget: (editor: ReactEditor, target: EventTarget | null) => boolean;
80 /**
81 * Check if the target is in the editor.
82 */
83 hasTarget: (editor: ReactEditor, target: EventTarget | null) => target is DOMNode;
84 /**
85 * Insert data from a `DataTransfer` into the editor.
86 */
87 insertData: (editor: ReactEditor, data: DataTransfer) => void;
88 /**
89 * Insert fragment data from a `DataTransfer` into the editor.
90 */
91 insertFragmentData: (editor: ReactEditor, data: DataTransfer) => boolean;
92 /**
93 * Insert text data from a `DataTransfer` into the editor.
94 */
95 insertTextData: (editor: ReactEditor, data: DataTransfer) => boolean;
96 /**
97 * Check if the user is currently composing inside the editor.
98 */
99 isComposing: (editor: ReactEditor) => boolean;
100 /**
101 * Check if the editor is focused.
102 */
103 isFocused: (editor: ReactEditor) => boolean;
104 /**
105 * Check if the editor is in read-only mode.
106 */
107 isReadOnly: (editor: ReactEditor) => boolean;
108 /**
109 * Check if the target is inside void and in an non-readonly editor.
110 */
111 isTargetInsideNonReadonlyVoid: (editor: ReactEditor, target: EventTarget | null) => boolean;
112 /**
113 * Sets data from the currently selected fragment on a `DataTransfer`.
114 */
115 setFragmentData: (editor: ReactEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut') => void;
116 /**
117 * Find the native DOM element from a Slate node.
118 */
119 toDOMNode: (editor: ReactEditor, node: Node) => HTMLElement;
120 /**
121 * Find a native DOM selection point from a Slate point.
122 */
123 toDOMPoint: (editor: ReactEditor, point: Point) => DOMPoint;
124 /**
125 * Find a native DOM range from a Slate `range`.
126 *
127 * Notice: the returned range will always be ordinal regardless of the direction of Slate `range` due to DOM API limit.
128 *
129 * there is no way to create a reverse DOM Range using Range.setStart/setEnd
130 * according to https://dom.spec.whatwg.org/#concept-range-bp-set.
131 */
132 toDOMRange: (editor: ReactEditor, range: Range) => DOMRange;
133 /**
134 * Find a Slate node from a native DOM `element`.
135 */
136 toSlateNode: (editor: ReactEditor, domNode: DOMNode) => Node;
137 /**
138 * Find a Slate point from a DOM selection's `domNode` and `domOffset`.
139 */
140 toSlatePoint: <T extends boolean>(editor: ReactEditor, domPoint: DOMPoint, options: {
141 exactMatch: boolean;
142 suppressThrow: T;
143 }) => T extends true ? Point | null : Point;
144 /**
145 * Find a Slate range from a DOM range or selection.
146 */
147 toSlateRange: <T extends boolean>(editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options: {
148 exactMatch: boolean;
149 suppressThrow: T;
150 }) => T extends true ? Range | null : Range;
151}
152export declare const ReactEditor: ReactEditorInterface;
153//# sourceMappingURL=react-editor.d.ts.map
\No newline at end of file