Publish a new pre-release version (next) #6012

github-actions · 2025-01-10T16:06:32Z

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to next, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

next is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on next.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@tiptap/[email protected]

Major Changes

062afaf: clearContent command defaults to emitting updates now
062afaf: Change signature of setContent command to (content, options) and default to emitting updates

Minor Changes

0e3207f: Add support for markviews, which allow you to render custom views for marks within the editor. This is useful for rendering custom UI for marks, like a color picker for a text color mark or a link editor for a link mark.

Here is a plain JS markview example:

Mark.create({
  // Other options...
  addMarkView() {
    return ({ mark, HTMLAttributes }) => {
      const dom = document.createElement('b')
      const contentDOM = document.createElement('span')

      dom.appendChild(contentDOM)

      return {
        dom,
        contentDOM,
      }
    }
  },
})

React binding

To use a React component for a markview, you can use the @tiptap/react package:

import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
  name: 'reactComponent',

  parseHTML() {
    return [
      {
        tag: 'react-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['react-component', HTMLAttributes]
  },

  addMarkView() {
    return ReactMarkViewRenderer(Component)
  },
})

And here is an example of a React component:

import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default (props: MarkViewRendererProps) => {
  const [count, setCount] = React.useState(0)

  return (
    <span className="content" data-test-id="mark-view">
      <MarkViewContent />
      <label contentEditable={false}>
        React component:
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          This button has been clicked {count} times.
        </button>
      </label>
    </span>
  )
}

Vue 3 binding

To use a Vue 3 component for a markview, you can use the @tiptap/vue-3 package:

import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.vue'

export default Mark.create({
  name: 'vueComponent',

  parseHTML() {
    return [
      {
        tag: 'vue-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['vue-component', HTMLAttributes]
  },

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})

And here is an example of a Vue 3 component:

<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue Component::
      <button @click="increase" class="primary">This button has been clicked {{ count }} times.</button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>

28c5418: Adds a new delete event which can detect content which has been deleted by the editor as a core extension
704f462: This introduces a new behavior for the editor, the ability to be safely run on the server-side (without rendering).

prosemirror-view encapsulates all view (& DOM) related code, and cannot safely be SSR'd, but, the majority of the editor instance itself is in plain JS that does not require DOM APIs (unless your content is specified in HTML).

But, we have so many convenient methods available for manipulating content. So, it is a shame that they could not be used on the server side too. With this change, the editor can be rendered on the server-side and will use a stub for select prosemirror-view methods. If accessing unsupported methods or values on the editor.view, you will encounter runtime errors, so it is important for you to test to see if the methods you call actually work.

This is a step towards being able to server-side render content, but, it is not completely supported yet. This does not mean that you can render an editor instance on the server and expect it to just output any HTML.

Usage

If you pass element: null to your editor options:
- the editor.view will not be initialized
- the editor will not emit it's 'create' event
- the focus will not be initialized to it's first position
You can however, later use the new mount function on the instance, which will mount the editor view to a DOM element. This obviously will not be allowed on the server which has no document object.

Therefore, this will work on the server:
```
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  element: null,
  content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
  extensions: [StarterKit],
})

editor
  .chain()
  .selectAll()
  .setContent({ type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'XYZ' }] }] })
  .run()

console.log(editor.state.doc.toJSON())
// { type: 'doc', content: [ { type: 'paragraph', content: [ { type: 'text', text: 'XYZ' } ] } ] }
```
Any of these things will not work on the server, and result in a runtime error:
```
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  // document will not be defined in a server environment
  element: document.createElement('div'),
  content: { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'Hello, World!' }] }] },
  extensions: [StarterKit],
})

editor
  .chain()
  // focus is a command which depends on the editor-view, so it will not work in a server environment
  .focus()
  .run()

console.log(editor.getHTML())
// getHTML relies on the editor-view, so it will not work in a server environment
```

@tiptap/[email protected]

Major Changes

2c911d2: This adds all of the list packages to the @tiptap/extension-list package.

ListKit

The ListKit export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.

import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [
    ListKit.configure({
      bulletList: {
        HTMLAttributes: 'bullet-list',
      },
      orderedList: {
        HTMLAttributes: 'ordered-list',
      },
      listItem: {
        HTMLAttributes: 'list-item',
      },
      taskList: {
        HTMLAttributes: 'task-list',
      },
      taskItem: {
        HTMLAttributes: 'task-item',
      },
      listKeymap: {},
    }),
  ],
})

