@tiptap/react

Minor Changes

• e7bf804: Align selected with ProseMirror node selections by default, expose text selections through selectionInside, and keep selectedOnTextSelection compatible.

@tiptap/core

Patch Changes

• Nested lists exported to Markdown now keep their hierarchy when the file is read back by other Markdown tools.

@tiptap/extension-list

Patch Changes

• Nested lists exported to Markdown now keep their hierarchy when the file is read back by other Markdown tools.

@tiptap/extension-youtube

Patch Changes

• Pasting a YouTube iframe without a src attribute no longer crashes the editor. The embed is kept without a source.

@tiptap/markdown

Patch Changes

• Fix Markdown serialization of whitespace-only marked text.

@tiptap/react

Patch Changes

• Reduce overhead in React node views on documents with many nodes.

@tiptap/core

Patch Changes

• Fix a denial-of-service risk where crafted block or inline Markdown attributes could consume excessive CPU and block the browser or server event loop.

@tiptap/core

Patch Changes

• Prevent untrusted HTML attributes from changing an object's prototype when merged with mergeAttributes.

@tiptap/extension-text-style

Patch Changes

• Unsetting one text style inside a blockquote no longer removes the other text styles in it.

@tiptap/extension-youtube

Patch Changes

• YouTube live URLs (/live/<id>) now embed the video.

@tiptap/core

Patch Changes

• Fix JSX runtime to properly render nested sibling elements by spreading children arrays into DOMOutputSpec

@tiptap/react

Patch Changes

• Fix ReactNodeViewRenderer crash when contentComponent is not available

@tiptap/ai-toolkit

Minor Changes

• Add the AiInsertReveal extension (@tiptap/ai-toolkit/streaming-reveal) to fade in text as the AI streams it into a collaborative document.

@tiptap/core

Patch Changes

• Keep mixed JSX children as separate siblings in DOM output.
• Fixed a bug where editor.chain and editor.can can not be accessed on editor initialization

@tiptap/extension-image

Patch Changes

• Fix resizable images staying hidden when the image is cached or fails to load.

@tiptap/extension-table

Patch Changes

• Fixed table markdown pipe escaping so the extension loads on older Safari and iOS versions (WebKit before Safari 16.4).

@tiptap/core

Patch Changes

• Added new ProseMirror helpers that check whether a value is a specific ProseMirror type.

v3.30.0

@tiptap/vue-2

Minor Changes

• ceb0dac: New Decorations API

  Finally the decorations API is here! Even though Decorations itself are nothing new in ProseMirror, the new API makes it much easier to use them in Tiptap without leaving your extensions.

  Decorations change how the document looks without changing the document itself. Highlighting search results, marking spelling mistakes, showing collaborator cursors, putting a drag handle next to every block.

  Until now you had to write a ProseMirror plugin by hand for this, keep the decoration set in plugin state, and map it forward on every transaction. Extensions can now declare decorations directly with a new addDecorations() hook.

  addDecorations() {
    return {
      create: ({ state }) =>
        // findMatches can be any function that returns an array of { from, to } ranges
        findMatches(state.doc).map(match =>
          Decoration.Inline(match.from, match.to, { class: 'highlight' }),
        ),
    }
  }

  There are three kinds. Decoration.Inline() styles a range of text. Decoration.Node() puts attributes on a block's DOM element. Decoration.Widget() renders your own element at a single position.

  Every extension that declares decorations is collected into one plugin, so several extensions can decorate the same document without fighting over it.

  Doing less work on every keystroke

  By default decorations are rebuilt whenever the document changes. That is fine for small documents and wasteful for large ones, so there are two ways to narrow it down.

  shouldUpdate() skips transactions you do not care about. If your decorations only depend on headings, ignore everything else.

  update: 'changedRanges' together with createInRange() only rescans the blocks that actually changed. On a long document this is the difference between scanning the whole thing on every keystroke and scanning one paragraph.

  For decorations driven by data outside the editor, like comments loaded from a server, use update: 'manual' and refresh them yourself with editor.commands.updateDecorations().

  React and Vue components as widgets

  ReactWidgetRenderer and VueWidgetRenderer render a real component into a widget decoration, inside your existing app context. Providers, context and stores work as usual.

  Widgets take a key. Reuse the same key and the component instance stays mounted while the document changes around it, so local state such as an open menu, a counter or a half-typed input survives editing. Use a stable id from your own data, not a position or a list index, otherwise the component remounts and loses that state.

  Widgets also accept the ProseMirror options side, relaxedSide, stopEvent and ignoreSelection.

  Documentation

  • Decorations
  • Decorations with React
  • Decorations with Vue
  • API Documentation

Patch Changes

• ceb0dac: Fix FloatingMenu not registering when the editor prop is provided synchronously, which prevented the menu from appearing

@tiptap/extension-list

Minor Changes

• ceb0dac: ListKeymap now registers a Tab shortcut that sinks a top-level textblock into the previous list's last item. Pressing Tab at the start of a paragraph right after a bullet/ordered/task list moves the paragraph inside the last list item. The handler does nothing when the cursor is already inside a list item (sinkListItem keeps working), when there is no list before the paragraph, when the caret is mid-textblock, or when the selection is not a text selection (for example a gap cursor).

  @tiptap/core also exposes a new getPreviousBlockSibling($pos) helper that returns the block-level sibling before the cursor's textblock, or null at the first child of the block parent.

