@tiptap/react 3.17.0 → 3.18.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 +327 -4
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +269 -1
- package/dist/index.d.ts +269 -1
- package/dist/index.js +318 -4
- package/dist/index.js.map +1 -1
- package/dist/menus/index.cjs +72 -17
- package/dist/menus/index.cjs.map +1 -1
- package/dist/menus/index.js +74 -19
- package/dist/menus/index.js.map +1 -1
- package/package.json +7 -7
- package/src/ReactNodeViewRenderer.tsx +29 -3
- package/src/Tiptap.tsx +355 -0
- package/src/index.ts +1 -0
- package/src/menus/BubbleMenu.tsx +49 -1
- package/src/menus/FloatingMenu.tsx +76 -20
package/dist/index.d.cts
CHANGED
|
@@ -5,6 +5,8 @@ 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';
|
|
8
10
|
|
|
9
11
|
/**
|
|
10
12
|
* The options for the `useEditor` hook.
|
|
@@ -244,6 +246,13 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
244
246
|
*/
|
|
245
247
|
selectionRafId: number | null;
|
|
246
248
|
constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);
|
|
249
|
+
private cachedExtensionWithSyncedStorage;
|
|
250
|
+
/**
|
|
251
|
+
* Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
|
|
252
|
+
* This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
|
|
253
|
+
* Cached to avoid proxy creation on every update.
|
|
254
|
+
*/
|
|
255
|
+
get extensionWithSyncedStorage(): NodeViewRendererProps['extension'];
|
|
247
256
|
/**
|
|
248
257
|
* Setup the React component.
|
|
249
258
|
* Called on initialization.
|
|
@@ -294,6 +303,265 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
294
303
|
*/
|
|
295
304
|
declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
|
296
305
|
|
|
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
|
+
/**
|
|
316
|
+
* The shape of the React context used by the `<Tiptap />` components.
|
|
317
|
+
*
|
|
318
|
+
* This object exposes the editor instance and a simple readiness flag.
|
|
319
|
+
*/
|
|
320
|
+
type TiptapContextType = {
|
|
321
|
+
/** The Tiptap editor instance. May be null during SSR or before initialization. */
|
|
322
|
+
editor: Editor | null;
|
|
323
|
+
/** True when the editor has finished initializing and is ready for user interaction. */
|
|
324
|
+
isReady: boolean;
|
|
325
|
+
};
|
|
326
|
+
/**
|
|
327
|
+
* React context that stores the current editor instance and readiness flag.
|
|
328
|
+
*
|
|
329
|
+
* Use `useTiptap()` to read from this context in child components.
|
|
330
|
+
*/
|
|
331
|
+
declare const TiptapContext: React.Context<TiptapContextType>;
|
|
332
|
+
/**
|
|
333
|
+
* Hook to read the Tiptap context (`editor` + `isReady`).
|
|
334
|
+
*
|
|
335
|
+
* This is a small convenience wrapper around `useContext(TiptapContext)`.
|
|
336
|
+
*
|
|
337
|
+
* @returns The current `TiptapContextType` value from the provider.
|
|
338
|
+
*
|
|
339
|
+
* @example
|
|
340
|
+
* ```tsx
|
|
341
|
+
* import { useTiptap } from '@tiptap/react'
|
|
342
|
+
*
|
|
343
|
+
* function Status() {
|
|
344
|
+
* const { isReady } = useTiptap()
|
|
345
|
+
* return <div>{isReady ? 'Editor ready' : 'Loading editor...'}</div>
|
|
346
|
+
* }
|
|
347
|
+
* ```
|
|
348
|
+
*/
|
|
349
|
+
declare const useTiptap: () => TiptapContextType;
|
|
350
|
+
/**
|
|
351
|
+
* Select a slice of the editor state using the context-provided editor.
|
|
352
|
+
*
|
|
353
|
+
* This is a thin wrapper around `useEditorState` that reads the `editor`
|
|
354
|
+
* instance from `useTiptap()` so callers don't have to pass it manually.
|
|
355
|
+
*
|
|
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
|
+
* @typeParam TSelectorResult - The type returned by the selector.
|
|
361
|
+
* @param selector - Function that receives the editor state snapshot and
|
|
362
|
+
* returns the piece of state you want to subscribe to.
|
|
363
|
+
* @param equalityFn - Optional function to compare previous/next selected
|
|
364
|
+
* values and avoid unnecessary updates.
|
|
365
|
+
* @returns The selected slice of the editor state.
|
|
366
|
+
*
|
|
367
|
+
* @example
|
|
368
|
+
* ```tsx
|
|
369
|
+
* function WordCount() {
|
|
370
|
+
* const { isReady } = useTiptap()
|
|
371
|
+
*
|
|
372
|
+
* // Only use useTiptapState when the editor is ready
|
|
373
|
+
* const wordCount = useTiptapState(state => {
|
|
374
|
+
* const text = state.editor.state.doc.textContent
|
|
375
|
+
* return text.split(/\s+/).filter(Boolean).length
|
|
376
|
+
* })
|
|
377
|
+
*
|
|
378
|
+
* if (!isReady) return null
|
|
379
|
+
*
|
|
380
|
+
* return <span>{wordCount} words</span>
|
|
381
|
+
* }
|
|
382
|
+
* ```
|
|
383
|
+
*/
|
|
384
|
+
declare function useTiptapState<TSelectorResult>(selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult, equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean): TSelectorResult;
|
|
385
|
+
/**
|
|
386
|
+
* Props for the `Tiptap` root/provider component.
|
|
387
|
+
*/
|
|
388
|
+
type TiptapWrapperProps = {
|
|
389
|
+
/**
|
|
390
|
+
* The editor instance to provide to child components.
|
|
391
|
+
* Can be null during SSR or before initialization.
|
|
392
|
+
*/
|
|
393
|
+
instance: Editor | null;
|
|
394
|
+
children: ReactNode;
|
|
395
|
+
};
|
|
396
|
+
/**
|
|
397
|
+
* Top-level provider component that makes the editor instance available via
|
|
398
|
+
* React context and tracks when the editor becomes ready.
|
|
399
|
+
*
|
|
400
|
+
* The component listens to the editor's `create` event and flips the
|
|
401
|
+
* `isReady` flag once initialization completes.
|
|
402
|
+
*
|
|
403
|
+
* This component also provides backwards compatibility with the legacy
|
|
404
|
+
* `EditorContext`, so components using `useCurrentEditor()` will work
|
|
405
|
+
* inside a `<Tiptap>` provider.
|
|
406
|
+
*
|
|
407
|
+
* @param props - Component props.
|
|
408
|
+
* @returns A context provider element wrapping `children`.
|
|
409
|
+
*
|
|
410
|
+
* @example
|
|
411
|
+
* ```tsx
|
|
412
|
+
* import { Tiptap, useEditor } from '@tiptap/react'
|
|
413
|
+
*
|
|
414
|
+
* function App() {
|
|
415
|
+
* const editor = useEditor({ extensions: [...] })
|
|
416
|
+
*
|
|
417
|
+
* return (
|
|
418
|
+
* <Tiptap instance={editor}>
|
|
419
|
+
* <Toolbar />
|
|
420
|
+
* <Tiptap.Content />
|
|
421
|
+
* </Tiptap>
|
|
422
|
+
* )
|
|
423
|
+
* }
|
|
424
|
+
* ```
|
|
425
|
+
*/
|
|
426
|
+
declare function TiptapWrapper({ instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
427
|
+
declare namespace TiptapWrapper {
|
|
428
|
+
var displayName: string;
|
|
429
|
+
}
|
|
430
|
+
/**
|
|
431
|
+
* Convenience component that renders `EditorContent` using the context-provided
|
|
432
|
+
* editor instance. Use this instead of manually passing the `editor` prop.
|
|
433
|
+
*
|
|
434
|
+
* @param props - All `EditorContent` props except `editor` and `ref`.
|
|
435
|
+
* @returns An `EditorContent` element bound to the context editor.
|
|
436
|
+
*
|
|
437
|
+
* @example
|
|
438
|
+
* ```tsx
|
|
439
|
+
* // inside a Tiptap provider
|
|
440
|
+
* <Tiptap.Content className="editor" />
|
|
441
|
+
* ```
|
|
442
|
+
*/
|
|
443
|
+
declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' | 'ref'>): react_jsx_runtime.JSX.Element;
|
|
444
|
+
declare namespace TiptapContent {
|
|
445
|
+
var displayName: string;
|
|
446
|
+
}
|
|
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
|
+
/**
|
|
518
|
+
* Root `Tiptap` component. Use it as the provider for all child components.
|
|
519
|
+
*
|
|
520
|
+
* The exported object includes several helper subcomponents for common use
|
|
521
|
+
* cases: `Content`, `Loading`, `BubbleMenu`, and `FloatingMenu`.
|
|
522
|
+
*
|
|
523
|
+
* This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
|
|
524
|
+
* and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
|
|
525
|
+
* backwards compatibility.
|
|
526
|
+
*
|
|
527
|
+
* @example
|
|
528
|
+
* ```tsx
|
|
529
|
+
* const editor = useEditor({ extensions: [...] })
|
|
530
|
+
*
|
|
531
|
+
* return (
|
|
532
|
+
* <Tiptap instance={editor}>
|
|
533
|
+
* <Tiptap.Loading>Initializing editor...</Tiptap.Loading>
|
|
534
|
+
* <Tiptap.Content />
|
|
535
|
+
* <Tiptap.BubbleMenu>
|
|
536
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
537
|
+
* </Tiptap.BubbleMenu>
|
|
538
|
+
* </Tiptap>
|
|
539
|
+
* )
|
|
540
|
+
* ```
|
|
541
|
+
*/
|
|
542
|
+
declare const Tiptap: typeof TiptapWrapper & {
|
|
543
|
+
/**
|
|
544
|
+
* The Tiptap Content component that renders the EditorContent with the editor instance from the context.
|
|
545
|
+
* @see TiptapContent
|
|
546
|
+
*/
|
|
547
|
+
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
|
+
};
|
|
564
|
+
|
|
297
565
|
type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
|
|
298
566
|
editor: TEditor;
|
|
299
567
|
transactionNumber: number;
|
|
@@ -354,4 +622,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
|
|
|
354
622
|
}) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
|
|
355
623
|
declare const useReactNodeView: () => ReactNodeViewContextProps;
|
|
356
624
|
|
|
357
|
-
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, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
|
|
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, TiptapBubbleMenu, TiptapContent, TiptapContext, type TiptapContextType, TiptapFloatingMenu, TiptapLoading, type TiptapLoadingProps, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,8 @@ 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';
|
|
8
10
|
|
|
9
11
|
/**
|
|
10
12
|
* The options for the `useEditor` hook.
|
|
@@ -244,6 +246,13 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
244
246
|
*/
|
|
245
247
|
selectionRafId: number | null;
|
|
246
248
|
constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>);
|
|
249
|
+
private cachedExtensionWithSyncedStorage;
|
|
250
|
+
/**
|
|
251
|
+
* Returns a proxy of the extension that redirects storage access to the editor's mutable storage.
|
|
252
|
+
* This preserves the original prototype chain (instanceof checks, methods like configure/extend work).
|
|
253
|
+
* Cached to avoid proxy creation on every update.
|
|
254
|
+
*/
|
|
255
|
+
get extensionWithSyncedStorage(): NodeViewRendererProps['extension'];
|
|
247
256
|
/**
|
|
248
257
|
* Setup the React component.
|
|
249
258
|
* Called on initialization.
|
|
@@ -294,6 +303,265 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
|
|
|
294
303
|
*/
|
|
295
304
|
declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
|
|
296
305
|
|
|
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
|
+
/**
|
|
316
|
+
* The shape of the React context used by the `<Tiptap />` components.
|
|
317
|
+
*
|
|
318
|
+
* This object exposes the editor instance and a simple readiness flag.
|
|
319
|
+
*/
|
|
320
|
+
type TiptapContextType = {
|
|
321
|
+
/** The Tiptap editor instance. May be null during SSR or before initialization. */
|
|
322
|
+
editor: Editor | null;
|
|
323
|
+
/** True when the editor has finished initializing and is ready for user interaction. */
|
|
324
|
+
isReady: boolean;
|
|
325
|
+
};
|
|
326
|
+
/**
|
|
327
|
+
* React context that stores the current editor instance and readiness flag.
|
|
328
|
+
*
|
|
329
|
+
* Use `useTiptap()` to read from this context in child components.
|
|
330
|
+
*/
|
|
331
|
+
declare const TiptapContext: React.Context<TiptapContextType>;
|
|
332
|
+
/**
|
|
333
|
+
* Hook to read the Tiptap context (`editor` + `isReady`).
|
|
334
|
+
*
|
|
335
|
+
* This is a small convenience wrapper around `useContext(TiptapContext)`.
|
|
336
|
+
*
|
|
337
|
+
* @returns The current `TiptapContextType` value from the provider.
|
|
338
|
+
*
|
|
339
|
+
* @example
|
|
340
|
+
* ```tsx
|
|
341
|
+
* import { useTiptap } from '@tiptap/react'
|
|
342
|
+
*
|
|
343
|
+
* function Status() {
|
|
344
|
+
* const { isReady } = useTiptap()
|
|
345
|
+
* return <div>{isReady ? 'Editor ready' : 'Loading editor...'}</div>
|
|
346
|
+
* }
|
|
347
|
+
* ```
|
|
348
|
+
*/
|
|
349
|
+
declare const useTiptap: () => TiptapContextType;
|
|
350
|
+
/**
|
|
351
|
+
* Select a slice of the editor state using the context-provided editor.
|
|
352
|
+
*
|
|
353
|
+
* This is a thin wrapper around `useEditorState` that reads the `editor`
|
|
354
|
+
* instance from `useTiptap()` so callers don't have to pass it manually.
|
|
355
|
+
*
|
|
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
|
+
* @typeParam TSelectorResult - The type returned by the selector.
|
|
361
|
+
* @param selector - Function that receives the editor state snapshot and
|
|
362
|
+
* returns the piece of state you want to subscribe to.
|
|
363
|
+
* @param equalityFn - Optional function to compare previous/next selected
|
|
364
|
+
* values and avoid unnecessary updates.
|
|
365
|
+
* @returns The selected slice of the editor state.
|
|
366
|
+
*
|
|
367
|
+
* @example
|
|
368
|
+
* ```tsx
|
|
369
|
+
* function WordCount() {
|
|
370
|
+
* const { isReady } = useTiptap()
|
|
371
|
+
*
|
|
372
|
+
* // Only use useTiptapState when the editor is ready
|
|
373
|
+
* const wordCount = useTiptapState(state => {
|
|
374
|
+
* const text = state.editor.state.doc.textContent
|
|
375
|
+
* return text.split(/\s+/).filter(Boolean).length
|
|
376
|
+
* })
|
|
377
|
+
*
|
|
378
|
+
* if (!isReady) return null
|
|
379
|
+
*
|
|
380
|
+
* return <span>{wordCount} words</span>
|
|
381
|
+
* }
|
|
382
|
+
* ```
|
|
383
|
+
*/
|
|
384
|
+
declare function useTiptapState<TSelectorResult>(selector: (context: EditorStateSnapshot<Editor>) => TSelectorResult, equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean): TSelectorResult;
|
|
385
|
+
/**
|
|
386
|
+
* Props for the `Tiptap` root/provider component.
|
|
387
|
+
*/
|
|
388
|
+
type TiptapWrapperProps = {
|
|
389
|
+
/**
|
|
390
|
+
* The editor instance to provide to child components.
|
|
391
|
+
* Can be null during SSR or before initialization.
|
|
392
|
+
*/
|
|
393
|
+
instance: Editor | null;
|
|
394
|
+
children: ReactNode;
|
|
395
|
+
};
|
|
396
|
+
/**
|
|
397
|
+
* Top-level provider component that makes the editor instance available via
|
|
398
|
+
* React context and tracks when the editor becomes ready.
|
|
399
|
+
*
|
|
400
|
+
* The component listens to the editor's `create` event and flips the
|
|
401
|
+
* `isReady` flag once initialization completes.
|
|
402
|
+
*
|
|
403
|
+
* This component also provides backwards compatibility with the legacy
|
|
404
|
+
* `EditorContext`, so components using `useCurrentEditor()` will work
|
|
405
|
+
* inside a `<Tiptap>` provider.
|
|
406
|
+
*
|
|
407
|
+
* @param props - Component props.
|
|
408
|
+
* @returns A context provider element wrapping `children`.
|
|
409
|
+
*
|
|
410
|
+
* @example
|
|
411
|
+
* ```tsx
|
|
412
|
+
* import { Tiptap, useEditor } from '@tiptap/react'
|
|
413
|
+
*
|
|
414
|
+
* function App() {
|
|
415
|
+
* const editor = useEditor({ extensions: [...] })
|
|
416
|
+
*
|
|
417
|
+
* return (
|
|
418
|
+
* <Tiptap instance={editor}>
|
|
419
|
+
* <Toolbar />
|
|
420
|
+
* <Tiptap.Content />
|
|
421
|
+
* </Tiptap>
|
|
422
|
+
* )
|
|
423
|
+
* }
|
|
424
|
+
* ```
|
|
425
|
+
*/
|
|
426
|
+
declare function TiptapWrapper({ instance, children }: TiptapWrapperProps): react_jsx_runtime.JSX.Element;
|
|
427
|
+
declare namespace TiptapWrapper {
|
|
428
|
+
var displayName: string;
|
|
429
|
+
}
|
|
430
|
+
/**
|
|
431
|
+
* Convenience component that renders `EditorContent` using the context-provided
|
|
432
|
+
* editor instance. Use this instead of manually passing the `editor` prop.
|
|
433
|
+
*
|
|
434
|
+
* @param props - All `EditorContent` props except `editor` and `ref`.
|
|
435
|
+
* @returns An `EditorContent` element bound to the context editor.
|
|
436
|
+
*
|
|
437
|
+
* @example
|
|
438
|
+
* ```tsx
|
|
439
|
+
* // inside a Tiptap provider
|
|
440
|
+
* <Tiptap.Content className="editor" />
|
|
441
|
+
* ```
|
|
442
|
+
*/
|
|
443
|
+
declare function TiptapContent({ ...rest }: Omit<EditorContentProps, 'editor' | 'ref'>): react_jsx_runtime.JSX.Element;
|
|
444
|
+
declare namespace TiptapContent {
|
|
445
|
+
var displayName: string;
|
|
446
|
+
}
|
|
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
|
+
/**
|
|
518
|
+
* Root `Tiptap` component. Use it as the provider for all child components.
|
|
519
|
+
*
|
|
520
|
+
* The exported object includes several helper subcomponents for common use
|
|
521
|
+
* cases: `Content`, `Loading`, `BubbleMenu`, and `FloatingMenu`.
|
|
522
|
+
*
|
|
523
|
+
* This component provides both the new `TiptapContext` (accessed via `useTiptap()`)
|
|
524
|
+
* and the legacy `EditorContext` (accessed via `useCurrentEditor()`) for
|
|
525
|
+
* backwards compatibility.
|
|
526
|
+
*
|
|
527
|
+
* @example
|
|
528
|
+
* ```tsx
|
|
529
|
+
* const editor = useEditor({ extensions: [...] })
|
|
530
|
+
*
|
|
531
|
+
* return (
|
|
532
|
+
* <Tiptap instance={editor}>
|
|
533
|
+
* <Tiptap.Loading>Initializing editor...</Tiptap.Loading>
|
|
534
|
+
* <Tiptap.Content />
|
|
535
|
+
* <Tiptap.BubbleMenu>
|
|
536
|
+
* <button onClick={() => editor.chain().focus().toggleBold().run()}>Bold</button>
|
|
537
|
+
* </Tiptap.BubbleMenu>
|
|
538
|
+
* </Tiptap>
|
|
539
|
+
* )
|
|
540
|
+
* ```
|
|
541
|
+
*/
|
|
542
|
+
declare const Tiptap: typeof TiptapWrapper & {
|
|
543
|
+
/**
|
|
544
|
+
* The Tiptap Content component that renders the EditorContent with the editor instance from the context.
|
|
545
|
+
* @see TiptapContent
|
|
546
|
+
*/
|
|
547
|
+
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
|
+
};
|
|
564
|
+
|
|
297
565
|
type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
|
|
298
566
|
editor: TEditor;
|
|
299
567
|
transactionNumber: number;
|
|
@@ -354,4 +622,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
|
|
|
354
622
|
}) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
|
|
355
623
|
declare const useReactNodeView: () => ReactNodeViewContextProps;
|
|
356
624
|
|
|
357
|
-
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, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
|
|
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, TiptapBubbleMenu, TiptapContent, TiptapContext, type TiptapContextType, TiptapFloatingMenu, TiptapLoading, type TiptapLoadingProps, TiptapWrapper, type TiptapWrapperProps, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useTiptap, useTiptapState };
|