ueberdosis/tiptap

This system is a comprehensive demonstration and testing suite for the Tiptap rich text editor framework, providing interactive examples across React, Vue, and Svelte. It showcases a wide range of editor capabilities, including basic text formatting, complex node types like tables and media, and advanced features such as real-time collaboration and custom extension development. The repository also serves as a migration guide and technical reference, featuring codemods for version upgrades and detailed implementations of UI components like menus and suggestion popups.

122 changes.

The project underwent a major infrastructure overhaul, migrating to Vite and pnpm workspaces while preparing for the v4 release with new codemods. Core packages were refactored for stability, introducing features like the Decorations API and Markdown support, while Vue and React integrations were updated to support modern framework patterns and Floating UI.

70 changes.

This period focused on significantly expanding the demonstration suite with comprehensive examples for React, Vue, and Svelte, covering new features like static rendering, collaboration, and media embeds. It also introduced several new official packages, including static-renderer, markdown, mathematics, drag-handle, and Twitch support, while consolidating existing extensions into a unified package.

22 changes.

This period focused on expanding the Tiptap v4 ecosystem with new official extensions for audio, Ruby text, and find-and-replace, alongside advanced demo applications for decorations and AI integration. The team simultaneously established a comprehensive Playwright end-to-end testing infrastructure to verify editor functionality across React, Vue, and Svelte frameworks. Additionally, tooling was migrated to Vite and a codemod was introduced to facilitate the migration from Tiptap v3 to v4.

New demo files have been added for the BackgroundColor extension in both the React and Vue frameworks. These demos illustrate how to integrate the BackgroundColor and TextStyle extensions, apply background colors via a color picker or preset buttons, and inspect the current editor state to highlight active color selections.

demos/src/Extensions/BackgroundColor, demos/src/GuideContent/GenerateText · high confidence

A new demonstration has been added for integrating Tiptap with React using CSS Modules. This example showcases a basic editor setup featuring a toolbar with formatting controls (bold, italic, headings, lists, etc.) and applies scoped styles via CSS Modules alongside global SCSS for the editor content, providing a reference for styling Tiptap in a React environment.

demos/src/Examples/CSSModules/React · high confidence

A new demo example has been added for both React and Vue that extends the standard paragraph node to display a character count label. The implementation uses a custom node view to render a non-editable span showing the length of the paragraph's text content, allowing users to see how many characters are in each paragraph as they type.

demos/src/Examples/CustomParagraph · high confidence

A new interactive demo has been added to the GuideContent section for React, demonstrating how to export the editor's content as HTML. The demo component initializes a TipTap editor with StarterKit, listens for content updates to capture the current HTML output, and displays the resulting HTML in a read-only code block below the editor. It includes controls to set specific content, clear the editor, and toggle bold/italic formatting, providing a practical example of integrating TipTap with React state management.

(repo-wide) · high confidence

New demo files have been added to the ExtensionStorage location for both React and Vue frameworks. These demos illustrate how to create a custom Tiptap extension that defines and updates reactive storage (specifically a 'foo' counter) and display that storage value in the UI.

demos/src/Experiments/ExtensionStorage · high confidence

This change adds a new demo application in demos/src/Extensions/FindAndReplace that showcases the Find and Replace extension for both React and Vue. The demo provides a user interface with input fields for search and replace terms, checkboxes for case sensitivity, whole word, and regex matching, and buttons to navigate results, replace single or all matches, and clear the search. It demonstrates how to integrate the extension's commands and state into a custom UI for both frameworks.

demos/src/Extensions/FindAndReplace · high confidence

New demo files have been added for the Font Size extension in both React and Vue, showcasing how to integrate the extension with StarterKit and TextStyle. The demos provide UI controls to set specific font sizes (28px, 32px) and unset them, allowing users to see the extension in action within their preferred framework.

demos/src/Extensions/FontSize · high confidence

New demo applications have been added for the React and Vue frameworks within the GuideContent section. These demos illustrate how to use the \generateHTML\ function from \@tiptap/html\ to convert TipTap JSON document structures into HTML strings, specifically showing usage with standard extensions like Bold, Document, Paragraph, and Text.

demos/src/GuideContent/GenerateHTML, demos/src/GuideContent/GenerateJSON · high confidence

New demo examples in the JSX examples directory demonstrate using the JSX transformer to extend the Paragraph extension. The React and Vue demos show how to render HTML using JSX syntax (returning a \<p\> element with inline styles) to make all paragraphs appear in red, along with corresponding Playwright tests verifying the editor instance and the red text color.

demos/src/Examples/JSX · high confidence

New demo applications have been added for the LineHeight extension in both React and Vue frameworks. These demos illustrate how to integrate the LineHeight and TextStyle extensions with StarterKit, providing interactive controls to toggle line heights (1.5, 2.0, 4.0) and unset the value, along with basic styling for the editor container.

demos/src/Extensions/CollaborationCaret, demos/src/Extensions/InvisibleCharacters, demos/src/Extensions/LineHeight · high confidence

The Book demo now includes a content file featuring the opening chapters of Herman Melville's 'Moby Dick', providing sample text for users to test the application's rendering capabilities.

demos/src/Examples/Book · high confidence

The MultiMention demo has been added to the examples folder, providing reference implementations for both React and Vue. The demo showcases the ability to trigger suggestions using two different characters: '@' for person names and '\#' for movie titles. It includes custom dropdown components (MentionList) with keyboard navigation (arrow keys, Enter, Escape) and floating-ui positioning, along with Playwright end-to-end tests verifying the suggestion behavior.

demos/src/Examples/MultiMention · high confidence

A new React-based demo example has been added to the Book section, providing a complete editor interface powered by TipTap's StarterKit. This demo includes a comprehensive menu bar that allows users to toggle bold, italic, strike, code, and various heading levels (H1–H6), as well as manage lists, blockquotes, code blocks, and undo/redo actions. The component utilizes \useEditorState\ to reflect the current editor state in the UI and is styled with custom SCSS for lists, headings, code blocks, and blockquotes.

demos/src/Examples/Book/React · high confidence

A new React demo for the BubbleMenu extension has been added, demonstrating how to position menus based on editor content. The example includes a text formatting menu and a second menu that specifically targets bullet and ordered lists, using \findParentNode\ and \posToDOMRect\ to calculate precise placement for list items. It also showcases toggling menu visibility and editor editability.

demos/src/Extensions/BubbleMenu/React · high confidence

A new React demo for the FloatingMenu extension has been added to the demos directory. This example demonstrates the FloatingMenu component integrated with a StarterKit editor, featuring buttons to toggle H1, H2, and bullet list formatting. It includes a specific control to toggle the editor's editable state, allowing users to see how the floating menu behaves when the editor is locked versus when it is active.

demos/src/Extensions/FloatingMenu/React · high confidence

A new React demo for the Link mark has been added to the documentation site. This example demonstrates configuring the Link extension with specific security and usability features, including enabling autolinking and Markdown link syntax, setting a default protocol (https), and restricting allowed protocols to http and https. It also implements custom validation logic via \isAllowedUri\ to block disallowed protocols (ftp, file, mailto) and specific malicious domains, as well as \shouldAutoLink\ to prevent auto-linking for certain domains. The demo uses \useEditorState\ to accurately reflect the link's active state in the UI controls.

demos/src/Marks/Link/React · high confidence

This location introduces a new demo for the React Mention node, providing a complete example of how to implement mention suggestions. The demo features an asynchronous suggestion lifecycle that simulates an API call with a 300ms delay and respects request cancellation via AbortSignal. It utilizes a custom React component (MentionList) for the dropdown UI, supporting keyboard navigation (arrow keys, Enter, Escape), loading states with a pulsing animation, and a 'No result' state when no matches are found. The implementation uses Floating UI (via updatePosition) to correctly position the suggestion dropdown relative to the cursor, handling cases where the clientRect might be undefined.

demos/src/Nodes/Mention/React · high confidence

A new demo for the React integration has been added to the Table node examples. This demo showcases the TableKit extension configured with resizable columns, providing a user interface with buttons to insert, modify, and delete tables, rows, and columns, as well as merge/split cells and toggle headers. The accompanying styles ensure proper table layout and visual feedback for column resizing.

demos/src/Nodes/Table/React · high confidence

New demo applications for React and Vue have been added to the CollaborationWithMenus extension showcase. These demos illustrate how to integrate real-time collaboration using yjs and y-webrtc alongside the new BubbleMenu and FloatingMenu components, providing users with concrete examples of implementing context-aware editing tools in collaborative environments.

demos/src/Extensions/CollaborationWithMenus · high confidence

New demo files have been added for the Details extension in both the React and Vue frameworks. These demos illustrate how to configure the Details, DetailsSummary, and DetailsContent nodes with persistent state, integrate Placeholder support for summary fields, and provide UI controls to toggle the details state (set/unset) and force opening the first details element. The Vue demo also includes specific styling for the details container, including nested details support and visual indicators for open/closed states.

demos/src/Nodes/Details · high confidence

The GuideMarkViews demo now includes interactive examples for both React and Vue frameworks. These demos demonstrate how to create custom mark views using the \addMarkView\ extension API, featuring components that render editable content and allow users to update mark attributes (such as a click counter) via the \updateAttributes\ method.

demos/src/GuideMarkViews · high confidence

This change introduces a new set of tutorial demos in the \demos/src/Tutorials\ directory, providing implementation examples for both React and Vue frameworks. The tutorials cover four progressive scenarios: basic text area handling, integration with the Tiptap editor, integration with the Lexical editor, and real-time collaboration using Yjs. Each scenario includes specific component implementations (e.g., \Note.tsx\, \Note.vue\), shared type definitions, and styling files, demonstrating how to initialize editors, manage state, and configure collaboration providers like \TiptapCollabProvider\ for shared editing experiences.

demos/src/Tutorials · high confidence

A new demo application has been added to the React demos directory that showcases real-time collaborative editing using a split-pane layout. The demo initializes two independent editor instances connected to the same Yjs document via the Hocuspocus provider, allowing users to see live cursors and edits from multiple participants. It integrates specific extensions including the renamed CollaborationCaret (previously CollaborationCursor), the moved CharacterCount extension, and the new extension-list package for task lists, demonstrating how to configure these features within a React component.

demos/src/Demos/CollaborationSplitPane/React · high confidence

This location introduces a new React-based example demonstrating the BubbleMenu and FloatingMenu components from @tiptap/react. The demo showcases how to conditionally render a bubble menu for text formatting (bold, italic, strike) and a floating menu for block-level actions (headings, lists) using the new menu exports, along with corresponding SCSS styles for the menu UI.

demos/src/Examples/Menus/React · high confidence

A new React-based demonstration has been added to the NodePos examples, showcasing how to use the \querySelector\ and \querySelectorAll\ APIs to locate specific nodes like paragraphs, list items, blockquotes, and images within the editor document. The demo includes a styled interface that allows users to trigger these queries and view the resulting node positions, providing a practical reference for implementing node selection logic in React applications.

demos/src/Examples/NodePos · high confidence

A new React-based demo has been added to the YouTube node examples, allowing users to insert YouTube videos via a prompt and customize their dimensions. The demo configures the YouTube extension with nocookie mode enabled for privacy and includes styling for the embedded player, such as a draggable container and selection outlines.

demos/src/Nodes/Youtube/React · high confidence

