v3.30.0

[bdbch]

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.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: React node views no longer show the selected state when the selection covers a position the node view has moved away from.

@tiptap/markdown

Patch Changes

• ceb0dac: Markdown with inline HTML such as an unclosed <b> tag no longer parses into an invalid document. The tag is dropped and its text is kept.

@tiptap/static-renderer

Patch Changes

• ceb0dac: Fixed table cell and header spans in the React static renderer.

@tiptap/pm

Patch Changes

• ceb0dac: Fix the ./schema-list export map pointing types at dist/schema/, which is not emitted. Tools that read the types condition directly could not resolve @tiptap/pm/schema-list.

@tiptap/extension-table

Patch Changes

• ceb0dac: Deleting the last row or column of a table no longer moves the cursor outside the table when there is content below it.

@tiptap/extension-drag-handle-react

Patch Changes

• ceb0dac: Fixed the React DragHandle breaking drag-and-drop when onNodeChange is an inline callback, by no longer re-registering its plugin when a callback's identity changes.

@tiptap/extension-mathematics

Patch Changes

• ceb0dac: Allow KaTeX 0.18 to be installed with the math extension

@tiptap/extension-blockquote

Patch Changes

• ceb0dac: Fixed Backspace freezing after merging a paragraph into a blockquote.

@tiptap/vue-3

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

---

This discussion was created from the release v3.30.0.