Bagaimana untuk memasukkan gif dalam editor Slate

Question

Saya mempunyai editor teks batu tulis dalam apl saya dan ingin memasukkan gif menggunakan pautan giphy. Saya cuba menambah menggunakan fungsi insertNodes tetapi itu seolah-olah menambah baris baharu. Saya telah menyenaraikan fungsi yang saya gunakan untuk menambah gif di bawah

function insertImage(editor, url) {
    const element = { type: 'video', url, children: [{ text: '' }] }
    Transforms.insertNodes(editor, element)
  }

Saya baru sahaja menggunakan pautan gif yang tersedia secara umum untuk memastikan saya benar-benar boleh menambahkan gif ke dalam editor. Jadi saya pasti pautan atau apa-apa lagi bukan masalahnya. Saya juga telah mencuba melakukan ini menggunakan pautan dari tempat lain tanpa kejayaan, jadi sebarang bantuan akan dihargai.

Juga menambah fungsi elemen render saya di bawah;

const renderElement = useCallback((props) => <Element {...props} />, []);

Akhir sekali ialah definisi elemen saya;

const Element = ({ attributes, children, element }) => {
  const style = { textAlign: element.align }
  switch (element.type) {
    case "block-quote":
      return (
        <blockquote style={style} {...attributes}>
          {children}
        </blockquote>
      )
    case "bulleted-list":
      return (
        <ul style={style} {...attributes}>
          {children}
        </ul>
      )
    case "heading-one":
      return (
        <h1 style={style} {...attributes}>
          {children}
        </h1>
      )
    case "heading-two":
      return (
        <h2 style={style} {...attributes}>
          {children}
        </h2>
      )
    case "list-item":
      return (
        <li style={style} {...attributes}>
          {children}
        </li>
      )
    case "numbered-list":
      return (
        <ol style={style} {...attributes}>
          {children}
        </ol>
      )
    default:
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      )
  }
}

Answer 1

Mengikut dokumentasi slate: https://docs.slatejs.org/walkthroughs/03-defining-custom-elements

Juga artikel ini: Bagaimana untuk menjajarkan teks dengan Slate.js dan React?

Anda perlu mengubah suai panggil balik renderElement untuk memaparkan komponen berbeza berdasarkan pengubah suai tertentu. Contohnya, jika anda menggunakan elemen kod dan ingin memaparkannya dalam editor, biasanya anda akan memberikan atribut jenis pada nod Slate dengan nilai code. Kemudian dalam fungsi renderElement anda, prop yang anda lalui mengandungi jenis untuk diberikan.

Jadi untuk kes penggunaan anda, anda akan melakukan perkara berikut;

const renderElement = useCallback({ attributes, children, element }) => {
    switch (element.type) {
        case 'video':
        return (
            <div {...attributes} className='video-wrapper'>
                <video src={element.url} className='video' />
            </div>
        )
        default:
        return (
            <p {...attributes}>
                {children}
            </p>
        )
    }