Comment insérer un gif dans l'éditeur Slate

Question

J'ai un éditeur de texte slate dans mon application et je souhaite insérer des gifs à l'aide de liens giphy. J'ai essayé d'ajouter en utilisant la fonction insertNodes mais cela semble simplement ajouter une nouvelle ligne. J'ai répertorié ci-dessous les fonctions que j'utilise pour ajouter des gifs ;

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

J'ai simplement utilisé des liens gif accessibles au public pour m'assurer de pouvoir réellement ajouter le gif dans l'éditeur. Je suis donc sûr que le lien ou quoi que ce soit d'autre n'est pas le problème. J'ai également essayé de le faire en utilisant des liens provenant d'ailleurs sans succès, donc toute aide serait appréciée.

Ajout également de ma fonction d'élément de rendu ci-dessous ;

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

Enfin, c'est la définition de mon élément ;

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

Selon la documentation de l'ardoise : https://docs.slatejs.org/walkthroughs/03-defining-custom-elements

Aussi cet article : Comment aligner du texte avec Slate.js et React ?

Vous devez modifier le rappel renderElement pour afficher différents composants en fonction de modificateurs spécifiques. Par exemple, si vous travaillez avec un élément de code et que vous souhaitez l'afficher dans l'éditeur, vous attribuez généralement au nœud Slate un attribut type avec une valeur de code. Ensuite, dans votre fonction renderElement, vous transmettez les accessoires contenant le type à restituer.

Donc, pour votre cas d'utilisation, vous feriez ce qui suit :

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>
        )
    }