Add Tooltip editor

package.json

@@ -11,25 +11,14 @@
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.0.7",
     "@iconify/json": "^2.2.40",
-    "@milkdown/core": "^7.1.0",
-    "@milkdown/ctx": "^7.1.0",
-    "@milkdown/plugin-block": "^7.1.0",
-    "@milkdown/plugin-clipboard": "^7.1.0",
-    "@milkdown/plugin-cursor": "^7.1.0",
-    "@milkdown/plugin-emoji": "^7.1.0",
-    "@milkdown/plugin-history": "^7.1.0",
-    "@milkdown/plugin-indent": "^7.1.0",
-    "@milkdown/plugin-math": "^7.1.0",
-    "@milkdown/plugin-slash": "^7.1.0",
-    "@milkdown/plugin-tooltip": "^7.1.0",
-    "@milkdown/preset-commonmark": "^7.1.0",
-    "@milkdown/preset-gfm": "^7.1.0",
-    "@milkdown/prose": "^7.1.0",
-    "@milkdown/theme-nord": "^7.1.0",
-    "@milkdown/transformer": "^7.1.0",
-    "@milkdown/utils": "^7.1.0",
-    "@milkdown/vue": "^7.1.0",
     "@prosemirror-adapter/vue": "^0.2.3",
+    "@tiptap/extension-bubble-menu": "2.0.0-beta.220",
+    "@tiptap/extension-character-count": "2.0.0-beta.220",
+    "@tiptap/extension-typography": "2.0.0-beta.220",
+    "@tiptap/pm": "2.0.0-beta.220",
+    "@tiptap/starter-kit": "2.0.0-beta.220",
+    "@tiptap/vue-3": "2.0.0-beta.220",
+    "install": "^0.13.0",
     "masto": "^5.10.0",
     "vue": "^3.2.47"
   },

src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import EditorWrapper from './components/Milkdown/EditroWrapper.vue'
+import Editor from './components/Tiptap/Editor.vue'
 </script>
 
 <template>
-  <EditorWrapper />
+  <Editor />
 </template>

src/components/Tiptap/Editor.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { BubbleMenu, EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Typography from '@tiptap/extension-typography'
+
+const editor = useEditor({
+  content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
+  extensions: [StarterKit, Typography],
+  editable: true,
+  autofocus: true,
+})
+</script>
+
+<template>
+  <div>
+    <BubbleMenu
+      v-if="editor"
+      :editor="editor"
+      :tippy-options="{ duration: 100 }"
+      class="flex text-gray-700 bg-slate-50 rounded-md"
+    >
+      <button
+        class="btn btn-sm btn-ghost"
+        @click="editor?.chain().focus().toggleBold().run()"
+      >
+        bold
+      </button>
+      <button
+        class="btn btn-sm btn-ghost"
+        @click="editor?.chain().focus().toggleItalic().run()"
+      >
+        italic
+      </button>
+      <button
+        class="btn btn-sm btn-ghost"
+        @click="editor?.chain().focus().toggleStrike().run()"
+      >
+        strike
+      </button>
+      <button
+        class="btn btn-sm btn-ghost"
+        @click="editor?.chain().focus().toggleCode().run()"
+      >
+        Code
+      </button>
+      <button
+        class="btn btn-sm btn-ghost"
+        @click="editor?.chain().focus().toggleBlockquote().run()"
+      >
+        Quote
+      </button>
+    </BubbleMenu>
+    <EditorContent :editor="editor" />
+  </div>
+</template>