Add Emoji from emoji picker to react slate

Question

I use Two package slate-react and emoji-mart I want to when choose an Emoji , it puts on my editor.

import React from "react";
import { render } from "react-dom";
import { Editor } from "slate-react";
import { initialValue } from "./initialValue";





// Define our app...
class MyEditor extends React.Component {
    // Set the initial value when the app is first constructed.
    state = {
        value: initialValue
    };

    // On change, update the app's React state with the new editor value.
    onChange = ({ value }) => {
        this.setState({ value });
    };

    onKeyDown = (event, change) => {
        // This used to have stuff in it, but I moved it all to plugins.
    };

    clickMe=()=>{
        this.setState({ value : this.state.value });
    };



    // Render the editor.
    render() {
        return (
            <div>
                <h1 onClick={this.clickMe}>Slate Editor Demo</h1>
                <div style={{ border: "1px solid black", padding: "1em" }}>
                    <Editor
                        value={this.state.value}
                        onChange={this.onChange}
                        onKeyDown={this.onKeyDown}
                        renderNode={this.renderNode}
                        spellCheck={false}
                    />
                </div>
            </div>
        );
    }
}
export default MyEditor;

import React,{useState} from 'react';
import 'emoji-mart/css/emoji-mart.css';
import { Picker } from 'emoji-mart';

function Emoji() {
    const [emoji,setEmoji] = useState(null);
    const addEmoji = (e) => {
        setEmoji(e.native)
    };
    return <Picker onSelect={addEmoji} />
}
export default Emoji;

Answer 1

Try passing the editor ref to picker. Then in Emoji component in addEmoji method, try editorRef.current.InsertText(e.native). After hours of trying to solve this:

const YourTextEditor = props => {
  const editor = createEditor();
  const addEmoji = async emoji => {
    await setTimeout(() => {
    editor.focus();
  }, 100);
  editor.insertText(emoji.native);
};
 return (
    <>
    <Editor
      value={initialValue}
    />
    <Emoji addEmoji={addEmoji} />
    </>
  );
};

const Emoji = props => {
  return (<Picker onSelect={e => props.addEmoji(e)} />);
};