A new React demo component has been added to the Markdown Parse section, demonstrating how to use the @tiptap/markdown extension to parse Markdown content into the editor. The demo includes a button to parse a predefined Markdown string and a file upload input to load .md files, illustrating how constructs like headings, lists, code blocks, images, and tables are preserved when corresponding extensions (StarterKit, Image, TableKit) are registered.

demos/src/Markdown/Parse · high confidence

This location introduces a new React-based demo example for the CodeBlockLowlight extension. It provides a complete editor setup that allows users to toggle code blocks and select specific programming languages (such as JavaScript, TypeScript, CSS, and HTML) via a dropdown menu within the code block view. The implementation includes a custom React node view component for the language selector, along with associated SCSS styles for the editor and the code block UI.

demos/src/Examples/CodeBlockLanguage/React · high confidence

A new React demo has been added to the IsolatingClear experiment, demonstrating how the editor handles clearing nodes and marks within an isolating wrapper block. The demo includes a custom \WrapperBlock\ node that isolates its content, allowing users to test the 'Clear nodes' and 'Clear marks' toolbar actions specifically in the context of this isolating structure, along with standard formatting controls and styling.

demos/src/Experiments/IsolatingClear/React · high confidence

A new interactive demo has been added for the React integration, showcasing the ordered list node. The example editor initializes with content demonstrating various list types, including standard numeric, custom start indices, lowercase alphabetical, and uppercase Roman numeral ordering. It also provides UI controls to toggle the ordered list and manipulate list item hierarchy (split, sink, and lift).

demos/src/Nodes/OrderedList/React · high confidence

A new demo has been added to the React guide content section that demonstrates how to implement a read-only editor. The example uses the \editable\ option within \useEditor\ and allows users to toggle the editing state via a checkbox, visually indicating the read-only status with a 'not-allowed' cursor and reduced opacity when editing is disabled.

demos/src/GuideContent/ReadOnly/React · high confidence

A new React demo example has been added to showcase the text direction feature. It allows users to set a global text direction (LTR, RTL, or Auto) for the entire editor or apply specific directions to selected text using commands. The demo includes sample content in English, Arabic, and Hebrew to demonstrate bidirectional text handling, along with styling rules that adjust text alignment based on the direction attribute.

demos/src/Examples/TextDirection · high confidence

A new interactive demo has been added for the React integration, demonstrating the Code mark extension. The demo includes a React component that initializes a TipTap editor with the Code extension and provides UI controls to toggle, set, or unset code formatting within the editor content. It also includes SCSS styles to visually distinguish code snippets with a purple background and rounded corners.

(repo-wide) · high confidence

A new demo application has been added to the React extensions showcase, demonstrating how to integrate the Collaboration extension with real-time peer-to-peer synchronization. The example configures a TipTap editor using the Collaboration extension backed by yjs and the y-webrtc provider, allowing multiple users to edit the same document simultaneously via WebRTC. It also includes basic styling for the editor container and placeholder text to enhance the user experience.

(repo-wide) · high confidence

A new interactive demo has been added for the React integration, showcasing the Horizontal Rule node. This example demonstrates how to configure the editor with the necessary extensions and provides a button to insert horizontal rules into the document content.

demos/src/Nodes/HorizontalRule/React · high confidence

A new React-based demonstration has been added to the SetContent command section, showcasing how to initialize an editor with specific extensions including Color, TextStyle, StarterKit, and Mentions. The demo includes a basic React component that renders the EditorProvider with an empty content string, along with corresponding SCSS styles that define the visual appearance of the editor content, such as margins, list padding, heading line-heights, code block styling, and blockquote borders.

demos/src/Commands/SetContent · high confidence

A new React-based demo example has been added to the Formatting section, demonstrating rich text editing capabilities including bold, italic, strikethrough, highlighting, and text alignment (left, center, right, justify). The demo utilizes the TipTap editor with the StarterKit, TextAlign, and Highlight extensions, providing a toolbar interface to toggle these formatting options on headings and paragraphs.

demos/src/Examples/Formatting/React · high confidence

A new React-based example has been added to the demos library that demonstrates how to implement image handling in TipTap. The demo includes a user interface with a button to insert images via URL and supports reordering images through drag-and-drop, utilizing the Dropcursor extension. It also provides specific SCSS styling to ensure images are displayed as block elements with proper spacing and visual selection indicators.

demos/src/Examples/Images/React · high confidence

A new demo application for the React integration has been added to the documentation site. This example demonstrates how to implement the image node using the @tiptap/react package, including basic image insertion via a prompt, drag-to-reorder functionality via the Dropcursor extension, and styling for selected images.

(repo-wide) · high confidence

The React demo for the InteractivityComponent now includes a working example of embedding a React component inside a TipTap editor using node views. The demo defines a custom TipTap extension that renders a React component, featuring a button that increments a click counter stored in the node's attributes, and includes specific styling for the embedded component within the editor.

demos/src/Examples/InteractivityComponent/React · high confidence

The React community demo now includes a mention example that uses Floating UI for positioning the suggestion dropdown and displays a character count indicator with a warning state when the limit is reached. The mention list component shows a 'No result' message when no items match the query, and the suggestion plugin handles keyboard navigation and selection.

demos/src/Examples/Community/React · high confidence

This change adds a new demo application for the RubyText mark, available for both React and Vue frameworks. The demo showcases how to use the \@tiptap/extension-ruby-text\ extension to display ruby annotations (furigana) above text, allowing users to set and unset ruby text via a control panel. It includes end-to-end tests verifying that the annotations render correctly and can be edited inline.

demos/src/Marks/RubyText · high confidence

A new React demo example has been added to the Savvy section, demonstrating the integration of Tiptap's Typography extension for automatic character correction (e.g., converting '(c)' to '©') alongside two custom extensions: a SmilieReplacer that converts text emoticons like ':-)' into emojis, and a ColorHighlighter that visually highlights hex color codes with inline swatches.

demos/src/Examples/Savvy/React · high confidence

A new Vue-based demo example has been added to the Savvy directory, demonstrating Tiptap extensions for automatic typography correction, emoji replacement from text patterns (such as \:-)\ to 😊), and real-time hex color highlighting with inline swatches.

demos/src/Examples/Savvy/Vue · high confidence

A new default demo for Svelte has been added to the examples directory, providing a complete starter template for integrating Tiptap with Svelte applications. The demo includes a fully functional editor instance configured with the StarterKit, TextStyle, and ListItem extensions, allowing users to apply text colors and manage list structures. It features a comprehensive toolbar for formatting (bold, italic, headings, lists, code blocks, etc.) and includes necessary SCSS styles to ensure the editor content renders correctly with proper spacing, typography, and visual hierarchy.

demos/src/Examples/Default/Svelte · high confidence

New demo applications in the React and Vue example directories showcase the \transformPastedHTML\ API. These demos illustrate how extensions can intercept and modify pasted HTML content before it is parsed into the editor, demonstrating features such as converting tabs to spaces, replacing specific words, normalizing line breaks, and stripping inline styles through a priority-based transformation chain.

demos/src/Examples/TransformPastedHTML · high confidence

The demos/src/Nodes/Twitch location now includes new React and Vue demo applications that showcase the Tiptap Twitch extension. These demos allow users to embed Twitch channels, videos, and clips into the editor, with UI controls to customize the embed dimensions (width and height) and support for fullscreen playback.

demos/src/Nodes/Twitch · high confidence

A new demo example has been added for Vue.js that demonstrates how to use CSS Modules with Tiptap. The example includes a toolbar with formatting buttons (bold, italic, headings, lists, etc.) and applies scoped styles via the CSS Modules pattern to the editor container.

demos/src/Examples/CSSModules/Vue · high confidence

A new demo entry for the CodeBlock node in the Vue ecosystem has been added to the documentation site. This example demonstrates how to integrate the @tiptap/extension-code-block with the Vue editor, including UI controls to toggle or set code blocks and specific SCSS styling for the pre/code elements. The implementation correctly uses the Vue 3 beforeUnmount lifecycle hook for cleanup, ensuring compatibility with modern Vue versions.

demos/src/Nodes/CodeBlock/Vue · high confidence

A new demo component has been added for the FloatingMenu extension in Vue. It demonstrates how to integrate the menu with a TipTap editor, including a checkbox to toggle the editor's editable state and buttons to toggle heading levels and bullet lists. The demo also includes scoped SCSS styles for the editor content and the floating menu UI.

demos/src/Extensions/FloatingMenu/Vue · high confidence

A new demo has been added to the Vue extension examples that demonstrates real-time collaboration. It uses the \@tiptap/extension-collaboration\ extension with a \WebrtcProvider\ (y-webrtc) to sync content across users without a central server, and includes a placeholder for user guidance.

demos/src/Extensions/Collaboration/Vue · high confidence

New Vue-based demo components have been added for the Book and Formatting examples. The Book demo showcases basic text styling controls (bold, italic, headings, lists) using the TipTap StarterKit, while the Formatting demo demonstrates advanced text alignment and highlighting features by integrating the TextAlign and Highlight extensions. Both demos follow Vue 3 lifecycle conventions, using \beforeUnmount\ for cleanup.

demos/src/Examples/Book/Vue, demos/src/Examples/Formatting/Vue · high confidence

A new Vue-based demo has been added to the experiments section that showcases the Collaboration Annotation extension. The example demonstrates how to configure two separate Tiptap editors to share a single Yjs document, allowing users to add, update, and delete annotations (comments) that are synchronized across both instances in real-time.

demos/src/Experiments/CollaborationAnnotation/Vue · high confidence

A new Vue.js demonstration component has been added to showcase the Font Family extension. This demo provides a user interface with buttons to apply specific font families (Inter, Comic Sans, Serif, Monospace, Cursive) or unset the font family entirely, illustrating how to integrate and use the TextStyle and FontFamily extensions within a Vue application.

demos/src/Extensions/FontFamily/Vue · high confidence

A new Vue demo component has been added to the TextStyleKit mark demonstration area. It showcases the \mergeNestedSpanStyles\ feature, illustrating how nested HTML spans with inline styles (such as color, font-family, and font-size) are merged and preserved within the editor content.

demos/src/Marks/TextStyle/Vue · high confidence

A new Vue demo has been added to the Experiments/OnUpdateRerender section, illustrating how the Tiptap editor integrates with Vue's reactivity system. The demo includes a parent component that increments a counter and passes it as a prop to a child TiptapComponent, which initializes the editor and logs the count and HTML content on every update, allowing users to observe the interaction between editor events and Vue component lifecycle.

demos/src/Experiments/OnUpdateRerender/Vue · high confidence

The Vue demo for the YouTube node now uses the nocookie YouTube embed variant and exposes width and height input fields to let users adjust the embedded video dimensions before adding it to the editor.

demos/src/Nodes/Youtube/Vue · high confidence

A new Vue-based demo has been added to the Experiments/DestroyingEditor location, demonstrating how to initialize a TipTap editor and explicitly destroy it via the \editor.destroy()\ method. The component includes UI controls to toggle bold formatting and trigger destruction, and it ensures cleanup by calling \destroy()\ in the \beforeUnmount\ lifecycle hook to prevent memory leaks or errors when the component is removed.

demos/src/Experiments/DestroyingEditor · high confidence

