如何在 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

#還有這篇文章：如何對齊文字Sl​​ate.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>
        )
    }