@liveblocks/react-blocknote
Version:
An integration of BlockNote + React to enable collaboration, comments, live cursors, and more with Liveblocks.
1,067 lines (1,057 loc) • 33.5 kB
TypeScript
import * as _tiptap_core from '@tiptap/core';
import { Extension } from '@tiptap/core';
import { useLiveblocksExtension as useLiveblocksExtension$1, AnchoredThreads as AnchoredThreads$1, FloatingComposer as FloatingComposer$1, FloatingThreads as FloatingThreads$1, HistoryVersionPreview as HistoryVersionPreview$1 } from '@liveblocks/react-tiptap';
export { useIsEditorReady } from '@liveblocks/react-tiptap';
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as _blocknote_core from '@blocknote/core';
import { BlockSchema, DefaultBlockSchema, InlineContentSchema, DefaultInlineContentSchema, StyleSchema, DefaultStyleSchema, BlockNoteEditor, BlockNoteEditorOptions, BlockNoteSchema } from '@blocknote/core';
import { DependencyList } from 'react';
type LiveblocksExtensionOptions = Parameters<typeof useLiveblocksExtension$1>[0];
declare const useLiveblocksExtension: (options?: LiveblocksExtensionOptions) => _tiptap_core.Extension<any, any>;
type AnchoredThreadsProps<B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema> = Omit<Parameters<typeof AnchoredThreads$1>[0], "editor"> & {
editor: BlockNoteEditor<B, I, S>;
};
declare function AnchoredThreads(props: AnchoredThreadsProps): react_jsx_runtime.JSX.Element;
type FloatingComposerProps<B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema> = Omit<Parameters<typeof FloatingComposer$1>[0], "editor"> & {
editor: BlockNoteEditor<B, I, S>;
};
declare function FloatingComposer(props: FloatingComposerProps): react_jsx_runtime.JSX.Element;
type FloatingThreadsProps<B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema> = Omit<Parameters<typeof FloatingThreads$1>[0], "editor"> & {
editor: BlockNoteEditor<B, I, S>;
};
declare function FloatingThreads(props: FloatingThreadsProps): react_jsx_runtime.JSX.Element;
/**
* Helper function to add Liveblocks support to BlockNoteEditorOptions
*/
declare const withLiveblocksEditorOptions: <B extends BlockSchema = _blocknote_core.BlockSchemaFromSpecs<{
paragraph: {
config: {
type: "paragraph";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "paragraph";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
heading: {
config: {
type: "heading";
content: "inline";
propSchema: {
level: {
default: number;
values: readonly [1, 2, 3];
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "heading";
content: "inline";
propSchema: {
level: {
default: number;
values: readonly [1, 2, 3];
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
codeBlock: {
config: {
type: "codeBlock";
content: "inline";
propSchema: {
language: {
default: string;
values: string[];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "codeBlock";
content: "inline";
propSchema: {
language: {
default: string;
values: string[];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
bulletListItem: {
config: {
type: "bulletListItem";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "bulletListItem";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
numberedListItem: {
config: {
type: "numberedListItem";
content: "inline";
propSchema: {
start: {
default: undefined;
type: "number";
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "numberedListItem";
content: "inline";
propSchema: {
start: {
default: undefined;
type: "number";
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
checkListItem: {
config: {
type: "checkListItem";
content: "inline";
propSchema: {
checked: {
default: false;
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "checkListItem";
content: "inline";
propSchema: {
checked: {
default: false;
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
table: {
config: {
type: "table";
content: "table";
propSchema: {
textColor: {
default: "default";
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "table";
content: "table";
propSchema: {
textColor: {
default: "default";
};
};
}, any, InlineContentSchema, StyleSchema>;
};
file: {
config: {
type: "file";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
};
content: "none";
isFileBlock: true;
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "file";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
};
content: "none";
isFileBlock: true;
}, any, InlineContentSchema, StyleSchema>;
};
image: {
config: {
type: "image";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "image";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
video: {
config: {
type: "video";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "video";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
audio: {
config: {
type: "audio";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "audio";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
}>, I extends InlineContentSchema = _blocknote_core.InlineContentSchemaFromSpecs<{
text: {
config: "text";
implementation: any;
};
link: {
config: "link";
implementation: any;
};
}>, S extends StyleSchema = _blocknote_core.StyleSchemaFromSpecs<{
bold: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
italic: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
underline: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
strike: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
code: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
textColor: {
config: {
type: string;
propSchema: "string";
};
implementation: _blocknote_core.StyleImplementation;
};
backgroundColor: {
config: {
type: string;
propSchema: "string";
};
implementation: _blocknote_core.StyleImplementation;
};
}>>(liveblocksExtension: Extension, blocknoteOptions?: Partial<BlockNoteEditorOptions<B, I, S>>, liveblocksOptions?: Partial<{
mentions: boolean;
}>) => Partial<BlockNoteEditorOptions<B, I, S>>;
/**
* Adds the Liveblocks Mention Node as inline content to the BlockNote schema
*
* This makes sure BlockNote knows about Liveblocks mentions and that you can read/write mentions via the BlockNote API
*/
declare const withLiveblocksSchema: <B extends BlockSchema, I extends InlineContentSchema, S extends StyleSchema>(schema?: BlockNoteSchema<B, I, S>, liveblocksOptions?: Partial<{
mentions: boolean;
}>) => BlockNoteSchema<B, I, S>;
/**
* Function that can be used instead of standard useCreateBlockNote to add Liveblocks support
*/
declare const useCreateBlockNoteWithLiveblocks: <B extends BlockSchema = _blocknote_core.BlockSchemaFromSpecs<{
paragraph: {
config: {
type: "paragraph";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "paragraph";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
heading: {
config: {
type: "heading";
content: "inline";
propSchema: {
level: {
default: number;
values: readonly [1, 2, 3];
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "heading";
content: "inline";
propSchema: {
level: {
default: number;
values: readonly [1, 2, 3];
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
codeBlock: {
config: {
type: "codeBlock";
content: "inline";
propSchema: {
language: {
default: string;
values: string[];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "codeBlock";
content: "inline";
propSchema: {
language: {
default: string;
values: string[];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
bulletListItem: {
config: {
type: "bulletListItem";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "bulletListItem";
content: "inline";
propSchema: {
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
numberedListItem: {
config: {
type: "numberedListItem";
content: "inline";
propSchema: {
start: {
default: undefined;
type: "number";
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "numberedListItem";
content: "inline";
propSchema: {
start: {
default: undefined;
type: "number";
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
checkListItem: {
config: {
type: "checkListItem";
content: "inline";
propSchema: {
checked: {
default: false;
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "checkListItem";
content: "inline";
propSchema: {
checked: {
default: false;
};
backgroundColor: {
default: "default";
};
textColor: {
default: "default";
};
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
};
}, any, InlineContentSchema, StyleSchema>;
};
table: {
config: {
type: "table";
content: "table";
propSchema: {
textColor: {
default: "default";
};
};
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "table";
content: "table";
propSchema: {
textColor: {
default: "default";
};
};
}, any, InlineContentSchema, StyleSchema>;
};
file: {
config: {
type: "file";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
};
content: "none";
isFileBlock: true;
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "file";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
};
content: "none";
isFileBlock: true;
}, any, InlineContentSchema, StyleSchema>;
};
image: {
config: {
type: "image";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "image";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
video: {
config: {
type: "video";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "video";
propSchema: {
textAlignment: {
default: "left";
values: readonly ["left", "center", "right", "justify"];
};
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
previewWidth: {
default: number;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
audio: {
config: {
type: "audio";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
};
implementation: _blocknote_core.TiptapBlockImplementation<{
type: "audio";
propSchema: {
backgroundColor: {
default: "default";
};
name: {
default: "";
};
url: {
default: "";
};
caption: {
default: "";
};
showPreview: {
default: true;
};
};
content: "none";
isFileBlock: true;
fileBlockAccept: string[];
}, any, InlineContentSchema, StyleSchema>;
};
}>, I extends InlineContentSchema = _blocknote_core.InlineContentSchemaFromSpecs<{
text: {
config: "text";
implementation: any;
};
link: {
config: "link";
implementation: any;
};
}>, S extends StyleSchema = _blocknote_core.StyleSchemaFromSpecs<{
bold: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
italic: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
underline: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
strike: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
code: {
config: {
type: string;
propSchema: "boolean";
};
implementation: _blocknote_core.StyleImplementation;
};
textColor: {
config: {
type: string;
propSchema: "string";
};
implementation: _blocknote_core.StyleImplementation;
};
backgroundColor: {
config: {
type: string;
propSchema: "string";
};
implementation: _blocknote_core.StyleImplementation;
};
}>>(blocknoteOptions?: Partial<BlockNoteEditorOptions<B, I, S>>, liveblocksOptions?: LiveblocksExtensionOptions, deps?: DependencyList) => _blocknote_core.BlockNoteEditor<B, I, S>;
type HistoryVersionPreviewProps<B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, S extends StyleSchema = DefaultStyleSchema> = Omit<Parameters<typeof HistoryVersionPreview$1>[0], "editor"> & {
editor: BlockNoteEditor<B, I, S>;
};
declare function HistoryVersionPreview(props: HistoryVersionPreviewProps): react_jsx_runtime.JSX.Element;
export { AnchoredThreads, FloatingComposer, FloatingThreads, HistoryVersionPreview, useCreateBlockNoteWithLiveblocks, useLiveblocksExtension, withLiveblocksEditorOptions, withLiveblocksSchema };