A new Vue-based demonstration has been added to the GuideContent demos that showcases how to initialize a TipTap editor, interact with it using standard formatting commands (bold, italic, set content, clear), and retrieve the resulting HTML output in real-time. The demo includes the necessary Vue component structure, TipTap extensions, and styling to render the editor and display the generated HTML source.

demos/src/GuideContent/ExportHTML/Vue · high confidence

A new Vue demonstration component has been added to the GuideContent demos, showcasing how to initialize a TipTap editor and export its content as JSON. The demo includes UI controls to set specific content, clear the editor, and toggle bold/italic formatting, while displaying the live JSON representation of the editor's state in a code block.

demos/src/GuideContent/ExportJSON/Vue · high confidence

A new Vue-based demonstration for the Global Drag Handle experiment has been added to the demos directory. This includes a Vue component that initializes a TipTap editor with the DragHandle extension, enabling users to drag and drop content blocks within the editor via a visual handle.

demos/src/Experiments/GlobalDragHandle · high confidence

A new Vue-based demonstration has been added for the Color extension, showcasing how to apply and manage text colors within a TipTap editor. The demo includes a color picker input and preset buttons for specific colors (purple, red, orange, yellow, blue, teal, green) as well as an option to unset the color. It utilizes the \@tiptap/extension-text-style\ and \@tiptap/extension-color\ packages, demonstrating the integration of the \Color\ extension alongside standard document, paragraph, and text extensions. The component also correctly handles cleanup by destroying the editor instance in the \beforeUnmount\ lifecycle hook.

demos/src/Extensions/Color/Vue · high confidence

A new Vue-based demo has been added to the Link mark examples, demonstrating how to configure the Link extension with specific options such as disabling automatic link opening on click, enabling automatic conversion of Markdown link syntax, and setting a default protocol (https). The demo includes UI controls to set and unset links and showcases the editor's behavior with various URL formats.

demos/src/Marks/Link/Vue · high confidence

New Vue demonstration components have been added for the BulletList and ListItem nodes. The BulletList demo showcases toggling, splitting, sinking, and lifting list items, while the ListItem demo extends this to include ordered lists. Both examples utilize the \@tiptap/vue\ package and the \@tiptap/extension-list\ package, and they have been updated to use the Vue 3 \beforeUnmount\ lifecycle hook for proper editor cleanup.

demos/src/Nodes/BulletList/Vue, demos/src/Nodes/ListItem/Vue, demos/src/Nodes/Document/Vue, demos/src/Nodes/Paragraph/Vue, demos/src/Nodes/Text/Vue, demos/src/Nodes/TaskItem/React, demos/src/Nodes/TaskList/React · high confidence

New interactive demo components have been added for the Bold, Highlight, Italic, Strike, Subscript, Superscript, and Underline marks in the Vue integration. These demos demonstrate how to toggle, set, and unset these text styles using the editor chain API, with the Highlight demo specifically showcasing multi-color support.

(repo-wide) · high confidence

A new Vue demo for the Drag Handle extension has been added, showcasing how to configure the drag handle for nested structures and right-to-left (RTL) layouts. The demo includes controls to toggle editable mode, enable nested drag handling, and switch the editor to RTL direction, providing a practical example of these specific features in a Vue environment.

demos/src/Extensions/DragHandle/Vue · high confidence

A new demo for the Vue integration of the emoji node has been added, demonstrating how to configure the emoji extension with GitHub emojis and emoticons. The demo includes a custom suggestion provider that renders a floating Vue component for autocomplete, allowing users to type a colon followed by a shortcode or tag to insert emojis, with keyboard navigation support for selecting items.

demos/src/Nodes/Emoji/Vue · high confidence

A new demo for the Vue integration has been added to the HorizontalRule node examples. This demo showcases how to configure the editor with the HorizontalRule extension and includes specific CSS styles to highlight the horizontal rule element when it is selected (using the .ProseMirror-selectednode class). The implementation also updates the lifecycle hook from beforeDestroy to beforeUnmount to align with modern Vue practices.

demos/src/Nodes/HorizontalRule/Vue · high confidence

The Vue demo for the Images example now includes a functional component that allows users to insert images via URL prompt and drag to reorder them, utilizing the updated \@tiptap/extensions\ package for the Dropcursor feature and adhering to Vue 3 lifecycle hooks with \beforeUnmount\.

demos/src/Examples/Images/Vue · high confidence

A new demo has been added for the Vue integration of the Image node. This example demonstrates how to configure the editor with the Image extension and includes a button to insert images via URL. It also utilizes the Dropcursor extension to enable drag-and-drop reordering of images within the content.

demos/src/Nodes/Image/Vue · high confidence

A new demo entry has been added to the Overview section for installing TipTap with Vue. This example demonstrates initializing the editor using the \@tiptap/vue\ package and includes styling for common editor elements. The implementation uses the \beforeUnmount\ lifecycle hook for cleanup, reflecting the migration from the deprecated \beforeDestroy\ hook in Vue 3.

demos/src/Overview · high confidence

The Vue example for the InteractivityComponent now demonstrates a custom TipTap node view implemented in Vue. The demo includes a Vue component that renders a clickable button tracking a click count, integrated via a TipTap extension that defines the node schema and renders the Vue component using VueNodeViewRenderer. The entry point sets up a TipTap editor with this extension, showing how to embed interactive Vue components within the editor content.

demos/src/Examples/InteractivityComponent/Vue, demos/src/Examples/InteractivityComponentContent/React · high confidence

A new Linter extension is introduced for the Vue demo, providing real-time linting capabilities within the editor. The extension integrates ProseMirror plugins to scan the document and display visual icons for issues, allowing users to click to select problematic text or double-click to apply automatic fixes. It ships with three default rule plugins—BadWords, HeadingLevel, and Punctuation—enabling immediate validation of content against common style and formatting standards.

demos/src/Experiments/Linter/Vue/extension · high confidence

A new demo example has been added to the Vue demos section that showcases the BubbleMenu and FloatingMenu components. The example renders a text editor with StarterKit and includes a bubble menu for inline formatting (bold, italic, strike) and a floating menu for block formatting (headings, bullet lists), demonstrating how these menu components integrate with the editor instance in a Vue application.

demos/src/Examples/Menus/Vue · high confidence

A new Vue demo has been added to the GuideContent section that demonstrates a TipTap editor in read-only mode. The component allows users to toggle between editable and read-only states via a checkbox, visually indicating the read-only state by dimming the content, and correctly cleans up the editor instance on unmount using the Vue 3 \beforeUnmount\ lifecycle hook.

demos/src/GuideContent/ReadOnly/Vue · high confidence

The Vue experiments directory now includes a working demo for slash commands. It introduces a custom \commands\ extension that integrates with the TipTap Suggestion plugin, a \CommandsList\ Vue component for rendering the menu, and a \suggestion\ configuration that uses Floating UI (replacing the previous tippy.js dependency) to position the dropdown. The demo allows users to type a slash character to trigger a filterable list of commands (such as headings and text formatting) and execute them via the editor.

demos/src/Experiments/Commands/Vue · high confidence

A new demo has been added to the Vue examples directory that demonstrates how to implement a task list using TipTap. The example configures a custom document schema to support task lists and utilizes the TaskItem and TaskList extensions, pre-populating the editor with a sample list of grocery items to illustrate the feature.

demos/src/Examples/Tasks/React, demos/src/Examples/Tasks/Vue · high confidence

Added a new demonstration in the Getting Started guide showing how to implement two-way binding with Vue's v-model for the Tiptap editor. The entry includes an Editor.vue component that manages the editor instance, syncs content via the modelValue prop and update:modelValue event, and handles cleanup with beforeUnmount, alongside an index.vue page that binds the editor to a content variable.

demos/src/GuideGettingStarted/VModel/Vue · high confidence

A new demo entry point has been added for the Linter experiment in the Vue ecosystem. This includes an index.html file and an index.vue component that initializes a TipTap editor with the Linter extension, demonstrating features such as bad word detection, punctuation checks, and heading level validation. The component uses Vue 3 lifecycle hooks (beforeUnmount) and imports extensions from a local path, providing a concrete example of how to integrate the linter into a Vue application.

demos/src/Experiments/Linter/Vue · high confidence

A new interactive drawing example has been added to the Vue demos, allowing users to draw freehand lines on an SVG canvas within a TipTap editor. The implementation introduces a custom 'paper' node extension (Paper.js) that renders a Vue component (Component.vue) featuring color and size controls, alongside a main entry point (index.vue) that initializes the editor with this extension. The demo utilizes D3.js for path generation and Vue 3 lifecycle hooks (beforeUnmount) for cleanup.

demos/src/Examples/Drawing/Vue · high confidence

A new demo in the EnterShortcuts example directory demonstrates how to implement custom keyboard shortcuts (Ctrl+Enter, Meta+Enter, and Shift+Enter) using a custom TipTap extension that sets transaction metadata. The example provides implementations for both React and Vue frameworks, showing how to listen for these transactions and update the UI to display the last triggered shortcut, accompanied by Playwright end-to-end tests to verify the behavior.

demos/src/Examples/EnterShortcuts · high confidence

A new React demo component has been added to the MultipleEditorStyles experiment that demonstrates how to manage multiple independent TipTap editor instances. The component allows users to toggle the creation and destruction of two separate editors (Editor A and Editor B) via buttons, illustrating dynamic lifecycle management and styling of multiple editor instances within a single application.

demos/src/Experiments/MultipleEditorStyles · high confidence

The new @tiptap/extension-ruby-text package adds support for HTML ruby text annotations (reading guides for CJK text). It stores the base text in the document and the annotation in mark attributes, rendering a non-editable \<rt\> element by default. Users can click to edit the annotation via an inline editor (customizable via the renderAnnotationEditor option) or disable click-to-edit entirely. The extension provides setRubyText, toggleRubyText, and unsetRubyText commands, and supports configuring HTML attributes on the ruby element.

packages/extension-ruby-text · high confidence

A new standalone JavaScript demo has been added to the Tailwind experiments section, demonstrating Tiptap integration using the Tailwind CSS CDN with the typography plugin. The demo configures the editor to use responsive prose classes (prose-sm, sm:prose-base, lg:prose-lg, xl:prose-2xl) to ensure text styling adapts correctly across different screen sizes.

demos/src/Experiments/Tailwind · high confidence

New \@tiptap/extension-subscript\ and \@tiptap/extension-superscript\ extensions are now available, allowing users to format text as subscript or superscript. These extensions provide \setSubscript\/\unsetSubscript\ and \setSuperscript\/\unsetSuperscript\ commands, toggle via \Mod-,\ and \Mod-.\ keyboard shortcuts respectively, and parse HTML \\<sub\>\ and \\<sup\>\ tags (as well as \vertical-align: sub/super\ styles) into the editor's internal representation.

packages/extension-subscript · high confidence

This location introduces a new React demo application for the Drag Handle extension that demonstrates nested drag handle capabilities and right-to-left (RTL) text direction support. The demo includes UI controls to toggle nested drag handling (with specific edge detection thresholds for left and right edges) and to switch the editor to RTL mode, alongside a custom-styled drag handle component.

demos/src/Extensions/DragHandle/React · high confidence

