如何在 Slate 编辑器中插入 gif

Question

我的应用程序中有一个石板文本编辑器，并且想使用 giphy 链接插入 gif。 我尝试使用 insertNodes 函数进行添加，但这似乎只是添加了一个新行。我在下面列出了我用来添加 gif 的函数；

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

我只是使用公开可用的 gif 链接来确保我实际上可以将 gif 添加到编辑器中。所以我确信链接或其他任何东西都不是问题。我也尝试过使用其他地方的链接进行此操作，但没有成功，因此我将不胜感激。

还在下面添加我的渲染元素功能；

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

最后是我的元素定义；

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

根据 slate 文档：https://docs.slatejs.org /walkthroughs/03-defining-custom-elements

还有这篇文章：如何对齐文本Slate.js 和 React？

您需要修改 renderElement 回调以根据特定修饰符显示不同的组件。例如，如果您正在使用代码元素并且希望在编辑器中显示它，通常您将为 Slate 节点提供一个值为 code 的类型属性。然后在您的 renderElement 函数中，您传递的 props 包含要渲染的类型。

因此，对于您的用例，您将执行以下操作；

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