How to insert gifs in slate editor

Question

I have a slate text editor in my app and would like to insert gifs with the use of giphy links. I'm attempting to add with the use of the insertNodes function but that seems to just add a new line. I've listed the function I'm using to add the gif below;

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

I'm just using a publicly available gif link to make sure I can actually add gifs into the editor. So I'm certain that the link or anything else is not the issue. I've also attempted this with links from other places with no luck so I'd appreciate any input on this.

Also adding my render element function below;

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

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

what does your renderElement function look like in your component? — Mark Barton, Jun 16 '23 at 13:27
So the issue is that your Element does have any kind of setup to handle non-text elements. You need to flesh out the renderElement function and listen for specific types in order to provide more unique formatting in the editor. I'll provide an answer — Mark Barton, Jun 16 '23 at 13:32
Looks like you're spot on. I'll need to add a type 'Video' case into my element so that it can account for that case. — Mr.Grease, Jun 16 '23 at 13:33

score 1 · Answer 1 · answered Jun 16 '23 at 13:37

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

And also this SO post: How to align text in Slate.js and React?

You need to modify your renderElement callback to display different components based on a certain modifier. For example, if you are using a code element and you wish to display this in the Editor, usually you will give your Slate node a type property with the value of code. Then in your renderElement function, the props you are passing contains the type that is to be rendered.

So for your use case, you would do something like 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>
        )
    }

How to insert gifs in slate editor

1 Answers1