如何在 SlateJS 编辑器中注入新元素 DOM

Question

如何将新的反应 component/element 注入 SlateJS 编辑器 DOM?

我想在 SlateJS 编辑器的 DOM 中注入一个新元素，而不是在上方或下方。

大多数 SlateJS 的示例都会转换节点，但它不允许直接注入到 SlateJS DOM。那是在编辑器上下文中。

EG

SlateJS Typing
INJECTED REACT COMPONENT
SlateJS Typing
SlateJS Typing

<div slatejs editor> 
  <div child div>
  // Want to insert a react component here
  <div child div>
</div>

现在，您可以在 SlateJS 编辑器上方或下方添加新的 React 组件，但不能在其中添加。

    <Slate
        editor={editor}
        value={value}
        onChange={value => setValue(value)}>
        // <Tags /> Added component on top of SlateJS Editor
        <Editable
            placeholder="Enter some rich text…"
            spellCheck
            autoFocus
            onKeyDown={event => {
                switch (event.key) {
                    case '/': {
                        event.preventDefault()
                        console.log('/ Command')

                        // How to DOM inject into the current SlateJS component? 
                        ReactDOM.render(<Tags />, ...)
                    }
                }
            }}
        />
        // <Tags /> Added component UNDER SlateJS Editor
    </Slate>,

我目前的解决方案是尝试通过 ReactDOM 注入，但我无法获取实际的 SlateJS 组件，因为我无法设置 ID，这让 document.query 变得困难。

如何在 SlateJS 中注入新的 React 组件 dom？

Answer 1

最后，我将React组件注入到Elements中的H1div中。虽然，这个方法有问题。

也就是说，除了以下修改的元素外，保持 Rich Text 示例中的所有内容相同。

Rich Text Example Line

const Element = ({ attributes, children, element }) => {
  const style = { textAlign: element.align }
  switch (element.type) {
    case 'heading-one':
      return (
        <h1 style={style} {...attributes}>
          {children}
          // Just inserted the react component in the h1 div
          // Easiest way, but causes a bunch of slate errors when trying
          // to click the react component line
          <REACT_COMPONENT />
        </h1>
      )
    default:
      return (
        <p style={style} {...attributes}>
          {children}
        </p>
      )
  }
}

如何在 SlateJS 编辑器中注入新元素 DOM

How to Inject new element in SlateJS Editor DOM

javascript

reactjs

slatejs