The anatomy of a great product update

Build image resize handles that match your product UI. If you've ever tried to ship a Notion-style editor, you know the pain: the core editing experience can look great… and then resize handles show up that don't match your design system. Tiptap now lets you render your own resize handles in ResizableNodeView via createCustomHandle. What you get: • Full control over markup + styling for each handle direction • Custom positioning (when you provide a custom handle, Tiptap won't apply the default positioning logic) • Cleaner wrapper behavior (no more fighting inline styles with !important) • Handles that appear/disappear with editor.isEditable, so view mode stays clean Use it for corner dots that match your components, larger touch targets on mobile, or richer UX like tooltips and overlays.

TypeScript migrations are where small typing gaps turn into big time sinks. If you're moving a production editor to Tiptap v3, you'll often do the most "Tiptap" thing possible: extend built-in Nodes and Marks to add your own config. Example: • extend Link / Mention • add app-specific config like analyticsEventName, dataTestId, or stricter attribute typing We've shipped a small patch in @tiptap/core that improves TypeScript inference for Node.extend() and Mark.extend(). What changed: • ExtendedConfig is now constrained to extend NodeConfig / MarkConfig • parent node types flow into your extended extension more reliably • fewer manual casts and less "fight the compiler" while iterating This is a type-only improvement with no runtime behavior changes.

Build better drag-and-drop feedback in your editor without wiring extra state through your UI. We shipped a small update to Tiptap's Drag Handle that makes a big difference in polish: drag handles now expose a data-dragging attribute. Why it matters: Drag-and-drop UX usually needs a "dragging" state so you can change styles and avoid accidental interactions (tooltips, menus, click handlers) while a block is moving. Now you can hook into that state directly from the DOM: • data-dragging="false" by default • flips to "true" on dragstart • resets on dragend What you can do with it: • Style active drag with CSS: [data-dragging="true"] { … } • Gate event handlers to prevent mis-clicks during reordering • Write more stable Playwright assertions for "drag started/ended" It's consistent across React, Vue 2, and Vue 3 bindings.

If you build collaboration features, you've seen this bug: A cursor, comment anchor, or decoration is "pinned"… until someone types above it. Then it drifts. We shipped a new way to track positions across transactions in Tiptap: MappablePosition. It wraps a position in an object that can be mapped safely as the document changes. The collaboration extension extends it with Y.js relative positions. What you can do with it: • Track anchors (comments, widgets, selections) through edits • Serialize positions with toJSON() / fromJSON() • Update positions with editor.utils.getUpdatedPosition(position, transaction) • Create them with editor.utils.createMappablePosition(number) This gives you a cleaner API surface for plugins and advanced workflows, especially in real-time collaboration.

Build editors that work for everyone, including right-to-left languages. We just shipped native RTL/LTR text direction support in Tiptap Core. The problem: Most editors treat bidirectional text as an afterthought. You end up with CSS hacks, inconsistent rendering, and frustrated users writing in Arabic, Hebrew, or mixed-language content. What we built: → Global direction control: Set textDirection to 'ltr', 'rtl', or 'auto' for all content → Per-node direction: Apply direction to specific blocks with setTextDirection() command → Native dir attributes: Proper HTML semantics, not CSS workarounds → Auto-detection: Let the browser handle bidirectional text automatically Perfect for: • Knowledge bases serving global teams • Support ticketing with multilingual content • Documentation editors • Any app with users writing in RTL languages

Embed Twitch content directly in your editor, without custom iframe glue. Tiptap now has a new extension: @tiptap/extension-twitch. If your product includes docs, knowledge bases, community posts, or creator workflows, Twitch links usually end up as plain URLs (or a fragile embed hack). With the Twitch extension, you can add rich embeds as a first-class node in your Tiptap setup. What you can build with it: • Embed videos, clips, and live channels • Auto-detect Twitch URLs on paste • Configure playback options like autoplay, muted, and start time • Override options per embed (attribute-level overrides) • Use it in React and Vue demos, with Markdown support for atom blocks Add it when you need it, just like any other Tiptap extension.

FloatingMenu now repositions on transaction, scroll, and resize. If you've built editors inside nested scroll containers or dynamic layouts, you've hit this: the floating menu drifts when the container scrolls or the layout shifts. We added programmatic position updates to FloatingMenu, bringing it to feature parity with BubbleMenu. What you can do now: • Trigger position updates via transaction metadata • Handle scroll in nested containers with scrollTarget • Control update timing with updateDelay and resizeDelay • Build reliable UX in complex app shells One line to force a reposition: editor.commands.updateFloatingMenuPosition() Works in React and Vue. Menu stays anchored where it should, even when your UI moves.

Build collaborative docs without phantom autocomplete. If you've shipped mentions or slash commands in a real-time editor, you've seen it: a remote user types "@" and everyone else gets a suggestion popup. We added a new shouldShow callback to the Tiptap Suggestion utility so you can control when suggestions become active. Use it to: • prevent mention/autocomplete UI from opening for remote users in collaborative docs • gate suggestions to local input only (via transaction) • keep the document content in sync without distracting UI side-effects Example: shouldShow: ({ transaction }) => isChangeOrigin(transaction) If you're building a Notion-like editor, this is a small hook that makes collaboration feel polished.

Build extensions that intercept transactions before they hit editor state. We shipped dispatchTransaction in extensions: a middleware-style hook that gives you control at the transaction layer. What this unlocks: • Validate content before it applies (block external image URLs) • Rewrite transactions on the fly (auto-fix formatting) • Chain multiple handlers with priority ordering • Skip calling next() to block unwanted changes Real use case: enforce that all images come from your CDN. Block the paste, show a message, done. Middleware composition means each extension handles its concern, then passes the transaction along. Priority controls execution order. New in @tiptap/core.