How to Prevent <div> Tag from Being Replaced by <p> Tag in Tiptap Editor?

[MuttakinHasib]

I'm encountering an issue in the Tiptap editor where <div> tags are automatically converted to <p> tags upon dropping content into the editor. This behavior disrupts the rendering of tables which are encapsulated within these div tags.

Problem Description:

I have implemented a drag-and-drop (DnD) feature that allows content to be dragged from a sidebar into the editor canvas. The content being dragged is formatted as follows: <div>{(render_table)}</div>. However, once dropped into the editor, the <div> tag is replaced by a <p> tag, resulting in the format <p>{(render_table)}</p>. {(render_table)} is intended to render a table, but the table fails to render properly when it is wrapped within a <p> tag.

Attached DnD Extension Code:

import { Extension } from "@tiptap/core";
import { Plugin } from "prosemirror-state";
import { DOMParser } from "prosemirror-model";

function wrapHtmlInTemplate(value: string): HTMLSpanElement {
  const isTable = value.includes("_Table");

  const element = document.createElement(isTable ? "div" : "span");
  element.innerHTML = `${value.trim()}`;
  return element;
}

export const DnDExtension = Extension.create({
  name: "dnd",
  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          handleDrop(view, event: DragEvent | any): boolean {
            if (!event) return false;

            event.preventDefault();

            const coordinates = view.posAtCoords({
              left: event.clientX,
              top: event.clientY,
            });

            const snippetContent = event.dataTransfer.getData("dnd");

            const parsedContent = DOMParser.fromSchema(
              view.state.schema
            ).parseSlice(wrapHtmlInTemplate(snippetContent));

            console.log(parsedContent.content);

            if (coordinates) {
              const dropTransaction = view.state.tr.insert(
                coordinates.pos,
                parsedContent.content
              );

              dropTransaction.setMeta("isSnippetDropTransaction", true);

              view.dispatch(dropTransaction);
            }

            return false;
          },
        },
      }),
    ];
  },
});

Questions:

1. How can I prevent the Tiptap editor from replacing <div> tags with <p> tags during drag and drop operations?
2. Is there a way to configure the schema or the DnD plugin to maintain the original tag structure?
3. Any suggestions or experiences with similar issues would be greatly appreciated.

Thank you in advance for your help and suggestions!

@philippkuehn