2023-10-02 21:56

Tiptap Editor 공부하기 - Custom Extension

With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch

Every extension has an extend() method, which takes an object with everything you want to change or add to it.

// 1. Import the extension
import BulletList from '@tiptap/extension-bullet-list'

// 2. Overwrite the keyboard shortcuts
const CustomBulletList = BulletList.extend({
  addKeyboardShortcuts() {
    return {
      'Mod-l': () => this.editor.commands.toggleBulletList(),
    }
  },
})

// 3. Add the custom extension to your editor
new Editor({
  extensions: [
    CustomBulletList(),
    // …
  ],
})

Priority

extension이 등록되는 순서 - default 값은 priority: 100

Storage

extension instance에 저장하고 싶은 data가 있을 경우 - addStorage()

import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  name: 'customExtension',

  addStorage() {
    return {
      awesomeness: 100,
    }
  },

  onUpdate() {
    this.storage.awesomeness += 1
  },
})

Schema

extension의 schema 속성을 변경할 수 있다

Attributes

content 안에 추가적인 정보를 저장하고 싶을 때 - addAttributes()

const CustomParagraph = Paragraph.extend({
  addAttributes() {
    // Return an object with attribute configuration
    return {
      color: {
        default: 'pink',
      },
    },
  },
})

// Result:
// <p color="pink">Example Text</p>

....

https://tiptap.dev/guide/custom-extensions

tiptap