List repackaging

Since we've moved the code out of the list extensions to the @tiptap/extension-list package, you can remove the following packages from your project:

npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list

And replace them with the new @tiptap/extension-list package:

npm install @tiptap/extension-list

Want to use the extensions separately?

For more control, you can also use the extensions separately.

BulletList

This extension adds a bullet list to the editor.

Migrate from @tiptap/extension-bullet-list to @tiptap/extension-list:

- import BulletList from '@tiptap/extension-bullet-list'
+ import { BulletList } from '@tiptap/extension-list'

Usage:

import { BulletList } from '@tiptap/extension-list'

OrderedList

This extension adds an ordered list to the editor.

Migrate from @tiptap/extension-ordered-list to @tiptap/extension-list:

- import OrderedList from '@tiptap/extension-ordered-list'
+ import { OrderedList } from '@tiptap/extension-list'

Usage:

import { OrderedList } from '@tiptap/extension-list'

ListItem

This extension adds a list item to the editor.

Migrate from @tiptap/extension-list-item to @tiptap/extension-list:

- import ListItem from '@tiptap/extension-list-item'
+ import { ListItem } from '@tiptap/extension-list'

Usage:

import { ListItem } from '@tiptap/extension-list'

TaskList

This extension adds a task list to the editor.

Migrate from @tiptap/extension-task-list to @tiptap/extension-list:

- import TaskList from '@tiptap/extension-task-list'
+ import { TaskList } from '@tiptap/extension-list'

Usage:

import { TaskList } from '@tiptap/extension-list'

TaskItem

This extension adds a task item to the editor.

Migrate from @tiptap/extension-task-item to @tiptap/extension-list:

- import TaskItem from '@tiptap/extension-task-item'
+ import { TaskItem } from '@tiptap/extension-list'

Usage:

import { TaskItem } from '@tiptap/extension-list'

ListKeymap

This extension adds better default keybindings for lists to the editor.

Migrate from @tiptap/extension-list-keymap to @tiptap/extension-list:

- import ListKeymap from '@tiptap/extension-list-keymap'
+ import { ListKeymap } from '@tiptap/extension-list'

Usage:

import { ListKeymap } from '@tiptap/extension-list'

@tiptap/[email protected]

Major Changes

2c911d2: This adds all of the list packages to the @tiptap/extension-list package.

ListKit

The ListKit export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.

import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [
    ListKit.configure({
      bulletList: {
        HTMLAttributes: 'bullet-list',
      },
      orderedList: {
        HTMLAttributes: 'ordered-list',
      },
      listItem: {
        HTMLAttributes: 'list-item',
      },
      taskList: {
        HTMLAttributes: 'task-list',
      },
      taskItem: {
        HTMLAttributes: 'task-item',
      },
      listKeymap: {},
    }),
  ],
})

List repackaging

Since we've moved the code out of the list extensions to the @tiptap/extension-list package, you can remove the following packages from your project:

npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list

And replace them with the new @tiptap/extension-list package:

npm install @tiptap/extension-list

Want to use the extensions separately?

For more control, you can also use the extensions separately.

BulletList

This extension adds a bullet list to the editor.

Migrate from @tiptap/extension-bullet-list to @tiptap/extension-list:

- import BulletList from '@tiptap/extension-bullet-list'
+ import { BulletList } from '@tiptap/extension-list'

Usage:

import { BulletList } from '@tiptap/extension-list'

OrderedList

This extension adds an ordered list to the editor.

