refactor: extract bubble-menu & floating-menu to own export

demos/src/Examples/Accessibility/React/InsertMenu.tsx

@@ -1,4 +1,5 @@
-import { Editor, FloatingMenu, useEditorState } from '@tiptap/react'
+import { Editor, useEditorState } from '@tiptap/react'
+import { FloatingMenu } from '@tiptap/react/menus'
 import React, { useRef } from 'react'
 
 import { useMenubarNav } from './useMenubarNav.js'

demos/src/Examples/Accessibility/React/TextMenu.tsx

@@ -1,5 +1,6 @@
 import { Selection } from '@tiptap/pm/state'
-import { BubbleMenu, Editor, useEditorState } from '@tiptap/react'
+import { Editor, useEditorState } from '@tiptap/react'
+import { BubbleMenu } from '@tiptap/react/menus'
 import React, { useRef } from 'react'
 
 import { useMenubarNav } from './useMenubarNav.js'

demos/src/Examples/Menus/React/index.jsx

@@ -1,6 +1,7 @@
 import './styles.scss'
 
-import { BubbleMenu, EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 

demos/src/Examples/Menus/Vue/index.vue

@@ -49,7 +49,8 @@
 
 <script>
 import StarterKit from '@tiptap/starter-kit'
-import { BubbleMenu, Editor, EditorContent, FloatingMenu } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
 
 export default {
   components: {

demos/src/Examples/Performance/React/index.jsx

@@ -1,6 +1,7 @@
 import './styles.scss'
 
-import { BubbleMenu, EditorContent, useEditor, useEditorState } from '@tiptap/react'
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react'
+import { BubbleMenu } from '@tiptap/react/menus'
 import StarterKit from '@tiptap/starter-kit'
 import React from 'react'
 

demos/src/Extensions/BubbleMenu/React/index.jsx

@@ -1,6 +1,7 @@
 import './styles.scss'
 
-import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { BubbleMenu } from '@tiptap/react/menus'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 

demos/src/Extensions/BubbleMenu/Vue/index.vue

@@ -31,7 +31,8 @@
 
 <script>
 import StarterKit from '@tiptap/starter-kit'
-import { BubbleMenu, Editor, EditorContent } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { BubbleMenu } from '@tiptap/vue-3/menus'
 
 export default {
   components: {

demos/src/Extensions/CollaborationWithMenus/React/index.jsx

@@ -7,7 +7,8 @@ import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
 import Placeholder from '@tiptap/extension-placeholder'
 import Text from '@tiptap/extension-text'
-import { BubbleMenu, EditorContent, FloatingMenu, useEditor } from '@tiptap/react'
+import { EditorContent, useEditor } from '@tiptap/react'
+import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus'
 import React from 'react'
 import { WebrtcProvider } from 'y-webrtc'
 import * as Y from 'yjs'

demos/src/Extensions/CollaborationWithMenus/Vue/index.vue

@@ -29,7 +29,8 @@ import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
 import Placeholder from '@tiptap/extension-placeholder'
 import Text from '@tiptap/extension-text'
-import { BubbleMenu, Editor, EditorContent, FloatingMenu } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'
 import { WebrtcProvider } from 'y-webrtc'
 import * as Y from 'yjs'
 

demos/src/Extensions/FloatingMenu/React/index.jsx

@@ -1,6 +1,7 @@
 import './styles.scss'
 
-import { EditorContent, FloatingMenu, mergeAttributes, Node, useEditor } from '@tiptap/react'
+import { EditorContent, mergeAttributes, Node, useEditor } from '@tiptap/react'
+import { FloatingMenu } from '@tiptap/react/menus'
 import StarterKit from '@tiptap/starter-kit'
 import React, { useEffect } from 'react'
 

demos/src/Extensions/FloatingMenu/Vue/index.vue

@@ -34,7 +34,8 @@
 
 <script>
 import StarterKit from '@tiptap/starter-kit'
-import { Editor, EditorContent, FloatingMenu } from '@tiptap/vue-3'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import { FloatingMenu } from '@tiptap/vue-3/menus'
 
 export default {
   components: {

demos/vite.config.ts

@@ -22,7 +22,14 @@ const getPackageDependencies = () => {
             replacement: resolve(`../packages/${name}/${subPkgName}/index.ts`),
           })
         })
-      } else if (name === 'extension-text-style' || name === 'extension-table' || name === 'extensions') {
+      } else if (
+        name === 'extension-text-style' ||
+        name === 'extension-table' ||
+        name === 'extensions' ||
+        name === 'react' ||
+        name === 'vue-2' ||
+        name === 'vue-3'
+      ) {
         fg.sync(`../packages/${name}/src/*`, { onlyDirectories: true }).forEach(subName => {
           const subPkgName = subName.replace(`../packages/${name}/src/`, '')
 

packages/react/package.json

@@ -20,6 +20,14 @@
       },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -31,8 +39,6 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.4",
     "@types/use-sync-external-store": "^0.0.6",
     "fast-deep-equal": "^3.1.3",
     "use-sync-external-store": "^1.4.0"
@@ -45,9 +51,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.4"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1",
-    "@tiptap/pm": "^3.0.0-next.1",
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },

packages/react/src/index.ts

@@ -1,7 +1,5 @@
-export * from './BubbleMenu.js'
 export * from './Context.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './ReactNodeViewRenderer.js'

packages/react/src/BubbleMenu.tsx → packages/react/src/menus/BubbleMenu.tsx

@@ -1,9 +1,8 @@
 import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import { useCurrentEditor } from '@tiptap/react'
 import React, { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 
-import { useCurrentEditor } from './Context.js'
-
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
@@ -30,7 +29,7 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       bubbleMenuElement.style.visibility = 'hidden'
       bubbleMenuElement.style.position = 'absolute'
 
-      if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
         return
       }
 

packages/react/src/FloatingMenu.tsx → packages/react/src/menus/FloatingMenu.tsx

@@ -1,9 +1,8 @@
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { useCurrentEditor } from '@tiptap/react'
 import React, { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 
-import { useCurrentEditor } from './Context.js'
-
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
@@ -29,7 +28,7 @@ export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
       floatingMenuElement.style.visibility = 'hidden'
       floatingMenuElement.style.position = 'absolute'
 
-      if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
         return
       }
 

packages/react/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

packages/react/tsup.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  tsconfig: '../../tsconfig.build.json',
-  outDir: 'dist',
-  dts: true,
-  clean: true,
-  sourcemap: true,
-  format: ['esm', 'cjs'],
-})
+export default defineConfig(
+  ['src/index.ts', 'src/menus/index.ts'].map(entry => ({
+    entry: [entry],
+    tsconfig: '../../tsconfig.build.json',
+    outDir: `dist${entry.replace('src', '').split('/').slice(0, -1).join('/')}`,
+    dts: true,
+    sourcemap: true,
+    format: ['esm', 'cjs'],
+    external: [/^[^./]/],
+  })),
+)

packages/vue-2/package.json

@@ -20,6 +20,14 @@
       },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -31,18 +39,20 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.4",
     "vue-ts-types": "1.6.2"
   },
   "devDependencies": {
     "@tiptap/core": "^3.0.0-next.4",
     "@tiptap/pm": "^3.0.0-next.4",
     "vue": "^2.7.16"
   },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.4"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1",