New Vue-based demo applications have been added to showcase specific Tiptap editor capabilities. The Markdown Shortcuts demo illustrates how to configure the editor with StarterKit, Highlight, and Typography extensions to support automatic formatting (such as headings, lists, and special characters) via input rules. The Minimal demo provides a stripped-down example using only Document, Paragraph, and Text extensions to demonstrate the core editor structure. Both demos utilize Vue 3 lifecycle hooks (beforeUnmount) for proper cleanup.

demos/src/Examples/MarkdownShortcuts/React, demos/src/Examples/Minimal/React, demos/src/Examples/MarkdownShortcuts/Vue, demos/src/Examples/Minimal/Vue · high confidence

New interactive demo pages have been added for the HardBreak and Heading nodes in the Vue ecosystem. The HardBreak demo illustrates how to insert line breaks within a paragraph using the setHardBreak command, while the Heading demo showcases configuring heading levels (1-3) and toggling them via UI buttons, including handling of unsupported levels. Both demos utilize the modern Vue lifecycle hook beforeUnmount for proper editor cleanup.

demos/src/Nodes/HardBreak/Vue, demos/src/Nodes/Heading/Vue · high confidence

The demos now include a utility for positioning suggestion popups using the @floating-ui/dom library. This new updatePosition function calculates and applies coordinates asynchronously, supporting features like offset, flipping, and shifting to ensure suggestions remain visible and correctly placed relative to the editor selection or a provided client rect.

demos/src/utils · high confidence

The React and Vue demo components for the Audio node have been updated to expose additional configuration options for the native HTML5 audio element. Users can now control preload behavior (metadata, auto, none), toggle autoplay, loop, and muted states, and set specific attributes like controlslist, crossorigin, and disableRemotePlayback directly from the demo interface.

demos/src/Nodes/Audio · high confidence

The bold extension now automatically converts Markdown-style bold syntax (using \\ or \\) into formatted text when typing or pasting. This is achieved by adding input rules and paste rules that detect these patterns, along with corresponding regex exports for testing. The extension also properly parses and renders Markdown strong tokens, ensuring consistent behavior between Markdown input and HTML output.

packages/extension-bold · high confidence

A new demo located at demos/src/Extensions/TypographyWithOverrides demonstrates how to customize the Typography extension by overriding the rightArrow character. The demo includes React and Vue implementations that configure the extension with a custom rightArrow value ('=====\>'), and a Playwright test verifies that typing '-\>' is correctly converted to the configured override in both frameworks.

demos/src/Extensions/TypographyWithOverrides · high confidence

A new demo located at demos/src/Experiments/OnDelete/React demonstrates how to use the \onDelete\ editor event to detect when content is removed. The example configures a TipTap editor with StarterKit and displays the text of the most recently deleted node alongside its new position in the document, providing a concrete reference for implementing deletion tracking in React applications.

demos/src/Experiments/OnDelete · high confidence

The GenericFigure Vue demo now includes custom TipTap nodes that wrap images and tables inside \<figure\> elements with associated \<figcaption\> captions. Users can insert and remove these combined blocks via toolbar buttons, and the figure node prevents its contents from being dragged out of the container, ensuring captions stay attached to their media.

demos/src/Experiments/GenericFigure · high confidence

Added demonstration components in the GuideContent demos for both HTML and React static rendering. The new React/HTML example shows how to use \renderToHTMLString\ from \@tiptap/static-renderer\ to convert JSON content into an HTML string without an active editor instance, while the React/React example demonstrates using \renderToReactElement\ to produce React elements directly. These files serve as usage guides for the static rendering capabilities.

demos/src/GuideContent/StaticRenderHTML, demos/src/GuideContent/StaticRenderReact · high confidence

A new React demo at demos/src/Examples/TypographyRTL illustrates the Typography extension's ability to handle right-to-left (RTL) smart quotes. It showcases two modes: automatic RTL detection via the textDirection option and explicit configuration of RTL double and single quote characters. A corresponding Playwright test suite verifies that typing standard ASCII quotes in an RTL editor context correctly renders the appropriate RTL quotation marks.

demos/src/Examples/TypographyRTL · high confidence

