@tiptap/react 3.18.0 → 3.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +15 -263
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +45 -136
- package/dist/index.d.ts +45 -136
- package/dist/index.js +14 -259
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/Tiptap.tsx +58 -189
package/dist/index.d.cts
CHANGED
|
@@ -5,8 +5,6 @@ import * as React from 'react';
|
|
|
5
5
|
import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1 } from 'react';
|
|
6
6
|
import { Node } from '@tiptap/pm/model';
|
|
7
7
|
import { Decoration, DecorationSource } from '@tiptap/pm/view';
|
|
8
|
-
import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
|
|
9
|
-
import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
|
|
10
8
|
|
|
11
9
|
/**
|
|
12
10
|
* The options for the `useEditor` hook.
|
|
@@ -303,36 +301,28 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
303
301
|
*/
|
|
304
302
|
declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
|
305
303
|
|
|
306
|
-
type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
307
|
-
type BubbleMenuProps = Optional$1<Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React__default.HTMLAttributes<HTMLDivElement>;
|
|
308
|
-
|
|
309
|
-
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
310
|
-
type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
|
|
311
|
-
editor: FloatingMenuPluginProps['editor'] | null;
|
|
312
|
-
options?: FloatingMenuPluginProps['options'];
|
|
313
|
-
} & React__default.HTMLAttributes<HTMLDivElement>;
|
|
314
|
-
|
|
315
304
|
/**
|
|
316
305
|
* The shape of the React context used by the `<Tiptap />` components.
|
|
317
306
|
*
|
|
318
|
-
*
|
|
307
|
+
* The editor instance is always available when using the default `useEditor`
|
|
308
|
+
* configuration. For SSR scenarios where `immediatelyRender: false` is used,
|
|
309
|
+
* consider using the legacy `EditorProvider` pattern instead.
|
|
319
310
|
*/
|
|
320
311
|
type TiptapContextType = {
|
|
321
|
-
/** The Tiptap editor instance.
|
|
322
|
-
editor: Editor
|
|
323
|
-
/** True when the editor has finished initializing and is ready for user interaction. */
|
|
324
|
-
isReady: boolean;
|
|
312
|
+
/** The Tiptap editor instance. */
|
|
313
|
+
editor: Editor;
|
|
325
314
|
};
|
|
326
315
|
/**
|
|
327
|
-
* React context that stores the current editor instance
|
|
316
|
+
* React context that stores the current editor instance.
|
|
328
317
|
*
|
|
329
318
|
* Use `useTiptap()` to read from this context in child components.
|
|
330
319
|
*/
|
|
331
320
|
declare const TiptapContext: React.Context<TiptapContextType>;
|
|
332
321
|
/**
|
|
333
|
-
* Hook to read the Tiptap context
|
|
322
|
+
* Hook to read the Tiptap context and access the editor instance.
|
|
334
323
|
*
|
|
335
324
|
* This is a small convenience wrapper around `useContext(TiptapContext)`.
|
|
325
|
+
* The editor is always available when used within a `<Tiptap>` provider.
|
|
336
326
|
*
|
|
337
327
|
* @returns The current `TiptapContextType` value from the provider.
|
|
338
328
|
*
|
|
@@ -340,9 +330,14 @@ declare const TiptapContext: React.Context<TiptapContextType>;
|
|
|
340
330
|
* ```tsx
|
|
341
331
|
* import { useTiptap } from '@tiptap/react'
|
|
342
332
|
*
|
|
343
|
-
* function
|
|
344
|
-
* const {
|
|
345
|
-
*
|
|
333
|
+
* function Toolbar() {
|
|
334
|
+
* const { editor } = useTiptap()
|
|
335
|
+
*
|
|
336
|
+
* return (
|
|
337
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>
|
|
338
|
+
* Bold
|
|
339
|
+
* </button>
|
|
340
|
+
* )
|
|
346
341
|
* }
|
|
347
342
|
* ```
|
|
348
343
|
*/
|
|
@@ -353,10 +348,6 @@ declare const useTiptap: () => TiptapContextType;
|
|
|
353
348
|
* This is a thin wrapper around `useEditorState` that reads the `editor`
|
|
354
349
|
* instance from `useTiptap()` so callers don't have to pass it manually.
|
|
355
350
|
*
|
|
356
|
-
* Important: This hook should only be used when the editor is available.
|
|
357
|
-
* Use the `isReady` flag from `useTiptap()` to guard against null editor,
|
|
358
|
-
* or ensure your component only renders after the editor is initialized.
|
|
359
|
-
*
|
|
360
351
|
* @typeParam TSelectorResult - The type returned by the selector.
|
|
361
352
|
* @param selector - Function that receives the editor state snapshot and
|
|
362
353
|
* returns the piece of state you want to subscribe to.
|
|
@@ -367,16 +358,11 @@ declare const useTiptap: () => TiptapContextType;
|
|
|
367
358
|
* @example
|
|
368
359
|
* ```tsx
|
|
369
360
|
* function WordCount() {
|
|
370
|
-
* const { isReady } = useTiptap()
|
|
371
|
-
*
|
|
372
|
-
* // Only use useTiptapState when the editor is ready
|
|
373
361
|
* const wordCount = useTiptapState(state => {
|
|
374
362
|
* const text = state.editor.state.doc.textContent
|
|
375
363
|
* return text.split(/\s+/).filter(Boolean).length
|
|
376
364
|
* })
|
|
377
365
|
*
|
|
378
|
-
* if (!isReady) return null
|
|
379
|
-
*
|
|
380
366
|
* return <span>{wordCount} words</span>
|
|
381
367
|
* }
|
|
382
368
|
* ```
|
|
@@ -388,17 +374,18 @@ declare function useTiptapState<TSelectorResult>(selector: (context: EditorState
|
|
|
388
374
|
type TiptapWrapperProps = {
|
|
389
375
|
/**
|
|
390
376
|
* The editor instance to provide to child components.
|
|
391
|
-
*
|
|
377
|
+
* Use `useEditor()` to create this instance.
|
|
378
|
+
*/
|
|
379
|
+
editor?: Editor;
|
|
380
|
+
/**
|
|
381
|
+
* @deprecated Use `editor` instead. Will be removed in the next major version.
|
|
392
382
|
*/
|
|
393
|
-
instance
|
|
383
|
+
instance?: Editor;
|
|
394
384
|
children: ReactNode;
|
|
395
385
|
};
|
|
396
386
|
/**
|
|
397
387
|
* Top-level provider component that makes the editor instance available via
|
|
398
|
-
* React context
|
|
399
|
-
*
|
|
400
|
-
* The component listens to the editor's `create` event and flips the
|
|
401
|
-
* `isReady` flag once initialization completes.
|
|
388
|
+
* React context to all child components.
|
|
402
389
|
*
|
|
403
390
|
* This component also provides backwards compatibility with the legacy
|
|
404
391
|
* `EditorContext`, so components using `useCurrentEditor()` will work
|
|
@@ -415,7 +402,7 @@ type TiptapWrapperProps = {
|
|
|
415
402
|
* const editor = useEditor({ extensions: [...] })
|
|
416
403
|
*
|
|
417
404
|
* return (
|
|
418
|
-
* <Tiptap
|
|
405
|
+
* <Tiptap editor={editor}>
|
|
419
406
|
* <Toolbar />
|
|
420
407
|
* <Tiptap.Content />
|
|
421
408
|
* </Tiptap>
|
|
@@ -423,7 +410,7 @@ type TiptapWrapperProps = {
|
|
|
423
410
|
* }
|
|
424
411
|
* ```
|
|
425
412
|
*/
|
|
426
|
-
declare function TiptapWrapper({ instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
413
|
+
declare function TiptapWrapper({ editor, instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
427
414
|
declare namespace TiptapWrapper {
|
|
428
415
|
var displayName: string;
|
|
429
416
|
}
|
|
@@ -444,99 +431,36 @@ declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' |
|
|
|
444
431
|
declare namespace TiptapContent {
|
|
445
432
|
var displayName: string;
|
|
446
433
|
}
|
|
447
|
-
type TiptapLoadingProps = {
|
|
448
|
-
children: ReactNode;
|
|
449
|
-
};
|
|
450
|
-
/**
|
|
451
|
-
* Component that renders its children only when the editor is not ready.
|
|
452
|
-
*
|
|
453
|
-
* This is useful for displaying loading states or placeholders during
|
|
454
|
-
* editor initialization, especially with SSR.
|
|
455
|
-
*
|
|
456
|
-
* @param props - The props for the TiptapLoading component.
|
|
457
|
-
* @returns The children when editor is not ready, or null when ready.
|
|
458
|
-
*
|
|
459
|
-
* @example
|
|
460
|
-
* ```tsx
|
|
461
|
-
* <Tiptap instance={editor}>
|
|
462
|
-
* <Tiptap.Loading>
|
|
463
|
-
* <div className="skeleton">Loading editor...</div>
|
|
464
|
-
* </Tiptap.Loading>
|
|
465
|
-
* <Tiptap.Content />
|
|
466
|
-
* </Tiptap>
|
|
467
|
-
* ```
|
|
468
|
-
*/
|
|
469
|
-
declare function TiptapLoading({ children }: TiptapLoadingProps): ReactNode;
|
|
470
|
-
declare namespace TiptapLoading {
|
|
471
|
-
var displayName: string;
|
|
472
|
-
}
|
|
473
|
-
/**
|
|
474
|
-
* A wrapper around the library `BubbleMenu` that injects the editor from
|
|
475
|
-
* context so callers don't need to pass the `editor` prop.
|
|
476
|
-
*
|
|
477
|
-
* Returns `null` when the editor is not available (for example during SSR).
|
|
478
|
-
*
|
|
479
|
-
* @param props - Props for the underlying `BubbleMenu` (except `editor`).
|
|
480
|
-
* @returns A `BubbleMenu` bound to the context editor, or `null`.
|
|
481
|
-
*
|
|
482
|
-
* @example
|
|
483
|
-
* ```tsx
|
|
484
|
-
* <Tiptap.BubbleMenu tippyOptions={{ duration: 100 }}>
|
|
485
|
-
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
486
|
-
* </Tiptap.BubbleMenu>
|
|
487
|
-
* ```
|
|
488
|
-
*/
|
|
489
|
-
declare function TiptapBubbleMenu({ children, ...rest }: {
|
|
490
|
-
children: ReactNode;
|
|
491
|
-
} & Omit<BubbleMenuProps, 'editor'>): react_jsx_runtime.JSX.Element | null;
|
|
492
|
-
declare namespace TiptapBubbleMenu {
|
|
493
|
-
var displayName: string;
|
|
494
|
-
}
|
|
495
|
-
/**
|
|
496
|
-
* A wrapper around the library `FloatingMenu` that injects the editor from
|
|
497
|
-
* context so callers don't need to pass the `editor` prop.
|
|
498
|
-
*
|
|
499
|
-
* Returns `null` when the editor is not available.
|
|
500
|
-
*
|
|
501
|
-
* @param props - Props for the underlying `FloatingMenu` (except `editor`).
|
|
502
|
-
* @returns A `FloatingMenu` bound to the context editor, or `null`.
|
|
503
|
-
*
|
|
504
|
-
* @example
|
|
505
|
-
* ```tsx
|
|
506
|
-
* <Tiptap.FloatingMenu placement="top">
|
|
507
|
-
* <button onClick={() => editor.chain().focus().toggleItalic().run()}>Italic</button>
|
|
508
|
-
* </Tiptap.FloatingMenu>
|
|
509
|
-
* ```
|
|
510
|
-
*/
|
|
511
|
-
declare function TiptapFloatingMenu({ children, ...rest }: {
|
|
512
|
-
children: ReactNode;
|
|
513
|
-
} & Omit<FloatingMenuProps, 'editor'>): react_jsx_runtime.JSX.Element | null;
|
|
514
|
-
declare namespace TiptapFloatingMenu {
|
|
515
|
-
var displayName: string;
|
|
516
|
-
}
|
|
517
434
|
/**
|
|
518
435
|
* Root `Tiptap` component. Use it as the provider for all child components.
|
|
519
436
|
*
|
|
520
|
-
* The exported object includes
|
|
521
|
-
*
|
|
437
|
+
* The exported object includes the `Content` subcomponent for rendering the
|
|
438
|
+
* editor content area.
|
|
522
439
|
*
|
|
523
440
|
* This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
|
|
524
441
|
* and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
|
|
525
442
|
* backwards compatibility.
|
|
526
443
|
*
|
|
444
|
+
* For bubble menus and floating menus, import them separately from
|
|
445
|
+
* `@tiptap/react/menus` to keep floating-ui as an optional dependency.
|
|
446
|
+
*
|
|
527
447
|
* @example
|
|
528
448
|
* ```tsx
|
|
529
|
-
*
|
|
449
|
+
* import { Tiptap, useEditor } from '@tiptap/react'
|
|
450
|
+
* import { BubbleMenu } from '@tiptap/react/menus'
|
|
451
|
+
*
|
|
452
|
+
* function App() {
|
|
453
|
+
* const editor = useEditor({ extensions: [...] })
|
|
530
454
|
*
|
|
531
|
-
*
|
|
532
|
-
*
|
|
533
|
-
*
|
|
534
|
-
*
|
|
535
|
-
*
|
|
536
|
-
*
|
|
537
|
-
* </Tiptap
|
|
538
|
-
*
|
|
539
|
-
*
|
|
455
|
+
* return (
|
|
456
|
+
* <Tiptap editor={editor}>
|
|
457
|
+
* <Tiptap.Content />
|
|
458
|
+
* <BubbleMenu>
|
|
459
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
460
|
+
* </BubbleMenu>
|
|
461
|
+
* </Tiptap>
|
|
462
|
+
* )
|
|
463
|
+
* }
|
|
540
464
|
* ```
|
|
541
465
|
*/
|
|
542
466
|
declare const Tiptap: typeof TiptapWrapper & {
|
|
@@ -545,21 +469,6 @@ declare const Tiptap: typeof TiptapWrapper & {
|
|
|
545
469
|
* @see TiptapContent
|
|
546
470
|
*/
|
|
547
471
|
Content: typeof TiptapContent;
|
|
548
|
-
/**
|
|
549
|
-
* The Tiptap Loading component that renders its children only when the editor is not ready.
|
|
550
|
-
* @see TiptapLoading
|
|
551
|
-
*/
|
|
552
|
-
Loading: typeof TiptapLoading;
|
|
553
|
-
/**
|
|
554
|
-
* The Tiptap BubbleMenu component that wraps the BubbleMenu from Tiptap and provides the editor instance from the context.
|
|
555
|
-
* @see TiptapBubbleMenu
|
|
556
|
-
*/
|
|
557
|
-
BubbleMenu: typeof TiptapBubbleMenu;
|
|
558
|
-
/**
|
|
559
|
-
* The Tiptap FloatingMenu component that wraps the FloatingMenu from Tiptap and provides the editor instance from the context.
|
|
560
|
-
* @see TiptapFloatingMenu
|
|
561
|
-
*/
|
|
562
|
-
FloatingMenu: typeof TiptapFloatingMenu;
|
|
563
472
|
};
|
|
564
473
|
|
|
565
474
|
type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
|
|
@@ -622,4 +531,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
|
|
|
622
531
|
}) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
|
|
623
532
|
declare const useReactNodeView: () => ReactNodeViewContextProps;
|
|
624
533
|
|
|
625
|
-
export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap,
|
|
534
|
+
export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap, TiptapContent, TiptapContext, type TiptapContextType, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,8 +5,6 @@ import * as React from 'react';
|
|
|
5
5
|
import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1 } from 'react';
|
|
6
6
|
import { Node } from '@tiptap/pm/model';
|
|
7
7
|
import { Decoration, DecorationSource } from '@tiptap/pm/view';
|
|
8
|
-
import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
|
|
9
|
-
import { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu';
|
|
10
8
|
|
|
11
9
|
/**
|
|
12
10
|
* The options for the `useEditor` hook.
|
|
@@ -303,36 +301,28 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
303
301
|
*/
|
|
304
302
|
declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
|
305
303
|
|
|
306
|
-
type Optional$1<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
307
|
-
type BubbleMenuProps = Optional$1<Omit<Optional$1<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> & React__default.HTMLAttributes<HTMLDivElement>;
|
|
308
|
-
|
|
309
|
-
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
310
|
-
type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
|
|
311
|
-
editor: FloatingMenuPluginProps['editor'] | null;
|
|
312
|
-
options?: FloatingMenuPluginProps['options'];
|
|
313
|
-
} & React__default.HTMLAttributes<HTMLDivElement>;
|
|
314
|
-
|
|
315
304
|
/**
|
|
316
305
|
* The shape of the React context used by the `<Tiptap />` components.
|
|
317
306
|
*
|
|
318
|
-
*
|
|
307
|
+
* The editor instance is always available when using the default `useEditor`
|
|
308
|
+
* configuration. For SSR scenarios where `immediatelyRender: false` is used,
|
|
309
|
+
* consider using the legacy `EditorProvider` pattern instead.
|
|
319
310
|
*/
|
|
320
311
|
type TiptapContextType = {
|
|
321
|
-
/** The Tiptap editor instance.
|
|
322
|
-
editor: Editor
|
|
323
|
-
/** True when the editor has finished initializing and is ready for user interaction. */
|
|
324
|
-
isReady: boolean;
|
|
312
|
+
/** The Tiptap editor instance. */
|
|
313
|
+
editor: Editor;
|
|
325
314
|
};
|
|
326
315
|
/**
|
|
327
|
-
* React context that stores the current editor instance
|
|
316
|
+
* React context that stores the current editor instance.
|
|
328
317
|
*
|
|
329
318
|
* Use `useTiptap()` to read from this context in child components.
|
|
330
319
|
*/
|
|
331
320
|
declare const TiptapContext: React.Context<TiptapContextType>;
|
|
332
321
|
/**
|
|
333
|
-
* Hook to read the Tiptap context
|
|
322
|
+
* Hook to read the Tiptap context and access the editor instance.
|
|
334
323
|
*
|
|
335
324
|
* This is a small convenience wrapper around `useContext(TiptapContext)`.
|
|
325
|
+
* The editor is always available when used within a `<Tiptap>` provider.
|
|
336
326
|
*
|
|
337
327
|
* @returns The current `TiptapContextType` value from the provider.
|
|
338
328
|
*
|
|
@@ -340,9 +330,14 @@ declare const TiptapContext: React.Context<TiptapContextType>;
|
|
|
340
330
|
* ```tsx
|
|
341
331
|
* import { useTiptap } from '@tiptap/react'
|
|
342
332
|
*
|
|
343
|
-
* function
|
|
344
|
-
* const {
|
|
345
|
-
*
|
|
333
|
+
* function Toolbar() {
|
|
334
|
+
* const { editor } = useTiptap()
|
|
335
|
+
*
|
|
336
|
+
* return (
|
|
337
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>
|
|
338
|
+
* Bold
|
|
339
|
+
* </button>
|
|
340
|
+
* )
|
|
346
341
|
* }
|
|
347
342
|
* ```
|
|
348
343
|
*/
|
|
@@ -353,10 +348,6 @@ declare const useTiptap: () => TiptapContextType;
|
|
|
353
348
|
* This is a thin wrapper around `useEditorState` that reads the `editor`
|
|
354
349
|
* instance from `useTiptap()` so callers don't have to pass it manually.
|
|
355
350
|
*
|
|
356
|
-
* Important: This hook should only be used when the editor is available.
|
|
357
|
-
* Use the `isReady` flag from `useTiptap()` to guard against null editor,
|
|
358
|
-
* or ensure your component only renders after the editor is initialized.
|
|
359
|
-
*
|
|
360
351
|
* @typeParam TSelectorResult - The type returned by the selector.
|
|
361
352
|
* @param selector - Function that receives the editor state snapshot and
|
|
362
353
|
* returns the piece of state you want to subscribe to.
|
|
@@ -367,16 +358,11 @@ declare const useTiptap: () => TiptapContextType;
|
|
|
367
358
|
* @example
|
|
368
359
|
* ```tsx
|
|
369
360
|
* function WordCount() {
|
|
370
|
-
* const { isReady } = useTiptap()
|
|
371
|
-
*
|
|
372
|
-
* // Only use useTiptapState when the editor is ready
|
|
373
361
|
* const wordCount = useTiptapState(state => {
|
|
374
362
|
* const text = state.editor.state.doc.textContent
|
|
375
363
|
* return text.split(/\s+/).filter(Boolean).length
|
|
376
364
|
* })
|
|
377
365
|
*
|
|
378
|
-
* if (!isReady) return null
|
|
379
|
-
*
|
|
380
366
|
* return <span>{wordCount} words</span>
|
|
381
367
|
* }
|
|
382
368
|
* ```
|
|
@@ -388,17 +374,18 @@ declare function useTiptapState<TSelectorResult>(selector: (context: EditorState
|
|
|
388
374
|
type TiptapWrapperProps = {
|
|
389
375
|
/**
|
|
390
376
|
* The editor instance to provide to child components.
|
|
391
|
-
*
|
|
377
|
+
* Use `useEditor()` to create this instance.
|
|
378
|
+
*/
|
|
379
|
+
editor?: Editor;
|
|
380
|
+
/**
|
|
381
|
+
* @deprecated Use `editor` instead. Will be removed in the next major version.
|
|
392
382
|
*/
|
|
393
|
-
instance
|
|
383
|
+
instance?: Editor;
|
|
394
384
|
children: ReactNode;
|
|
395
385
|
};
|
|
396
386
|
/**
|
|
397
387
|
* Top-level provider component that makes the editor instance available via
|
|
398
|
-
* React context
|
|
399
|
-
*
|
|
400
|
-
* The component listens to the editor's `create` event and flips the
|
|
401
|
-
* `isReady` flag once initialization completes.
|
|
388
|
+
* React context to all child components.
|
|
402
389
|
*
|
|
403
390
|
* This component also provides backwards compatibility with the legacy
|
|
404
391
|
* `EditorContext`, so components using `useCurrentEditor()` will work
|
|
@@ -415,7 +402,7 @@ type TiptapWrapperProps = {
|
|
|
415
402
|
* const editor = useEditor({ extensions: [...] })
|
|
416
403
|
*
|
|
417
404
|
* return (
|
|
418
|
-
* <Tiptap
|
|
405
|
+
* <Tiptap editor={editor}>
|
|
419
406
|
* <Toolbar />
|
|
420
407
|
* <Tiptap.Content />
|
|
421
408
|
* </Tiptap>
|
|
@@ -423,7 +410,7 @@ type TiptapWrapperProps = {
|
|
|
423
410
|
* }
|
|
424
411
|
* ```
|
|
425
412
|
*/
|
|
426
|
-
declare function TiptapWrapper({ instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
413
|
+
declare function TiptapWrapper({ editor, instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
427
414
|
declare namespace TiptapWrapper {
|
|
428
415
|
var displayName: string;
|
|
429
416
|
}
|
|
@@ -444,99 +431,36 @@ declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' |
|
|
|
444
431
|
declare namespace TiptapContent {
|
|
445
432
|
var displayName: string;
|
|
446
433
|
}
|
|
447
|
-
type TiptapLoadingProps = {
|
|
448
|
-
children: ReactNode;
|
|
449
|
-
};
|
|
450
|
-
/**
|
|
451
|
-
* Component that renders its children only when the editor is not ready.
|
|
452
|
-
*
|
|
453
|
-
* This is useful for displaying loading states or placeholders during
|
|
454
|
-
* editor initialization, especially with SSR.
|
|
455
|
-
*
|
|
456
|
-
* @param props - The props for the TiptapLoading component.
|
|
457
|
-
* @returns The children when editor is not ready, or null when ready.
|
|
458
|
-
*
|
|
459
|
-
* @example
|
|
460
|
-
* ```tsx
|
|
461
|
-
* <Tiptap instance={editor}>
|
|
462
|
-
* <Tiptap.Loading>
|
|
463
|
-
* <div className="skeleton">Loading editor...</div>
|
|
464
|
-
* </Tiptap.Loading>
|
|
465
|
-
* <Tiptap.Content />
|
|
466
|
-
* </Tiptap>
|
|
467
|
-
* ```
|
|
468
|
-
*/
|
|
469
|
-
declare function TiptapLoading({ children }: TiptapLoadingProps): ReactNode;
|
|
470
|
-
declare namespace TiptapLoading {
|
|
471
|
-
var displayName: string;
|
|
472
|
-
}
|
|
473
|
-
/**
|
|
474
|
-
* A wrapper around the library `BubbleMenu` that injects the editor from
|
|
475
|
-
* context so callers don't need to pass the `editor` prop.
|
|
476
|
-
*
|
|
477
|
-
* Returns `null` when the editor is not available (for example during SSR).
|
|
478
|
-
*
|
|
479
|
-
* @param props - Props for the underlying `BubbleMenu` (except `editor`).
|
|
480
|
-
* @returns A `BubbleMenu` bound to the context editor, or `null`.
|
|
481
|
-
*
|
|
482
|
-
* @example
|
|
483
|
-
* ```tsx
|
|
484
|
-
* <Tiptap.BubbleMenu tippyOptions={{ duration: 100 }}>
|
|
485
|
-
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
486
|
-
* </Tiptap.BubbleMenu>
|
|
487
|
-
* ```
|
|
488
|
-
*/
|
|
489
|
-
declare function TiptapBubbleMenu({ children, ...rest }: {
|
|
490
|
-
children: ReactNode;
|
|
491
|
-
} & Omit<BubbleMenuProps, 'editor'>): react_jsx_runtime.JSX.Element | null;
|
|
492
|
-
declare namespace TiptapBubbleMenu {
|
|
493
|
-
var displayName: string;
|
|
494
|
-
}
|
|
495
|
-
/**
|
|
496
|
-
* A wrapper around the library `FloatingMenu` that injects the editor from
|
|
497
|
-
* context so callers don't need to pass the `editor` prop.
|
|
498
|
-
*
|
|
499
|
-
* Returns `null` when the editor is not available.
|
|
500
|
-
*
|
|
501
|
-
* @param props - Props for the underlying `FloatingMenu` (except `editor`).
|
|
502
|
-
* @returns A `FloatingMenu` bound to the context editor, or `null`.
|
|
503
|
-
*
|
|
504
|
-
* @example
|
|
505
|
-
* ```tsx
|
|
506
|
-
* <Tiptap.FloatingMenu placement="top">
|
|
507
|
-
* <button onClick={() => editor.chain().focus().toggleItalic().run()}>Italic</button>
|
|
508
|
-
* </Tiptap.FloatingMenu>
|
|
509
|
-
* ```
|
|
510
|
-
*/
|
|
511
|
-
declare function TiptapFloatingMenu({ children, ...rest }: {
|
|
512
|
-
children: ReactNode;
|
|
513
|
-
} & Omit<FloatingMenuProps, 'editor'>): react_jsx_runtime.JSX.Element | null;
|
|
514
|
-
declare namespace TiptapFloatingMenu {
|
|
515
|
-
var displayName: string;
|
|
516
|
-
}
|
|
517
434
|
/**
|
|
518
435
|
* Root `Tiptap` component. Use it as the provider for all child components.
|
|
519
436
|
*
|
|
520
|
-
* The exported object includes
|
|
521
|
-
*
|
|
437
|
+
* The exported object includes the `Content` subcomponent for rendering the
|
|
438
|
+
* editor content area.
|
|
522
439
|
*
|
|
523
440
|
* This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
|
|
524
441
|
* and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
|
|
525
442
|
* backwards compatibility.
|
|
526
443
|
*
|
|
444
|
+
* For bubble menus and floating menus, import them separately from
|
|
445
|
+
* `@tiptap/react/menus` to keep floating-ui as an optional dependency.
|
|
446
|
+
*
|
|
527
447
|
* @example
|
|
528
448
|
* ```tsx
|
|
529
|
-
*
|
|
449
|
+
* import { Tiptap, useEditor } from '@tiptap/react'
|
|
450
|
+
* import { BubbleMenu } from '@tiptap/react/menus'
|
|
451
|
+
*
|
|
452
|
+
* function App() {
|
|
453
|
+
* const editor = useEditor({ extensions: [...] })
|
|
530
454
|
*
|
|
531
|
-
*
|
|
532
|
-
*
|
|
533
|
-
*
|
|
534
|
-
*
|
|
535
|
-
*
|
|
536
|
-
*
|
|
537
|
-
* </Tiptap
|
|
538
|
-
*
|
|
539
|
-
*
|
|
455
|
+
* return (
|
|
456
|
+
* <Tiptap editor={editor}>
|
|
457
|
+
* <Tiptap.Content />
|
|
458
|
+
* <BubbleMenu>
|
|
459
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
460
|
+
* </BubbleMenu>
|
|
461
|
+
* </Tiptap>
|
|
462
|
+
* )
|
|
463
|
+
* }
|
|
540
464
|
* ```
|
|
541
465
|
*/
|
|
542
466
|
declare const Tiptap: typeof TiptapWrapper & {
|
|
@@ -545,21 +469,6 @@ declare const Tiptap: typeof TiptapWrapper & {
|
|
|
545
469
|
* @see TiptapContent
|
|
546
470
|
*/
|
|
547
471
|
Content: typeof TiptapContent;
|
|
548
|
-
/**
|
|
549
|
-
* The Tiptap Loading component that renders its children only when the editor is not ready.
|
|
550
|
-
* @see TiptapLoading
|
|
551
|
-
*/
|
|
552
|
-
Loading: typeof TiptapLoading;
|
|
553
|
-
/**
|
|
554
|
-
* The Tiptap BubbleMenu component that wraps the BubbleMenu from Tiptap and provides the editor instance from the context.
|
|
555
|
-
* @see TiptapBubbleMenu
|
|
556
|
-
*/
|
|
557
|
-
BubbleMenu: typeof TiptapBubbleMenu;
|
|
558
|
-
/**
|
|
559
|
-
* The Tiptap FloatingMenu component that wraps the FloatingMenu from Tiptap and provides the editor instance from the context.
|
|
560
|
-
* @see TiptapFloatingMenu
|
|
561
|
-
*/
|
|
562
|
-
FloatingMenu: typeof TiptapFloatingMenu;
|
|
563
472
|
};
|
|
564
473
|
|
|
565
474
|
type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
|
|
@@ -622,4 +531,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
|
|
|
622
531
|
}) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
|
|
623
532
|
declare const useReactNodeView: () => ReactNodeViewContextProps;
|
|
624
533
|
|
|
625
|
-
export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap,
|
|
534
|
+
export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, Tiptap, TiptapContent, TiptapContext, type TiptapContextType, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };
|