Conversation
…7494) * fix(react): simplify Tiptap component API and separate menu imports - Remove isReady from TiptapContextType, editor is now always available - Move BubbleMenu and FloatingMenu to @tiptap/react/menus entrypoint - Add backwards-compatible instance prop (deprecated in favor of editor) - Add helpful error when useTiptap is used outside provider * Validate editor prop and update demo imports Throw an error in TiptapWrapper when neither editor nor instance is provided. Remove the forced cast and expand the deprecation comment to note upcoming removal. Update demo example imports to use .js/.jsx file extensions. * Remove editor prop from BubbleMenu example
Reverts the Default React demo from using the new <Tiptap> component wrapper back to the traditional useEditor + <EditorContent> pattern with prop drilling. The MenuBar now receives the editor as a prop and uses useEditorState for reactive updates.
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: f7df678 The changes in this PR will be included in the next version bump. This PR includes changesets to release 72 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
This PR merges changes from the develop branch to main, introducing a significant refactoring of the @tiptap/react package's Tiptap component API. The changes simplify the component API by guaranteeing a non-null editor instance from the useTiptap() hook and moving menu components to a separate optional entrypoint.
Changes:
- Simplified
TiptapContextto only provide a non-null editor instance, removing theisReadyflag - Removed
Tiptap.Loading,Tiptap.BubbleMenu, andTiptap.FloatingMenucomponents from the main export - Moved BubbleMenu and FloatingMenu to
@tiptap/react/menusto make floating-ui an optional dependency - Changed the primary prop name from
instancetoeditor(with backwards compatibility forinstance) - Updated workflow configuration to properly configure Slack notifications
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/Tiptap.tsx | Major refactoring of the Tiptap component: simplified context type, removed Loading/BubbleMenu/FloatingMenu components, changed prop naming, and updated all documentation |
| demos/src/Examples/Default/React/index.tsx | Updated to use EditorContent directly instead of Tiptap wrapper, passing editor as prop to MenuBar |
| demos/src/Examples/Default/React/MenuBar.tsx | Refactored from using useTiptap/useTiptapState hooks to receiving editor as prop and using useEditorState directly |
| .github/workflows/publish.yml | Added required webhook and webhook-type parameters to Slack GitHub action configuration |
| .changeset/tiptap-nonnull-editor-calm-blue-sky.md | Changeset documenting the simplified Tiptap component API |
| .changeset/separate-menu-imports-warm-summer-rain.md | Changeset documenting the separation of menu components to optional entrypoint |
| isReady: false, | ||
| get editor(): Editor { | ||
| throw new Error('useTiptap must be used within a <Tiptap> provider') | ||
| }, |
There was a problem hiding this comment.
The context default value uses a getter that throws an error when accessed. This is a good defensive pattern, but it will cause runtime errors during SSR or when components try to access the context before it's provided. Consider documenting this behavior or verifying that all code paths that access the editor handle this appropriately.
Note: This is acceptable if the design decision is to require the <Tiptap> provider for all uses of useTiptap(), but it represents a breaking change from the previous behavior where the context could return null.
| '@tiptap/react': minor | ||
| --- | ||
|
|
||
| Simplified Tiptap component API with guaranteed non-null editor instance from useTiptap hook |
There was a problem hiding this comment.
This PR removes several public APIs (Tiptap.Loading, Tiptap.BubbleMenu, Tiptap.FloatingMenu) and changes the behavior of useTiptap() to return a non-nullable editor. While the instance prop is kept for backwards compatibility, users relying on the removed components will experience breaking changes.
Verify that:
- The removed components were marked as experimental or beta, OR
- This follows the project's versioning policy for deprecations, OR
- This should be a major version bump
The changeset should clearly document what users need to migrate (e.g., how to replace Tiptap.Loading with custom logic, and that menus should now be imported from '@tiptap/react/menus').
| '@tiptap/react': minor | |
| --- | |
| Simplified Tiptap component API with guaranteed non-null editor instance from useTiptap hook | |
| '@tiptap/react': major | |
| --- | |
| This release simplifies the `Tiptap` component API and includes breaking changes: | |
| - `useTiptap()` now returns a non-nullable editor instance. The `instance` prop is still accepted for backwards compatibility, but new code should rely on the hook’s return value instead of checking for `null`. | |
| - The `Tiptap.Loading` component has been removed. Replace it with your own loading logic, for example by conditionally rendering a spinner or placeholder while waiting for the editor to be ready. | |
| - `Tiptap.BubbleMenu` and `Tiptap.FloatingMenu` are no longer exported from `@tiptap/react`. Import menus from `@tiptap/react/menus` instead (for example, `import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus'`). |
| export type TiptapWrapperProps = { | ||
| /** | ||
| * The editor instance to provide to child components. | ||
| * Can be null during SSR or before initialization. | ||
| * Use `useEditor()` to create this instance. | ||
| */ | ||
| editor?: Editor | ||
|
|
||
| /** | ||
| * @deprecated Use `editor` instead. Will be removed in the next major version. | ||
| */ | ||
| instance: Editor | null | ||
| instance?: Editor | ||
|
|
||
| children: ReactNode | ||
| } |
There was a problem hiding this comment.
The editor prop in TiptapWrapperProps is marked as optional (editor?: Editor), but the implementation throws an error if no editor is provided. This creates a mismatch between the TypeScript types and runtime behavior.
Consider making the prop required (editor: Editor) for the primary use case, or better yet, use TypeScript's type system to handle both cases properly with overloads. For example:
// When editor is provided, it's required
export type TiptapWrapperPropsWithEditor = {
editor: Editor
instance?: never
children: ReactNode
}
// When using deprecated instance prop
export type TiptapWrapperPropsWithInstance = {
editor?: never
instance: Editor
children: ReactNode
}
export type TiptapWrapperProps = TiptapWrapperPropsWithEditor | TiptapWrapperPropsWithInstanceThis would provide better type safety and make the API clearer to users.
| import React from 'react' | ||
|
|
||
| import { MenuBar } from './MenuBar.tsx' | ||
| import { MenuBar } from './MenuBar.jsx' |
There was a problem hiding this comment.
The import extension was changed from '.tsx' to '.jsx' but the file 'MenuBar.tsx' has a TypeScript extension. The import should use '.tsx' to match the actual filename, or if you're using TypeScript path resolution that strips extensions, it should use '.js' for compatibility with ESM module resolution.
| import { MenuBar } from './MenuBar.jsx' | |
| import { MenuBar } from './MenuBar.tsx' |
| --- | ||
| '@tiptap/react': minor | ||
| --- | ||
|
|
||
| Simplified Tiptap component API with guaranteed non-null editor instance from useTiptap hook |
There was a problem hiding this comment.
The changeset description is too minimal and doesn't explain the breaking changes or migration path. Users need to know that:
- The
instanceprop is deprecated in favor ofeditor Tiptap.Loading,Tiptap.BubbleMenu, andTiptap.FloatingMenuare removeduseTiptap()now returns a non-null editor (unless SSR with immediatelyRender: false)- BubbleMenu and FloatingMenu should now be imported from '@tiptap/react/menus'
Consider expanding the changeset to explain what users need to change in their code.
| editor?: Editor | ||
|
|
||
| /** | ||
| * @deprecated Use `editor` instead. Will be removed in the next major version. |
There was a problem hiding this comment.
The deprecation of the instance prop is not properly communicated to users via TypeScript. Consider adding a @deprecated JSDoc comment to the instance property in the TiptapWrapperProps type to help IDEs show deprecation warnings to developers.
| * @deprecated Use `editor` instead. Will be removed in the next major version. | |
| * Legacy editor instance prop kept for backwards compatibility. | |
| * | |
| * @deprecated Use the `editor` prop instead. This prop will be removed in the next major version. |
1 participant
No description provided.