Why isn't the NodeViewContent inside my interactive node view receiving focus when navigating with the arrow keys?

[nonPr0coder]

I'm following the guide on how to add a content editable in my interactive node view using React.

This view contains an image and a description underneath it on the left side. On the right side is where the user should write. I just want the left side to be ignored, so that when I move the caret with the arrow keys, the displacement goes this way: paragraph -> my node's area for writing -> next paragraph.

The problem occurs when it gets into my component; the caret disappears. If I write, my node view gets replaced by the text I write.

What am I doing wrong?

Node creation:

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

import CustomNode from './ChatBuble'

export default Node.create({

  name: 'chatBuble',

  group: 'block',

  content: '(paragraph|list?)+',

  draggable: true,

  allowGapCursor: false,

  selectable: true,

  atom: true,

  addAttributes() {
    return {
      itemID: {
        default: null,
        isRequired: true
      },
    }
  },

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

  renderHTML({ HTMLAttributes }) {
    return ['chatBuble', mergeAttributes(HTMLAttributes), 0]
  },

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

Component

import React, { ComponentType, useState, useCallback } from "react";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { useDataContext } from "components/app/Context/DataContextManager";
import "./style.scss";

...

const CustomNode: ComponentType<CustomNodeViewProps> = (props) => {
  const { node, updateAttributes } = props;

... 

  return (
    <NodeViewWrapper className="chatBuble react-component-with-content">
      <div className="chatBubleLeft" contentEditable={false} data-drag-handle>
        <img src={selectedCharacterState?.image} alt={itemData.name} />
        <a spellCheck={false}>{itemData.name}</a>
      </div>
      <NodeViewContent className="content" />
    </NodeViewWrapper>
  );
};

export default CustomNode;

[kjfeng]

Did you manage to figure this out? I'm running into a similar issue