How to listen to changes (for react controlled component)

v6
1

Is there a way to listen to changes? like input/textareas ‘change’ or ‘input’ events?

Ideally I could pass it here:

    const editor = new EditorView({
      doc: value,
      extensions: [basicSetup, keymap.of([indentWithTab]), javascript()],
      // onChange: setValue ??
      parent: ref.current
    });

demo: codemirror6 - CodeSandbox

2

EditorView.updateListener.of(myHandler) is probably what you’re looking for.

1 Like
3

Thanks, almost there

    const view = new EditorView({
      doc: value,
      extensions: [basicSetup, keymap.of([indentWithTab]), javascript()],
      parent: ref.current
    });

    const facet = EditorView.updateListener.of(view)

I don’t know exactly what to do with this facet, no callback props or arg I can see

4

Include it in your array of extensions.

1 Like
5

Perfect

function Editor({ value, onChange }) {
  const ref = useRef();

  useEffect(() => {
    new EditorView({
      doc: value,
      extensions: [
        basicSetup,
        keymap.of([indentWithTab]),
        javascript(),
        EditorView.updateListener.of(({ state }) => {
          onChange({ target: { value: state.doc.text?.join('\n') } });
        })
      ],
      parent: ref.current
    });
  }, []);

  return <div ref={ref} />;
}

I’ll see if I can add a React example PR in your examples, if it’s insteresting

updated demo codemirror6 - CodeSandbox

Fantastic stuff btw, I see you switched to contenteditable

2 Likes
6

Thank you @caub
Your piece of code was a life saver !