fix: Refactor hover previews to reduce false positives (#6091)

shared/editor/nodes/Mention.ts

@@ -5,8 +5,7 @@ import {
   NodeType,
   Schema,
 } from "prosemirror-model";
-import { Command, Plugin, TextSelection } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
+import { Command, TextSelection } from "prosemirror-state";
 import { Primitive } from "utility-types";
 import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
@@ -64,7 +63,7 @@ export default class Mention extends Suggestion {
       toDOM: (node) => [
         "span",
         {
-          class: `${node.type.name}`,
+          class: `${node.type.name} use-hover-preview`,
           id: node.attrs.id,
           "data-type": node.attrs.type,
           "data-id": node.attrs.modelId,
@@ -81,31 +80,6 @@ export default class Mention extends Suggestion {
     return [mentionRule];
   }
 
-  get plugins(): Plugin[] {
-    return [
-      new Plugin({
-        props: {
-          handleDOMEvents: {
-            mouseover: (view: EditorView, event: MouseEvent) => {
-              const target = (event.target as HTMLElement)?.closest("span");
-              if (
-                target instanceof HTMLSpanElement &&
-                this.editor.elementRef.current?.contains(target) &&
-                target.className.includes("mention") &&
-                (!view.editable || (view.editable && !view.hasFocus()))
-              ) {
-                if (this.options.onHoverLink) {
-                  return this.options.onHoverLink(target);
-                }
-              }
-              return false;
-            },
-          },
-        },
-      }),
-    ];
-  }
-
   commands({ type }: { type: NodeType; schema: Schema }) {
     return (attrs: Record<string, Primitive>): Command =>
       (state, dispatch) => {

shared/editor/nodes/index.ts

@@ -3,6 +3,7 @@ import ClipboardTextSerializer from "../extensions/ClipboardTextSerializer";
 import DateTime from "../extensions/DateTime";
 import FindAndReplace from "../extensions/FindAndReplace";
 import History from "../extensions/History";
+import HoverPreviews from "../extensions/HoverPreviews";
 import Keys from "../extensions/Keys";
 import MaxLength from "../extensions/MaxLength";
 import PasteHandler from "../extensions/PasteHandler";
@@ -113,6 +114,7 @@ export const richExtensions: Nodes = [
   MathBlock,
   PreventTab,
   FindAndReplace,
+  HoverPreviews,
 ];
 
 /**