从表情符号选择器中添加表情符号以做出反应

Question

我使用两个包 slate-react 和 emoji-mart 我想在选择 Emoji 时，它会放在我的编辑器上。

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

尝试将编辑器引用传递给选择器。然后在 addEmoji 方法中的 Emoji 组件中，尝试 editorRef.current.InsertText(e.native)。经过数小时尝试解决此问题：

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