useEditor has an extensions prop that can be used to add Tiptap extensions to the editor. Pilot has default configurations for Tiptap extensions, like Placeholder and StarterKit. But, you can also write your custom configuration.

import { Editor } from '@learnvue/pilot'
const editor = new Editor({
  extensions: [
    // Add your extensions here
  ],
})

Default Extensions

If no extensions are provided, Pilot will only include the StarterKit extension by default.

import { Editor } from '@pilot/core'
import { EditorExtensions } from '@learnvue/pilot/extensions'

const editor = new Editor()

Editor Bundle

To get more functionality out of the box, you can use the EditorExtensions bundle. This comes with the following extensions:

Tiptap Extensions

The EditorExtensions bundle includes the following Tiptap extensions:

Pilot Extensions

It also includes some custom extensions.

Other Extensions

Configuring Default Extensions

There are two ways to configure Tiptap extensions:

Passing a configuration object
Extending the default extension

Pilot allows you to do both. Each extension is a function that accepts a configuration object and returns an extension that you can extend.

import { Editor } from '@learnvue/pilot'
import { StarterKit } from '@learnvue/pilot/extensions'

const editor = new Editor({
  extensions: [
    StarterKit({
      // Add your configuration here
    }).extend({
      // Add your custom extension here
    }),
  ],
})

Adding Custom Extensions

To add a custom extension, you can pass an array of extensions to the extensions prop.

import { Editor } from '@learnvue/pilot'
import { StarterKit } from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [
    StarterKit(),
    // Add your custom extensions here
  ],
})

If you want to keep the default extensions, you can do so by spreading the EditorExtensions array.

import { Editor } from '@learnvue/pilot'
import { EditorExtensions } from '@learnvue/pilot/extensions'

const editor = new Editor({
  extensions: [
    ...EditorExtensions(),
    // Add your custom extensions here
  ],
})

To create a custom extension, follow Tiptap's guide.

Features