Fix mentions

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

js/package.json

@@ -48,6 +48,7 @@
     "leaflet.locatecontrol": "^0.73.0",
     "lodash": "^4.17.11",
     "ngeohash": "^0.6.3",
+    "p-debounce": "^4.0.0",
     "phoenix": "^1.4.11",
     "register-service-worker": "^1.7.1",
     "tippy.js": "^6.2.3",

js/src/components/Editor.vue

@@ -6,12 +6,15 @@
       id="tiptab-editor"
       :data-actor-id="currentActor && currentActor.id"
     >
-      <div v-if="isDescriptionMode" :editor="editor">
+      <div
-        <div class="menubar bar-is-hidden">
+        class="menubar bar-is-hidden"
+        v-if="isDescriptionMode"
+        :editor="editor"
+      >
         <button
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('bold') }"
-            @click="editor.chain().focus().toggleBold().focus().run()"
+          @click="editor.chain().focus().toggleBold().run()"
           type="button"
         >
           <b-icon icon="format-bold" />
@@ -20,7 +23,7 @@
         <button
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('italic') }"
-            @click="editor.chain().focus().toggleItalic().focus().run()"
+          @click="editor.chain().focus().toggleItalic().run()"
           type="button"
         >
           <b-icon icon="format-italic" />
@@ -29,7 +32,7 @@
         <button
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('underline') }"
-            @click="editor.chain().focus().toggleUnderline().focus().run()"
+          @click="editor.chain().focus().toggleUnderline().run()"
           type="button"
         >
           <b-icon icon="format-underline" />
@@ -39,9 +42,7 @@
           v-if="!isBasicMode"
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-            @click="
+          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
-              editor.chain().focus().toggleHeading({ level: 1 }).focus().run()
-            "
           type="button"
         >
           <b-icon icon="format-header-1" />
@@ -51,9 +52,7 @@
           v-if="!isBasicMode"
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-            @click="
+          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
-              editor.chain().focus().toggleHeading({ level: 2 }).focus().run()
-            "
           type="button"
         >
           <b-icon icon="format-header-2" />
@@ -63,9 +62,7 @@
           v-if="!isBasicMode"
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-            @click="
+          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
-              editor.chain().focus().toggleHeading({ level: 3 }).focus().run()
-            "
           type="button"
         >
           <b-icon icon="format-header-3" />
@@ -102,7 +99,7 @@
           class="menubar__button"
           v-if="!isBasicMode"
           :class="{ 'is-active': editor.isActive('bulletList') }"
-            @click="editor.chain().focus().toggleBulletList().focus().run()"
+          @click="editor.chain().focus().toggleBulletList().run()"
           type="button"
         >
           <b-icon icon="format-list-bulleted" />
@@ -112,7 +109,7 @@
           v-if="!isBasicMode"
           class="menubar__button"
           :class="{ 'is-active': editor.isActive('orderedList') }"
-            @click="editor.chain().focus().toggleOrderedList().focus().run()"
+          @click="editor.chain().focus().toggleOrderedList().run()"
           type="button"
         >
           <b-icon icon="format-list-numbered" />
@@ -146,23 +143,17 @@
           <b-icon icon="redo" />
         </button>
       </div>
-      </div>
 
       <bubble-menu
         v-if="editor && isCommentMode"
+        class="bubble-menu"
         :editor="editor"
-        :keep-in-bounds="true"
+        :tippy-options="{ duration: 100 }"
-        v-slot="{ menu }"
-      >
-        <div
-          class="menububble"
-          :class="{ 'is-active': menu.isActive }"
-          :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
       >
         <button
           class="menububble__button"
           :class="{ 'is-active': editor.isActive('bold') }"
-            @click="editor.chain().focus().toggleBold().focus().run()"
+          @click="editor.chain().focus().toggleBold().run()"
           type="button"
         >
           <b-icon icon="format-bold" />
@@ -172,40 +163,16 @@
         <button
           class="menububble__button"
           :class="{ 'is-active': editor.isActive('italic') }"
-            @click="editor.chain().focus().toggleItalic().focus().run()"
+          @click="editor.chain().focus().toggleItalic().run()"
           type="button"
         >
           <b-icon icon="format-italic" />
           <span class="visually-hidden">{{ $t("Italic") }}</span>
         </button>
-        </div>
       </bubble-menu>
 
       <editor-content class="editor__content" :editor="editor" />
     </div>
