0

如何将新的反应组件/元素注入 SlateJS 编辑器 DOM？

我想在 SlateJS 编辑器的 DOM 中注入一个新元素，而不是高于或低于。

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

例如

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…&quot;
            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 dom 中注入一个新的 react 组件？

4

0 回答 0