mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 09:25:29 +08:00

feat: error handling of invalid content for a schema (#5178 )

This change introduces two new top-level options to the editor: `enableContentCheck` & `onContentError` for dealing with content supplied that does not match the prose-mirror schema generated by the set of tiptap extensions.

`enableContentCheck` allows the app developer to opt into the behavior to check for invalid schemas (this change is otherwise backwards compatible).
When true, this will try to parse the document, and any content that does not match the schema will emit a `contentError` which can be listened to via the `onContentError` callback.

2024-06-04 09:32:54 +02:00

3.6 KiB

Raw Blame History

tableOfContents
true

Events

Introduction

The editor fires a few different events that you can hook into. Let’s have a look at all the available events first.

List of available events

beforeCreate

Before the view is created.

create

The editor is ready.

update

The content has changed.

selectionUpdate

The selection has changed.

transaction

The editor state has changed.

focus

The editor is focused.

blur

The editor isn’t focused anymore.

destroy

The editor is being destroyed.

contentError

The content does not match the schema.

Register event listeners

There are three ways to register event listeners.

Option 1: Configuration

You can define your event listeners on a new editor instance right-away:

const editor = new Editor({
  onBeforeCreate({ editor }) {
    // Before the view is created.
  },
  onCreate({ editor }) {
    // The editor is ready.
  },
  onUpdate({ editor }) {
    // The content has changed.
  },
  onSelectionUpdate({ editor }) {
    // The selection has changed.
  },
  onTransaction({ editor, transaction }) {
    // The editor state has changed.
  },
  onFocus({ editor, event }) {
    // The editor is focused.
  },
  onBlur({ editor, event }) {
    // The editor isn’t focused anymore.
  },
  onDestroy() {
    // The editor is being destroyed.
  },
  onContentError({ editor, error, disableCollaboration }) {
    // The editor content does not match the schema.
  },
})

Option 2: Binding

Or you can register your event listeners on a running editor instance:

Bind event listeners

editor.on('beforeCreate', ({ editor }) => {
  // Before the view is created.
})

editor.on('create', ({ editor }) => {
  // The editor is ready.
})

editor.on('update', ({ editor }) => {
  // The content has changed.
})

editor.on('selectionUpdate', ({ editor }) => {
  // The selection has changed.
})

editor.on('transaction', ({ editor, transaction }) => {
  // The editor state has changed.
})

editor.on('focus', ({ editor, event }) => {
  // The editor is focused.
})

editor.on('blur', ({ editor, event }) => {
  // The editor isn’t focused anymore.
})

editor.on('destroy', () => {
  // The editor is being destroyed.
})

editor.on('contentError', ({ editor, error, disableCollaboration }) => {
  // The editor content does not match the schema.
})

Unbind event listeners

If you need to unbind those event listeners at some point, you should register your event listeners with .on() and unbind them with .off() then.

const onUpdate = () => {
  // The content has changed.
}

// Bind …
editor.on('update', onUpdate)

// … and unbind.
editor.off('update', onUpdate)

Option 3: Extensions

Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like:

import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  onBeforeCreate({ editor }) {
    // Before the view is created.
  },
  onCreate({ editor }) {
    // The editor is ready.
  },
  onUpdate({ editor }) {
    // The content has changed.
  },
  onSelectionUpdate({ editor }) {
    // The selection has changed.
  },
  onTransaction({ editor, transaction }) {
    // The editor state has changed.
  },
  onFocus({ editor, event }) {
    // The editor is focused.
  },
  onBlur({ editor, event }) {
    // The editor isn’t focused anymore.
  },
  onDestroy() {
    // The editor is being destroyed.
  },
  onContentError({ editor, error, disableCollaboration }) {
   // The editor content does not match the schema.
  },
})

3.6 KiB Raw Blame History Unescape Escape