The following error thrown "Cannot resolve a DOM node from Slate node: {"text":""} " when adding form fields in react-page/slate

[itsme_techie]

I'm trying to add form fields in react-page slate and when i'm trying to add/edit the form fields i'm getting Cannot resolve a DOM node from Slate node: {"text":""} error.

how this can be resolved ?

Code:

import React from 'react';
// import { FormControl, FormControlLabel }  from '@backyard/react';
// import { TextInput } from '@backyard/react/TextInput';
import { ThemeProvider } from '@backyard/react';


import { FormControlLabel,FormLabel,FormControl} from '@material-ui/core';

import TextField from '@material-ui/core/TextField';
import Checkbox from '@material-ui/core/Checkbox';
import Radio from '@material-ui/core/Radio';
import { lazyLoad } from '@react-page/editor';

const TextFieldIcon = lazyLoad(
  () => import('@material-ui/icons/TextFields')
);


// The editor core
import { pluginFactories } from '@react-page/plugins-slate';
export type Field = { 
  name: string;
  //required?: boolean;
  type: 'text' | 'number' | 'checkbox' | 'radio' | 'standard';
  length : string;
  label: string;
  height:string;
  labelPosition : 'end' | 'start' | 'top' | 'bottom';
};

let fieldType : string;
let fieldName : string;
let fieldLength : string;
let isRequired : boolean;
let fieldlabel: string;
let fieldHeight : string;
let position  : 'end' | 'start' | 'top' | 'bottom';
export default pluginFactories.createComponentPlugin<{
    fields: Field[];
  }>({
    Component: (props) => {
      {props.fields.map((field, index) => (
        fieldType =field.type,
        fieldName = field.name ,
        fieldLength = field.length,
        fieldlabel = field.label,
        fieldHeight = field.height,
        position = field.labelPosition
         
        
      ))};
      if(fieldType =="standard") 
      {
        return(
          <FormControlLabel
          control={<TextField name ={fieldName} variant="standard" style={{height:'0.29in',width:fieldLength+'in'}}/>}
          label={fieldlabel}
          labelPlacement={position}
        />
        );
      } else if (fieldType =="text"){
        return(
        
        <FormControlLabel
          control={<TextField variant="outlined" style={{height:'0.29in',width:fieldLength+'px'}}/>}
          label={fieldlabel}
          labelPlacement={position}
        />
       
        );
      } else if(fieldType =="checkbox")
      {
        return (
          <FormControlLabel control={<Checkbox  name ={fieldName} size="small" /> }  label={fieldlabel}  labelPlacement={position}/>
        )
      }
      else if(fieldType =="radio")
      {
        return (
          <FormControlLabel control={<Radio  name ={fieldName} size="small"/>}  label={fieldlabel}  labelPlacement={position}/>
        )
      }
      
        },
    controls: {
      type: 'autoform',
      schema: {
        properties: {
          fields: {
            type: 'array',
            uniforms: {
              addIcon: "Add",
              itemProps: {
                 removeIcon: "Remove"
              }
            },
            
            items: {
              type: 'object',
              properties: {
                type: {
                  type: 'string',
                  enum: ['text', 'number','checkbox','radio','standard'],
                },
                name: {
                  type: 'string',
                },
                length: {
                  type: 'string',
                },
                height: {
                  type: 'string',
                },
                labelPosition: {
                  type: 'string',
                  enum: ['end' , 'start' , 'top' , 'bottom'],
                },
                label: {
                  type: 'string',
                },
              },
            },
          },
        },
        required: ['fields'],
      },
    },
    addHoverButton: false,
    addToolbarButton: true,
    type: 'FormField',
    object: 'inline',
    isVoid: true, // <--- makes it a void plugin
  
    icon: <TextFieldIcon/>,
    label: 'FormField',
  });

[Marco Wettstein]

there are things wrong with your code (e.g. the weird map function and the global let declarations and more), but thats not the problem here.

it seems slate still interacts with the element and expect it to be editable, i'll look into it

[itsme_techie]

yeah, I will look into the code. I've degraded react-page version to 4.5.0 from 4.5.3, from then i dont see any issues. I'm not sure if this is the actual root cause.

[Marco Wettstein]

no, issue is slate. What you can try is that you wrap your rendered fields in a

<span     contentEditable={false}> </span>

have not tried that yet, i thought i avoided this problem with the "void" plugins, but looks like there is still an issue

[itsme_techie]

i will try this. Thank you

[stale]

This issue has been automatically marked as stale because it has not had recent activity 😏. It will be closed if no further activity occurs. Thank you for your contributions! ❤️