0

Context: I'm trying to create a live editor. So that multiple users can see the changes live. As an editor, I'm using react-quill. And for emitting data, I'm using socket.

Idea:

  • While editing from the client emits the changes.
  • Socket server will receive the changes and emit for all connections.
  • the client will receive the emitted change and show it up on all editor.

Problem: While typing(quickly) on the editor it automatically emitting the content.

Client side:

export const QuillEditor = () => {
  ...
  ...
  const [value, setValue] = useState('');

  socket.on('emittedText', ({ content }) => {
    setValue(content);
  });

  const emitEditorData = (content: any) => {
    socket.emit('editorText', { content: content, id: id });
  };

  return (
    <>
      <ReactQuill
        style={{ height: 300 }}
        placeholder="Type and share..."
        theme="snow"
        value={value}
        onChange={(content, delta, editor) => {
          emitEditorData(content);
        }}
      />
    </>
  );
};

Server side:

// handle socket connections and emits
io.on('connection', function(socket) {
  console.log('a user connected');

  socket.on('editorText', ({ content, id }) => {
    //id for group data store
    editorText[id] = content;
    io.emit('emittedText', { content });
  });
});

Is it a react-quill issue or I'm doing wrong?

LogicalAnt
  • 907
  • 3
  • 12
  • 28
  • `onChange` in React is `oninput` in standard JS, and you put `emitEditorData` there, so yes it will fire after every key pressed. When do you need it to emit the changes? – webketje May 06 '20 at 22:58
  • @Tyblitz thanks for your response. I just wanna emit the content on every keystroke. – LogicalAnt May 06 '20 at 23:03
  • Your problem: "it emits on every keystroke". Your solution: "it should emit on every keystroke". So there is no problem? Or you need a timeout delay? – webketje May 06 '20 at 23:07
  • No, I'm unsure you get it correctly or not. **My problem:** It emits automatically even if I don't type (and it occurs if I type quickly). @Tyblitz – LogicalAnt May 07 '20 at 09:44
  • Try `if (content !== value) setValue(content)` in the on emittedText function – webketje May 07 '20 at 16:33

0 Answers0