From 3eac1ce319a6476bfc7b5c06a8e51b247d4b44b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 1 Apr 2021 15:55:19 +0200
Subject: [PATCH] add floating menu to vue 3 and react

---
 .../Extensions/FloatingMenu/React/index.jsx   | 32 +++++++++------
 packages/react/package.json                   |  1 +
 packages/react/src/FloatingMenu.tsx           | 29 +++++++++++++
 packages/react/src/index.ts                   |  1 +
 packages/vue-2/package.json                   |  1 +
 packages/vue-3/package.json                   |  1 +
 packages/vue-3/src/FloatingMenu.ts            | 41 +++++++++++++++++++
 packages/vue-3/src/index.ts                   |  1 +
 8 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 packages/react/src/FloatingMenu.tsx
 create mode 100644 packages/vue-3/src/FloatingMenu.ts

diff --git a/docs/src/demos/Extensions/FloatingMenu/React/index.jsx b/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
index 01787e1f..d01f0b0e 100644
--- a/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
+++ b/docs/src/demos/Extensions/FloatingMenu/React/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { useEditor, EditorContent, BubbleMenu } from '@tiptap/react'
+import { useEditor, EditorContent, FloatingMenu } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 import './styles.scss'
 
@@ -10,33 +10,39 @@ export default () => {
     ],
     content: `
       <p>
-        Hey, try to select some text here. There will popup a menu for selecting some inline styles. Remember: you have full control about content and styling of this menu.
+        This is an example of a medium-like editor. Enter a new line and some buttons will appear.
       </p>
     `,
   })
 
   return (
     <div style={{ position: 'relative' }}>
-      {editor && <BubbleMenu editor={editor}>
+      {editor && <FloatingMenu editor={editor}>
         <button
-          onClick={() => editor.chain().focus().toggleBold().run()}
-          className={editor.isActive('bold') ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
         >
-          bold
+          h1
         </button>
         <button
-          onClick={() => editor.chain().focus().toggleItalic().run()}
-          className={editor.isActive('italic') ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
         >
-          italic
+          h2
         </button>
         <button
-          onClick={() => editor.chain().focus().toggleCode().run()}
-          className={editor.isActive('code') ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
         >
-          code
+          bullet list
         </button>
-      </BubbleMenu>}
+        <button
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          className={editor.isActive('blockquote') ? 'is-active' : ''}
+        >
+          blockquote
+        </button>
+      </FloatingMenu>}
       <EditorContent editor={editor} />
     </div>
   )
diff --git a/packages/react/package.json b/packages/react/package.json
index 83462c8e..be54f267 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   },
   "devDependencies": {
diff --git a/packages/react/src/FloatingMenu.tsx b/packages/react/src/FloatingMenu.tsx
new file mode 100644
index 00000000..72da7c69
--- /dev/null
+++ b/packages/react/src/FloatingMenu.tsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react'
+import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+
+export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
+  className?: string,
+}
+
+export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
+  const element = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const { editor } = props
+
+    editor.registerPlugin(FloatingMenuPlugin({
+      editor,
+      element: element.current as HTMLElement,
+    }))
+
+    return () => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    }
+  }, [])
+
+  return (
+    <div ref={element} className={props.className}>
+      {props.children}
+    </div>
+  )
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 493cb331..6d1627af 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,6 +1,7 @@
 export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'
diff --git a/packages/vue-2/package.json b/packages/vue-2/package.json
index 52ccccd5..24af09e3 100644
--- a/packages/vue-2/package.json
+++ b/packages/vue-2/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-view": "^1.18.2"
   }
 }
diff --git a/packages/vue-3/package.json b/packages/vue-3/package.json
index 6b7a639a..ad674923 100644
--- a/packages/vue-3/package.json
+++ b/packages/vue-3/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.3",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.0",
     "prosemirror-state": "^1.3.4",
     "prosemirror-view": "^1.18.2",
     "vue": "^3.0.0"
diff --git a/packages/vue-3/src/FloatingMenu.ts b/packages/vue-3/src/FloatingMenu.ts
new file mode 100644
index 00000000..8a93315a
--- /dev/null
+++ b/packages/vue-3/src/FloatingMenu.ts
@@ -0,0 +1,41 @@
+import {
+  h,
+  ref,
+  PropType,
+  onMounted,
+  onBeforeUnmount,
+  defineComponent,
+} from 'vue'
+import {
+  FloatingMenuPlugin,
+  FloatingMenuPluginKey,
+  FloatingMenuPluginProps,
+} from '@tiptap/extension-floating-menu'
+
+export const FloatingMenu = defineComponent({
+  name: 'FloatingMenu',
+
+  props: {
+    editor: {
+      type: Object as PropType<FloatingMenuPluginProps['editor']>,
+      required: true,
+    },
+  },
+
+  setup({ editor }, { slots }) {
+    const root = ref<HTMLElement | null>(null)
+
+    onMounted(() => {
+      editor.registerPlugin(FloatingMenuPlugin({
+        editor,
+        element: root.value as HTMLElement,
+      }))
+    })
+
+    onBeforeUnmount(() => {
+      editor.unregisterPlugin(FloatingMenuPluginKey)
+    })
+
+    return () => h('div', { ref: root }, slots.default?.())
+  },
+})
diff --git a/packages/vue-3/src/index.ts b/packages/vue-3/src/index.ts
index 03030195..2350610a 100644
--- a/packages/vue-3/src/index.ts
+++ b/packages/vue-3/src/index.ts
@@ -2,6 +2,7 @@ export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
 export * from './EditorContent'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'