suren-atoyan / monaco-react

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins
https://monaco-react.surenatoyan.com/
MIT License
3.81k stars 268 forks source link

Event listener on paste is not working #618

Open Shubhamag19 opened 6 months ago

Shubhamag19 commented 6 months ago

Describe the bug

I have used getDomNode to access the DOM node and attached event listener to it. Click event is working but Paste is not.

To Reproduce

I'm attaching code snippet here:

import { useState } from "react";
import Editor from "@monaco-editor/react";

export default function App() {
  const [value, setValue] = useState("");

  const handleMount = (editor) => {
    editor.getDomNode().addEventListener("click", function (e) {
      console.log("clicked");
    });

    editor.getDomNode().addEventListener("paste", function (e) {
      console.log("pasted");
    });
  };

  return (
    <div>
      <Editor
        height="80vh"
        defaultLanguage="html"
        theme="vs-dark"
        onChange={(val) => setValue(val)}
        value={value}
        onMount={handleMount}
        defaultValue={"<div>Hello world</div>"}
      />
    </div>
  );
}

Expected behavior

pasted should have logged just as clicked is getting logged.

Screenshots

image

Additional context

I tried this with react-monaco-editor library and it is working correctly with that.