How to inject new react component/element into SlateJS Editor DOM?
I want to inject a new element within the SlateJS editor's DOM, not above or below.
Most of SlateJS's examples would transform nodes, but it doesn't allow for direct injecting into the SlateJS DOM. That is within the editor context.
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>
Right now, you can add a new react component above or under the SlateJS editor, but not within.
<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>,
My current solution is trying to inject via ReactDOM, but I'm having trouble getting the actual SlateJS component, since I can't set the ID, making document.query difficult.
How could I inject a new react component within the SlateJS dom?
In the end, I injected the React component into the H1 div in Elements. Although, this method is buggy.
That is, keep everything the same in the Rich Text example except the elements, modified below.
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>
)
}
}