The heading extension now includes \parseMarkdown\ and \renderMarkdown\ methods, allowing users to import and export heading content using standard Markdown syntax (e.g., \\# Heading 1\). This change enables seamless integration with Markdown-based workflows without requiring manual conversion.

packages/extension-heading · high confidence

The Highlight extension now allows applying multiple distinct highlight colors to text via the new \multicolor\ option (defaulting to \false\ for backward compatibility). When enabled, users can set a specific color using the \setHighlight\ or \toggleHighlight\ commands, and the extension safely renders the color while stripping invalid CSS declarations. Additionally, the extension now supports Markdown syntax, allowing text wrapped in double equals signs (e.g., \==highlight==\) to be parsed and rendered as highlights.

packages/extension-highlight · high confidence

The \@tiptap/extension-document\ package is introduced, providing the core \Document\ node that serves as the top-level container for the editor schema. This extension defines the \doc\ node with \block+\ content requirements and includes built-in Markdown rendering support, allowing users to serialize the editor's top-level structure to Markdown format. It is distributed as a standalone package that depends on \@tiptap/core\.

packages/extension-document · high confidence

The ordered-list extension is now available as its own standalone package (@tiptap/extension-ordered-list). This package re-exports the OrderedList extension and its options from the core @tiptap/extension-list package, allowing users to import ordered-list functionality independently. The package includes standard build configuration via Vite and documentation in a new README.

packages/extension-ordered-list · high confidence

The new @tiptap/markdown package provides a Markdown extension and MarkdownManager to parse Markdown strings into Tiptap JSON and serialize editor content back to Markdown. It supports standard Markdown features (headings, lists, links, bold/italic, etc.), custom block and inline nodes, mixed list types, and SSR-safe HTML tag detection. The extension integrates with the editor via setContent, insertContent, and insertContentAt commands, and exposes a getMarkdown() method on the editor instance.

packages/markdown · high confidence

The new @tiptap/pm package re-exports all ProseMirror packages required by Tiptap (such as model, view, state, schema-list, tables, and history) under a single version range. This allows users to install and align multiple ProseMirror dependencies through one consistent package, reducing the need to manually manage and version-match individual ProseMirror libraries. The package includes build configuration via Vite and provides a CHANGELOG tracking version updates and fixes for the underlying ProseMirror dependencies.

packages/pm · high confidence

The new \@tiptap/static-renderer\ package enables rendering Tiptap content to HTML strings, React elements, and Markdown without instantiating a full Editor instance. This allows you to statically render rich text content on the server or in environments where a browser DOM is not available. The package provides \renderToHTMLString\, \renderToReactElement\, and \renderToMarkdown\ functions, which accept a JSON document and a set of extensions. It supports custom node and mark mappings, handles HTML escaping, and respects editor-level options like \textDirection\ via \staticEditorOptions\. Note that extensions relying on runtime hooks (like \UniqueID\ or \TableOfContents\) require pre-processing the JSON document before rendering.

packages/static-renderer · high confidence

The \@tiptap/extension-code-block-lowlight\ package is now available, providing a new extension that extends the standard \CodeBlock\ to support syntax highlighting via the Lowlight library. Users can configure the extension with a Lowlight instance, set a default language, and customize options like tab indentation and arrow key behavior. The extension includes a ProseMirror plugin that applies syntax highlighting decorations to code blocks and supports inheritance, allowing other extensions (such as a frontmatter extension) to reuse the same highlighting logic.

packages/extension-code-block-lowlight · high confidence

The new @tiptap/extension-invisible-characters extension allows editors to visualize hidden formatting characters, such as spaces, hard breaks, and paragraph markers, using configurable CSS decorations. Users can toggle this visibility on or off via the new showInvisibleCharacters, hideInvisibleCharacters, and toggleInvisibleCharacters commands, or by checking the editor's storage.visibility state. The extension supports custom styling through the injectCSS and injectNonce options and allows developers to define custom invisible character builders with specific predicates and priorities.

packages/extension-invisible-characters · high confidence

The \@tiptap/extension-audio\ package is now available, adding support for native HTML5 audio nodes within the editor. Users can insert audio elements via the \setAudio\ command or by pasting valid audio URLs, with built-in sanitization that blocks unsafe protocols (like \javascript:\) by default. The extension supports standard HTML5 audio attributes (autoplay, loop, muted, preload, controls, etc.) and allows base64 data URLs only when explicitly enabled via the \allowBase64\ configuration option.

packages/extension-audio · high confidence

The @tiptap/ai-toolkit package now includes the AiInsertReveal extension, which fades in text inserted by an AI collaborator in real-time by detecting AI-authored changes via collaboration awareness. Additionally, the package provides schema-awareness utilities that serialize the editor's ProseMirror schema and extension details into a JSON format suitable for AI model consumption, and a ServerAiToolkit extension that registers internal \_hash attributes on block nodes to support stable server-side document tracking.

packages/ai-toolkit · high confidence

The link extension now includes an opt-in feature to automatically convert Markdown link syntax (e.g., \\Tiptap\\ or \\[Tiptap\](https://tiptap.dev "Title")) into rich text links when typed or pasted. This is controlled by the new \markdownLinks\` option. The implementation adds input and paste rules to handle the conversion, ensuring that links inside code spans or with mismatched quotes are not converted, and that titles in various quote styles are preserved.

packages/extension-link · high confidence

The ListKeymap demo for React has been updated to demonstrate the full range of list navigation commands. In addition to the existing toggle and split actions, the editor now exposes buttons for sinking and lifting list items, allowing users to nest list items deeper or move them to a higher level. The demo also includes comprehensive Playwright tests verifying these behaviors, such as sinking a paragraph into the last list item via Tab and lifting a list item out of the list via Backspace.

demos/src/Extensions/ListKeymap · high confidence

The Mention extension has been updated to allow configuring multiple trigger characters (such as \@\ for users and \\#\ for tags) via the new \suggestions\ array option, replacing the previous single \suggestion\ configuration. This enables users to define distinct suggestion behaviors for different characters within a single editor instance, while maintaining backward compatibility with the existing single-trigger setup.

packages/extension-mention · high confidence

A new codemod workflow (\@tiptap/codemod-v3-to-v4\) is available to automate the migration of Tiptap projects from v3 to v4. This tool automatically updates import statements and package dependencies, renaming \@tiptap/vue-3\ to \@tiptap/vue\ and \@tiptap/extension-drag-handle-vue-3\ to \@tiptap/extension-drag-handle-vue\ across JavaScript, TypeScript, TSX, JSON, and Vue SFC files.

codemods, packages/extension-drag-handle-vue · high confidence

The new @tiptap/html package provides utilities to convert between ProseMirror JSON and HTML in both browser and server environments. In the browser, generateHTML and generateJSON use the native DOM API, while the server-side exports (imported via @tiptap/html/server) utilize happy-dom to perform the same conversions in Node.js, with strict environment checks to prevent misuse. The package also includes a getHTMLFromFragment helper that allows specifying a custom Document implementation for serialization.

packages/html · high confidence

A new React demo example has been added to showcase link validation capabilities. The demo configures the Link extension with a custom validator that requires URLs to start with 'http://' or 'https://', ensuring that text typed without a protocol is not automatically converted into a link. It includes UI controls to manually set or unset links and demonstrates the behavior within a styled editor environment.

demos/src/Examples/AutolinkValidation/React, demos/src/Examples/AutolinkValidation/Vue · high confidence

A new interactive demo has been added to the Experiments section to visualize and measure the performance of collaboration mapping. This React-based tool allows users to generate documents of varying sizes (from small to very large) and apply different numbers of decorations to test how the editor handles position remapping under load. It includes a custom ProseMirror plugin that tracks and logs the time taken for position updates, providing a practical way to observe collaboration performance characteristics.

demos/src/Experiments/CollaborationMappingPerformance · high confidence

The core package introduces a new Decorations API that allows extensions to declare visual overlays (Inline, Node, and Widget decorations) directly via an \addDecorations()\ hook, supporting React and Vue component widgets and optimized update strategies like \changedRanges\. Additionally, the \ListKeymap\ now registers a Tab shortcut that sinks a top-level textblock into the previous list's last item, and exposes a \getPreviousBlockSibling\ helper. This release also includes fixes for \insertContent\ failing when \prosemirror-model\ is loaded multiple times, \deleteSelection\ leaving phantom selections after \AllSelection\, and input rules crashing when matching text spans inline atom nodes.

packages/core · high confidence

The \@tiptap/extension-details\ package is now available, introducing a new \Details\ node that allows users to create collapsible content sections (similar to HTML \\<details\>\ elements). This extension includes \DetailsSummary\ and \DetailsContent\ sub-nodes, a customizable toggle button with default accessibility labels, and support for persisting the open/closed state within the document. It also handles specific cursor behaviors, such as keeping the cursor in the content when typing at the start of a document and managing gap cursors around the details block.

packages/extension-details · high confidence

Added new experimental demo applications for Vue that showcase custom editor extensions. The Figure demo introduces a \figure\ node that wraps images with captions, supporting conversion between standard images and figures via commands, while the Embed demo provides an \iframe\ node for embedding external content like videos. These demos illustrate how to define custom nodes, handle attributes, and integrate them into a Vue-based editor interface.

demos/src/Experiments/Figure · high confidence

The \@tiptap/extension-find-and-replace\ extension is now available, providing commands to search for terms, highlight matches, and replace the current or all occurrences within the editor. It supports case-sensitive and whole-word matching, and offers an RE2-compatible regex mode to prevent catastrophic backtracking (without lookarounds or backreferences). The extension includes commands to jump between results and automatically manages the highlighting of the active result.

packages/extension-find-and-replace · high confidence

Added a suite of interactive demos in the GuideNodeViews section to illustrate various NodeView patterns. These include examples for implementing drag handles, applying ProseMirror decorations without triggering framework re-renders, using plain JavaScript node views, and leveraging React/Vue component features like content handling, context providers, and ref forwarding.

demos/src/GuideNodeViews · high confidence

Added a new React demo in demos/src/Examples/Accessibility/React that showcases an accessible editor interface. The demo includes a static MenuBar for block-level formatting (headings, lists), a floating InsertMenu for inserting elements, and a BubbleMenu for text marks (bold, italic, etc.). It implements custom keyboard navigation using a useMenubarNav hook to support arrow keys, Home/End, and Escape, and fixes VoiceOver word separation by inserting zero-width spaces after block elements.

demos/src/Examples/Accessibility · high confidence

Added demonstration applications for the Mathematics extension in both React and Vue frameworks. These demos showcase the ability to render inline and block-level LaTeX math expressions using KaTeX, provide UI controls to insert and remove math nodes, and demonstrate the \migrateMathStrings\ utility for converting legacy calculation syntax. The React demo specifically highlights the new \onClick\ handler configuration for editing math blocks and inline elements directly within the editor.

demos/src/Extensions/Mathematics · high confidence

A new React-based collaborative editing example has been added to the demos. It uses the TiptapCollabProvider over WebSockets to sync document state via Yjs, allowing multiple users to edit simultaneously. The demo features a custom menu bar for formatting (bold, italic, lists, etc.), displays remote user carets with usernames, and shows connection status and user count. It relies on a configurable room list from environment variables to connect to the collaboration backend.

demos/src/Examples/CollaborativeEditing/React · high confidence

A new example has been added to the demos directory that demonstrates how to enforce a specific document structure in TipTap. By extending the Document extension to require a heading followed by blocks, and configuring the StarterKit to disable the default document and enforce a trailing paragraph node, this demo ensures the editor always starts with a heading. It also utilizes the Placeholder extension to provide context-aware hints, showing 'What’s the title?' for the heading and 'Can you add some further context?' for subsequent content.

demos/src/Examples/CustomDocument/React, demos/src/Examples/CustomDocument/Vue · high confidence

Added a new React-based demo in demos/src/Nodes/Emoji/React that showcases the TipTap emoji extension. The demo includes a custom suggestion provider that renders a floating React component (EmojiList) for autocomplete, supporting keyboard navigation (arrow keys, Enter) and dynamic repositioning. It demonstrates rendering emojis as inline nodes, inserting emojis programmatically, and handling emoticons.

demos/src/Nodes/Emoji/React · high confidence

A new demo has been added to the GuideContent section for React, demonstrating how to export the TipTap editor's content as JSON. The example includes a React component that initializes an editor with StarterKit, listens for content updates to maintain a JSON state, and provides UI controls to set or clear content. It also displays the current editor state as formatted JSON output and includes styling for the editor and output display.

demos/src/GuideContent/ExportJSON/React · high confidence

A new React-based demonstration has been added for the \insertContent\ command, showcasing how to insert various types of content into the editor. The demo includes buttons to insert raw HTML (including nested tags like bold and italic), plain text (preserving newlines), and images via a URL prompt. It is configured with the StarterKit, Image, Link, Color, and TextStyle extensions, and includes specific SCSS styling for headings, lists, code blocks, and blockquotes to ensure the inserted content renders correctly within the demo environment.

demos/src/Commands/Cut, demos/src/Commands/InsertContent · high confidence

Added two new demo applications in the StaticRendering examples directory that showcase how to render Tiptap editor content into static outputs using the new @tiptap/static-renderer package. The basic demo demonstrates converting JSON content into React elements, HTML strings, HTML elements, and Markdown, while the advanced demo illustrates how to integrate custom React components and node views into the static rendering process.

demos/src/Examples/StaticRendering · high confidence

A new interactive demo has been added to the React examples that demonstrates how to optimize editor rendering performance. The example showcases the \shouldRerenderOnTransaction\ option in \useEditor\ to prevent unnecessary re-renders, alongside the \useEditorState\ hook with a custom equality function to selectively update UI components based on specific state changes. Users can toggle between optimized rendering and the default behavior to observe the difference in render counts.

demos/src/Examples/Performance · high confidence

A new React-based collaborative editing demo has been added to the SingleRoomCollab section. It demonstrates real-time co-editing using Tiptap extensions (Collaboration, CollaborationCaret, CharacterCount) backed by Yjs and the Hocuspocus provider. Users can see a live count of online participants, view remote cursors with username labels, and manage their own display name via a prompt, with the demo styled to match the project's visual theme.

demos/src/Demos/SingleRoomCollab/React · high confidence

A new interactive demo has been added for the React integration, showcasing advanced table editing capabilities. Users can now insert tables via UI controls or HTML, manipulate rows and columns (add, delete, merge, split), and toggle header rows, columns, and cells. The demo introduces a custom table cell extension that supports setting a background color attribute on cells, and includes CSS styling to enable visual column resizing with an appropriate cursor.

demos/src/Examples/Tables/React · high confidence

Added a new demo example in demos/src/Examples/SuggestionPositioning for both React and Vue that showcases the Mention extension's integration with Floating UI. The demo implements a custom suggestion configuration using \floatingUi\ options (strategy: 'fixed', with flip and shift middleware) to pin the dropdown menu to the top-start of the cursor while keeping it within the viewport. It includes custom \DropdownList\ components for React and Vue that handle keyboard navigation (ArrowUp, ArrowDown, Enter, Escape) and item selection, demonstrating how to manage the suggestion popup's lifecycle and positioning manually via the \mount\ and \onUpdate\ hooks.

demos/src/Examples/SuggestionPositioning · high confidence

The new @tiptap/extension-twitch allows you to embed Twitch videos, clips, and live channels directly into your rich text editor. Users can paste standard Twitch URLs (such as twitch.tv/videos/..., clips, or channel pages) and the extension will automatically convert them into embeddable iframes. The extension supports configuration options to control playback behavior, including autoplay, muted state, fullscreen toggling, and starting time for videos, as well as setting the required parent domain for embed security. It also preserves the canonical source URL when content is round-tripped through HTML, ensuring that the original Twitch link is maintained in the editor's data.

packages/extension-twitch · high confidence

Added a new Vue-based experiment demo in demos/src/Experiments/MultipleEditors/Vue that showcases how to manage and synchronize multiple independent Tiptap editors within a single application. The demo implements three distinct editor instances (Title, Tasks, and Description) that share a single Yjs document but use separate fields, allowing users to see how collaboration state is partitioned across different content areas. It also demonstrates specific extension configurations, such as customizing task lists and headings, and includes a JSON output view to inspect the underlying ProseMirror state for each editor field.

demos/src/Experiments/MultipleEditors/Vue · high confidence

A new interactive demo has been added for Vue users to explore table editing capabilities. This example showcases how to insert, modify, and style tables within a TipTap editor, including specific features like adding/removing rows and columns, merging and splitting cells, and setting custom cell attributes such as background color.

demos/src/Examples/Tables/Vue · high confidence

This location introduces a new TipTap extension that enables collaborative annotations within the editor. The code implements a Y.js-backed state management system (AnnotationState) and a ProseMirror plugin (AnnotationPlugin) to synchronize annotation data across users. It exposes commands to add, update, and delete annotations based on text selection, and automatically renders visual decorations in the editor view when the underlying Y.js map changes.

demos/src/Experiments/CollaborationAnnotation/Vue/extension · high confidence

The Markdown demo in the React application has been expanded to showcase a wider range of bidirectional Markdown features. Users can now see and interact with task lists, nested details/summary blocks, YouTube and Twitch video embeds, mathematical expressions (via KaTeX), and custom React component nodes. The demo also highlights support for HTML content within Markdown, multi-trigger mentions (using @ and \#), and the preservation of pipe characters inside inline code spans within table cells.

demos/src/Markdown/Full · high confidence

Added two new demo extensions in the DecorationComponents and Decorations examples that showcase the new Decorations API. The DecorationComponents demo demonstrates how to render interactive, stateful framework widgets (React and Vue) as decorations that persist their state across document edits. The Decorations demo illustrates inline, widget, and node decorations by highlighting search terms and outlining headings, with support for efficient incremental updates via the 'changedRanges' update strategy.

demos/src/Examples/DecorationComponents, demos/src/Examples/Decorations · high confidence

A new React demo component has been added to the \demos/src/Commands/InsertContentApplyingRules\ location, illustrating how to use the \applyInputRules\ and \applyPasteRules\ options within the \insertContent\ command. The demo provides a user interface with toggle switches to enable or disable these rules, allowing users to observe how input and paste rules affect content insertion when using buttons that insert various text patterns, such as list markers and bold text markers.

demos/src/Commands/InsertContentApplyingRules · high confidence

A new React demo has been added to showcase how to map and track cursor or selection positions in a collaborative editor using the Collaboration extension. The example implements a custom ProseMirror plugin that maintains a list of \MappablePosition\ objects, automatically updating their positions when the document changes, and renders them as visual widgets (red 10x10px blocks) in the editor. Users can click a button to insert a decoration at the current selection, demonstrating how to persist and sync these mapped positions across connected clients via Yjs and WebRTC.

demos/src/Extensions/CollaborationMapPositions · high confidence

The demos/setup area now provides a unified entry-point system for running editor demos in iframes. It introduces helper utilities (waitUntilElementExists, splitName, debug) and framework-specific initializers for React, Vue, Svelte, and plain JavaScript. Each initializer loads the corresponding demo module dynamically, mounts it into the \#app container, and triggers a debug event to communicate editor state back to the parent window. Global styles (style.scss) define CSS variables, base typography, button/input styling, and custom scrollbar rules for popovers and the editor area, ensuring consistent visual presentation across all demo types.

demos/setup · high confidence

Added demonstration applications for the Drag Handle and Table of Contents extensions in both React and Vue. The Drag Handle demo showcases a custom 'recommendation' node that uses position tracking to update its displayed position index in real-time as it is dragged. The Table of Contents demo provides a sidebar navigation component that syncs with the editor's scroll position and allows users to click headings to jump to specific sections within the document.

demos/src/Extensions/DragHandleWithNodeViews · high confidence

Added four new scripts to streamline development workflows: \make-demo.sh\ scaffolds new demo entries by copying a template into a specified category; \check-package-exports.mjs\ validates that all paths declared in package.json exports actually exist on disk; \check-package-dists.sh\ ensures every package has a non-empty dist directory before publishing; and \aggregate-changeset.js\ replaces the previous changelog aggregation logic to support the new GitHub changelog format and correctly handle private packages and demos in the release metadata scan.

scripts · high confidence

The \@tiptap/extension-drag-handle\ package is introduced, providing a new drag-and-drop handle for editor blocks. It supports nested content (e.g., list items, blockquotes) via a configurable rule-based scoring system and edge detection to target the correct block. Users can control the drag preview appearance using the \dragImageProperties\ option to limit copied CSS styles, and the extension exposes \onDragStart\ and \onDragEnd\ callbacks for custom UI handling. The handle also tracks its state via a \data-dragging\ attribute and respects RTL direction for preview alignment.

packages/extension-drag-handle · high confidence

The Vue linter demo now includes three new extension plugins that automatically detect and suggest fixes for common writing issues. The BadWords plugin flags vague intensifiers like 'obviously' or 'clearly', the HeadingLevel plugin ensures headings follow a logical hierarchy and can auto-fix skipped levels, and the Punctuation plugin detects and corrects irregular spacing around punctuation marks.

demos/src/Experiments/Linter/Vue/extension/plugins · high confidence

The \@tiptap/extension-mathematics\ package introduces support for rendering mathematical expressions using KaTeX. It provides \InlineMath\ for inline expressions (delimited by \$$\) and \BlockMath\ for display-mode blocks, both featuring input rules that convert LaTeX syntax into nodes while preserving preceding characters and avoiding lookbehind regex for WebKit compatibility. The package includes a \Mathematics\ composite extension, configuration options for KaTeX and click handlers, and utility functions (\migrateMathStrings\) to convert existing dollar-sign math text into proper nodes.

packages/extension-mathematics · high confidence

Added new demo applications in the ResizableNodes and ResizableImages directories for both React and Vue frameworks. These demos showcase the new \ResizableNodeView\ component (imported from \@tiptap/react\ and \@tiptap/vue\), allowing users to interactively resize custom block nodes and images within the editor. The examples include the necessary SCSS styles for resize handles and demonstrate how to configure extensions to enable resizing with aspect ratio preservation for images and custom width/height attributes for generic nodes.

demos/src/Examples/ResizableNodes · high confidence

The ordered list extension now supports the HTML \type\ attribute, allowing lists to use lowercase alphabetical (\a\), uppercase alphabetical (\A\), lowercase roman numeral (\i\), or uppercase roman numeral (\I\) markers. This type is preserved through HTML and Markdown round-trips, correctly detected when pasting from external editors like Word or Google Docs, and respected when joining adjacent lists.

packages/extension-list · high confidence

The repository has been initialized with a new development workflow centered on Vite+ (vite-plus) for building and testing, replacing previous tooling. This includes a new \vite.config.mts\ for workspace aliasing and a \pack.config.mts\ for package builds. Development and linting now use oxlint and oxfmt, with pre-commit hooks configured via \vite.config.mts\. The project now uses pnpm workspaces (\pnpm-workspace.yaml\) and Playwright for e2e tests. To support AI-assisted development, the repository includes \AGENTS.md\ with coding standards and \CLAUDE.md\ as a symlink, along with configuration for CodeRabbit (\coderabbit.yaml\) and Fallow (\fallowrc.json\).

(repo-wide) · high confidence

The Selection extension demo (React and Vue) has been updated to demonstrate that the extension adds a \.selection\ class to selected text even when the editor loses focus, keeping the selection visible. The demo includes a Playwright test to verify this behavior and applies a purple box-shadow style to the \.selection\ class to make the persisted selection visually distinct.

demos/src/Extensions/Selection · high confidence

The Table of Contents extension now includes a \generateTocIds\ utility that assigns \id\ and \data-toc-id\ attributes to anchor nodes (headings) in a Tiptap JSON document without requiring an active \Editor\ instance. This allows developers to generate proper anchor links for server-side rendering, ensuring the static HTML output matches the behavior of the client-side editor. The utility respects existing extension configurations, such as custom \getId\ functions and \anchorTypes\, and handles duplicate ID resolution.

packages/extension-table-of-contents · high confidence

The strike extension now recognizes the Markdown \\~\~text\~\~\ syntax for both input and paste operations, allowing users to create strikethrough text by typing tildes. It also parses the HTML \\<del\>\ tag in addition to \\<s\>\ and \\<strike\>\, and renders Markdown output using the \del\ token. The extension exposes \setStrike\, \toggleStrike\, and \unsetStrike\ commands, and supports the \Mod-Shift-s\ keyboard shortcut.

packages/extension-strike · high confidence

The suggestion plugin has been updated to use Floating UI for popup positioning, introducing a managed \mount\ function that automatically anchors the popup to the cursor and repositions it on scroll or resize. Consumers can now opt into this behavior via the \container\ and \dismissOnOutsideClick\ options, or continue using manual positioning via \clientRect\. Additionally, the plugin now supports an async lifecycle for suggestion items, including debouncing, in-flight request aborting, and a \loading\ state, with new \minQueryLength\ and \debounce\ options to control when and how items are fetched.

packages/suggestion · high confidence

The typography extension now supports right-to-left (RTL) smart quotes. Users can configure specific open and close quote characters for RTL text via the new \doubleQuotes.rtl\ and \singleQuotes.rtl\ options in the extension configuration, allowing for correct typographic rendering in bidirectional content.

packages/extension-typography · high confidence

The Underline extension now parses and renders Markdown-style underlines using the ++text++ syntax. Users can apply underlines via the new toggleUnderline command or the Mod+U keyboard shortcut, and existing HTML \<u\> tags or text-decoration: underline styles are still supported for backward compatibility.

packages/extension-underline · high confidence

A new demo has been added for the UndoRedo extension, providing examples for both React and Vue frameworks. The React demo uses the \useEditor\ and \useEditorState\ hooks to manage the editor instance and expose \canUndo\/\canRedo\ states, while the Vue demo utilizes the \Editor\ component with manual lifecycle management. Both demos include UI buttons for undo/redo actions and demonstrate keyboard shortcuts (Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z). A corresponding Playwright test suite verifies the functionality across both frameworks, ensuring buttons disable correctly when no history is available and that content changes can be undone and redone as expected.

demos/src/Extensions/UndoRedo · high confidence

The Vue demo for the ordered list node now includes examples demonstrating the \start\ and \type\ attributes (such as lowercase alphabetical 'a' and uppercase Roman numerals 'I') on ordered lists, alongside standard list operations like splitting, sinking, and lifting list items.

demos/src/Nodes/OrderedList/Vue · high confidence

The Vue demo in the Experiments/All location has been updated to showcase a significantly expanded set of editor capabilities. Users can now test a wide range of formatting options including bold, italic, strike, code, headings (H1-H6), lists, code blocks, blockquotes, and horizontal rules. The demo also integrates advanced extensions such as table resizing (via TableKit), text styling (color, background-color, line-height), mentions, images, task lists, and undo/redo functionality. This provides a more complete interactive playground for Vue-based TipTap implementations.

demos/src/Experiments/All · high confidence

Added a new Vue-based demo in demos/src/Examples/Transition/Vue that illustrates editor transitions. The example includes a custom TipTap node extension (VueComponent) rendered via VueNodeViewRenderer, which displays a clickable button tracking a click count. The main index.vue component demonstrates two transition scenarios: a direct editor instance and a nested editor instance wrapped in a child component (ParentComponent), both utilizing Vue's \<transition\> with a fade effect.

demos/src/Examples/Transition · high confidence

The BubbleMenu extension has replaced the Tippy.js library with Floating UI for positioning, enabling more flexible placement and middleware support (such as arrow, flip, and shift). Additionally, the extension now supports multiple independent BubbleMenu instances within a single editor; each instance uses its own pluginKey to manage state, ensuring that options and position updates do not cross-contaminate between different menus.

packages/extension-bubble-menu · high confidence

The \@tiptap/extension-bullet-list\ package has been refactored to act as a thin wrapper that re-exports the \BulletList\ extension and its \BulletListOptions\ type directly from \@tiptap/extension-list\. This change aligns the bullet list extension with the new unified list package structure, meaning users importing from this specific package are now getting the implementation from the consolidated list extension rather than a standalone implementation.

packages/extension-bullet-list · high confidence

Pressing the Up arrow key while the cursor is at the start of a code block that has no preceding node now inserts a new paragraph above the code block and moves the cursor there, mirroring the existing behavior of the Down arrow key at the end of a code block. This resolves the previous issue where no content could be inserted above a code block positioned at the very beginning of the document. The new behavior is enabled by default but can be disabled by setting the \exitOnArrowUp\ option to \false\ in the CodeBlock configuration.

packages/extension-code-block · high confidence

The CollaborationCaret extension now validates user-provided cursor colors against CSS style rules, ignoring unsupported formats and preventing malicious CSS injection via the color attribute. Additionally, the extension now properly removes its awareness listener when the editor is destroyed, preventing memory leaks when multiple editors share a single provider.

packages/extension-collaboration-caret · high confidence

The editor's functionality is now distributed through a unified \@tiptap/extensions\ package, which bundles the CharacterCount, Dropcursor, Focus, Gapcursor, Placeholder, Selection, TrailingNode, and UndoRedo extensions. This consolidation simplifies installation and ensures consistent versioning across all official extensions. The package includes significant behavioral improvements, such as a new \autoTrim\ option for CharacterCount to manage content limits, a reworked Placeholder extension that eliminates flickering on large documents by using incremental state updates, and a Selection extension that properly hides native browser selection when the editor is blurred.

packages/extensions · high confidence

The Default React demo has been refactored to separate the editor's toolbar logic into a new \MenuBar\ component. This component now uses \useEditorState\ with a custom \menuBarStateSelector\ to efficiently track and expose editor capabilities (such as bold, italic, headings, lists, undo/redo) directly to the UI buttons, rather than relying on inline checks. The main \index.tsx\ entry point now composes the \MenuBar\ and \EditorContent\ components, providing a cleaner, more maintainable structure for the demo application.

demos/src/Examples/Default/React · high confidence

The demos location has been rebuilt using Vite, replacing the previous tooling. This migration introduces a new \vite.config.ts\ that configures plugins for React, Vue, and Svelte, and a \tsconfig.json\ that switches TypeScript module resolution to \nodenext\. A \dedupeDeps.txt\ file is now used to manage dependency deduplication, and \tailwind.config.js\ plus \postcss.config.cjs\ are added to support Tailwind CSS styling. As part of this update, new demo examples have been added for the \FileHandler\ extension (handling image drops and pastes in React and Vue) and the \UniqueID\ extension (generating unique IDs for headings and paragraphs in React and Vue, including a collaborative variant with Yjs).

demos · high confidence

The emoji extension has been restructured to include a new build-time data generation script (generate.ts) that compiles emoji data from emojibase and GitHub sources into a static data file, alongside helper utilities for shortcode conversion and variation selector removal. This update also fixes arrow key navigation in Firefox, ensuring the cursor correctly skips over inline emoji nodes at paragraph boundaries instead of getting stuck.

packages/extension-emoji · high confidence

The file-handler extension now includes a \consumePasteEvent\ option (defaulting to \false\) that allows developers to fully consume the paste event when files are pasted, even if HTML content is also present in the clipboard. When set to \true\, this prevents other extensions' paste rules from processing the same event and creating duplicate content, which is particularly useful when handling pastes that include both files and HTML (such as animated GIFs copied as PNGs). The extension also properly handles internal ProseMirror drag operations by checking for \application/x-prosemirror-slice\ data in drop events.

packages/extension-file-handler · high confidence

The image extension now correctly handles images that are already cached or fail to load, ensuring the resizable node view is revealed instead of remaining hidden. Additionally, when the resize feature is enabled, custom HTML attributes (such as classes or data attributes) are now consistently applied to the image element in the editor DOM, matching the behavior when resizing is disabled.

packages/extension-image · high confidence

The text-style extension now correctly merges nested span styles during HTML parsing to better handle content from other editors, and fixes a bug where unsetting a single text style (such as font size) inside a blockquote would incorrectly remove other sibling styles (like color). Additionally, style attribute values are now validated to prevent rendering malicious or invalid CSS declarations injected via JSON.

packages/extension-text-style · high confidence

The FloatingMenu extension has replaced the previous Tippy.js dependency with Floating UI to handle positioning, resulting in a more robust placement system. Additionally, the extension now supports instance-specific plugin keys, allowing multiple floating menus to coexist within the same editor without cross-contaminating state or updates. This change also introduces new configuration options for positioning strategies, offsets, and scroll targets, giving developers finer control over the menu's behavior and appearance.

packages/extension-floating-menu · high confidence

The font family extension has been refactored to re-export the FontFamily extension and its options directly from the @tiptap/extension-text-style package. This change aligns the font family functionality with the broader text-style system, ensuring that updates to text styling logic are automatically reflected in font family handling without requiring separate implementation maintenance.

packages/extension-color, packages/extension-font-family · high confidence

The HardBreak extension now automatically scrolls the editor view to the newly inserted hard break, ensuring the cursor remains visible after pressing Shift+Enter or using the setHardBreak command. Additionally, marks (such as bold or italic) that are configured as splittable are now preserved across the hard break by default, preventing them from being unexpectedly dropped when a line break is inserted.

packages/extension-hard-break · high confidence

The horizontal rule extension has been updated to fix insertion behavior, specifically ensuring that a new paragraph is automatically created when a horizontal rule is added at the end of a document, and that the cursor is placed correctly after the rule. This change also improves compatibility with block leaf nodes like images, ensuring the rule is inserted in the correct position relative to them.

packages/extension-horizontal-rule · high confidence

The blockquote extension now handles backspace more intelligently at block boundaries: pressing backspace at the start of a non-first child lifts that child out to split the blockquote, while pressing backspace at the start of a textblock following a blockquote merges the content into the blockquote instead of re-indenting it. Additionally, a crash caused by backspacing at the very start of the document (e.g., before a leading image) is fixed by safely bailing out when no parent node exists.

packages/extension-blockquote · high confidence

The collaboration extension now includes a \filterTransaction\ hook that detects invalid Y.js content when \enableContentCheck\ is true, correctly triggering the \onContentError\ event while allowing the transaction to proceed so ProseMirror state stays in sync. Additionally, a memory leak is fixed where destroying an editor while a shared Y.Doc remained active would keep the editor reachable; the extension now properly removes the UndoManager's 'destroy' listener on teardown. The extension also exposes position mapping helpers (\CollaborationMappablePosition\, \isChangeOrigin\) to support accurate cursor tracking during collaborative transactions.

packages/extension-collaboration · high confidence

The inline code extension now preserves characters typed or pasted immediately before a backtick-delimited code span (e.g., typing 'a\code\' no longer deletes the 'a'). This behavioral change is implemented by replacing the previous regex-based input and paste rules with new function-based matchers (inputRegexMatch and pasteRegexMatch) that avoid consuming the preceding character, while the old regex exports remain for backward compatibility.

packages/extension-code · high confidence

The italic extension now automatically converts \text\ and \text\ patterns into italic formatting when typing or pasting, and supports toggling italic with both the standard Mod+I shortcut and the uppercase Mod+Shift+I variant.

packages/extension-italic · high confidence

The demo preview interface has been rebuilt to include a new \Demo.vue\ component that displays code samples with syntax highlighting powered by Shiki running in a Web Worker. The preview now supports multiple language tabs (React, Vue, Svelte, JS) with a custom sort order that prioritizes React, and it persists the user's active tab selection in local storage so it is remembered on return. Additionally, the preview supports query parameters to hide the source code or the preview iframe, and includes an 'Inspect' button to view the editor's debug JSON.

demos/preview · high confidence

The NodeRangeBookmark helper now stores and passes the selection depth when resolving back to a NodeRangeSelection, ensuring that node range selections are restored with their original depth after document transformations like drag-and-drop or collaboration updates. This fix prevents selection state loss or incorrect depth mapping when selections are serialized and restored.

packages/extension-node-range · high confidence

The @tiptap/react package has been restructured to improve React integration and performance. It now includes a new EditorProvider component for context-based editor access, dedicated NodeViewWrapper and NodeViewContent components for custom node views, and a ReactMarkViewRenderer for mark views. A new ReactNodeViewSelectionTracker handles selection state more accurately, and the ReactRenderer now supports React 19 compatibility with improved ref handling. The package also adds a 'use client' directive for React Server Components support and batches portal notifications to avoid update depth warnings.

packages/react · high confidence

The StarterKit package now pins its bundled \@tiptap/\*\ dependencies to the exact version it was released with. This ensures that installing a specific StarterKit version provides a consistent, unchanging set of extensions, rather than automatically pulling in the newest available versions of those extensions.

packages/starter-kit · high confidence

The table extension has been refactored to improve reliability and user experience. Parsing now correctly respects column widths defined in \<colgroup\> elements and handles empty cells by backfilling them with default block content, preventing errors when inserting tables programmatically. Serialization to Markdown has been fixed to preserve line breaks within cells and correctly escape pipe characters inside inline code spans, ensuring content survives round-trips. Rendering behavior has also been updated: the TableView now correctly applies user-defined HTML attributes (like classes) even when table resizing is disabled, and default colspan/rowspan attributes are omitted from the output to keep HTML cleaner. Additionally, the cursor is now kept inside the table when the last row or column is deleted, and the TableKit utility provides a convenient way to configure all table-related extensions together.

packages/extension-table · high confidence

The text-align extension now validates alignment values against a configurable allowlist (defaulting to left, center, right, justify) and checks for valid CSS style values. This prevents invalid or malicious styles (such as 'position: fixed') from being rendered in the output HTML and ensures that only configured alignments are applied, improving security and data integrity when parsing or generating content.

packages/extension-text-align · high confidence

The project has migrated its tooling to Vite, introducing a new pre-commit hook that executes 'vp staged'. Additionally, a patch has been applied to the @changesets/assemble-release-plan package to prevent major version bumps for peer dependencies, ensuring that changes to peer dependencies do not automatically trigger a major version increment for dependent packages.

.vite-hooks, patches · medium confidence

The UniqueID extension now detaches the collaboration provider's 'synced' listener when the editor is destroyed, preventing a memory leak where the editor remained referenced by the shared provider. Additionally, a new \generateUniqueIds\ utility function allows adding unique IDs to a document in a server-side context without requiring an active Editor instance, and the extension now supports deferring ID creation until a collaboration provider syncs or a 'y-sync$' transaction occurs.

packages/extension-unique-id · high confidence

The Vue BubbleMenu demo has been updated to demonstrate advanced menu behaviors. It now includes a toggle to show or hide the menu and a checkbox to enable or disable editor editability, which controls whether the menu appears. Additionally, the demo showcases custom positioning logic by attaching a second menu to list items using a virtual element reference, allowing the menu to appear above bullet or ordered lists based on specific selection states.

demos/src/Extensions/BubbleMenu/Vue · high confidence

The Vue demo for the CharacterCount extension has been updated to display both the character count and the word count in real time. It also includes a visual warning indicator (changing color to red) when the text reaches the configured limit of 280 characters, providing immediate feedback to users on content length constraints.

demos/src/Extensions/CharacterCount/Vue · high confidence

The Vue demo for the CodeBlockLowlight extension has been updated to use lowlight v3 (importing from 'lowlight' instead of 'highlight.js') and migrated to Vue 3, replacing the deprecated beforeDestroy hook with beforeUnmount.

demos/src/Nodes/CodeBlockLowlight/Vue · high confidence

The Vue collaborative editing demo has been updated to use the new \TiptapCollabProvider\ from \@hocuspocus/provider\ instead of the previous IndexedDB provider, enabling real-time collaboration via WebSocket. The editor configuration now imports \CollaborationCaret\ and \CharacterCount\ from their specific extension packages (\@tiptap/extension-collaboration-caret\ and \@tiptap/extensions\) and uses \TaskList\ and \TaskItem\ from \@tiptap/extension-list\. The demo UI includes a new \MenuBar\ component for formatting actions and displays the number of online users in the current collaboration room.

demos/src/Examples/CollaborativeEditing/Vue · high confidence

The Vue community demo has been updated to replace the previous positioning library with Floating UI for rendering mention suggestion popups, ensuring more robust placement of the dropdown menu. Additionally, the demo editor now integrates the CharacterCount extension, displaying a visual indicator and text count that warns users when the 280-character limit is reached. The suggestion logic has also been refactored to make the clientRect prop optional, improving stability when the DOM rect is unavailable.

demos/src/Examples/Community/Vue · high confidence

The Vue demo for the CodeBlockLanguage example has been updated to use lowlight v3 for syntax highlighting. The implementation now imports languages from 'highlight.js/lib/languages' and configures a lowlight instance via the CodeBlockLowlight extension, replacing the previous setup. The demo also includes a custom Vue component for rendering code blocks with a language selector and has migrated the Vue lifecycle hook from beforeDestroy to beforeUnmount.

demos/src/Examples/CodeBlockLanguage/Vue · high confidence

The Vue example for InteractivityComponentProvideInject has been updated to demonstrate that Vue components used as TipTap node views can correctly receive injected values from multiple levels of the application context. The demo now includes a ValidateInject component that displays four distinct values—globalValue, appValue, indexValue, and editorValue—confirming that the provide/inject chain works correctly from the root app configuration down through the editor instance and into the custom node view.

demos/src/Examples/InteractivityComponentProvideInject · high confidence

The Vue default demo has been updated to be compatible with Vue 3 by replacing the deprecated \beforeDestroy\ hook with \beforeUnmount\. Additionally, the editor initialization now explicitly configures the \Color\ and \TextStyle\ extensions to support \ListItem\ types, reflecting changes in how these extensions are packaged and integrated.

demos/src/Examples/Default/Vue · high confidence

The Vue demo components for the TaskItem and TaskList nodes have been updated to be compatible with Vue 3. Specifically, the lifecycle hook \beforeDestroy\ has been replaced with \beforeUnmount\ in the component teardown logic, ensuring proper cleanup of the editor instance in Vue 3 environments.

demos/src/Nodes/TaskItem/Vue, demos/src/Nodes/TaskList/Vue · high confidence

The Dropcursor and Gapcursor Vue demo components have been updated to import their respective extensions from the new @tiptap/extensions package instead of the previous @tiptap/extension-utils. Additionally, the Vue 2-specific beforeDestroy lifecycle hook has been replaced with the Vue 3 beforeUnmount hook to align with the current framework version.

demos/src/Extensions/Dropcursor/Vue, demos/src/Extensions/Gapcursor/Vue · high confidence

The Vue package has been significantly refactored to improve node and mark view stability and performance. A new \VueRenderer\ class manages component lifecycle, preventing errors on multiple destroy calls and blocking updates after teardown. \VueNodeViewRenderer\ now guarantees a valid \contentDOM\ for non-leaf nodes to stop DOM thrashing, and correctly adopts \\<node-view-content as="tbody"\>\ without nesting extra wrapper divs. \VueMarkViewRenderer\ provides robust handling for rapid content changes during IME composition. Additionally, \VueWidgetRenderer\ enables rendering Vue components as decorations with stable keys to preserve local state, and the \Editor\ class now exposes reactive state and storage via debounced refs.

packages/vue · high confidence

The Vue example in the interactivity demos has been refactored to demonstrate TipTap's node view capabilities. It now includes a custom Vue component (Component.vue) and a corresponding TipTap extension (Extension.js) that renders a styled, editable block within the editor. The main demo page (index.vue) initializes the TipTap editor with this new extension, allowing users to see how Vue components can be integrated as interactive nodes in the content.

demos/src/Examples/InteractivityComponentContent/Vue · high confidence

The Vue mention demo has been updated to demonstrate asynchronous suggestion fetching, allowing the suggestion list to load data asynchronously (simulated here with a 300ms delay) while respecting abort signals. The new MentionList component provides visual feedback for this state, displaying a loading indicator while data is being fetched and showing a 'No result' message when the query yields no matches. The demo also includes improved styling for the dropdown menu, selected items, and the mention spans themselves, along with proper cleanup of the floating UI component when the suggestion is dismissed or the editor is unmounted.

demos/src/Nodes/Mention/Vue · high confidence

The Vue table demo has been updated to use the new TableKit extension for configuring table capabilities, replacing the previous individual table extension setup. This change enables resizable columns, indicated by the addition of a column-resize cursor style and the configuration of the table with \resizable: true\. The demo also migrates the Vue lifecycle hook from \beforeDestroy\ to \beforeUnmount\ for compatibility with newer Vue versions.

demos/src/Nodes/Table/Vue · high confidence

The Vue demo for the text-align extension has been updated to demonstrate the new toggle command. Users can now see how to use the \toggleTextAlign\ method to switch alignment states, in addition to the existing set and unset commands. The demo also reflects the migration to Vue 3 lifecycle hooks, using \beforeUnmount\ instead of the deprecated \beforeDestroy\.

demos/src/Extensions/TextAlign/Vue · high confidence

The YouTube extension has been updated to recognize and embed YouTube Live URLs (e.g., /live/\<id\>) and YouTube Shorts URLs (e.g., /shorts/\<id\>) in addition to standard watch links. It also now accepts string values for width and height options (such as '100%' or '20rem'), preserving non-numeric dimensions in the rendered HTML instead of converting them to numbers. These changes are supported by updated URL parsing logic and new test coverage for live, shorts, and playlist URL handling.

packages/extension-youtube · high confidence

The DragHandle component now uses refs to store callback props (onNodeChange, onElementDragStart, etc.) instead of passing them directly into the plugin registration effect. This prevents the drag-and-drop functionality from breaking when callbacks are defined inline or change identity during re-renders, as the plugin is no longer re-registered on every transaction. Additionally, the component now uses useRef for the portal element to ensure stability in React 19's strict mode, avoiding unnecessary unmount/remount cycles that could tear the handle out of the DOM.

packages/extension-drag-handle-react · high confidence

The paragraph extension has been updated to correctly handle empty paragraphs when converting to and from Markdown. Previously, consecutive empty paragraphs might be collapsed or lost during serialization. The extension now uses a non-breaking space marker (&nbsp;) to preserve blank lines in Markdown output, ensuring that empty paragraphs are retained in the document structure. This fix addresses issues where users would lose formatting when copying content to/from Markdown format.

packages/extension-paragraph · high confidence

Added Playwright and Vitest tests for the TextAlign extension; Added Playwright e2e tests for Emoji node navigation and insertion; Added Playwright e2e tests for the Blockquote demo; Added Playwright end-to-end tests for demo applications; Added Playwright tests for the Code mark demo; Added Playwright tests for the OrderedList demo; Added demo and tests for IsolatingClear experiment; Added test helper utilities for Playwright e2e tests; Migrate demo tests to Playwright.

This change introduces the \@tiptap/codemod-v3-to-v4\ package, providing a migration tool to help users update their Vue package imports for the upcoming v4 release. Additionally, the \demos\ package has been updated with new dependencies, including \@lexical/react\ and \lexical\ for Lexical integration, \@shikijs/core\ and \shiki\ for syntax highlighting, and \uuid\ v14, while also upgrading existing packages like \highlight.js\ and \prosemirror\ variants to their latest compatible versions.

(dependencies) · high confidence

A placeholder file (.gitkeep) was added to the demos/src/Dev directory to ensure the folder is tracked in version control, preparing the location for future demonstration content.

demos/src/Dev · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 41 → 57 (+16.5)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.16) — scores are not directly comparable.

• Code Health 82 → 72 (-9.8)
• Architecture 76 (new)
• Maturity 52 → 60 (+8.5)
• Readiness 24 → 46 (+22.1)
• Security 54 → 69 (+14.3)
• Performance 100 (new)

• Dimension evaluation failed
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• …and 67 more

• Boundary-crossing change coupling: bubble-menu-plugin.ts ↔ floating-menu-plugin.ts (packages/extension-bubble-menu/src/bubble-menu-plugin.ts)
• Change coupling clique: Extension.ts, Mark.ts, Node.ts (packages/core/src/Extension.ts)
• Change coupling: BubbleMenu.ts ↔ FloatingMenu.ts (packages/vue/src/menus/BubbleMenu.ts)
• Change coupling: clearContent.ts ↔ setContent.ts (packages/core/src/commands/clearContent.ts)
• Change-coupling hub: table-cell.ts → table-header.ts, table-row.ts, table.ts (packages/extension-table/src/cell/table-cell.ts)
• ClassTooLong: Editor (packages/core/src/Editor.ts)
• Documentation: no installation or build instructions (packages/extension-drag-handle-vue/README.md)
• Documentation: no project overview (packages/extension-drag-handle-vue/README.md)
• Documentation: no usage examples (packages/extension-drag-handle-vue/README.md)
• FileTooLong: src/MarkdownManager.ts (packages/markdown/src/MarkdownManager.ts)
• FunctionTooLong: PasteRule.pasteRulesPlugin (packages/core/src/PasteRule.ts)
• FunctionTooLong: getSchemaByResolvedExtensions.getSchemaByResolvedExtensions (packages/core/src/helpers/getSchemaByResolvedExtensions.ts)
• FunctionTooLong: markdown.renderToMarkdown (packages/static-renderer/src/pm/markdown/markdown.ts)
• FunctionTooLong: state.createSuggestionState (packages/suggestion/src/plugin/state.ts)
• FunctionTooLong: view.createSuggestionView (packages/suggestion/src/plugin/view.ts)
• Further sole-owners (lower concentration)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• High CVE: [GHSA redacted] (pnpm-lock.yaml)
• …and 111 more

• 182 commits — 86 feature/other, 96 fixes

• (repo) — 47 commits
• packages/core — 28 commits
• (root) — 18 commits
• packages/extension-table — 9 commits
• packages/extension-link — 7 commits
• packages/react — 7 commits
• packages/ai-toolkit — 6 commits
• packages/markdown — 6 commits
• skills/tiptap — 5 commits
• packages-deprecated/extension-character-count — 4 commits
• packages/extension-list — 4 commits
• packages/static-renderer — 4 commits
• .changeset/fix-ios-ignore-mutation-contentdom.md — 3 commits
• demos/src — 3 commits
• .changeset/2026-09-16-atom-block-indentation.md — 2 commits
• .changeset/fix-split-list-item-checked-state.md — 2 commits
• .github/workflows — 2 commits
• packages/extension-mathematics — 2 commits
• packages/extension-text-style — 2 commits
• packages/extension-youtube — 2 commits

• fix: Fix/audio demo layout (#8312)
• fix: Merge branch 'main' into fix/omit-default-span-attributes
• fix: Merge branch 'main' into fix/omit-default-span-attributes
• fix: Merge main into fix/ai-toolkit-hash-on-inline-nodes
• fix: Merge main into fix/issue-8294-table-cell-pipe-escape
• fix: Merge pull request #8226 from sainikhiljuluri/fix/ai-toolkit-hash-on-inline-nodes
• fix: Merge pull request #8228 from giaBaoJS/fix/split-list-item-keep-attrs-on-content-half
• fix: Merge pull request #8230 from giaBaoJS/fix/inline-math-lookbehind
• fix: Merge pull request #8266 from lazerg/fix/8265-drop-handler-destroyed-editor
• fix: Merge pull request #8285 from chillerno1/fix/splitblock-stale-cansplit
• fix: Merge pull request #8295 from lazerg/fix/issue-8294-table-cell-pipe-escape
• fix: Merge pull request #8299 from vingt-douze/fix/code-span-backtick-fence
• fix: Merge pull request #8319 from Yahiro025/cursor/fix-table-markdown-separator-8440
• fix: Merge pull request #8322 from Yahiro025/cursor/fix-table-context-menu-selection-6396-13e6
• fix: Merge pull request #8332 from official-burak/fix/join-items-isolating
• fix: Merge pull request #8335 from LukaSikic/fix/space-ends-pasted-link
• fix: Merge pull request #8337 from ueberdosis/arnaugomez/tt-1120-staffbase-bug
• fix: Merge pull request #8354 from ashwinmridul/fix/markdown-hooks-extension-context
• fix: Merge pull request #8358 from HwangRock/fix/decode-numeric-html-entities
• fix: Merge pull request #8370 from mejo-/fix/selection_ignore_mutation
• …and 162 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

ueberdosis/tiptap was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.