Creating a list / todo list does not create a list and instead throws the error "Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0"

[SkullCutter02]

Description

I've created a toolbar button for a list, but whenever I click on it, a list will not be created, and instead the error "Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0" will be thrown. Using NextJS with this library.

Code

const plugins = createPlugins(
  [
    createParagraphPlugin(),
    createParagraphPlugin(),
    createBlockquotePlugin(),
    createCodeBlockPlugin(),
    createHeadingPlugin(),
    createBoldPlugin(),
    createItalicPlugin(),
    createUnderlinePlugin(),
    createStrikethroughPlugin(),
    createCodePlugin(),
    createExitBreakPlugin(),
    createSoftBreakPlugin(),
    createBasicMarksPlugin(),
    createHighlightPlugin(),
    createLinkPlugin(),
    createListPlugin(),
    createTodoListPlugin(),
    createTablePlugin(),
    createImagePlugin(),
  ],
  {
    components: createPlateUI(),
  }
);

return (
    <>
      <Plate
        id={"main"}
        onChange={(val) => setMarkdown(val)}
        plugins={plugins}
        editableProps={{
          spellCheck: false,
          autoFocus: false,
          placeholder: "Type...",
          style: {
            padding: "15px",
          },
        }}
      >
        <HeadingToolbar>
          <ToolbarButtons />
        </HeadingToolbar>
      </Plate>
    </>
  );

/* List toolbar button */
      <ListToolbarButton
        type={getPluginType(editor, ELEMENT_UL)}
        icon={<FormatListBulleted />}
      />
      <ListToolbarButton
        type={getPluginType(editor, ELEMENT_OL)}
        icon={<FormatListNumbered />}
      />

Environment

• slate:
• slate-react:
• browser: firefox

[saenyakorn]

I have the same problem

@udecode/plate: 8.3.1
slate: 0.71.0
slate-react: 0.71.0

[saenyakorn]

I solved the problem!

It's because initialValue of Plate component is [{ children: [{ text: '' }]}] by default.

I just changed my initialValue to [{ type: 'p', children: [{ text: '' }] }] then it works somehow.

here is my code

export const RichTextEditorV2: React.FC<RichTextEditorV2Props> = () => {
  const editableProps = {
    placeholder: 'placeholder',
    style: {
       // styles
    },
  }
  const [debugValue, setDebugValue] = useState<TNode<AnyObject>[] | null>(null)

  return (
    <Plate
      editableProps={editableProps}
      initialValue={[{ type: 'p', children: [{ text: '' }] }]}
      onChange={(newValue) => {
        setDebugValue(newValue)
        // save newValue...
      }}
      plugins={plugins}
    >
      value: {JSON.stringify(debugValue)}
      <Toolbar />
    </Plate>
  )
}

and here is my plugin

import {
  createParagraphPlugin,
  createHeadingPlugin,
  createBlockquotePlugin,
  createListPlugin,
  createBoldPlugin,
  createItalicPlugin,
  createUnderlinePlugin,
  createStrikethroughPlugin,
  createCodePlugin,
  createResetNodePlugin,
  createDeserializeMdPlugin,
  createExitBreakPlugin,
  createSoftBreakPlugin,
  createAutoformatPlugin,
  createPlugins,
  createPlateUI,
  createTodoListPlugin,
} from '@udecode/plate'

import { autoformatOptions } from '../configs/autoformatRules'
import { exitBreakOptions } from '../configs/exitBreakOptions'
import { resetNodeOptions } from '../configs/resetNodeOptions'
import { softBreakOptions } from '../configs/softExitOptions'

export const plugins = createPlugins(
  [
    /** Element */
    createParagraphPlugin(),
    createHeadingPlugin(),
    createBlockquotePlugin(),
    createListPlugin(),
    createTodoListPlugin(),
    /** Mark */
    createBoldPlugin(),
    createItalicPlugin(),
    createUnderlinePlugin(),
    createStrikethroughPlugin(),
    createCodePlugin(),
    /* *Other */
    createDeserializeMdPlugin(),
    createExitBreakPlugin({ options: exitBreakOptions }),
    createResetNodePlugin({ options: resetNodeOptions }),
    createSoftBreakPlugin({ options: softBreakOptions }),
    createAutoformatPlugin({ options: autoformatOptions }),
    // createResetNodePlugin()
  ],
  {
    components: createPlateUI(),
  }
)

Hope my comment will be useful 🙂

[dylans]

fwiw, this isn't somehow, it's a function of the structure/depth of your ast. :)

[linonetwo]

My solution with complex widget:

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}

import { TElement } from '@udecode/plate';
import React, { createRef } from 'react';
import { IParseTreeNode } from 'tiddlywiki';
import { useWidget } from 'tw-react';
import { StyledElementProps } from '@udecode/plate-styled-components';
import { getRootProps } from '@udecode/plate-styled-components';

export interface IWidgetBlockProps {
  element: TElement<{ node: IParseTreeNode }>;
}
export type WidgetBlockElementProps = StyledElementProps<IWidgetBlockProps, {}>;

export function WidgetBlock(props: WidgetBlockElementProps): JSX.Element {
  const { attributes, children, nodeProps, element, editor } = props;
  const widgetContainerRef = createRef<HTMLDivElement>();
  useWidget(element.node, widgetContainerRef);
  const rootProps = getRootProps(props);
  return (
    <div {...attributes} {...rootProps}>
      {children}
      <div style={{ userSelect: 'none' }} contentEditable={false} {...nodeProps} ref={widgetContainerRef} />
    </div>
  );
}

As I tested, you can't put all of these in a single div, otherwise it won't work.