Wiki source code of Headless Blocknote Editor Reference
Last modified by Clément Eraud on 2026/02/05 17:22
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == CBlockNoteView == | ||
| 2 | |||
| 3 | {{code language="typescript"}} | ||
| 4 | type Props = { | ||
| 5 | /** Main properties for the BlockNote editor */ | ||
| 6 | editorProps: Omit< | ||
| 7 | BlockNoteViewWrapperProps, | ||
| 8 | "content" | "linkEditionCtx" | "macroAstToReactJsxConverter" | "macros" | ||
| 9 | >; | ||
| 10 | |||
| 11 | /** Set to `false` to disable macros entirely */ | ||
| 12 | macros: | ||
| 13 | | { | ||
| 14 | list: MacroWithUnknownParamsType[]; | ||
| 15 | ctx: ContextForMacros; | ||
| 16 | } | ||
| 17 | | false; | ||
| 18 | |||
| 19 | /** Content to initialize the editor with */ | ||
| 20 | editorContent: UniAst | Error; | ||
| 21 | |||
| 22 | /** Collaboration initialization method */ | ||
| 23 | collaborationProvider?: () => CollaborationInitializer; | ||
| 24 | |||
| 25 | /** InversifyJS container to inject dependencies from */ | ||
| 26 | container: Container; | ||
| 27 | }; | ||
| 28 | |||
| 29 | /** | ||
| 30 | * Properties for the BlockNote editor component. | ||
| 31 | * | ||
| 32 | * @since 0.16 | ||
| 33 | * @beta | ||
| 34 | */ | ||
| 35 | type BlockNoteViewWrapperProps = { | ||
| 36 | /** | ||
| 37 | * Options to forward to the BlockNote editor | ||
| 38 | */ | ||
| 39 | blockNoteOptions?: Partial< | ||
| 40 | Omit<DefaultBlockNoteEditorOptions, "schema" | "collaboration"> | ||
| 41 | >; | ||
| 42 | |||
| 43 | /** | ||
| 44 | * The display theme to use | ||
| 45 | */ | ||
| 46 | theme?: "light" | "dark"; | ||
| 47 | |||
| 48 | /** | ||
| 49 | * The editor's language | ||
| 50 | */ | ||
| 51 | lang: EditorLanguage; | ||
| 52 | |||
| 53 | /** | ||
| 54 | * The editor's initial content | ||
| 55 | * If realtime is enabled, this content may be replaced by the other users' own editor content | ||
| 56 | */ | ||
| 57 | content: BlockType[]; | ||
| 58 | |||
| 59 | /** | ||
| 60 | * Macros to show in the editor | ||
| 61 | * | ||
| 62 | * @since 18.0.0RC1 | ||
| 63 | * @beta | ||
| 64 | */ | ||
| 65 | macros: | ||
| 66 | | { | ||
| 67 | /** | ||
| 68 | * List of buildable macros | ||
| 69 | * | ||
| 70 | * @since 18.0.0RC1 | ||
| 71 | * @beta | ||
| 72 | */ | ||
| 73 | list: MacroWithUnknownParamsType[]; | ||
| 74 | |||
| 75 | /** | ||
| 76 | * Context for macros | ||
| 77 | * | ||
| 78 | * @since 18.0.0RC1 | ||
| 79 | * @beta | ||
| 80 | */ | ||
| 81 | ctx: ContextForMacros; | ||
| 82 | } | ||
| 83 | | false; | ||
| 84 | |||
| 85 | /** | ||
| 86 | * Realtime options | ||
| 87 | */ | ||
| 88 | realtime?: { | ||
| 89 | collaborationProvider: () => CollaborationInitializer; | ||
| 90 | user: { name: string; color: string }; | ||
| 91 | }; | ||
| 92 | |||
| 93 | /** | ||
| 94 | * Run a function when the document's content change | ||
| 95 | * WARN: this function may be fired at a rapid rate if the user types rapidly. Debouncing may be required on your end. | ||
| 96 | */ | ||
| 97 | onChange?: (editor: EditorType) => void; | ||
| 98 | |||
| 99 | /** | ||
| 100 | * Link edition utilities | ||
| 101 | */ | ||
| 102 | linkEditionCtx: LinkEditionContext; | ||
| 103 | |||
| 104 | /** | ||
| 105 | * Overrides for default behavior | ||
| 106 | * | ||
| 107 | * @since 0.26 | ||
| 108 | */ | ||
| 109 | overrides?: { | ||
| 110 | /** | ||
| 111 | * Intercept image edition mechanism (i.e. clicking on the edition icon in images' toolbar) | ||
| 112 | */ | ||
| 113 | imageEdition?: ImageEditionOverrideFn; | ||
| 114 | }; | ||
| 115 | |||
| 116 | /** | ||
| 117 | * Make the wrapper forward some data through references | ||
| 118 | */ | ||
| 119 | refs?: { | ||
| 120 | setEditor?: (editor: EditorType) => void; | ||
| 121 | }; | ||
| 122 | }; | ||
| 123 | {{/code}} | ||
| 124 | |||
| 125 | === Vue Events === | ||
| 126 | |||
| 127 | {{code language="typescript"}} | ||
| 128 | { | ||
| 129 | // Emitted as soon as a user-triggered change happens into the editor | ||
| 130 | // The event won't be triggered when the editor is filled with its initial content, | ||
| 131 | // or when the editor's content changes due to modifications made by other players in the realtime session | ||
| 132 | "instant-change": []; | ||
| 133 | |||
| 134 | // Emitted in the same context as "instant-change", but debounced | ||
| 135 | "debounced-change": [content: UniAst]; | ||
| 136 | } | ||
| 137 | {{/code}} | ||
| 138 | |||
| 139 | === Vue Expose === | ||
| 140 | |||
| 141 | {{code language="typescript"}} | ||
| 142 | { | ||
| 143 | // Get the editor's content | ||
| 144 | getContent(): UniAst | Error | ||
| 145 | } | ||
| 146 | {{/code}} |
