SlateJS React trying to get a textfield to work inside an Element

Question

I have a Slate element that looks like this:

import React, {useState} from 'react'
import "./App.css"

export default function Accordion(props) {

   
  

    

    const [closed, setClosed] = useState(false) //todo eventually fetch starting position from savefile
    const [heightClass, setHeightClass] = useState("")

    const handleToggle = () => {

        if(closed === false){
            setHeightClass("h-0")
        }
        else{
            setHeightClass("")
        }


        setClosed(!closed)
    }

  return (
    <>


        <div {...props.attributes}>

        
            {/* title and button */}
            <div className='flex justify-between '>
                <div className='font-semibold'>
                    <DefaultElement {...props}/> //the title of the accordion
 
                </div>
                <div 
                
                className={`px-2 cursor-pointer font-bold font-mono select-none ${closed ? "rotate-180" : ""}`}
                onClick={() => {
                    handleToggle()
                }}>

                    V
                </div>
            </div>


            {/* ${closed ? "h-0" : ""} */}
            <div className={`rounded border-l px-2 overflow-hidden accordionTransition  `} 
            style={{height: closed ? "0px" : ""}}>
                {props.children} 
            </div>

        </div>
            
            
            
     
    </>
  )
}

const DefaultElement = props => {
    console.log(props)
    return <p {...props.attributes}>
        {props.children}
    </p>
}

Which is used by the Editor in App.js:

      const App = () => {
        const [editor] = useState(() => withReact(createEditor()))
      
        // Define a rendering function based on the element passed to `props`. We use
        // `useCallback` here to memoize the function for subsequent renders.
        const renderElement = useCallback(props => {
          switch (props.element.type) {
            case 'accordion':
              return <Accordion {...props} />
            default:
              return <DefaultElement {...props} />
          }
        }, [])
      
        return (
            <div className='p-5'>
    
                <Slate editor={editor} value={initialValue}>
                    <Editable
                    // Pass in the `renderElement` function.
                    renderElement={renderElement}
                    
                    />
                </Slate>
          </div>
    
        )
      }
            
      const DefaultElement = props => {
        return <span {...props.attributes}>
            {props.children}        
        </span>
      }
    
    export default App;

I'm trying to get the Accordion title to be properly editable and work as Slate intended. Just a a simple textfield. I can't figure out the correct syntax and how i'm supposed to do this.

When i do this, the title and the accordion content (props.children) are the same. I don't understand why.

If i remove the <DefaultElement {...props}/> and just write some text, it throws me this error when i edit it: Uncaught Error: Cannot resolve a Slate point from DOM point: [object Text],4

SlateJS React trying to get a textfield to work inside an Element

0 Answers0