Migrate from @tiptap/extension-ordered-list to @tiptap/extension-list:

- import OrderedList from '@tiptap/extension-ordered-list'
+ import { OrderedList } from '@tiptap/extension-list'

Usage:

import { OrderedList } from '@tiptap/extension-list'

ListItem

This extension adds a list item to the editor.

Migrate from @tiptap/extension-list-item to @tiptap/extension-list:

- import ListItem from '@tiptap/extension-list-item'
+ import { ListItem } from '@tiptap/extension-list'

Usage:

import { ListItem } from '@tiptap/extension-list'

TaskList

This extension adds a task list to the editor.

Migrate from @tiptap/extension-task-list to @tiptap/extension-list:

- import TaskList from '@tiptap/extension-task-list'
+ import { TaskList } from '@tiptap/extension-list'

Usage:

import { TaskList } from '@tiptap/extension-list'

TaskItem

This extension adds a task item to the editor.

Migrate from @tiptap/extension-task-item to @tiptap/extension-list:

- import TaskItem from '@tiptap/extension-task-item'
+ import { TaskItem } from '@tiptap/extension-list'

Usage:

import { TaskItem } from '@tiptap/extension-list'

ListKeymap

This extension adds better default keybindings for lists to the editor.

Migrate from @tiptap/extension-list-keymap to @tiptap/extension-list:

- import ListKeymap from '@tiptap/extension-list-keymap'
+ import { ListKeymap } from '@tiptap/extension-list'

Usage:

import { ListKeymap } from '@tiptap/extension-list'

@tiptap/[email protected]

Major Changes

2c911d2: This adds all of the list packages to the @tiptap/extension-list package.

ListKit

The ListKit export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.

import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [
    ListKit.configure({
      bulletList: {
        HTMLAttributes: 'bullet-list',
      },
      orderedList: {
        HTMLAttributes: 'ordered-list',
      },
      listItem: {
        HTMLAttributes: 'list-item',
      },
      taskList: {
        HTMLAttributes: 'task-list',
      },
      taskItem: {
        HTMLAttributes: 'task-item',
      },
      listKeymap: {},
    }),
  ],
})

List repackaging

Since we've moved the code out of the list extensions to the @tiptap/extension-list package, you can remove the following packages from your project:

npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list

And replace them with the new @tiptap/extension-list package:

npm install @tiptap/extension-list

Want to use the extensions separately?

For more control, you can also use the extensions separately.

BulletList

This extension adds a bullet list to the editor.

Migrate from @tiptap/extension-bullet-list to @tiptap/extension-list:

- import BulletList from '@tiptap/extension-bullet-list'
+ import { BulletList } from '@tiptap/extension-list'

Usage:

import { BulletList } from '@tiptap/extension-list'

OrderedList

This extension adds an ordered list to the editor.

Migrate from @tiptap/extension-ordered-list to @tiptap/extension-list:

- import OrderedList from '@tiptap/extension-ordered-list'
+ import { OrderedList } from '@tiptap/extension-list'

Usage:

import { OrderedList } from '@tiptap/extension-list'

ListItem

This extension adds a list item to the editor.

Migrate from @tiptap/extension-list-item to @tiptap/extension-list:

- import ListItem from '@tiptap/extension-list-item'
+ import { ListItem } from '@tiptap/extension-list'

Usage:

import { ListItem } from '@tiptap/extension-list'

TaskList

This extension adds a task list to the editor.

Migrate from @tiptap/extension-task-list to @tiptap/extension-list:

- import TaskList from '@tiptap/extension-task-list'
+ import { TaskList } from '@tiptap/extension-list'

Usage:

import { TaskList } from '@tiptap/extension-list'

TaskItem

This extension adds a task item to the editor.

Migrate from @tiptap/extension-task-item to @tiptap/extension-list:

- import TaskItem from '@tiptap/extension-task-item'
+ import { TaskItem } from '@tiptap/extension-list'

Usage:

import { TaskItem } from '@tiptap/extension-list'

ListKeymap

This extension adds better default keybindings for lists to the editor.

Migrate from @tiptap/extension-list-keymap to @tiptap/extension-list:

- import ListKeymap from '@tiptap/extension-list-keymap'
+ import { ListKeymap } from '@tiptap/extension-list'

Usage:

import { ListKeymap } from '@tiptap/extension-list'

@tiptap/[email protected]

Major Changes

2c911d2: This adds all of the list packages to the @tiptap/extension-list package.

ListKit

The ListKit export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.

import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [
    ListKit.configure({
      bulletList: {
        HTMLAttributes: 'bullet-list',
      },
      orderedList: {
        HTMLAttributes: 'ordered-list',
      },
      listItem: {
        HTMLAttributes: 'list-item',
      },
      taskList: {
        HTMLAttributes: 'task-list',
      },
      taskItem: {
        HTMLAttributes: 'task-item',
      },
      listKeymap: {},
    }),
  ],
})

List repackaging

Since we've moved the code out of the list extensions to the @tiptap/extension-list package, you can remove the following packages from your project:

npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list

And replace them with the new @tiptap/extension-list package:

npm install @tiptap/extension-list

Want to use the extensions separately?

For more control, you can also use the extensions separately.

BulletList

This extension adds a bullet list to the editor.

Migrate from @tiptap/extension-bullet-list to @tiptap/extension-list:

- import BulletList from '@tiptap/extension-bullet-list'
+ import { BulletList } from '@tiptap/extension-list'

Usage:

import { BulletList } from '@tiptap/extension-list'

OrderedList

This extension adds an ordered list to the editor.

Migrate from @tiptap/extension-ordered-list to @tiptap/extension-list:

- import OrderedList from '@tiptap/extension-ordered-list'
+ import { OrderedList } from '@tiptap/extension-list'

Usage:

import { OrderedList } from '@tiptap/extension-list'

ListItem

This extension adds a list item to the editor.

Migrate from @tiptap/extension-list-item to @tiptap/extension-list:

- import ListItem from '@tiptap/extension-list-item'
+ import { ListItem } from '@tiptap/extension-list'

Usage:

import { ListItem } from '@tiptap/extension-list'

TaskList

This extension adds a task list to the editor.

Migrate from @tiptap/extension-task-list to @tiptap/extension-list:

- import TaskList from '@tiptap/extension-task-list'
+ import { TaskList } from '@tiptap/extension-list'

Usage:

import { TaskList } from '@tiptap/extension-list'

TaskItem

This extension adds a task item to the editor.

Migrate from @tiptap/extension-task-item to @tiptap/extension-list:

- import TaskItem from '@tiptap/extension-task-item'
+ import { TaskItem } from '@tiptap/extension-list'

Usage:

import { TaskItem } from '@tiptap/extension-list'

ListKeymap

This extension adds better default keybindings for lists to the editor.

Migrate from @tiptap/extension-list-keymap to @tiptap/extension-list:

- import ListKeymap from '@tiptap/extension-list-keymap'
+ import { ListKeymap } from '@tiptap/extension-list'

Usage:

import { ListKeymap } from '@tiptap/extension-list'

@tiptap/[email protected]

Major Changes

2c911d2: This adds all of the list packages to the @tiptap/extension-list package.

ListKit

The ListKit export allows configuring all list extensions with one extension, and is the recommended way of using the list extensions.

import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [
    ListKit.configure({
      bulletList: {
        HTMLAttributes: 'bullet-list',
      },
      orderedList: {
        HTMLAttributes: 'ordered-list',
      },
      listItem: {
        HTMLAttributes: 'list-item',
      },
      taskList: {
        HTMLAttributes: 'task-list',
      },
      taskItem: {
        HTMLAttributes: 'task-item',
      },
      listKeymap: {},
    }),
  ],
})

List repackaging

Since we've moved the code out of the list extensions to the @tiptap/extension-list package, you can remove the following packages from your project:

npm uninstall @tiptap/extension-ordered-list @tiptap/extension-bullet-list @tiptap/extension-list-keymap @tiptap/extension-list-item @tiptap/extension-task-list

And replace them with the new @tiptap/extension-list package:

npm install @tiptap/extension-list

Want to use the extensions separately?

For more control, you can also use the extensions separately.

BulletList

This extension adds a bullet list to the editor.

Migrate from @tiptap/extension-bullet-list to @tiptap/extension-list:

- import BulletList from '@tiptap/extension-bullet-list'
+ import { BulletList } from '@tiptap/extension-list'

Usage:

import { BulletList } from '@tiptap/extension-list'

OrderedList

This extension adds an ordered list to the editor.

Migrate from @tiptap/extension-ordered-list to @tiptap/extension-list:

- import OrderedList from '@tiptap/extension-ordered-list'
+ import { OrderedList } from '@tiptap/extension-list'

Usage:

import { OrderedList } from '@tiptap/extension-list'

ListItem

This extension adds a list item to the editor.

Migrate from @tiptap/extension-list-item to @tiptap/extension-list:

- import ListItem from '@tiptap/extension-list-item'
+ import { ListItem } from '@tiptap/extension-list'

Usage:

import { ListItem } from '@tiptap/extension-list'

TaskList

This extension adds a task list to the editor.

Migrate from @tiptap/extension-task-list to @tiptap/extension-list:

- import TaskList from '@tiptap/extension-task-list'
+ import { TaskList } from '@tiptap/extension-list'

Usage:

import { TaskList } from '@tiptap/extension-list'

TaskItem

This extension adds a task item to the editor.

Migrate from @tiptap/extension-task-item to @tiptap/extension-list:

- import TaskItem from '@tiptap/extension-task-item'
+ import { TaskItem } from '@tiptap/extension-list'

Usage:

import { TaskItem } from '@tiptap/extension-list'

ListKeymap

This extension adds better default keybindings for lists to the editor.

Migrate from @tiptap/extension-list-keymap to @tiptap/extension-list:

- import ListKeymap from '@tiptap/extension-list-keymap'
+ import { ListKeymap } from '@tiptap/extension-list'

Usage:

import { ListKeymap } from '@tiptap/extension-list'

@tiptap/[email protected]

Minor Changes

