uiwjs / react-textarea-code-editor

A simple code editor with syntax highlighting.
https://uiwjs.github.io/react-textarea-code-editor/
MIT License
495 stars 23 forks source link

how to do command enter and preventing enter from being sent to code editor? #144

Open TheBuilderJR opened 1 year ago

TheBuilderJR commented 1 year ago

tried this to no avail

        onKeyDown={(e) => {
          if (e.key == "Enter" && (e.ctrlKey || e.metaKey)) {
            onSubmit(e);
            return false;
          }
        }}
jaywcjlove commented 1 year ago
onKeyDown={(event) => {
+  event.preventDefault();
  console.log(">>>>");
}}

@TheBuilderJR https://codesandbox.io/embed/https-github-com-uiwjs-react-textarea-code-editor-issues-144-4yvoij?fontsize=14&hidenavigation=1&theme=dark

aleda145 commented 1 year ago

I was looking at this package, and got the same issue. Linked codesandbox doesn't work for me (using Firefox/Linux (Pop!)) Enter events will still be sent and be added to the CodeEditor. The same onKeyDown eveent on a normal textarea works as expected though. So might be an issue with how onKeyDown is implemented on the CodeEditor?

jaywcjlove commented 1 year ago

https://github.com/uiwjs/react-textarea-code-editor/blob/dedfb991228e9f6687b33d70b81a6e3de300553e/src/index.tsx#L95-L99

onKeyDown={(event) => {
+  event.preventDefault();
  console.log(">>>>");
+  return true
}}

@aleda145 Maybe it can solve your problem

aleda145 commented 1 year ago

https://github.com/uiwjs/react-textarea-code-editor/blob/dedfb991228e9f6687b33d70b81a6e3de300553e/src/index.tsx#L95-L99

onKeyDown={(event) => {
+  event.preventDefault();
  console.log(">>>>");
+  return true
}}

@aleda145 Maybe it can solve your problem

It doesn't work :/, same problem. Also tried adding event.stopPropagation();, didn't help either. My enter event is still sent to the codeEditor, creating a new line.

The following textArea works as expected for me

<textarea
  onKeyDown={(event) => {
    event.preventDefault();
  }}
></textarea>

Let me know if there anything you want from me to debug this!

Great package, I still use it! :star:

I wanted it to run a SQL query on shift+Enter and not create a new line. But changed to ctrl+space instead, works just as well :smile: !

emptycrown commented 1 year ago

Running into the same issue -- the event cannot be stopped. Any update here?

Haiqi-Wu commented 1 year ago

Same issue.Any update?

jaywcjlove commented 1 year ago

https://github.com/uiwjs/react-textarea-code-editor/blob/dedfb991228e9f6687b33d70b81a6e3de300553e/src/index.tsx#L95-L99

onKeyDown={(event) => {
+  event.preventDefault();
  console.log(">>>>");
+  return true
}}

@aleda145 Maybe it can solve your problem

Maybe I don't understand what it means, haven't solved the problem yet?

@emptycrown @Haiqi-Wu @aleda145