Upgrade tiptap to version 2

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor/Mention.ts

@@ -0,0 +1,66 @@
+import { SEARCH_PERSONS } from "@/graphql/search";
+import { VueRenderer } from "@tiptap/vue-2";
+import tippy from "tippy.js";
+import MentionList from "./MentionList.vue";
+import ApolloClient from "apollo-client";
+import { NormalizedCacheObject } from "apollo-cache-inmemory";
+import apolloProvider from "@/vue-apollo";
+
+const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+
+const mentionOptions: Partial<any> = {
+  HTMLAttributes: {
+    class: "mention",
+  },
+  suggestion: {
+    items: async (query: string) => {
+      const result = await client.query({
+        query: SEARCH_PERSONS,
+        variables: {
+          searchText: query,
+        },
+      });
+      // TipTap doesn't handle async for onFilter, hence the following line.
+      return result.data.searchPersons.elements;
+    },
+    render: () => {
+      let component: VueRenderer;
+      let popup: any;
+
+      return {
+        onStart: (props: any) => {
+          component = new VueRenderer(MentionList, {
+            parent: this,
+            propsData: props,
+          });
+
+          popup = tippy("body", {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+          });
+        },
+        onUpdate(props: any) {
+          component.updateProps(props);
+
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          });
+        },
+        // onKeyDown(props: any) {
+        // return component.ref?.onKeyDown(props);
+        // },
+        onExit() {
+          popup[0].destroy();
+          component.destroy();
+        },
+      };
+    },
+  },
+};
+
+export default mentionOptions;