-    <div class="suggestion-list" v-show="showSuggestions" ref="suggestions">
-      <template v-if="hasResults">
-        <div
-          v-for="(actor, index) in filteredActors"
-          :key="actor.id"
-          class="media suggestion-list__item"
-          :class="{ 'is-selected': navigatedActorIndex === index }"
-          @click="selectActor(actor)"
-        >
-          <div class="media-left">
-            <figure class="image is-16x16" v-if="actor.avatar">
-              <img :src="actor.avatar.url" alt="" />
-            </figure>
-          </div>
-          <div class="media-content">
-            {{ actor.name }}
-          </div>
-        </div>
-      </template>
-      <div v-else class="suggestion-list__item is-empty">
-        {{ $t("No profiles found") }}
-      </div>
-    </div>
   </div>
 </template>
 
@@ -216,8 +183,6 @@ import { defaultExtensions } from "@tiptap/starter-kit";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
-import tippy, { Instance, sticky } from "tippy.js";
-// import { SEARCH_PERSONS } from "../graphql/search";
 import { Actor, IActor, IPerson } from "../types/actor";
 import CustomImage from "./Editor/Image";
 import { UPLOAD_MEDIA } from "../graphql/upload";
@@ -251,19 +216,6 @@ export default class EditorComponent extends Vue {
 
   editor: Editor | null = null;
 
-  /**
-   * Editor Suggestions
-   */
-  query!: string | null;
-
-  filteredActors: IActor[] = [];
-
-  suggestionRange!: Record<string, unknown> | null;
-
-  navigatedActorIndex = 0;
-
-  popup!: Instance[] | null;
-
   get isDescriptionMode(): boolean {
     return this.mode === "description" || this.isBasicMode;
   }
@@ -276,14 +228,6 @@ export default class EditorComponent extends Vue {
     return this.isBasicMode;
   }
 
-  get hasResults(): boolean {
-    return this.filteredActors.length > 0;
-  }
-
-  get showSuggestions(): boolean {
-    return (this.query || this.hasResults) as boolean;
-  }
-
   get isBasicMode(): boolean {
     return this.mode === "basic";
   }
@@ -312,11 +256,11 @@ export default class EditorComponent extends Vue {
         }),
         ...defaultExtensions(),
       ],
-      onUpdate: ({ editor }) => {
+      content: this.value,
-        this.$emit("input", editor.getHTML());
+      onUpdate: () => {
+        this.$emit("input", this.editor?.getHTML());
       },
     });
-    this.editor.commands.setContent(this.value);
   }
 
   @Watch("value")
