wysimark-lite 0.24.0 → 0.25.1
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/index.js +162 -134
- package/dist/index.mjs +1160 -1002
- package/dist/index.mjs.map +1 -1
- package/dist/metafile-esm.json +1 -1
- package/package.json +7 -13
- package/dist/index.d.ts +0 -1091
package/dist/index.d.ts
DELETED
|
@@ -1,1091 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import * as slate from 'slate';
|
|
3
|
-
import { Descendant, Editor, Element as Element$1, BaseEditor, NodeEntry, BaseRange, Location, Path, Text, BaseText } from 'slate';
|
|
4
|
-
import { HistoryEditor } from 'slate-history';
|
|
5
|
-
import { ReactEditor, Editable as Editable$1 } from 'slate-react';
|
|
6
|
-
import { SetReturnType, SetOptional, UnionToIntersection, Simplify } from 'type-fest';
|
|
7
|
-
import react from 'react';
|
|
8
|
-
import { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, EditableProps as EditableProps$1 } from 'slate-react/dist/components/editable';
|
|
9
|
-
|
|
10
|
-
type OnImageChangeHandler$1 = (file: File) => Promise<string>;
|
|
11
|
-
type ImageDialogState = {
|
|
12
|
-
url: string;
|
|
13
|
-
alt: string;
|
|
14
|
-
title: string;
|
|
15
|
-
imageSource: "url" | "file";
|
|
16
|
-
uploadedUrl: string;
|
|
17
|
-
};
|
|
18
|
-
type WysimarkEditor = {
|
|
19
|
-
/**
|
|
20
|
-
* Private state for the wysimark editor.
|
|
21
|
-
*/
|
|
22
|
-
wysimark: {
|
|
23
|
-
prevValue?: {
|
|
24
|
-
markdown: string;
|
|
25
|
-
children: Descendant[];
|
|
26
|
-
};
|
|
27
|
-
/**
|
|
28
|
-
* Whether the editor is in Raw mode
|
|
29
|
-
*/
|
|
30
|
-
isRawMode?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Function to toggle Raw mode
|
|
33
|
-
*/
|
|
34
|
-
toggleRawMode?: () => void;
|
|
35
|
-
/**
|
|
36
|
-
* Handler for image file upload
|
|
37
|
-
*/
|
|
38
|
-
onImageChange?: OnImageChangeHandler$1;
|
|
39
|
-
/**
|
|
40
|
-
* Persisted state for the image dialog
|
|
41
|
-
*/
|
|
42
|
-
imageDialogState?: ImageDialogState;
|
|
43
|
-
/**
|
|
44
|
-
* Whether raw mode is disabled
|
|
45
|
-
*/
|
|
46
|
-
disableRawMode?: boolean;
|
|
47
|
-
/**
|
|
48
|
-
* Whether task list is disabled
|
|
49
|
-
*/
|
|
50
|
-
disableTaskList?: boolean;
|
|
51
|
-
/**
|
|
52
|
-
* Whether code block is disabled
|
|
53
|
-
*/
|
|
54
|
-
disableCodeBlock?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Whether highlight mark is disabled
|
|
57
|
-
*/
|
|
58
|
-
disableHighlight?: boolean;
|
|
59
|
-
};
|
|
60
|
-
/**
|
|
61
|
-
* Public methods for the wysimark editor.
|
|
62
|
-
*/
|
|
63
|
-
getMarkdown: () => string;
|
|
64
|
-
setMarkdown: (markdown: string) => void;
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
type UseEditorOptions = {
|
|
68
|
-
authToken?: string;
|
|
69
|
-
height?: string | number;
|
|
70
|
-
minHeight?: string | number;
|
|
71
|
-
maxHeight?: string | number;
|
|
72
|
-
/**
|
|
73
|
-
* Disable raw Markdown editing mode.
|
|
74
|
-
* When true, the raw mode toggle button will be hidden from the toolbar.
|
|
75
|
-
* Defaults to true (raw mode is disabled by default).
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```tsx
|
|
79
|
-
* const editor = useEditor({
|
|
80
|
-
* disableRawMode: false // Enable raw mode
|
|
81
|
-
* })
|
|
82
|
-
* ```
|
|
83
|
-
*/
|
|
84
|
-
disableRawMode?: boolean;
|
|
85
|
-
/**
|
|
86
|
-
* Disable task list (checklist) functionality.
|
|
87
|
-
* When true, the task list button will be hidden from the toolbar
|
|
88
|
-
* and task list creation will be disabled.
|
|
89
|
-
*
|
|
90
|
-
* @example
|
|
91
|
-
* ```tsx
|
|
92
|
-
* const editor = useEditor({
|
|
93
|
-
* disableTaskList: true
|
|
94
|
-
* })
|
|
95
|
-
* ```
|
|
96
|
-
*/
|
|
97
|
-
disableTaskList?: boolean;
|
|
98
|
-
/**
|
|
99
|
-
* Disable code block functionality.
|
|
100
|
-
* When true, the code block button will be hidden from the toolbar.
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* ```tsx
|
|
104
|
-
* const editor = useEditor({
|
|
105
|
-
* disableCodeBlock: true
|
|
106
|
-
* })
|
|
107
|
-
* ```
|
|
108
|
-
*/
|
|
109
|
-
disableCodeBlock?: boolean;
|
|
110
|
-
/**
|
|
111
|
-
* Disable highlight mark functionality.
|
|
112
|
-
* When true, the highlight button will be hidden from the toolbar.
|
|
113
|
-
* Highlight is serialized as <mark>text</mark> in markdown.
|
|
114
|
-
* Defaults to true (highlight is disabled by default).
|
|
115
|
-
*
|
|
116
|
-
* @example
|
|
117
|
-
* ```tsx
|
|
118
|
-
* const editor = useEditor({
|
|
119
|
-
* disableHighlight: false // Enable highlight
|
|
120
|
-
* })
|
|
121
|
-
* ```
|
|
122
|
-
*/
|
|
123
|
-
disableHighlight?: boolean;
|
|
124
|
-
};
|
|
125
|
-
declare function useEditor({ authToken, height, minHeight, maxHeight, disableRawMode, disableTaskList, disableCodeBlock, disableHighlight, }?: UseEditorOptions): Editor & ReactEditor & WysimarkEditor;
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* SinkEditor just adds a `sink` object where we drop all of our sink
|
|
129
|
-
* related data on.
|
|
130
|
-
*/
|
|
131
|
-
type SinkEditor = {
|
|
132
|
-
/**
|
|
133
|
-
* a master Element is one that has one or more elements that are depedant
|
|
134
|
-
* on it. For example, a `table` Element. For clarity, a `table-row` Element
|
|
135
|
-
* is not considered a master Element. Only the top-most element is.
|
|
136
|
-
*
|
|
137
|
-
* One use for identify a master is for adding a block quote. We want the
|
|
138
|
-
* block quote to always surround the master Element. A block-quote that
|
|
139
|
-
* surrounded a table-row, for example, would not make sense.
|
|
140
|
-
*/
|
|
141
|
-
isMaster: (node: Element$1) => boolean;
|
|
142
|
-
/**
|
|
143
|
-
* a slave Element is one that is dependant on another Element. For example,
|
|
144
|
-
* `table-row`, `table-cell` and `table-cotent` elements are all considered
|
|
145
|
-
* slave elements.
|
|
146
|
-
*
|
|
147
|
-
* At the time of writing, I haven't figured out a use case for a slave
|
|
148
|
-
* element actually...
|
|
149
|
-
*/
|
|
150
|
-
isSlave: (node: Element$1) => boolean;
|
|
151
|
-
isStandalone: (node: Element$1) => boolean;
|
|
152
|
-
sink: {
|
|
153
|
-
plugins: BasePluginPolicy[];
|
|
154
|
-
};
|
|
155
|
-
};
|
|
156
|
-
type FullSinkEditor = SinkEditor & BaseEditor & ReactEditor & HistoryEditor;
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* On the editor, there are several methods that return void that are used to
|
|
160
|
-
* override default editor behaviors.
|
|
161
|
-
*
|
|
162
|
-
* These are referred to as Overrideable core actions in the docs.
|
|
163
|
-
*
|
|
164
|
-
* - deleteBackward
|
|
165
|
-
* - deleteForward
|
|
166
|
-
* - deleteFragment
|
|
167
|
-
* - insertBreak
|
|
168
|
-
* - insertFragment
|
|
169
|
-
* - insertNode
|
|
170
|
-
* - insertText
|
|
171
|
-
* - normalizeNode
|
|
172
|
-
*
|
|
173
|
-
* When there are plugins, Sink tries to find a plugin to handle the event and
|
|
174
|
-
* if it cannot, uses the previously defined handler. For example, the user may
|
|
175
|
-
* have specified `editor.insertBreak` on the `editor` earlier and that will
|
|
176
|
-
* be called after all the plugins have been searched.
|
|
177
|
-
*
|
|
178
|
-
* We search through the plugins from the first to the last plugin.
|
|
179
|
-
*
|
|
180
|
-
* In a plugin, we specify the functions like we don on the editor but the
|
|
181
|
-
* return value informs us how the plugin should proceed after. The return
|
|
182
|
-
* value generally indicates whether the plugin has handled the event with one
|
|
183
|
-
* special case:
|
|
184
|
-
*
|
|
185
|
-
* - `true`: If the return type is `true` then the plugin has indicated it has
|
|
186
|
-
* handled the event and no further processing is required. The handlers in
|
|
187
|
-
* all remaining plugins are skipped.
|
|
188
|
-
*
|
|
189
|
-
* - `false`: If the return type is `false` then the plugin has indicated it has
|
|
190
|
-
* not handled the event and will continue through the rest of the plugins
|
|
191
|
-
* looking for a plugin to handle the event.
|
|
192
|
-
*
|
|
193
|
-
* - `() => void`: If the return tyep is a function, the plugin has indicated
|
|
194
|
-
* it has not handled the event, but that it would like to register another
|
|
195
|
-
* function that should execute after the actual event handler has been
|
|
196
|
-
* executed. In particular, this is used when in certain situations we may
|
|
197
|
-
* want a normalizer to execute after the event handler has triggered. This
|
|
198
|
-
* is used in the `normalize-after-delete-plugin` for example.
|
|
199
|
-
*
|
|
200
|
-
* NOTE:
|
|
201
|
-
*
|
|
202
|
-
* This seems like an unusual specification at first glance and a purist might
|
|
203
|
-
* argue, this could be handled more succinctly with a `next` function passed
|
|
204
|
-
* in as the final argument.
|
|
205
|
-
*
|
|
206
|
-
* Here's why I elected to go this route but it boils down to the fact that
|
|
207
|
-
* `next` functions make the function difficult to reason about.
|
|
208
|
-
*
|
|
209
|
-
* - 99% of the true, we want to indicate whether we handled the function or
|
|
210
|
-
* not and for that use case, true/false is simple to understand and natural.
|
|
211
|
-
* In the case where we need something to happen after, returning a function
|
|
212
|
-
* is unusual, but still easy to reason about. Also, the exclusivity of
|
|
213
|
-
* the function return is nice in that it assumes that the event wasn't
|
|
214
|
-
* handled, and of course, the function return would only ever be used if the
|
|
215
|
-
* function indeed wasn't handled. For if it was handled, there would be no
|
|
216
|
-
* need to have the after function because that could just be in the original
|
|
217
|
-
* function handler.
|
|
218
|
-
*
|
|
219
|
-
* - To use this, you have to build nested contexts that are always hard to
|
|
220
|
-
* reason about because you are passing a set of contexts from inner child
|
|
221
|
-
* to outer parent. This created difficult to comprehend complexity in the
|
|
222
|
-
* old Slate plugins architecture and is probably why it was abandoned.
|
|
223
|
-
*
|
|
224
|
-
* - It's also harder to type properly and to reason about it. The argument
|
|
225
|
-
* list changes in length depending on the function; furthermore, in some
|
|
226
|
-
* cases it is natural to ignore the arguments but we'd have to accept blank
|
|
227
|
-
* arguments that are unused to access the `next` function.
|
|
228
|
-
*
|
|
229
|
-
* - It's hard to debug. The plugin system as it currently is designed to
|
|
230
|
-
* execute linearly, instead of in a nested fashion. This makes it easy to
|
|
231
|
-
* add debug code, and know what happens before and after each step.
|
|
232
|
-
*/
|
|
233
|
-
type VoidActionReturn = boolean | (() => void);
|
|
234
|
-
|
|
235
|
-
type RenderEditableProps = {
|
|
236
|
-
attributes: EditableProps$1;
|
|
237
|
-
Editable: typeof Editable$1;
|
|
238
|
-
};
|
|
239
|
-
type RenderEditable = (props: RenderEditableProps) => react.ReactElement;
|
|
240
|
-
/**
|
|
241
|
-
* The return type of the BasePluginFn which specifies how the Plugin is
|
|
242
|
-
* supposed to behave.
|
|
243
|
-
*/
|
|
244
|
-
type BasePluginPolicy = {
|
|
245
|
-
name: string;
|
|
246
|
-
editor?: {
|
|
247
|
-
isInline?: (element: Element) => boolean | void;
|
|
248
|
-
isVoid?: (element: Element) => boolean | void;
|
|
249
|
-
isMaster?: (element: Element) => boolean | void;
|
|
250
|
-
isSlave?: (element: Element) => boolean | void;
|
|
251
|
-
isStandalone?: (element: Element) => boolean | void;
|
|
252
|
-
deleteBackward?: (unit: "character" | "word" | "line" | "block") => VoidActionReturn;
|
|
253
|
-
deleteForward?: (unit: "character" | "word" | "line" | "block") => VoidActionReturn;
|
|
254
|
-
deleteFragment?: () => VoidActionReturn;
|
|
255
|
-
insertBreak?: () => VoidActionReturn;
|
|
256
|
-
insertFragment?: (fragment: Node[]) => VoidActionReturn;
|
|
257
|
-
insertNode?: (node: Node) => VoidActionReturn;
|
|
258
|
-
insertText?: (text: string) => VoidActionReturn;
|
|
259
|
-
normalizeNode?: (entry: NodeEntry) => VoidActionReturn;
|
|
260
|
-
};
|
|
261
|
-
renderEditable?: RenderEditable;
|
|
262
|
-
editableProps?: {
|
|
263
|
-
decorate?: ((entry: NodeEntry) => BaseRange[]) | undefined;
|
|
264
|
-
renderElement?: (props: RenderElementProps) => react.ReactElement | undefined;
|
|
265
|
-
renderLeaf?: (props: RenderLeafProps) => react.ReactElement | undefined;
|
|
266
|
-
renderPlaceholder?: (props: RenderPlaceholderProps) => react.ReactElement;
|
|
267
|
-
onKeyDown?: EditableVoidToBooleanHandlerType<"onKeyDown">;
|
|
268
|
-
onKeyUp?: EditableVoidToBooleanHandlerType<"onKeyDown">;
|
|
269
|
-
onPaste?: EditableVoidToBooleanHandlerType<"onPaste">;
|
|
270
|
-
onDrop?: EditableVoidToBooleanHandlerType<"onDrop">;
|
|
271
|
-
};
|
|
272
|
-
};
|
|
273
|
-
type EditableVoidToBooleanHandlerType<K extends keyof EditableProps$1> = SetReturnType<NonNullable<EditableProps$1[K]>, boolean>;
|
|
274
|
-
|
|
275
|
-
/**
|
|
276
|
-
* IMPORTANT!
|
|
277
|
-
*
|
|
278
|
-
* NEVER!
|
|
279
|
-
*
|
|
280
|
-
* refer to a type that is defined in the `slate` package. This is because
|
|
281
|
-
* any reference to a Slate type will cause a circular reference type error that
|
|
282
|
-
* is very hard to track down.
|
|
283
|
-
*
|
|
284
|
-
* NOTE: This kind of happens in that `Element` will often have a reference to
|
|
285
|
-
* `Descendant` but it looks like this is okay; however, let's not tempt fate
|
|
286
|
-
* by only using it where the definition is absolutely necessary.
|
|
287
|
-
*
|
|
288
|
-
* ALWAYS!
|
|
289
|
-
*
|
|
290
|
-
* Be explicity about return types. If they are inferred through the return
|
|
291
|
-
* type, because we need to provide `Editor` as an argument in certain cases,
|
|
292
|
-
* we don't want to accidentally have `Editor` be provided as a return type
|
|
293
|
-
* or this will create the circular reference.
|
|
294
|
-
*/
|
|
295
|
-
type BasePluginSchema = {
|
|
296
|
-
Name: string;
|
|
297
|
-
Options: Record<string, unknown>;
|
|
298
|
-
Editor: Record<string, unknown>;
|
|
299
|
-
Element: {
|
|
300
|
-
type: string;
|
|
301
|
-
};
|
|
302
|
-
Text: Record<string, unknown>;
|
|
303
|
-
};
|
|
304
|
-
/**
|
|
305
|
-
* These are the PluginTypes that are accepted as inputs into `createPlugin`
|
|
306
|
-
* which has the same basic signature as `BasePluginTypes` but some of the
|
|
307
|
-
* types are optional.
|
|
308
|
-
*
|
|
309
|
-
* These `InputPluginTypes` need to have their optional types filled in with
|
|
310
|
-
* defaults before they can be used.
|
|
311
|
-
*
|
|
312
|
-
* See `NormalizeInputPluginTypes`
|
|
313
|
-
*/
|
|
314
|
-
type InputPluginSchema = SetOptional<BasePluginSchema, "Options" | "Editor" | "Element" | "Text">;
|
|
315
|
-
/**
|
|
316
|
-
* Takes an `InputPluginSchema` (that has some optional types) and turns them
|
|
317
|
-
* into a regular PluginTypes with any missing types filled in with defaults.
|
|
318
|
-
*/
|
|
319
|
-
type NormalizeInputPluginSchema<T extends InputPluginSchema> = {
|
|
320
|
-
Name: T["Name"];
|
|
321
|
-
Options: T["Options"] extends object ? T["Options"] : {};
|
|
322
|
-
Editor: T["Editor"] extends object ? T["Editor"] : {};
|
|
323
|
-
Element: T["Element"] extends object ? T["Element"] : never;
|
|
324
|
-
Text: T["Text"] extends object ? T["Text"] : {};
|
|
325
|
-
};
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* Shape of a PluginFn (Plugin Function).
|
|
329
|
-
*/
|
|
330
|
-
type BasePluginFn = (editor: FullSinkEditor, options: {}, helpers: {
|
|
331
|
-
createPolicy: (value: unknown) => unknown;
|
|
332
|
-
}) => BasePluginPolicy;
|
|
333
|
-
|
|
334
|
-
/**
|
|
335
|
-
* IMPORTANT!
|
|
336
|
-
*
|
|
337
|
-
* NEVER!
|
|
338
|
-
*
|
|
339
|
-
* refer to a type that is defined in the `slate` package. This is because
|
|
340
|
-
* any reference to a Slate type will cause a circular reference type error that
|
|
341
|
-
* is very hard to track down.
|
|
342
|
-
*
|
|
343
|
-
* NOTE: This kind of happens in that `Element` will often have a reference to
|
|
344
|
-
* `Descendant` but it looks like this is okay; however, let's not tempt fate
|
|
345
|
-
* by only using it where the definition is absolutely necessary.
|
|
346
|
-
*
|
|
347
|
-
* ALWAYS!
|
|
348
|
-
*
|
|
349
|
-
* Be explicity about return types. If they are inferred through the return
|
|
350
|
-
* type, because we need to provide `Editor` as an argument in certain cases,
|
|
351
|
-
* we don't want to accidentally have `Editor` be provided as a return type
|
|
352
|
-
* or this will create the circular reference.
|
|
353
|
-
*/
|
|
354
|
-
|
|
355
|
-
/**
|
|
356
|
-
* When a Plugin is created using the `createPlugin` method, it returns a
|
|
357
|
-
* Plugin.
|
|
358
|
-
*/
|
|
359
|
-
type BasePlugin = {
|
|
360
|
-
fn: BasePluginFn;
|
|
361
|
-
__types__: BasePluginSchema;
|
|
362
|
-
};
|
|
363
|
-
/**
|
|
364
|
-
* When a Plugin is created using `createPlugin` we must
|
|
365
|
-
*/
|
|
366
|
-
type TypedPlugin<T extends InputPluginSchema> = {
|
|
367
|
-
fn: BasePluginFn;
|
|
368
|
-
__types__: NormalizeInputPluginSchema<T>;
|
|
369
|
-
};
|
|
370
|
-
|
|
371
|
-
type ExtractCustomTypes<TA extends Array<BasePlugin>> =
|
|
372
|
-
/**
|
|
373
|
-
* This code takes an array of types and merges them together into a union.
|
|
374
|
-
*/
|
|
375
|
-
TA extends Array<{
|
|
376
|
-
__types__: infer U;
|
|
377
|
-
}> ? {
|
|
378
|
-
Editor: SinkEditor & BaseEditor & ReactEditor & HistoryEditor & UnionToIntersection<U extends {
|
|
379
|
-
Editor: infer E;
|
|
380
|
-
} ? E : never>;
|
|
381
|
-
Element: U extends {
|
|
382
|
-
Element: infer E;
|
|
383
|
-
} ? E : never;
|
|
384
|
-
Text: Simplify<UnionToIntersection<U extends {
|
|
385
|
-
Text: infer T;
|
|
386
|
-
} ? T : never>>;
|
|
387
|
-
Options: Simplify<UnionToIntersection<U extends {
|
|
388
|
-
Options: infer T;
|
|
389
|
-
} ? T : never>>;
|
|
390
|
-
} : never;
|
|
391
|
-
|
|
392
|
-
/**
|
|
393
|
-
* Defines a value you'd find in a function's parameters as a replacement for
|
|
394
|
-
* `at`. The benefit of using `BetterAt` is that it allows you to search
|
|
395
|
-
* using an `Element`.
|
|
396
|
-
*/
|
|
397
|
-
type BetterAt = Location | Element$1 | null;
|
|
398
|
-
|
|
399
|
-
/**
|
|
400
|
-
* The TargetElement can be specified either as the actual value or as a
|
|
401
|
-
* function that takes a srcElement and returns the targetElement.
|
|
402
|
-
*/
|
|
403
|
-
type TargetElement<T extends Element$1 = Element$1> = Omit<T, "children"> | ((srcElement: Element$1) => Omit<T, "children">);
|
|
404
|
-
|
|
405
|
-
type PlaceholderEditor = {
|
|
406
|
-
placeholder: {};
|
|
407
|
-
};
|
|
408
|
-
type PlaceholderPluginCustomTypes = {
|
|
409
|
-
Name: "placeholder";
|
|
410
|
-
Editor: PlaceholderEditor;
|
|
411
|
-
};
|
|
412
|
-
|
|
413
|
-
declare function createImageMethods(editor: Editor): {
|
|
414
|
-
noop: () => void;
|
|
415
|
-
insertImageFromUrl: (url: string, alt?: string | undefined, title?: string | undefined) => void;
|
|
416
|
-
};
|
|
417
|
-
|
|
418
|
-
type ImageSize = {
|
|
419
|
-
width: number;
|
|
420
|
-
height: number;
|
|
421
|
-
};
|
|
422
|
-
type ImageMethods = ReturnType<typeof createImageMethods>;
|
|
423
|
-
type ImagePluginConfig = {
|
|
424
|
-
/**
|
|
425
|
-
* When an image is uploaded, the plugin needs to decide whether the image
|
|
426
|
-
* should be an inline image (like an icon that displays within a line of
|
|
427
|
-
* text) or a block image (like a photo that appears as its own block).
|
|
428
|
-
*
|
|
429
|
-
* This setting is the maximum size of an image for it to be defaulted to an
|
|
430
|
-
* inline image.
|
|
431
|
-
*
|
|
432
|
-
* NOTE:
|
|
433
|
-
*
|
|
434
|
-
* The user can convert an image from one image type to the other manually.
|
|
435
|
-
*/
|
|
436
|
-
maxInitialInlineImageSize: ImageSize;
|
|
437
|
-
/**
|
|
438
|
-
* When an image is first uploaded, it may come in at a large size but for
|
|
439
|
-
* some applications, you don't want the image to overwhelm the page,
|
|
440
|
-
* like when the editor is visually a small size.
|
|
441
|
-
*
|
|
442
|
-
* This specifies the maximum initial size when an image is first uploaded
|
|
443
|
-
* to the page. The user can resize to a larger size.
|
|
444
|
-
*
|
|
445
|
-
* If the value is null, the image will be displayed at full size.
|
|
446
|
-
*
|
|
447
|
-
* NOTE:
|
|
448
|
-
*
|
|
449
|
-
* This is the displayed image width. On retina displays, the actualy image
|
|
450
|
-
* file delivered to the browser may be a multiple of the provided value.
|
|
451
|
-
*/
|
|
452
|
-
maxInitialImageSize: ImageSize | null;
|
|
453
|
-
/**
|
|
454
|
-
* When an image is displayed at full size, you may still want to limit the
|
|
455
|
-
* size of the image file.
|
|
456
|
-
*
|
|
457
|
-
* NOTE:
|
|
458
|
-
*
|
|
459
|
-
* This is the maximum visual image
|
|
460
|
-
*/
|
|
461
|
-
maxImageSize: ImageSize;
|
|
462
|
-
imageBlockPresets: ImageSizePreset[];
|
|
463
|
-
imageInlinePresets: ImageSizePreset[];
|
|
464
|
-
};
|
|
465
|
-
type ImagePluginOptions = {
|
|
466
|
-
image: Partial<ImagePluginConfig>;
|
|
467
|
-
};
|
|
468
|
-
type ImageEditor = {
|
|
469
|
-
image: ImageMethods & ImagePluginConfig;
|
|
470
|
-
};
|
|
471
|
-
type ImageSharedElement = {
|
|
472
|
-
/**
|
|
473
|
-
* The `url` represents either
|
|
474
|
-
*
|
|
475
|
-
* - a `hashUrl` that begins with a `#` during the upload process which
|
|
476
|
-
* represents a unique id reference to a Zustand store where the actual
|
|
477
|
-
* information about the upload is kept.
|
|
478
|
-
* - The actual `url` of the uploaded file. When the file is saved, the
|
|
479
|
-
* `hashUrl` will be converted to the actual `url` of the file.
|
|
480
|
-
*/
|
|
481
|
-
url: string;
|
|
482
|
-
title?: string;
|
|
483
|
-
alt?: string;
|
|
484
|
-
bytes?: number;
|
|
485
|
-
/**
|
|
486
|
-
* If the `maxWidth` and `maxHeight` are present, it indicates that the image
|
|
487
|
-
* is resizable.
|
|
488
|
-
*
|
|
489
|
-
* If they are not present, it indicates that the `width` and `height` should
|
|
490
|
-
* be used, but they cannot be resized.
|
|
491
|
-
*
|
|
492
|
-
* If the `width` and `height` are also not present, it indicates we are not
|
|
493
|
-
* aware of the current size of the image, so just display it.
|
|
494
|
-
*/
|
|
495
|
-
srcWidth?: number;
|
|
496
|
-
srcHeight?: number;
|
|
497
|
-
width?: number;
|
|
498
|
-
height?: number;
|
|
499
|
-
children: Descendant[];
|
|
500
|
-
};
|
|
501
|
-
/**
|
|
502
|
-
* Default for larger images, over 48px
|
|
503
|
-
*
|
|
504
|
-
* Larger images can be converted to inline images though.
|
|
505
|
-
*/
|
|
506
|
-
type ImageBlockElement = {
|
|
507
|
-
type: "image-block";
|
|
508
|
-
} & ImageSharedElement;
|
|
509
|
-
/**
|
|
510
|
-
* Default for smaller images, 48px and less
|
|
511
|
-
*
|
|
512
|
-
* Smaller images can be converted to block images though.
|
|
513
|
-
*/
|
|
514
|
-
type ImagePluginCustomTypes = {
|
|
515
|
-
Name: "image";
|
|
516
|
-
Editor: ImageEditor;
|
|
517
|
-
Element: ImageBlockElement;
|
|
518
|
-
Options: ImagePluginOptions;
|
|
519
|
-
};
|
|
520
|
-
/**
|
|
521
|
-
* A preset is defined either as a bound or as a scale:
|
|
522
|
-
*
|
|
523
|
-
* - bounds: The image will be placed within the bounds.
|
|
524
|
-
* - scale: The image will be scaled to the given `scale` value. The max
|
|
525
|
-
* value should be `1`.
|
|
526
|
-
*/
|
|
527
|
-
type ImageSizePreset = {
|
|
528
|
-
name: string;
|
|
529
|
-
title: string;
|
|
530
|
-
type: "bounds";
|
|
531
|
-
width: number;
|
|
532
|
-
height: number;
|
|
533
|
-
} | {
|
|
534
|
-
name: string;
|
|
535
|
-
title: string;
|
|
536
|
-
type: "scale";
|
|
537
|
-
scale: number;
|
|
538
|
-
};
|
|
539
|
-
|
|
540
|
-
type ToolbarEditor = {
|
|
541
|
-
toolbar: {
|
|
542
|
-
height?: string | number;
|
|
543
|
-
minHeight?: string | number;
|
|
544
|
-
maxHeight?: string | number;
|
|
545
|
-
showUploadButtons?: boolean;
|
|
546
|
-
};
|
|
547
|
-
};
|
|
548
|
-
type ToolbarOptions = {
|
|
549
|
-
toolbar: {
|
|
550
|
-
height?: string | number;
|
|
551
|
-
minHeight?: string | number;
|
|
552
|
-
maxHeight?: string | number;
|
|
553
|
-
showUploadButtons?: boolean;
|
|
554
|
-
};
|
|
555
|
-
};
|
|
556
|
-
type ToolbarPluginCustomTypes = {
|
|
557
|
-
Name: "toolbar";
|
|
558
|
-
Editor: ToolbarEditor;
|
|
559
|
-
Options: ToolbarOptions;
|
|
560
|
-
};
|
|
561
|
-
|
|
562
|
-
type ThemeEditor = {
|
|
563
|
-
theme: true;
|
|
564
|
-
};
|
|
565
|
-
type ThemePluginCustomTypes = {
|
|
566
|
-
Name: "theme";
|
|
567
|
-
Editor: ThemeEditor;
|
|
568
|
-
};
|
|
569
|
-
|
|
570
|
-
type CollapsibleParagraphEditor = {
|
|
571
|
-
collapsibleParagraph: {
|
|
572
|
-
convertParagraph: () => void;
|
|
573
|
-
};
|
|
574
|
-
};
|
|
575
|
-
type ParagraphElement = {
|
|
576
|
-
type: "paragraph";
|
|
577
|
-
__collapsible?: true;
|
|
578
|
-
children: Descendant[];
|
|
579
|
-
};
|
|
580
|
-
type CollapsibleParagraphPluginCustomTypes = {
|
|
581
|
-
Name: "collapsible-paragraph";
|
|
582
|
-
Editor: CollapsibleParagraphEditor;
|
|
583
|
-
Element: ParagraphElement;
|
|
584
|
-
};
|
|
585
|
-
|
|
586
|
-
type NormalizeAfterDeleteEditor = {
|
|
587
|
-
normalizeAfterDelete: true;
|
|
588
|
-
};
|
|
589
|
-
type NormalizeAfterDeletePluginCustomTypes = {
|
|
590
|
-
Name: "normalize-after-delete";
|
|
591
|
-
Editor: NormalizeAfterDeleteEditor;
|
|
592
|
-
};
|
|
593
|
-
|
|
594
|
-
type AtomicDeleteEditor = {
|
|
595
|
-
atomicDelete: true;
|
|
596
|
-
};
|
|
597
|
-
type AtomicDeletePluginCustomTypes = {
|
|
598
|
-
Name: "atomic-delete";
|
|
599
|
-
Editor: AtomicDeleteEditor;
|
|
600
|
-
};
|
|
601
|
-
|
|
602
|
-
declare function createListMethods(editor: Editor): {
|
|
603
|
-
indent: () => boolean;
|
|
604
|
-
outdent: () => boolean;
|
|
605
|
-
convertUnorderedList: (allowToggle: boolean) => void;
|
|
606
|
-
convertOrderedList: (allowToggle: boolean) => void;
|
|
607
|
-
convertTaskList: (allowToggle: boolean) => void;
|
|
608
|
-
insertBreak: () => boolean;
|
|
609
|
-
toggleTaskListItem: (args_0?: {
|
|
610
|
-
at?: BetterAt | undefined;
|
|
611
|
-
} | undefined) => false | undefined;
|
|
612
|
-
getListDepth: () => number;
|
|
613
|
-
canIncreaseDepth: () => boolean;
|
|
614
|
-
canDecreaseDepth: () => boolean;
|
|
615
|
-
increaseDepth: () => void;
|
|
616
|
-
decreaseDepth: () => void;
|
|
617
|
-
};
|
|
618
|
-
|
|
619
|
-
/**
|
|
620
|
-
* List Editor
|
|
621
|
-
*/
|
|
622
|
-
type ListEditor = {
|
|
623
|
-
list: ReturnType<typeof createListMethods>;
|
|
624
|
-
};
|
|
625
|
-
/**
|
|
626
|
-
* Ordered List Item Element
|
|
627
|
-
*/
|
|
628
|
-
type OrderedListItemElement = {
|
|
629
|
-
type: "ordered-list-item";
|
|
630
|
-
depth: number;
|
|
631
|
-
__firstAtDepth?: boolean;
|
|
632
|
-
children: Descendant[];
|
|
633
|
-
};
|
|
634
|
-
/**
|
|
635
|
-
* Unordered List Item Element
|
|
636
|
-
*/
|
|
637
|
-
type UnorderedListItemElement = {
|
|
638
|
-
type: "unordered-list-item";
|
|
639
|
-
depth: number;
|
|
640
|
-
__firstAtDepth?: boolean;
|
|
641
|
-
children: Descendant[];
|
|
642
|
-
};
|
|
643
|
-
/**
|
|
644
|
-
* Checkable Task List Item Element
|
|
645
|
-
*/
|
|
646
|
-
type TaskListItemElement = {
|
|
647
|
-
type: "task-list-item";
|
|
648
|
-
depth: number;
|
|
649
|
-
__firstAtDepth?: boolean;
|
|
650
|
-
checked: boolean;
|
|
651
|
-
children: Descendant[];
|
|
652
|
-
};
|
|
653
|
-
/**
|
|
654
|
-
* List Plugins Custom Types
|
|
655
|
-
*/
|
|
656
|
-
type ListPluginCustomTypes = {
|
|
657
|
-
Name: "list";
|
|
658
|
-
Editor: ListEditor;
|
|
659
|
-
Element: OrderedListItemElement | UnorderedListItemElement | TaskListItemElement;
|
|
660
|
-
};
|
|
661
|
-
|
|
662
|
-
declare function createHorizontalRuleMethods(editor: Editor): {
|
|
663
|
-
insertHorizontalRule: () => boolean;
|
|
664
|
-
};
|
|
665
|
-
|
|
666
|
-
type HorizontalRuleMethods = ReturnType<typeof createHorizontalRuleMethods>;
|
|
667
|
-
type HorizontalRuleEditor = {
|
|
668
|
-
horizontalRule: HorizontalRuleMethods;
|
|
669
|
-
};
|
|
670
|
-
type HorizontalRuleElement = {
|
|
671
|
-
type: "horizontal-rule";
|
|
672
|
-
children: [{
|
|
673
|
-
text: "";
|
|
674
|
-
}];
|
|
675
|
-
};
|
|
676
|
-
type HorizontalRulePluginCustomTypes = {
|
|
677
|
-
Name: "horizontal-rule";
|
|
678
|
-
Editor: HorizontalRuleEditor;
|
|
679
|
-
Element: HorizontalRuleElement;
|
|
680
|
-
};
|
|
681
|
-
|
|
682
|
-
/**
|
|
683
|
-
* Alignment of Table Columns
|
|
684
|
-
*/
|
|
685
|
-
type TableColumnAlign = "left" | "center" | "right";
|
|
686
|
-
/**
|
|
687
|
-
* Table Column values
|
|
688
|
-
*/
|
|
689
|
-
type TableColumn = {
|
|
690
|
-
align: TableColumnAlign;
|
|
691
|
-
};
|
|
692
|
-
/**
|
|
693
|
-
* Table Element
|
|
694
|
-
*/
|
|
695
|
-
type TableElement = {
|
|
696
|
-
type: "table";
|
|
697
|
-
columns: TableColumn[];
|
|
698
|
-
children: TableRowElement[];
|
|
699
|
-
};
|
|
700
|
-
/**
|
|
701
|
-
* Table Row Element
|
|
702
|
-
*/
|
|
703
|
-
type TableRowElement = {
|
|
704
|
-
type: "table-row";
|
|
705
|
-
children: TableCellElement[];
|
|
706
|
-
};
|
|
707
|
-
/**
|
|
708
|
-
* Table Cell Element
|
|
709
|
-
*
|
|
710
|
-
* The children of a `TdElement` is exactly one `ParagraphElement`.
|
|
711
|
-
*
|
|
712
|
-
* This is a good choice for Slate because copying and pasting a range of
|
|
713
|
-
* elements will split the lowest child element by default. If the child of
|
|
714
|
-
* a `TdElement` is a leaf, then we split the `TdElement` which is never what
|
|
715
|
-
* we want.
|
|
716
|
-
*
|
|
717
|
-
* Instead, by having a lower level element, the `ParagraphElement`, we allow
|
|
718
|
-
* that to be split.
|
|
719
|
-
*
|
|
720
|
-
* But of course, insertion means we have many child elements in the `TdElement`
|
|
721
|
-
* but these are easier to fix using normalization. We can keep iterating
|
|
722
|
-
* through normalizations until we end up with a single Paragraph.
|
|
723
|
-
*/
|
|
724
|
-
type TableCellElement = {
|
|
725
|
-
type: "table-cell";
|
|
726
|
-
x?: number;
|
|
727
|
-
y?: number;
|
|
728
|
-
children: TableContentElement[];
|
|
729
|
-
};
|
|
730
|
-
type TableContentElement = {
|
|
731
|
-
type: "table-content";
|
|
732
|
-
children: Descendant[];
|
|
733
|
-
};
|
|
734
|
-
|
|
735
|
-
/**
|
|
736
|
-
* The TableInfo object that includes quick access information starting from a
|
|
737
|
-
* cell in a table including information about the row and the table.
|
|
738
|
-
*
|
|
739
|
-
* NOTE:
|
|
740
|
-
*
|
|
741
|
-
* This is flat and not nested because it makes destructuring easier, for
|
|
742
|
-
* example, in the table methods.
|
|
743
|
-
*/
|
|
744
|
-
type TableInfo = {
|
|
745
|
-
tableElement: TableElement;
|
|
746
|
-
tablePath: Path;
|
|
747
|
-
tableColumns: TableColumn[];
|
|
748
|
-
rowElement: TableRowElement;
|
|
749
|
-
rowPath: Path;
|
|
750
|
-
rowIndex: number;
|
|
751
|
-
rowCount: number;
|
|
752
|
-
cellElement: TableCellElement;
|
|
753
|
-
cellPath: Path;
|
|
754
|
-
cellIndex: number;
|
|
755
|
-
cellCount: number;
|
|
756
|
-
};
|
|
757
|
-
|
|
758
|
-
declare function createAnchorMethods(editor: Editor): {
|
|
759
|
-
insertLink: (args_0: string, args_1?: string | undefined, args_2?: {
|
|
760
|
-
select?: boolean | undefined;
|
|
761
|
-
title?: string | undefined;
|
|
762
|
-
} | undefined) => void;
|
|
763
|
-
removeLink: (args_0: {
|
|
764
|
-
at?: BetterAt | undefined;
|
|
765
|
-
}) => boolean;
|
|
766
|
-
editLink: (args_0: {
|
|
767
|
-
href: string;
|
|
768
|
-
title?: string | undefined;
|
|
769
|
-
text?: string | undefined;
|
|
770
|
-
}, args_1: {
|
|
771
|
-
at?: BetterAt | undefined;
|
|
772
|
-
}) => boolean;
|
|
773
|
-
};
|
|
774
|
-
|
|
775
|
-
type AnchorMethods = ReturnType<typeof createAnchorMethods>;
|
|
776
|
-
type AnchorEditor = {
|
|
777
|
-
anchor: AnchorMethods;
|
|
778
|
-
};
|
|
779
|
-
type AnchorElement = {
|
|
780
|
-
type: "anchor";
|
|
781
|
-
href: string;
|
|
782
|
-
target?: string;
|
|
783
|
-
title?: string;
|
|
784
|
-
children: Descendant[];
|
|
785
|
-
};
|
|
786
|
-
type AnchorPluginCustomTypes = {
|
|
787
|
-
Name: "anchor";
|
|
788
|
-
Editor: AnchorEditor;
|
|
789
|
-
Element: AnchorElement;
|
|
790
|
-
};
|
|
791
|
-
|
|
792
|
-
declare function createHeadingMethods(editor: Editor): {
|
|
793
|
-
convertHeading: (level: 1 | 2 | 3 | 4 | 5 | 6, allowToggle: boolean) => void;
|
|
794
|
-
isHeadingActive: (level: 1 | 2 | 3 | 4 | 5 | 6) => boolean;
|
|
795
|
-
};
|
|
796
|
-
|
|
797
|
-
type HeadingEditor = {
|
|
798
|
-
heading: ReturnType<typeof createHeadingMethods>;
|
|
799
|
-
};
|
|
800
|
-
type HeadingElement = {
|
|
801
|
-
type: "heading";
|
|
802
|
-
/**
|
|
803
|
-
* NOTE:
|
|
804
|
-
*
|
|
805
|
-
* Don't extract these into a new type. It's easier to just repeat this and
|
|
806
|
-
* there's less indirection.
|
|
807
|
-
*/
|
|
808
|
-
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
809
|
-
children: Descendant[];
|
|
810
|
-
};
|
|
811
|
-
type HeadingPluginCustomTypes = {
|
|
812
|
-
Name: "heading";
|
|
813
|
-
Editor: HeadingEditor;
|
|
814
|
-
Element: HeadingElement;
|
|
815
|
-
};
|
|
816
|
-
|
|
817
|
-
type BlockQuoteEditor = {
|
|
818
|
-
supportsBlockQuote: true;
|
|
819
|
-
blockQuotePlugin: {
|
|
820
|
-
indent: () => void;
|
|
821
|
-
outdent: () => void;
|
|
822
|
-
isActive: () => boolean;
|
|
823
|
-
increaseDepth: () => void;
|
|
824
|
-
decreaseDepth: () => void;
|
|
825
|
-
canIncreaseDepth: () => boolean;
|
|
826
|
-
canDecreaseDepth: () => boolean;
|
|
827
|
-
};
|
|
828
|
-
};
|
|
829
|
-
type BlockQuoteElement = {
|
|
830
|
-
type: "block-quote";
|
|
831
|
-
children: Descendant[];
|
|
832
|
-
};
|
|
833
|
-
type BlockQuotePluginCustomTypes = {
|
|
834
|
-
Name: "block-quote";
|
|
835
|
-
Editor: BlockQuoteEditor;
|
|
836
|
-
Element: BlockQuoteElement;
|
|
837
|
-
};
|
|
838
|
-
|
|
839
|
-
declare function createCodeBlockMethods(editor: Editor): {
|
|
840
|
-
createCodeBlock: (args_0: {
|
|
841
|
-
language: BuiltInLanguage;
|
|
842
|
-
}) => void;
|
|
843
|
-
setCodeBlockLanguage: (language: BuiltInLanguage, options?: {
|
|
844
|
-
at?: BetterAt | undefined;
|
|
845
|
-
} | undefined) => boolean;
|
|
846
|
-
};
|
|
847
|
-
|
|
848
|
-
type CodeBlockMethods = ReturnType<typeof createCodeBlockMethods>;
|
|
849
|
-
type BuiltInLanguage = "text" | "html" | "svg" | "markup" | "css" | "javascript" | "js" | "java" | "c" | "clike";
|
|
850
|
-
type CodeBlockEditor = {
|
|
851
|
-
codeBlock: CodeBlockMethods;
|
|
852
|
-
};
|
|
853
|
-
/**
|
|
854
|
-
* The code block element is the root element of a code block.
|
|
855
|
-
*/
|
|
856
|
-
type CodeBlockElement = {
|
|
857
|
-
type: "code-block";
|
|
858
|
-
/**
|
|
859
|
-
* The language of the code block. Can accept any string because Markdown can
|
|
860
|
-
* accept any string; however, the built-in Prism languages are defined in:
|
|
861
|
-
* `BuiltInLanguage`
|
|
862
|
-
*/
|
|
863
|
-
language: string;
|
|
864
|
-
children: CodeBlockLineElement[];
|
|
865
|
-
};
|
|
866
|
-
type CodeBlockLineElement = {
|
|
867
|
-
type: "code-block-line";
|
|
868
|
-
children: Text[];
|
|
869
|
-
};
|
|
870
|
-
type CodeBlockPluginCustomTypes = {
|
|
871
|
-
Name: "code-block";
|
|
872
|
-
Editor: CodeBlockEditor;
|
|
873
|
-
Element: CodeBlockElement | CodeBlockLineElement;
|
|
874
|
-
Text: {
|
|
875
|
-
text: string;
|
|
876
|
-
prismToken?: string;
|
|
877
|
-
};
|
|
878
|
-
};
|
|
879
|
-
|
|
880
|
-
/**
|
|
881
|
-
* HTML block element for preserving raw HTML content
|
|
882
|
-
*/
|
|
883
|
-
type HtmlBlockElement = {
|
|
884
|
-
type: "html-block";
|
|
885
|
-
/**
|
|
886
|
-
* The raw HTML content
|
|
887
|
-
*/
|
|
888
|
-
html: string;
|
|
889
|
-
children: Text[];
|
|
890
|
-
};
|
|
891
|
-
type HtmlBlockPluginCustomTypes = {
|
|
892
|
-
Name: "html-block";
|
|
893
|
-
Editor: Record<string, never>;
|
|
894
|
-
Element: HtmlBlockElement;
|
|
895
|
-
};
|
|
896
|
-
|
|
897
|
-
declare function createTableMethods(editor: Editor): {
|
|
898
|
-
getTableInfo: (args_0?: {
|
|
899
|
-
at?: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | HtmlBlockElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement | slate.Location | null | undefined;
|
|
900
|
-
} | undefined) => TableInfo | undefined;
|
|
901
|
-
insertTable: (args_0: number, args_1: number, args_2?: {
|
|
902
|
-
at?: slate.Location | null | undefined;
|
|
903
|
-
} | undefined) => boolean;
|
|
904
|
-
insertColumn: (args_0?: {
|
|
905
|
-
offset?: 0 | 1 | undefined;
|
|
906
|
-
at?: BetterAt | undefined;
|
|
907
|
-
} | undefined) => boolean;
|
|
908
|
-
insertRow: (args_0?: {
|
|
909
|
-
at?: BetterAt | undefined;
|
|
910
|
-
offset?: 0 | 1 | undefined;
|
|
911
|
-
} | undefined) => boolean;
|
|
912
|
-
removeTable: () => boolean;
|
|
913
|
-
removeColumn: (args_0?: {
|
|
914
|
-
at?: BetterAt | undefined;
|
|
915
|
-
} | undefined) => boolean | undefined;
|
|
916
|
-
removeRow: (args_0?: {
|
|
917
|
-
at?: BetterAt | undefined;
|
|
918
|
-
} | undefined) => boolean;
|
|
919
|
-
tabForward: () => boolean;
|
|
920
|
-
tabBackward: () => boolean | undefined;
|
|
921
|
-
shiftEnterForward: () => boolean;
|
|
922
|
-
selectCell: (args_0?: {
|
|
923
|
-
at?: BetterAt | undefined;
|
|
924
|
-
} | undefined) => boolean;
|
|
925
|
-
down: () => boolean;
|
|
926
|
-
up: () => boolean;
|
|
927
|
-
setTableColumnAlign: (options: {
|
|
928
|
-
align: "center" | "left" | "right";
|
|
929
|
-
}) => boolean;
|
|
930
|
-
};
|
|
931
|
-
|
|
932
|
-
type TableEditor = {
|
|
933
|
-
supportsTable: true;
|
|
934
|
-
tablePlugin: ReturnType<typeof createTableMethods>;
|
|
935
|
-
};
|
|
936
|
-
type TablePluginCustomTypes = {
|
|
937
|
-
Name: "table";
|
|
938
|
-
Editor: TableEditor;
|
|
939
|
-
Element: TableElement | TableRowElement | TableCellElement | TableContentElement;
|
|
940
|
-
};
|
|
941
|
-
|
|
942
|
-
type InlineCodeEditor = {
|
|
943
|
-
inlineCode: {
|
|
944
|
-
toggleInlineCode: () => void;
|
|
945
|
-
};
|
|
946
|
-
};
|
|
947
|
-
type InlineCodeText = {
|
|
948
|
-
text: string;
|
|
949
|
-
code?: true;
|
|
950
|
-
};
|
|
951
|
-
type InlineCodePluginCustomTypes = {
|
|
952
|
-
Name: "inline-code";
|
|
953
|
-
Editor: InlineCodeEditor;
|
|
954
|
-
Text: InlineCodeText;
|
|
955
|
-
};
|
|
956
|
-
|
|
957
|
-
declare function createMarksMethods(editor: Editor): {
|
|
958
|
-
removeMarks: (args_0?: {
|
|
959
|
-
at?: slate.Location | null | undefined;
|
|
960
|
-
} | undefined) => void;
|
|
961
|
-
toggleMark: (args_0: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline" | "highlight", args_1?: "bold" | "strike" | "text" | "prismToken" | "code" | "italic" | "underline" | "highlight" | undefined, args_2?: {
|
|
962
|
-
at?: slate.Location | null | undefined;
|
|
963
|
-
} | undefined) => void;
|
|
964
|
-
toggleBold: () => void;
|
|
965
|
-
toggleItalic: () => void;
|
|
966
|
-
toggleUnderline: () => void;
|
|
967
|
-
toggleStrike: () => void;
|
|
968
|
-
toggleHighlight: () => void;
|
|
969
|
-
};
|
|
970
|
-
|
|
971
|
-
type MarksEditor = {
|
|
972
|
-
/**
|
|
973
|
-
* IMPORTANT:
|
|
974
|
-
*
|
|
975
|
-
* This cannot be named `marks` because it conflicts with the `editor.marks`
|
|
976
|
-
* built into the BaseEditor.j
|
|
977
|
-
*/
|
|
978
|
-
marksPlugin: ReturnType<typeof createMarksMethods>;
|
|
979
|
-
activeMarks?: {
|
|
980
|
-
bold?: boolean;
|
|
981
|
-
italic?: boolean;
|
|
982
|
-
underline?: boolean;
|
|
983
|
-
strike?: boolean;
|
|
984
|
-
};
|
|
985
|
-
};
|
|
986
|
-
type MarksText = {
|
|
987
|
-
text: string;
|
|
988
|
-
bold?: true;
|
|
989
|
-
italic?: true;
|
|
990
|
-
underline?: true;
|
|
991
|
-
strike?: true;
|
|
992
|
-
highlight?: true;
|
|
993
|
-
};
|
|
994
|
-
type MarksPluginCustomTypes = {
|
|
995
|
-
Name: "marks";
|
|
996
|
-
Editor: MarksEditor;
|
|
997
|
-
Text: MarksText;
|
|
998
|
-
};
|
|
999
|
-
|
|
1000
|
-
/**
|
|
1001
|
-
* A type with generic for `convertElements` (below) to be used with the curry
|
|
1002
|
-
* method. TypeScript, unfortunately, cannot automatically curry generics for
|
|
1003
|
-
* us so we have to do it manually.
|
|
1004
|
-
*/
|
|
1005
|
-
type CurriedConvertElements = <T extends Element$1 = Element$1>(matchForToggle: (element: Element$1) => boolean, targetElement: TargetElement<T>, allowToggle: boolean) => void;
|
|
1006
|
-
|
|
1007
|
-
declare function createConvertElementMethods(editor: Editor): {
|
|
1008
|
-
convertElementTypes: string[];
|
|
1009
|
-
addConvertElementType: (type: "anchor" | "heading" | "block-quote" | "html-block" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line" | ("anchor" | "heading" | "block-quote" | "html-block" | "table" | "horizontal-rule" | "code-block" | "paragraph" | "image-block" | "ordered-list-item" | "unordered-list-item" | "task-list-item" | "table-row" | "table-cell" | "table-content" | "code-block-line")[]) => void;
|
|
1010
|
-
isConvertibleElement: (element: ImageBlockElement | ParagraphElement | OrderedListItemElement | UnorderedListItemElement | TaskListItemElement | HorizontalRuleElement | TableElement | TableRowElement | TableCellElement | TableContentElement | HtmlBlockElement | CodeBlockElement | CodeBlockLineElement | BlockQuoteElement | HeadingElement | AnchorElement) => boolean;
|
|
1011
|
-
convertElements: CurriedConvertElements;
|
|
1012
|
-
};
|
|
1013
|
-
|
|
1014
|
-
type ConvertElementEditor = {
|
|
1015
|
-
convertElement: ReturnType<typeof createConvertElementMethods>;
|
|
1016
|
-
};
|
|
1017
|
-
type ConvertElementPluginCustomTypes = {
|
|
1018
|
-
Name: "convert-element";
|
|
1019
|
-
Editor: ConvertElementEditor;
|
|
1020
|
-
};
|
|
1021
|
-
|
|
1022
|
-
declare function createPasteMarkdownMethods(editor: Editor): {
|
|
1023
|
-
pasteMarkdown: (markdown: string) => void;
|
|
1024
|
-
};
|
|
1025
|
-
|
|
1026
|
-
type PasteMarkdownMethods = ReturnType<typeof createPasteMarkdownMethods>;
|
|
1027
|
-
type PasteMarkdownEditor = {
|
|
1028
|
-
pasteMarkdown: PasteMarkdownMethods;
|
|
1029
|
-
};
|
|
1030
|
-
type PasteMarkdownPluginCustomTypes = {
|
|
1031
|
-
Name: "paste-markdown";
|
|
1032
|
-
Editor: PasteMarkdownEditor;
|
|
1033
|
-
};
|
|
1034
|
-
|
|
1035
|
-
/**
|
|
1036
|
-
* @deprecated Use defaultPlugins instead
|
|
1037
|
-
*/
|
|
1038
|
-
declare const plugins: (TypedPlugin<PasteMarkdownPluginCustomTypes> | TypedPlugin<ConvertElementPluginCustomTypes> | TypedPlugin<AnchorPluginCustomTypes> | TypedPlugin<HeadingPluginCustomTypes> | TypedPlugin<MarksPluginCustomTypes> | TypedPlugin<InlineCodePluginCustomTypes> | TypedPlugin<BlockQuotePluginCustomTypes> | TypedPlugin<CodeBlockPluginCustomTypes> | TypedPlugin<HtmlBlockPluginCustomTypes> | TypedPlugin<TablePluginCustomTypes> | TypedPlugin<HorizontalRulePluginCustomTypes> | TypedPlugin<{
|
|
1039
|
-
Name: "trailing-block";
|
|
1040
|
-
Editor: {
|
|
1041
|
-
allowTrailingBlock: true;
|
|
1042
|
-
};
|
|
1043
|
-
}> | TypedPlugin<ListPluginCustomTypes> | TypedPlugin<AtomicDeletePluginCustomTypes> | TypedPlugin<NormalizeAfterDeletePluginCustomTypes> | TypedPlugin<CollapsibleParagraphPluginCustomTypes> | TypedPlugin<ThemePluginCustomTypes> | TypedPlugin<ToolbarPluginCustomTypes> | TypedPlugin<ImagePluginCustomTypes> | TypedPlugin<PlaceholderPluginCustomTypes>)[];
|
|
1044
|
-
type PluginTypes = ExtractCustomTypes<typeof plugins>;
|
|
1045
|
-
type CustomEditor = PluginTypes["Editor"];
|
|
1046
|
-
type CustomElement = PluginTypes["Element"];
|
|
1047
|
-
type CustomText = PluginTypes["Text"];
|
|
1048
|
-
declare module "slate" {
|
|
1049
|
-
interface CustomTypes {
|
|
1050
|
-
Editor: BaseEditor & ReactEditor & HistoryEditor & CustomEditor & WysimarkEditor;
|
|
1051
|
-
Element: CustomElement;
|
|
1052
|
-
Text: BaseText & CustomText;
|
|
1053
|
-
}
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1056
|
-
type OnImageChangeHandler = (file: File) => Promise<string>;
|
|
1057
|
-
type EditableProps = {
|
|
1058
|
-
editor: Editor;
|
|
1059
|
-
value: string;
|
|
1060
|
-
onChange: (markdown: string) => void;
|
|
1061
|
-
throttleInMs?: number;
|
|
1062
|
-
placeholder?: string;
|
|
1063
|
-
className?: string;
|
|
1064
|
-
style?: React.CSSProperties;
|
|
1065
|
-
onImageChange?: OnImageChangeHandler;
|
|
1066
|
-
};
|
|
1067
|
-
declare function Editable({ editor, value, onChange, throttleInMs, placeholder, className, style, onImageChange, }: EditableProps): react_jsx_runtime.JSX.Element;
|
|
1068
|
-
|
|
1069
|
-
/**
|
|
1070
|
-
* The options passed into the standalone version of Wysimark.
|
|
1071
|
-
*/
|
|
1072
|
-
type StandaloneOptions = Parameters<typeof useEditor>[0] & {
|
|
1073
|
-
onChange?: (markdown: string) => void;
|
|
1074
|
-
placeholder?: string;
|
|
1075
|
-
initialMarkdown?: string;
|
|
1076
|
-
className?: string;
|
|
1077
|
-
};
|
|
1078
|
-
/**
|
|
1079
|
-
* The object returned by `createWysimark`
|
|
1080
|
-
*/
|
|
1081
|
-
type Wysimark = {
|
|
1082
|
-
unmount: () => void;
|
|
1083
|
-
getMarkdown: () => string;
|
|
1084
|
-
setMarkdown: (markdown: string) => void;
|
|
1085
|
-
};
|
|
1086
|
-
/**
|
|
1087
|
-
* The primary entry point for the standalone version of Wysimark.
|
|
1088
|
-
*/
|
|
1089
|
-
declare function createWysimark(containerElement: HTMLElement, options: StandaloneOptions): Wysimark;
|
|
1090
|
-
|
|
1091
|
-
export { Editable, OnImageChangeHandler, Wysimark, createWysimark, useEditor };
|