Slate js editor is always the last one (React)

Amir fattahpasand — Sat, 02 Mar 2024 02:51:35 +0000

Hi, Can anyOne help!? my problem is that slate editor is always the last one and I can't add emoji to other editors (1st, 2nd)
⁠❓javascript

import img from './images/julinAva.jpg'
import UserBdInput from './userBdInput'


const todayBirthdays = [
    {name: 'Amir', id: 'amirId', gender: 'male' , img: img},
    {name: 'fatima', id: 'fatimaId', gender: 'female', img: img},
    {name: 'Reza', id: 'RezaId', gender: 'male', img: img},
]


function Birthdays() {

  return (
     <div className='w-[700px] flex flex-col bg-white mx-auto p-3 rounded-[7px]'>
      <h2 className='text-xl font-bold mb-3'>Today Birthdays</h2>

        {todayBirthdays.map((f , i)=>(
         <main key={f.id}>
          <div  className='flex flex-row w-full gap-2'>
              <img src={f.img} alt="" className='w-[60px] h-[60px] rounded-full'/>
              <span className='flex flex-col w-full relative'>
                <h3>{f.name}</h3>
                <UserBdInput userId={f.id} userGender={f.gender}/>
              </span>
          </div>
              {(todayBirthdays.length - 1 > i) && <hr className='w-[95%] mx-auto my-6 h-[2px] bg-gray-400' />}
         </main>

        ))}

    </div>
  )
}

export default Birthdays


import { Transforms, createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
import { BaseEditor, Descendant } from 'slate'
import { ReactEditor } from 'slate-react'
import EmojiBD from './emojiBD'
import { useCallback, useState } from 'react'


type CustomElement = { type: 'paragraph'; children: CustomText[] }
type CustomText = { text: string }

declare module 'slate' {
  interface CustomTypes {
    Editor: BaseEditor & ReactEditor
    Element: CustomElement
    Text: CustomText
  }
}
const initialValue: Descendant[]= [
    {
      type: 'paragraph',
      children: [{ text: '' }]
    }
  ]



function UserBdInput({userId, userGender}) {
       const [editor] = useState(() => withReact(createEditor()))

        function insertText(editor,text: string) {
            if (!text) return;
            Transforms.insertText(editor, text); 
            console.log(editor)
        } 

        const renderElement = useCallback(props => {
            switch (props.element.type) {
              case 'code':
                return <CodeElement {...props} />
              default:
                return <DefaultElement {...props} />
            }
          }, [])

          const CodeElement = props => {
            return (
              <pre {...props.attributes}>
                <code>{props.children}</code>
              </pre>
            )
          }

          const DefaultElement = props => {
            return <p {...props.attributes}>{props.children}</p>
          }


  return (
        <Slate editor={editor} initialValue={initialValue}>
           <Editable renderElement={renderElement} id={userId} placeholder={`Write on ${userGender == 'male' ? 'his' : 'her'} Timeline...`} 
             className={`relative bg-fbBg text-black pr-7 focus:outline-none rounded-[20px] w-full
              p-2 font-semibold text-md text-gray-600`}>
           </Editable>
           <span className={`emojiSpan absolute bottom-3 right-2 z-[10]`}><EmojiBD onAddEmoji={(emj) => { insertText(editor, emj) }} /></span>       

        </Slate>
  )
}

export default UserBdInput

I think the issue is from useState that does not create unique editors for each <Editable

DEV Community: Amir fattahpasand

Slate js editor is always the last one (React)