import { Node, mergeAttributes } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { GlossaryView } from "../GlossaryView";

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    glossary: {
      insertGlossary: (term: string, definition: string) => ReturnType;
    };
  }
}

export const Glossary = Node.create({
  name: "glossary",
  group: "inline",
  inline: true,
  atom: true,

  addAttributes() {
    return {
      term: { default: "" },
      definition: { default: "" },
    };
  },

  parseHTML() {
    return [{ tag: 'span[data-type="glossary"]' }];
  },

  renderHTML({ HTMLAttributes }) {
    return [
      "span",
      mergeAttributes(HTMLAttributes, { "data-type": "glossary" }),
    ];
  },

  addCommands() {
    return {
      insertGlossary:
        (term: string, definition: string) =>
        ({ commands }) => {
          return commands.insertContent({
            type: this.name,
            attrs: { term, definition },
          });
        },
    };
  },

  addNodeView() {
    return ReactNodeViewRenderer(GlossaryView);
  },
});