So fügen Sie ein GIF in den Slate-Editor ein

Question

Ich habe einen Slate-Texteditor in meiner App und möchte GIFs mithilfe von Giphy-Links einfügen. Ich habe versucht, mit der Funktion insertNodes etwas hinzuzufügen, aber das scheint nur eine neue Zeile hinzuzufügen. Ich habe die Funktionen, die ich zum Hinzufügen von GIFs verwende, unten aufgelistet

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

Ich habe nur öffentlich verfügbare GIF-Links verwendet, um sicherzustellen, dass ich das GIF tatsächlich in den Editor einfügen kann. Ich bin mir also sicher, dass der Link oder irgendetwas anderes nicht das Problem ist. Ich habe dies auch über Links von anderen Orten versucht, ohne Erfolg, daher wäre ich für jede Hilfe dankbar.

Außerdem füge ich unten meine Renderelement-Funktion hinzu;

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

Endlich ist meine Elementdefinition;

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