Custom InlineContent types

[matthewlipski]

Alongside custom block types, custom InlineContent types would allow for more extensibility within BlockNote. This would allow consumers to implement features like comments and spellcheck.

It would also be worth considering custom marks/styles while working on this issue.

[man-shar]

Is this something that's being worked on actively already? If not, I'd love to try and implement the custom marks support.

[matthewlipski]

We're currently working on fixing the clipboard & HTML/Markdown conversion, so go ahead! I would start by taking a look at the custom blocks API (block.ts for vanilla, ReactBlockSpec.ts for React) and doing something similar for marks/inline nodes, i.e. converting to the TipTap API, storing a schema, typing, etc.

[man-shar]

Great, thanks! Last week, I did end up implementing this as a new Tiptap node like so:

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

export const CustomInlineNode = Node.create({
  name: "custom-inline-node",
  group: "inline",
  inline: true,
  selectable: false,
  atom: true,
  draggable: true,
  addAttributes() {
    return {
      
    };
  },
  parseHTML() {
    return [
      {
        tag: "custom-inline-node",
      },
    ];
  },
  renderHTML({ HTMLAttributes }) {
    return ["custom-inline-node", mergeAttributes(HTMLAttributes)];
  },
  addNodeView() {
    return ReactNodeViewRenderer(CustomInlineNodeView);
  },
});

const editor = useBlockNote({
    ...,
    _tiptapOptions: {
      extensions: [CustomInlineNode],
    },
  });

It seems to work fine. Though my use case was dragging and dropping these nodes from somewhere else into the text. I'm wondering if it's worth adding this as an example somewhere for the time being?

[matthewlipski]

Oh awesome! I guess there are still probably some quirks when converting the node to InlineContent[] or converting to HTML, but good to see that it's not too much hassle to get it working. I think for now it's ok if ppl just get linked to this issue if they ask about custom inline nodes in discord, and make a documentation page once we can make custom inline content types using the BlockNote API rather than using TipTap's.