-    "@tiptap/pm": "^3.0.0-next.1",
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
     "vue": "^2.6.0"
   },
   "repository": {

packages/vue-2/src/index.ts

@@ -1,7 +1,5 @@
-export * from './BubbleMenu.js'
 export { Editor } from './Editor.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './VueNodeViewRenderer.js'

packages/vue-2/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

packages/vue-2/tsup.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  tsconfig: '../../tsconfig.build.json',
-  outDir: 'dist',
-  dts: true,
-  clean: true,
-  sourcemap: true,
-  format: ['esm', 'cjs'],
-})
+export default defineConfig(
+  ['src/menus/index.ts', 'src/index.ts'].map(entry => ({
+    entry: [entry],
+    tsconfig: '../../tsconfig.build.json',
+    outDir: `dist${entry.replace('src', '').split('/').slice(0, -1).join('/')}`,
+    dts: true,
+    sourcemap: true,
+    format: ['esm', 'cjs'],
+  })),
+)

packages/vue-3/package.json

@@ -20,6 +20,14 @@
       },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./menus": {
+      "types": {
+        "import": "./dist/menus/index.d.ts",
+        "require": "./dist/menus/index.d.cts"
+      },
+      "import": "./dist/menus/index.js",
+      "require": "./dist/menus/index.cjs"
     }
   },
   "main": "dist/index.cjs",
@@ -30,18 +38,18 @@
     "src",
     "dist"
   ],
-  "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.4"
-  },
   "devDependencies": {
     "@tiptap/core": "^3.0.0-next.4",
     "@tiptap/pm": "^3.0.0-next.4",
     "vue": "^3.5.13"
   },
+  "optionalDependencies": {
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.4"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^3.0.0-next.1",
-    "@tiptap/pm": "^3.0.0-next.1",
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
     "vue": "^3.0.0",
     "@floating-ui/dom": "^1.0.0"
   },

packages/vue-3/src/index.ts

@@ -1,7 +1,5 @@
-export * from './BubbleMenu.js'
 export { Editor } from './Editor.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
 export * from './useEditor.js'

packages/vue-3/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

packages/vue-3/tsup.config.ts

@@ -1,11 +1,12 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig({
-  entry: ['src/index.ts'],
-  tsconfig: '../../tsconfig.build.json',
-  outDir: 'dist',
-  dts: true,
-  clean: true,
-  sourcemap: true,
-  format: ['esm', 'cjs'],
-})
+export default defineConfig(
+  ['src/menus/index.ts', 'src/index.ts'].map(entry => ({
+    entry: [entry],
+    tsconfig: '../../tsconfig.build.json',
+    outDir: `dist${entry.replace('src', '').split('/').slice(0, -1).join('/')}`,
+    dts: true,
+    sourcemap: true,
+    format: ['esm', 'cjs'],
+  })),
+)