Upgrade tiptap to version 2

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

js/src/components/Editor/Image.ts

@@ -1,70 +1,32 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { Node } from "tiptap";
 import { UPLOAD_MEDIA } from "@/graphql/upload";
 import apolloProvider from "@/vue-apollo";
 import ApolloClient from "apollo-client";
 import { NormalizedCacheObject } from "apollo-cache-inmemory";
-import { NodeType, NodeSpec } from "prosemirror-model";
-import { EditorState, Plugin, TextSelection } from "prosemirror-state";
-import { DispatchFn } from "tiptap-commands";
+import { Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
+import Image from "@tiptap/extension-image";
 
 /* eslint-disable class-methods-use-this */
 
-export default class Image extends Node {
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  get name() {
-    return "image";
-  }
-
-  get schema(): NodeSpec {
+const CustomImage = Image.extend({
+  name: "image",
+  addAttributes() {
     return {
-      inline: true,
-      attrs: {
-        src: {},
-        alt: {
-          default: null,
-        },
-        title: {
-          default: null,
-        },
-        "data-media-id": {},
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+      "data-media-id": {
+        default: null,
       },
-      group: "inline",
-      draggable: true,
-      parseDOM: [
-        {
-          tag: "img",
-          getAttrs: (dom: any) => ({
-            src: dom.getAttribute("src"),
-            title: dom.getAttribute("title"),
-            alt: dom.getAttribute("alt"),
-            "data-media-id": dom.getAttribute("data-media-id"),
-          }),
-        },
-      ],
-      toDOM: (node: any) => ["img", node.attrs],
     };
-  }
-
-  commands({ type }: { type: NodeType }): any {
-    return (attrs: { [key: string]: string }) => (
-      state: EditorState,
-      dispatch: DispatchFn
-    ) => {
-      const { selection }: { selection: TextSelection } = state;
-      const position = selection.$cursor
-        ? selection.$cursor.pos
-        : selection.$to.pos;
-      const node = type.create(attrs);
-      const transaction = state.tr.insert(position, node);
-      dispatch(transaction);
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  get plugins() {
+  },
+  addProseMirrorPlugins() {
     return [
       new Plugin({
         props: {
@@ -129,5 +91,7 @@ export default class Image extends Node {
         },
       }),
     ];
-  }
-}
+  },
+});
+
+export default CustomImage;

js/src/components/Editor/MaxSize.ts

@@ -1,39 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { Extension, Plugin } from "tiptap";
-
-export default class MaxSize extends Extension {
-  // eslint-disable-next-line class-methods-use-this
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  get name() {
-    return "maxSize";
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  get defaultOptions() {
-    return {
-      maxSize: null,
-    };
-  }
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  get plugins() {
-    return [
-      new Plugin({
-        appendTransaction: (transactions, oldState, newState) => {
-          const max = this.options.maxSize;
-          const oldLength = oldState.doc.content.size;
-          const newLength = newState.doc.content.size;
-
-          if (newLength > max && newLength > oldLength) {
-            const newTr = newState.tr;
-            newTr.insertText("", max + 1, newLength);
-
-            return newTr;
-          }
-        },
-      }),
-    ];
-  }
-}

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;

js/src/components/Editor/MentionList.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="items">
+    <button
+      class="item"
+      :class="{ 'is-selected': index === selectedIndex }"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="selectItem(index)"
+    >
+      {{ item }}
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+
+@Component
+export default class MentionList extends Vue {
+  @Prop({ type: Array, required: true }) items!: Array<any>;
+  @Prop({ type: Function, required: true }) command!: any;
+
+  selectedIndex = 0;
+
+  @Watch("items")
+  watchItems(): void {
+    this.selectedIndex = 0;
+  }
+
+  onKeyDown({ event }: { event: KeyboardEvent }): boolean {
+    if (event.key === "ArrowUp") {
+      this.upHandler();
+      return true;
+    }
+
+    if (event.key === "ArrowDown") {
+      this.downHandler();
+      return true;
+    }
+
+    if (event.key === "Enter") {
+      this.enterHandler();
+      return true;
+    }
+
+    return false;
+  }
+
+  upHandler(): void {
+    this.selectedIndex =
+      (this.selectedIndex + this.items.length - 1) % this.items.length;
+  }
+
+  downHandler(): void {
+    this.selectedIndex = (this.selectedIndex + 1) % this.items.length;
+  }
+
+  enterHandler(): void {
+    this.selectItem(this.selectedIndex);
+  }
+
+  selectItem(index: number): void {
+    const item = this.items[index];
+
+    if (item) {
+      this.command({ id: item });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.items {
+  position: relative;
+  border-radius: 0.25rem;
+  background: white;
+  color: rgba(black, 0.8);
+  overflow: hidden;
+  font-size: 0.9rem;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  padding: 0.2rem 0.5rem;
+
+  &.is-selected,
+  &:hover {
+    color: #a975ff;
+    background: rgba(#a975ff, 0.1);
+  }
+}
+</style>