How to insert a gif in the Slate editor

Question

I have a slate text editor in my app and want to insert gifs using giphy links. I tried adding using the insertNodes function but that just seems to add a new row. I've listed below the functions I use to add gifs;

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

I just used publicly available gif links to make sure I could actually add the gif to the editor. So I'm sure the link or anything else isn't the problem. I've also tried doing this using links from elsewhere without success, so any help would be appreciated.

Also add my render element function below;

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

Finally is my element definition;

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

According to slate documentation: https://docs.slatejs.org /walkthroughs/03-defining-custom-elements

Also this article: How to align text with Slate.js and React?

You need to modify the renderElement callback to display different components based on specific modifiers. For example, if you are working with a code element and want to display it in the editor, typically you would give the Slate node a type attribute with the value code. Then in your renderElement function, the props you pass contain the type to render.

So for your use case you would do the following;

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