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

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    bibliography: {
      insertBibliography: () => ReturnType;
    };
  }
}

export const Bibliography = Node.create({
  name: "bibliography",
  group: "block",
  atom: true,
  draggable: false,
  selectable: true,

  addAttributes() {
    return {
      renderedHtml: { default: "" },
    };
  },

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

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

  addCommands() {
    return {
      insertBibliography:
        () =>
        ({ commands }) => {
          return commands.insertContent({ type: this.name });
        },
    };
  },

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