useEditor

The useEditor hook allows you to create an editor instance to control the editor's state. It is similar to TipTap's useEditor.

Optional props

This hook extends TipTap Editor Settings: TipTap Editor Settings Documentation

Custom settings

immediatelyRender

Depending on the environment (e.g., SSR or client-side), the editor will render immediately or defer its rendering.

shouldRerenderOnTransaction

For performance reasons, the editor does not re-render on every transaction by default.

editorProps.attributes.class

By default, we add a semantic editor class to the editor instance for easier styling and identification.

Additional props

coreKitOptions

Customize the coreKit extensions with the following options:

document

• Type: false

If set to false, the document extension will not be registered. Useful if you want to use a custom document.

history

• Type: HistoryOptions | false

If set to false, the history extension will not be registered. Refer to the Undo/Redo extension documentation for more settings options.

Paragraph

• Type: ParagraphOptions | false

If set to false, the paragraph extension will not be registered. Refer to the Paragraph extension documentation for more settings options.

text

• Type: false

If set to false, the text extension will not be registered.

focus

• Type: FocusOptions | false

If set to false, the focus extension will not be registered. Refer to the Focus extension documentation for more settings options.

placeholder

• Type: PlaceholderOptions | false

If set to false, the placeholder extension will not be registered. Refer to the Placeholder extension documentation for more settings options.

characterCount

• Type: CharacterCountOptions | false

If set to false, the characterCount extension will not be registered. Refer to the CharacterCount extension documentation for more settings options.

Code example

import { useEditor } from "@tiptap/react";

const Editor = () => {
  const editor = useEditor({
    content: "<p>Huston, we have a problem!</p>",
    extensions: [
      // your extensions
    ],
    coreKitOptions: {
      placeholder: {
        placeholder: "My custom placeholder",
      },
    },
  });
};