Display mention extension selection as a custom node

[sebpowell]

Hi there,

I'm using the mentions extension and would like to set it up so that when the user hovers over the username, a popover shows with the user profile.

I'm guessing I would need to somehow create a node view – something like this:

const CustomInlineNode = Node.create({
  name: "customInlineNode",
  group: "inline",
  inline: true,

  parseHTML() {
    return [
      {
        tag: "span",
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ["span", mergeAttributes(HTMLAttributes)];
  },

  addNodeView() {
    return ReactNodeViewRenderer((props) => {
      return (
        <NodeViewWrapper as="span">
          <span>Avatar shows here...</span>
        </NodeViewWrapper>
      );
    });
  },
});

But I'm not sure how I would then go about getting the above to work with the extension? Any help would be greatly appreciated.

[horlah]

@sebpowell Did you find a solution for this?
If yes, please share. Thank you!

[sebpowell]

@horlah – it's been a while since I worked on this, but believe I ended up writing my own implementation (which if memory serves well, was based off of the official extension). I just checked the code, and it looks something like this:

/* EditorSuggestions.plugin.ts */ 
import { ReactRenderer } from "@tiptap/react";
import CommandList from "./EditorSuggestionsItems";
import { PluginKey } from "prosemirror-state";
import { EditorTippy } from "../EditorTippy";
import fuzzysort from "fuzzysort";
import { ITeamMember } from "interfaces/team-member.interface";

const SuggestionPluginKey = new PluginKey("Suggestions");

export const EditorSuggestions = (team: ITeamMember[]) => {
  return {
    pluginKey: SuggestionPluginKey,

    items: ({ query }) => {
      return query.length > 0
        ? fuzzysort.go(query, team, { key: "label" }).map((item) => item.obj)
        : team;
    },

    render: () => {
      let component: ReactRenderer;
      let popup: { destroy: () => void }[];

      return {
        onStart: (props: Record<string, any> | undefined) => {
          component = new ReactRenderer(CommandList, {
            props,
            editor: props?.editor,
          });

          popup = EditorTippy({
            getReferenceClientRect: props?.clientRect,
            content: component.element,
          });
        },

        onUpdate(props: Record<string, any> | undefined) {
          component.updateProps(props);

          (popup[0] as any).setProps({
            getReferenceClientRect: props?.clientRect,
          });
        },

        onKeyDown(props: { event: KeyboardEvent }) {
          if (props.event.key === "Escape") {
            this.onExit();
            return true;
          }

          return (component?.ref as any).onKeyDown(props);
        },

        onExit() {
          if (popup && popup[0]) popup[0]?.destroy();
          if (component) component.destroy();
        },
      };
    },
  };
};

/* EditorSuggestionsInlineRender.tsx */ 
import { cn } from "@/utils/cn";
import { NodeViewContentProps, NodeViewWrapper } from "@tiptap/react";
import { useEffect, useState } from "react";
import { useAppSelector } from "stores";

enum ResourceTypes {
  "EVENT" = "EVENT",
  "USER" = "USER",
  "UNKNOWN" = "UNKNOWN",
}

const getResourceType = (id: string): ResourceTypes => {
  if (id.startsWith("usr_")) return ResourceTypes.USER;

  if (id.startsWith("evt_")) return ResourceTypes.EVENT;

  return ResourceTypes.UNKNOWN;
};

export default (
  props: NodeViewContentProps & {
    node: { attrs: { id: string; label: string } };
  },
) => {
  const [resource, setResource] = useState<{
    id: string;
    label: string;
    type: ResourceTypes;
  } | null>();

  const [, setLoading] = useState(false);

  const resourceType = getResourceType(props.node.attrs.id);

  const { team } = useAppSelector((state) => {
    return state.userTeam;
  });

  useEffect(() => {
    if (resourceType == ResourceTypes.USER) {
      setLoading(true);

      const user = team.find((i) => i.user?.id == props.node.attrs.id);

      if (user?.user) {
        setResource({
          id: user.user.id,
          label: user?.user.name || user?.user.email,
          type: ResourceTypes.USER,
        });
      }
    } else {
      setResource({
        id: props.node.attrs.id,
        label: props.node.attrs.label,
        type: ResourceTypes.UNKNOWN,
      });
    }
  }, []);

  return (
    <NodeViewWrapper className={cn("inline-block rounded-sm px-1")}>
      {resource ? (
        <span contentEditable={false}>{resource.label}</span>
      ) : (
        <span contentEditable={false}>{props.node.attrs.label}</span>
      )}
    </NodeViewWrapper>
  );
};

/* EditorSuggestions/index.tsx */
import { mergeAttributes, Node } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
import { Node as ProseMirrorNode } from "prosemirror-model";
import { PluginKey } from "prosemirror-state";
import Inline from "./EditorSuggestionsInlineRender";
import { ITeamMember } from "@/interfaces/team-member.interface";

export type MentionOptions = {
  HTMLAttributes: Record<string, any>;
  renderLabel: (props: {
    options: MentionOptions;
    node: ProseMirrorNode;
  }) => string;
  suggestion: Omit<SuggestionOptions, "editor">;
};

export const MentionPluginKey = new PluginKey("mention");

export const Mention = Node.create<MentionOptions>({
  name: "mention",

  addOptions() {
    return {
      HTMLAttributes: {},
      renderLabel({ options, node }) {
        return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
      },
      suggestion: {
        char: "@",
        pluginKey: MentionPluginKey,
        command: ({
          editor,
          range,
          props,
        }: {
          editor: any;
          range: any;
          props: ITeamMember;
        }) => {
          // increase range.to by one when the next node is of type "text"
          // and starts with a space character
          const nodeAfter = editor.view.state.selection.$to.nodeAfter;

          const overrideSpace = nodeAfter?.text?.startsWith(" ");

          if (overrideSpace) {
            range.to += 1;
          }

          editor
            .chain()
            .focus()
            .insertContentAt(range, [
              {
                type: this.name,
                attrs: { id: props.user?.id, label: props.user?.name },
              },
              {
                type: "text",
                text: " ",
              },
            ])
            .run();

          window.getSelection()?.collapseToEnd();
        },
        allow: ({ state, range }) => {
          const $from = state.doc.resolve(range.from);
          const type = state.schema.nodes[this.name];
          const allow = !!$from.parent.type.contentMatch.matchType(type);

          return allow;
        },
      },
    };
  },

  group: "inline",

  inline: true,

  selectable: false,

  atom: true,

  addAttributes() {
    return {
      id: {
        default: null,
        parseHTML: (element) => element.getAttribute("data-id"),
        renderHTML: (attributes) => {
          if (!attributes.id) {
            return {};
          }

          return {
            "data-id": attributes.id,
          };
        },
      },

      label: {
        default: null,
        parseHTML: (element) => element.getAttribute("data-label"),
        renderHTML: (attributes) => {
          if (!attributes.label) {
            return {};
          }

          return {
            "data-label": attributes.label,
          };
        },
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: `span[data-type="${this.name}"]`,
      },
    ];
  },

  renderHTML({ node, HTMLAttributes }) {
    return [
      "span",
      mergeAttributes(
        { "data-type": this.name },
        this.options.HTMLAttributes,
        HTMLAttributes
      ),
      this.options.renderLabel({
        options: this.options,
        node,
      }),
    ];
  },

  renderText({ node }) {
    return this.options.renderLabel({
      options: this.options,
      node,
    });
  },

  addKeyboardShortcuts() {
    return {
      Backspace: () =>
        this.editor.commands.command(({ tr, state }) => {
          let isMention = false;
          const { selection } = state;
          const { empty, anchor } = selection;

          if (!empty) {
            return false;
          }

          state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
            if (node.type.name === this.name) {
              isMention = true;
              tr.insertText(
                this.options.suggestion.char || "",
                pos,
                pos + node.nodeSize
              );

              return false;
            }
          });

          return isMention;
        }),
    };
  },

  addProseMirrorPlugins() {
    return [
      Suggestion({
        editor: this.editor,
        ...this.options.suggestion,
      }),
    ];
  },

  addNodeView() {
    /* This is where we use our component defined above */
    return ReactNodeViewRenderer(Inline);
  },
});

/* extensions.ts */
/* This needs to be added to your 'extensions' array in your editor instance */
import { Mention } from "./EditorSuggestions";
Mention.configure({ suggestion: EditorSuggestions(this.options.team) })

Hope that helps – let me know if you have any further questions, and I can try to answer them.