Starter Kit

Pilot uses Tiptap's StarterKit extension with some default configuration. This extension installs several other extensions that add support for common use cases like headings, lists, bold/italic text, etc.

Usage

The useEditor composable will automatically install the StarterKit extension with the default configuration.

import { useEditor, StarterKitExtension, EditorExtensions } from '@learnvue/pilot'

const { editor } = useEditor()

// same as

const { editor } = useEditor({
  extensions: [StarterKitExtension()],
})

// or using the EditorExtensions bundle (includes StarterKit by default)

const { editor } = useEditor({
  extensions: [...EditorExtensions()],
})

Configuration

The configuration options are exactly the same as Tiptap's StarterKit where you can pass options to the different extensions added by the StarterKit.

import { StarterKitExtension } from '@learnvue/pilot'

const editor = new Editor({
  extensions: [
    StarterKitExtension({
      heading: {
        // use heading levels 1, 2, 3, and 4
        levels: [1, 2, 3, 4],
      },
    }),
  ],
})

If you're using the EditorExtensions bundle, this will be available as the starterKit option.

import { EditorExtensions } from '@learnvue/pilot'

const editor = new Editor({
  extensions: [
    ...EditorExtensions({
      starterKit: {
        heading: {
          levels: [1, 2, 3, 4],
        },
      },
    }),
  ],
})

Default Configuration

// Default configuration
{
    heading: {
      // only allow headings 1, 2, and 3
      levels: [1, 2, 3],
    },
    horizontalRule: {
      HTMLAttributes: {
        // makes horizontal rule nodes draggable
        'data-type': 'draggable',
      },
    },
    dropcursor: {
      color: '#ffffff',
    },
}