Добавьте Emoji из Emoji Picker, чтобы отреагировать - PullRequest
Новая
       24

Добавьте Emoji из Emoji Picker, чтобы отреагировать

0 голосов
/ 10 марта 2020

Я использую два пакета slate-react и emoji-mart Я хочу, чтобы при выборе эмодзи он включал мой редактор. 

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;

1 Ответ

1 голос
/ 18 марта 2020

Попробуйте передать ссылку на редактор в сборщик. Затем в компоненте Emoji в методе addEmoji попробуйте 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)} />);
};
...