@@ -327,8 +271,10 @@ export default class EditorComponent extends Vue {
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  /**
-  showLinkMenu(): Function | undefined {
+   * Show a popup to get the link from the URL
+   */
+  showLinkMenu(): void {
     this.$buefy.dialog.prompt({
       message: this.$t("Enter the link URL") as string,
       inputAttrs: {
@@ -340,106 +286,11 @@ export default class EditorComponent extends Vue {
         this.editor.chain().focus().setLink({ href: value }).run();
       },
     });
-    return undefined;
-  }
-
-  upHandler(): void {
-    this.navigatedActorIndex =
-      (this.navigatedActorIndex + this.filteredActors.length - 1) %
-      this.filteredActors.length;
-  }
-
-  /**
-   * navigate to the next item
-   * if it's the last item, navigate to the first one
-   */
-  downHandler(): void {
-    this.navigatedActorIndex =
-      (this.navigatedActorIndex + 1) % this.filteredActors.length;
-  }
-
-  enterHandler(): void {
-    const actor = this.filteredActors[this.navigatedActorIndex];
-    if (actor) {
-      this.selectActor(actor);
-    }
-  }
-
-  /**
-   * we have to replace our suggestion text with a mention
-   * so it's important to pass also the position of your suggestion text
-   * @param actor IActor
-   */
-  selectActor(actor: IActor): void {
-    const actorModel = new Actor(actor);
-    this.insertMention({
-      range: this.suggestionRange,
-      attrs: {
-        id: actorModel.id,
-        // usernameWithDomain returns with a @ prefix and tiptap adds one itself
-        label: actorModel.usernameWithDomain().substring(1),
-      },
-    });
-    if (!this.editor) return;
-    this.editor.commands.focus();
-  }
-
-  /** We use this to programatically insert an actor mention when creating a reply to comment */
-  replyToComment(comment: IComment): void {
-    if (!comment.actor) return;
-    // const actorModel = new Actor(comment.actor);
-    if (!this.editor) return;
-    // this.editor.commands.mention({
-    //   id: actorModel.id,
-    //   label: actorModel.usernameWithDomain().substring(1),
-    // });
-    this.editor.commands.focus();
-  }
-
-  /**
-   * renders a popup with suggestions
-   * tiptap provides a virtualNode object for using popper.js (or tippy.js) for popups
-   * @param node
-   */
-  renderPopup(node: Element): void {
-    if (this.popup) {
-      return;
-    }
-    this.popup = tippy("#mobilizon", {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      getReferenceClientRect: node.getBoundingClientRect,
-      appendTo: () => document.body,
-      content: this.$refs.suggestions as HTMLElement,
-      trigger: "mouseenter",
-      interactive: true,
-      sticky: true, // make sure position of tippy is updated when content changes
-      plugins: [sticky],
-      showOnCreate: true,
-      theme: "dark",
-      placement: "top-start",
-      inertia: true,
-      duration: [400, 200],
-    }) as Instance[];
-  }
-
-  destroyPopup(): void {
-    if (this.popup) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      this.popup[0].destroy();
-      this.popup = null;
-    }
-    if (this.observer) {
-      this.observer.disconnect();
-    }
   }
 
   /**
    * Show a file prompt, upload picture and insert it into editor
-   * @param command
    */
-  // eslint-disable-next-line @typescript-eslint/ban-types
   async showImagePrompt(): Promise<void> {
     const image = await listenFileUpload();
     try {
@@ -470,14 +321,28 @@ export default class EditorComponent extends Vue {
     }
   }
 
-  beforeDestroy(): void {
+  /**
+   * We use this to programatically insert an actor mention when creating a reply to comment
+   */
+  replyToComment(comment: IComment): void {
+    if (!comment.actor) return;
+    // const actorModel = new Actor(comment.actor);
     if (!this.editor) return;
-    this.destroyPopup();
+    // this.editor.commands.mention({
-    this.editor.destroy();
+    //   id: actorModel.id,
+    //   label: actorModel.usernameWithDomain().substring(1),
+    // });
+    this.editor.commands.focus();
+  }
+
+  beforeDestroy(): void {
+    this.editor?.destroy();
   }
 }
 </script>
 <style lang="scss">
+@import "./Editor/style.scss";
+
 $color-black: #000;
 $color-white: #eee;
 
@@ -550,8 +415,6 @@ $color-white: #eee;
       }
     }
 
-    word-wrap: break-word;
-
     h1 {
       font-size: 2em;
     }
@@ -564,10 +427,6 @@ $color-white: #eee;
       font-size: 1.25em;
     }
 
-    * {
-      caret-color: currentColor;
-    }
-
     ul,
     ol {
       padding-left: 1rem;
@@ -601,58 +460,27 @@ $color-white: #eee;
   }
 }
 
