How to use plugin's compoent field to add custom node?

[linonetwo]

I'm trying to create a new plugin with custom react component:

import { createPluginFactory } from '@udecode/plate';
import { WidgetBlock } from './WidgetBlock';

export const ELEMENT_WIDGET = 'widget';

export const createWidgetPlugin = createPluginFactory({
  key: ELEMENT_WIDGET,
  type: ELEMENT_WIDGET,
  isLeaf: true,
  component: WidgetBlock,
});

And I'm testing if it works (but not logging anything):

import React from 'react';

export interface IWidgetBlockProps {}
export function WidgetBlock(props: IWidgetBlockProps): JSX.Element {
  // DEBUG: console
  console.log(`props`, props);
  return <div>WidgetBlock</div>;
}

And for data, I return a node like this:

{
    node: {...extraMetaData},
    type: ELEMENT_WIDGET,
    children: [{ text: '' }],
}

But nothing rendered...Only empty text node.

[zbeyens]

There is a mismatch between the node and the plugin: the node is not a leaf

[linonetwo]

Thanks, from the excalidraw example, this will work, not leaf, but element:

export function widget(context: IContext, node: IParseTreeNode): TElement {
  return {
    node,
    type: ELEMENT_WIDGET,
    isElement: true,
    isVoid: true,
    children: [{ text: '' }],
  };
}

export const ELEMENT_WIDGET = 'widget';

export const createWidgetPlugin = createPluginFactory({
  key: ELEMENT_WIDGET,
  type: ELEMENT_WIDGET,
  isElement: true,
  isVoid: true,
  component: WidgetBlock,
});

Element is the "leaf" for rendering any custom, non-slate-editable content.

[linonetwo]

But this will say Error: Cannot resolve a DOM node from Slate node: {"text":""} if I click on the element.

And If I don't pass children: [{ text: '' }], it will say Error: Cannot get the start point in the node at path [6] because it has no start text node.

[linonetwo]

Solution: just follow official slate example https://github.com/ianstormtaylor/slate/blob/d8da50f7610c4f1e8f1abb79b7f05fda261c98c8/site/examples/images.tsx#L98-L106

Use two layers of div, one for attributes, one for userSelect: 'none' and contentEditable={false}

<div {...attributes} {...rootProps}>
      {children}
      <div style={{ userSelect: 'none' }} contentEditable={false} {...nodeProps} ref={widgetContainerRef} />
    </div>

Also posted #1290 (comment)