Preview mentions (#5571)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

shared/editor/nodes/Mention.ts

@@ -5,7 +5,8 @@ import {
   NodeType,
   Schema,
 } from "prosemirror-model";
-import { Command, TextSelection } from "prosemirror-state";
+import { Command, Plugin, TextSelection } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
 import { Primitive } from "utility-types";
 import Suggestion from "../extensions/Suggestion";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
@@ -68,6 +69,7 @@ export default class Mention extends Suggestion {
           "data-type": node.attrs.type,
           "data-id": node.attrs.modelId,
           "data-actorId": node.attrs.actorId,
+          "data-url": `mention://${node.attrs.id}/${node.attrs.type}/${node.attrs.modelId}`,
         },
         node.attrs.label,
       ],
@@ -79,6 +81,31 @@ 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("ProseMirror-widget") &&
+                (!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) => {