-.menububble {
+.bubble-menu {
-  position: absolute;
   display: flex;
-  z-index: 20;
+  background-color: #0d0d0d;
-  background: $color-black;
+  padding: 0.2rem;
-  border-radius: 5px;
+  border-radius: 0.5rem;
-  padding: 0.3rem;
-  margin-bottom: 0.5rem;
-  transform: translateX(-50%);
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.2s, visibility 0.2s;
 
-  &.is-active {
+  button {
-    opacity: 1;
+    border: none;
-    visibility: visible;
+    background: none;
-  }
+    color: #fff;
-
+    font-size: 0.85rem;
-  &__button {
+    font-weight: 500;
-    display: inline-flex;
+    padding: 0 0.2rem;
-    background: transparent;
+    opacity: 0.6;
-    border: 0;
-    color: $color-white;
-    padding: 0.2rem 0.5rem;
-    margin-right: 0.2rem;
-    border-radius: 3px;
     cursor: pointer;
 
-    &:last-child {
+    &:hover,
-      margin-right: 0;
-    }
-
-    &:hover {
-      background-color: rgba($color-white, 0.1);
-    }
-
     &.is-active {
-      background-color: rgba($color-white, 0.2);
+      opacity: 1;
     }
   }
-
-  &__form {
-    display: flex;
-    align-items: center;
-  }
-
-  &__input {
-    font: inherit;
-    border: none;
-    background: transparent;
-    color: $color-white;
-  }
 }
 
 .suggestion-list {

js/src/components/Editor/Mention.ts

@@ -5,15 +5,12 @@ import MentionList from "./MentionList.vue";
 import ApolloClient from "apollo-client";
 import { NormalizedCacheObject } from "apollo-cache-inmemory";
 import apolloProvider from "@/vue-apollo";
+import { IPerson } from "@/types/actor";
+import pDebounce from "p-debounce";
 
 const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
 
-const mentionOptions: Partial<any> = {
+const fetchItems = async (query: string): Promise<IPerson[]> => {
-  HTMLAttributes: {
-    class: "mention",
-  },
-  suggestion: {
-    items: async (query: string) => {
   const result = await client.query({
     query: SEARCH_PERSONS,
     variables: {
@@ -22,6 +19,20 @@ const mentionOptions: Partial<any> = {
   });
   // TipTap doesn't handle async for onFilter, hence the following line.
   return result.data.searchPersons.elements;
+};
+
+const debouncedFetchItems = pDebounce(fetchItems, 200);
+
+const mentionOptions: Partial<any> = {
+  HTMLAttributes: {
+    class: "mention",
+  },
+  suggestion: {
+    items: async (query: string): Promise<IPerson[]> => {
+      if (query === "") {
+        return [];
+      }
+      return await debouncedFetchItems(query);
     },
     render: () => {
       let component: VueRenderer;
@@ -51,9 +62,10 @@ const mentionOptions: Partial<any> = {
             getReferenceClientRect: props.clientRect,
           });
         },
-        // onKeyDown(props: any) {
+        onKeyDown(props: any) {
-        // return component.ref?.onKeyDown(props);
+          const ref = component.ref as typeof MentionList;
-        // },
+          return ref?.onKeyDown(props);
+        },
         onExit() {
           popup[0].destroy();
           component.destroy();

js/src/components/Editor/MentionList.vue

@@ -7,21 +7,30 @@
       :key="index"
       @click="selectItem(index)"
     >
-      {{ item }}
+      <actor-card :actor="item" />
     </button>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
+import { IPerson } from "@/types/actor";
+import ActorCard from "../../components/Account/ActorCard.vue";
 
-@Component
+@Component({
+  components: {
+    ActorCard,
+  },
+})
 export default class MentionList extends Vue {
-  @Prop({ type: Array, required: true }) items!: Array<any>;
+  @Prop({ type: Array, required: true }) items!: Array<IPerson>;
   @Prop({ type: Function, required: true }) command!: any;
 
   selectedIndex = 0;
 
+  displayName = displayName;
+
   @Watch("items")
   watchItems(): void {
     this.selectedIndex = 0;
@@ -63,7 +72,7 @@ export default class MentionList extends Vue {
     const item = this.items[index];
 
     if (item) {
-      this.command({ id: item });
+      this.command({ id: usernameWithDomain(item) });
     }
   }
 }
@@ -86,12 +95,12 @@ export default class MentionList extends Vue {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.5rem 0.75rem;
 
   &.is-selected,
   &:hover {
-    color: #a975ff;
+    color: $background-color;
-    background: rgba(#a975ff, 0.1);
+    background: rgba($background-color, 0.1);
   }
 }
 </style>

js/src/components/Editor/style.scss

@@ -0,0 +1,58 @@
+/**
+ * From https://www.tiptap.dev/api/editor/#inject-css
+ * https://github.com/ueberdosis/tiptap/blob/main/packages/core/src/style.ts
+ */
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+
+  & [contenteditable="false"] {
+    white-space: normal;
+  }
+  & [contenteditable="false"] [contenteditable="true"] {
+    white-space: pre-wrap;
+  }
+  pre {
+    white-space: pre-wrap;
+  }
+}
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid black;
+    animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+  }
+}
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+.ProseMirror-hideselection * {
+  &::selection {
+    background: transparent;
+  }
+  &::-moz-selection {
+    background: transparent;
+  }
+  caret-color: transparent;
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+.tippy-box[data-animation="fade"][data-state="hidden"] {
+  opacity: 0;
+}

js/src/types/actor/actor.model.ts

@@ -52,9 +52,7 @@ export class Actor implements IActor {
   }
 
   public displayName(): string {
-    return this.name != null && this.name !== ""
+    return displayName(this);
-      ? this.name
-      : this.usernameWithDomain();
   }
 }
 
@@ -68,6 +66,12 @@ export function usernameWithDomain(actor: IActor, force = false): string {
   return actor.preferredUsername;
 }
 
+export function displayName(actor: IActor): string {
+  return actor.name != null && actor.name !== ""
+    ? actor.name
+    : usernameWithDomain(actor);
+}
+
 export function displayNameAndUsername(actor: IActor): string {
   if (actor.name) {
     return `${actor.name} (@${usernameWithDomain(actor)})`;

js/yarn.lock

@@ -9445,6 +9445,11 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
+p-debounce@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-debounce/-/p-debounce-4.0.0.tgz#348e3f44489baa9435cc7d807f17b3bb2fb16b24"
+  integrity sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==
+
 p-each-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"