Patch Changes

• ceb0dac: Parse block math that follows an ordered list item without a blank line, both after the list and indented inside the item, instead of pulling it into the item's text.
• ceb0dac: TaskItem: the checkbox label now also fills the wrapping label element, so accessibility audits no longer flag it as empty.

@tiptap/core

Minor Changes

• ceb0dac: ListKeymap now registers a Tab shortcut that sinks a top-level textblock into the previous list's last item. Pressing Tab at the start of a paragraph right after a bullet/ordered/task list moves the paragraph inside the last list item. The handler does nothing when the cursor is already inside a list item (sinkListItem keeps working), when there is no list before the paragraph, when the caret is mid-textblock, or when the selection is not a text selection (for example a gap cursor).

  @tiptap/core also exposes a new getPreviousBlockSibling($pos) helper that returns the block-level sibling before the cursor's textblock, or null at the first child of the block parent.

• ceb0dac: New Decorations API

  Finally the decorations API is here! Even though Decorations itself are nothing new in ProseMirror, the new API makes it much easier to use them in Tiptap without leaving your extensions.

  Decorations change how the document looks without changing the document itself. Highlighting search results, marking spelling mistakes, showing collaborator cursors, putting a drag handle next to every block.

  Until now you had to write a ProseMirror plugin by hand for this, keep the decoration set in plugin state, and map it forward on every transaction. Extensions can now declare decorations directly with a new addDecorations() hook.

  addDecorations() {
    return {
      create: ({ state }) =>
        // findMatches can be any function that returns an array of { from, to } ranges
        findMatches(state.doc).map(match =>
          Decoration.Inline(match.from, match.to, { class: 'highlight' }),
        ),
    }
  }

  There are three kinds. Decoration.Inline() styles a range of text. Decoration.Node() puts attributes on a block's DOM element. Decoration.Widget() renders your own element at a single position.

  Every extension that declares decorations is collected into one plugin, so several extensions can decorate the same document without fighting over it.

  Doing less work on every keystroke

  By default decorations are rebuilt whenever the document changes. That is fine for small documents and wasteful for large ones, so there are two ways to narrow it down.

  shouldUpdate() skips transactions you do not care about. If your decorations only depend on headings, ignore everything else.

  update: 'changedRanges' together with createInRange() only rescans the blocks that actually changed. On a long document this is the difference between scanning the whole thing on every keystroke and scanning one paragraph.

  For decorations driven by data outside the editor, like comments loaded from a server, use update: 'manual' and refresh them yourself with editor.commands.updateDecorations().

  React and Vue components as widgets

  ReactWidgetRenderer and VueWidgetRenderer render a real component into a widget decoration, inside your existing app context. Providers, context and stores work as usual.

  Widgets take a key. Reuse the same key and the component instance stays mounted while the document changes around it, so local state such as an open menu, a counter or a half-typed input survives editing. Use a stable id from your own data, not a position or a list index, otherwise the component remounts and loses that state.

  Widgets also accept the ProseMirror options side, relaxedSide, stopEvent and ignoreSelection.

  Documentation

  • Decorations
  • Decorations with React
  • Decorations with Vue
  • API Documentation

Patch Changes

• ceb0dac: Fixed insertContent, insertContentAt and setContent failing when prosemirror-model is loaded more than once.

@tiptap/starter-kit

Patch Changes

• ceb0dac: StarterKit now pins its bundled @tiptap/* dependencies to the exact version it was released with, so installing a specific StarterKit version gives you that version's extension set instead of the newest one.

@tiptap/react

Minor Changes

• ceb0dac: New Decorations API

  Finally the decorations API is here! Even though Decorations itself are nothing new in ProseMirror, the new API makes it much easier to use them in Tiptap without leaving your extensions.

  Decorations change how the document looks without changing the document itself. Highlighting search results, marking spelling mistakes, showing collaborator cursors, putting a drag handle next to every block.

  Until now you had to write a ProseMirror plugin by hand for this, keep the decoration set in plugin state, and map it forward on every transaction. Extensions can now declare decorations directly with a new addDecorations() hook.

  addDecorations() {
    return {
      create: ({ state }) =>
        // findMatches can be any function that returns an array of { from, to } ranges
        findMatches(state.doc).map(match =>
          Decoration.Inline(match.from, match.to, { class: 'highlight' }),
        ),
    }
  }

  There are three kinds. Decoration.Inline() styles a range of text. Decoration.Node() puts attributes on a block's DOM element. `Decoration....

@tiptap/react

Patch Changes

• Fixed the caret jumping back to the previous block when pressing Enter inside a React node view.

@tiptap/extension-find-and-replace

Patch Changes

• Ensure only the active find-and-replace result keeps the current-result highlight while navigating matches.

@tiptap/react

Patch Changes

• 6d901e7: Fix caret placement after splitting a block rendered with a React NodeView.