Error while using Component Blocks

[andre-lergier]

While trying out Component Blocks I wanted to use different Form Fields. In the file component-blocks.tsx I have the following code to use a normal text field (fields.text()).

import React from 'react';
import { NotEditable, component, fields } from '@keystone-6/fields-document/component-blocks';

export const componentBlocks = {
  test: component({
    component: ({ text }) => {
      return (
        <div>
          <NotEditable>{text.value}</NotEditable>
        </div>
      );
    },
    label: 'Test',
    props: {
      text: fields.text({ label: 'Label...', defaultValue: 'defaultText' }),
    },
    chromeless: false,
  }),

If I click next to the default placeholder Text (defaultText) I get the following error (see video error-with-text-form-field.mov):

Unhandled Runtime Error
Error: Cannot resolve a Slate point from DOM point: [object HTMLDivElement],0

Sometimes even the whole app crashes (see video error-2-big-crash.mov) showing me the following error:

Unhandled Runtime Error
Error: Cannot resolve a DOM node from Slate node: {"text":""}

https://user-images.githubusercontent.com/9418314/161144253-75a7f5e3-df9c-4321-95cb-42ecb3e0cfa9.mov

https://user-images.githubusercontent.com/9418314/161144286-e0b72c52-84b7-451c-b6a3-3db0affa5e38.mov

[willemmulder]

Yes I have the same problem. Subscribed.

[kutsan]

Sorry to ping you all but is there any solution to this? We're also experiencing the same problem.

[fkrauthan]

Same issue for me as well. Would be great if that could be fixed.

[JoinThisBand]

Based on the discussion on this page I tried adding contentEditable={false} to the parent element, which seems to have fixed the issue. E.g.

<div contentEditable={false}>
    <NotEditable>{text.value}</NotEditable>
</div>

Be interested to know if this works for anyone else? And whether this makes <NotEditable> redundant?

Here's a full example, which throws the same error without contentEditable={false}:

export const componentBlocks = {
  myUrl: component({
    preview: (props) => {
      return (
        <ul contentEditable={false}>
          <li>{props.fields.url.value}</li>
        </ul>
      );
    },
    label: 'Call to action',
    schema: {
      url: fields.text({ label: 'URL', defaultValue: '' })
    },
    chromeless: false,
  })
};