Adding to custom nodes

[yuvalkarmi]

Hey @amirhhashemi thanks so much for making this.

For some reason, this isn't working on my custom components. For instance, I have this Alert node:

import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';

import AlertComponent from './AlertComponent';

const AlertNode = Node.create({
  name: 'alert',

  group: 'block',

  content: 'inline*',

  atom: false,

  draggable: true,

  selectable: true,

  addAttributes() {
    return {
      type: {
        default: 'info',
      },
    }
  },
  addKeyboardShortcuts() {
    return {}
  },

  parseHTML() {
    return [
      {
        tag: 'alert',
      },
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return [
      'alert',
      mergeAttributes(HTMLAttributes),
      0 // This 0 is a placeholder for the node's content
    ];
  },

  addCommands() {
    return {};
  },

  addNodeView() {
    return ReactNodeViewRenderer(AlertComponent)
  },
})

export default AlertNode;

My actual alert component uses <NodeViewContent /> for the rendering.

I also made sure to include alert it when initializing the plugin:

TextDirection.configure({
    types: ["heading", "paragraph", "alert"],
  }),

Despite this, the text direction does not apply. I'm sure I'm missing something in the implementation.

Could you please shed a bit of light on how to implement the plugin in custom components?

Thanks! Yuval

[yuvalkarmi]

Chiming in here to answer my own question (@amirhhashemi it may still be worth it to add to the documentation):

The plugin works fine in the sense that it adds the dir attribute to the node.

However, the actual custom component implementation must utilize this (duh, in retrospect 🤦‍♀️):

So in my AlertComponent, I added direction: node.attrs.dir to the element styles (I use material UI, so for me I use sx, like this, but obviously set styles as you would for your UI library):

      <Box sx={{
        direction: node.attrs.dir
      }}
            <NodeViewContent />
      </Box>