f77cbac: This updates the default value of the option mergeNestedSpanStyles to true, this will attempt to merge the styles of nested spans into the child span during HTML parsing. This prioritizes the style of the child span. This is used when parsing content created in other editors. (Fix for ProseMirror's default behavior.)

@tiptap/[email protected]

Minor Changes

0e3207f: Add support for markviews, which allow you to render custom views for marks within the editor. This is useful for rendering custom UI for marks, like a color picker for a text color mark or a link editor for a link mark.

Here is a plain JS markview example:

Mark.create({
  // Other options...
  addMarkView() {
    return ({ mark, HTMLAttributes }) => {
      const dom = document.createElement('b')
      const contentDOM = document.createElement('span')

      dom.appendChild(contentDOM)

      return {
        dom,
        contentDOM,
      }
    }
  },
})

React binding

To use a React component for a markview, you can use the @tiptap/react package:

import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
  name: 'reactComponent',

  parseHTML() {
    return [
      {
        tag: 'react-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['react-component', HTMLAttributes]
  },

  addMarkView() {
    return ReactMarkViewRenderer(Component)
  },
})

And here is an example of a React component:

import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default (props: MarkViewRendererProps) => {
  const [count, setCount] = React.useState(0)

  return (
    <span className="content" data-test-id="mark-view">
      <MarkViewContent />
      <label contentEditable={false}>
        React component:
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          This button has been clicked {count} times.
        </button>
      </label>
    </span>
  )
}

Vue 3 binding

To use a Vue 3 component for a markview, you can use the @tiptap/vue-3 package:

import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.vue'

export default Mark.create({
  name: 'vueComponent',

  parseHTML() {
    return [
      {
        tag: 'vue-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['vue-component', HTMLAttributes]
  },

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})

And here is an example of a Vue 3 component:

<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue Component::
      <button @click="increase" class="primary">This button has been clicked {{ count }} times.</button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>

@tiptap/[email protected]

Minor Changes

0e3207f: Add support for markviews, which allow you to render custom views for marks within the editor. This is useful for rendering custom UI for marks, like a color picker for a text color mark or a link editor for a link mark.

Here is a plain JS markview example:

Mark.create({
  // Other options...
  addMarkView() {
    return ({ mark, HTMLAttributes }) => {
      const dom = document.createElement('b')
      const contentDOM = document.createElement('span')

      dom.appendChild(contentDOM)

      return {
        dom,
        contentDOM,
      }
    }
  },
})

React binding

To use a React component for a markview, you can use the @tiptap/react package:

import { Mark } from '@tiptap/core'
import { ReactMarkViewRenderer } from '@tiptap/react'

import Component from './Component.jsx'

export default Mark.create({
  name: 'reactComponent',

  parseHTML() {
    return [
      {
        tag: 'react-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['react-component', HTMLAttributes]
  },

  addMarkView() {
    return ReactMarkViewRenderer(Component)
  },
})

And here is an example of a React component:

import { MarkViewContent, MarkViewRendererProps } from '@tiptap/react'
import React from 'react'

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default (props: MarkViewRendererProps) => {
  const [count, setCount] = React.useState(0)

  return (
    <span className="content" data-test-id="mark-view">
      <MarkViewContent />
      <label contentEditable={false}>
        React component:
        <button
          onClick={() => {
            setCount(count + 1)
          }}
        >
          This button has been clicked {count} times.
        </button>
      </label>
    </span>
  )
}

Vue 3 binding

To use a Vue 3 component for a markview, you can use the @tiptap/vue-3 package:

import { Mark } from '@tiptap/core'
import { VueMarkViewRenderer } from '@tiptap/vue-3'

import Component from './Component.vue'

export default Mark.create({
  name: 'vueComponent',

  parseHTML() {
    return [
      {
        tag: 'vue-component',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ['vue-component', HTMLAttributes]
  },

  addMarkView() {
    return VueMarkViewRenderer(Component)
  },
})

And here is an example of a Vue 3 component:

<template>
  <span className="content" data-test-id="mark-view">
    <mark-view-content />
    <label contenteditable="false"
      >Vue Component::
      <button @click="increase" class="primary">This button has been clicked {{ count }} times.</button>
    </label>
  </span>
</template>

<script>
import { MarkViewContent, markViewProps } from '@tiptap/vue-3'
export default {
  components: {
    MarkViewContent,
  },
  data() {
    return {
      count: 0,
    }
  },
  props: markViewProps,
  methods: {
    increase() {
      this.count += 1
    },
  },
}
</script>

@tiptap/[email protected]

Patch Changes

@tiptap/[email protected]

@tiptap/[email protected]

Patch Changes

Updated dependencies [0e3207f]
Updated dependencies [28c5418]
Updated dependencies [062afaf]
Updated dependencies [704f462]
Updated dependencies [2c911d2]
Updated dependencies [062afaf]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]
- @tiptap/[email protected]

@tiptap/[email protected]

netlify · 2025-01-10T16:07:51Z

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	`8627887`
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/6797bc2c6d5c980008ef371d
😎 Deploy Preview	https://deploy-preview-6012--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

sean-verb · 2025-01-10T16:23:43Z

whatever this update is, it just completely broke my editor

sean-verb · 2025-01-10T18:24:47Z

whatever this update is, it just completely broke my editor

and it’s back.

nperez0111 · 2025-01-11T10:55:25Z

Accidentally published tiptap v3 as next when it is meant to be a pre-release. But, you 100% should be pinning your version so that this does not occur again

sean-verb · 2025-01-13T15:14:49Z

Thanks. Just did that this morning. Thanks for all the work on this you've done to date. Any chance columns are in the plans? I know there's some custom extensions out there but I was curious if there was anything more official coming. Sean Morris SENIOR GRAPHIC DESIGNER (708) 921-0244 Direct (224) 400-4022 Office VERB.DIGITAL

…

On Jan 11, 2025 at 4:55 AM -0600, Nick Perez ***@***.***>, wrote: Accidentally published tiptap v3 as next when it is meant to be a pre-release. But, you 100% should be pinning your version so that this does not occur again — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

nperez0111 · 2025-01-27T14:26:27Z

Thanks. Just did that this morning. Thanks for all the work on this you've done to date. Any chance columns are in the plans? I know there's some custom extensions out there but I was curious if there was anything more official coming.

No plans for columns at the moment, maybe in a future version. V3 is already ambitious enough

github-actions bot force-pushed the changeset-release/next branch from f51d0f7 to 1a271f8 Compare January 10, 2025 16:06

github-actions bot force-pushed the changeset-release/next branch from 1a271f8 to 3e79e05 Compare January 10, 2025 16:21

github-actions bot force-pushed the changeset-release/next branch from 3e79e05 to 317bc60 Compare January 11, 2025 10:47

github-actions bot force-pushed the changeset-release/next branch 14 times, most recently from ac5096d to 88b35c4 Compare January 22, 2025 15:01

github-actions bot force-pushed the changeset-release/next branch 8 times, most recently from 6fbd950 to ecaa28d Compare January 27, 2025 14:23

github-actions bot force-pushed the changeset-release/next branch 5 times, most recently from 153cfd1 to 05f60c0 Compare January 27, 2025 16:59

chore(release): publish a new pre-release version (next)

8627887

github-actions bot force-pushed the changeset-release/next branch from 05f60c0 to 8627887 Compare January 27, 2025 17:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Publish a new pre-release version (next) #6012

Publish a new pre-release version (next) #6012

github-actions bot commented Jan 10, 2025 •

edited

Loading

netlify bot commented Jan 10, 2025 •

edited

Loading

sean-verb commented Jan 10, 2025

sean-verb commented Jan 10, 2025

nperez0111 commented Jan 11, 2025

sean-verb commented Jan 13, 2025 via email

nperez0111 commented Jan 27, 2025

Publish a new pre-release version (next) #6012

Are you sure you want to change the base?

Publish a new pre-release version (next) #6012

Conversation

github-actions bot commented Jan 10, 2025 • edited Loading

Releases

@tiptap/[email protected]

Major Changes

Minor Changes

React binding

Vue 3 binding

Usage

@tiptap/[email protected]

Major Changes

ListKit

List repackaging

Want to use the extensions separately?

BulletList

OrderedList

ListItem

TaskList

TaskItem

ListKeymap

@tiptap/[email protected]

Major Changes

ListKit

List repackaging

Want to use the extensions separately?

BulletList

OrderedList

ListItem

TaskList

TaskItem

ListKeymap

@tiptap/[email protected]

Major Changes

ListKit

List repackaging

Want to use the extensions separately?

BulletList

OrderedList

ListItem

TaskList

TaskItem

ListKeymap

@tiptap/[email protected]

Major Changes

ListKit

List repackaging

Want to use the extensions separately?

BulletList

OrderedList

ListItem

TaskList

TaskItem

ListKeymap

@tiptap/[email protected]

Major Changes

ListKit

List repackaging

Want to use the extensions separately?

BulletList

OrderedList

ListItem

TaskList

TaskItem

ListKeymap

@tiptap/[email protected]

Minor Changes

@tiptap/[email protected]

Minor Changes

React binding

Vue 3 binding

@tiptap/[email protected]

Minor Changes

React binding

Vue 3 binding

@tiptap/[email protected]

Patch Changes

@tiptap/[email protected]

github-actions bot commented Jan 10, 2025 •

edited

Loading

netlify bot commented Jan 10, 2025 •

edited

Loading