Makes a local NTSLTextArea class to remove ENTER auto-saving your code

Author: Gboster-0

tgui/packages/tgui/interfaces/NtslEditor.js

@@ -2,6 +2,57 @@ import { useBackend, useLocalState } from '../backend';
 import { Box, Button, Divider, Input, Tabs, TextArea, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
+// NTSLTextArea component start
+// This is literally just TextArea but without ENTER updating anything, for NTSL
+import { toInputValue } from '../components/Input';
+import { KEY_ESCAPE, KEY_TAB } from 'common/keycodes';
+
+class NTSLTextArea extends TextArea {
+  constructor(props) {
+    super(props);
+    const { dontUseTabForIndent = false } = props;
+    this.handleKeyDown = (e) => {
+      const { editing } = this.state;
+      const { onChange, onInput, onEnter, onKey } = this.props;
+      if (e.keyCode === KEY_ESCAPE) {
+        if (this.props.onEscape) {
+          this.props.onEscape(e);
+        }
+        this.setEditing(false);
+        if (this.props.selfClear) {
+          e.target.value = '';
+        } else {
+          e.target.value = toInputValue(this.props.value);
+          e.target.blur();
+        }
+        return;
+      }
+      if (!editing) {
+        this.setEditing(true);
+      }
+      // Custom key handler
+      if (onKey) {
+        onKey(e, e.target.value);
+      }
+      if (!dontUseTabForIndent) {
+        const keyCode = e.keyCode || e.which;
+        if (keyCode === KEY_TAB) {
+          e.preventDefault();
+          const { value, selectionStart, selectionEnd } = e.target;
+          e.target.value =
+            value.substring(0, selectionStart) +
+            '\t' +
+            value.substring(selectionEnd);
+          e.target.selectionEnd = selectionStart + 1;
+          if (onInput) {
+            onInput(e, e.target.value);
+          }
+        }
+      }
+    };
+  }
+}
+// NTSLTextArea component end
 
 export const NtslEditor = (props, context) => {
   // Make sure we don't start larger than 50%/80% of screen width/height.
@@ -34,7 +85,7 @@ const ScriptEditor = (props, context) => {
   return (
     <Box width="100%" height="100%">
       {user_name ?
-        <TextArea
+        <NTSLTextArea
           noborder
           scrollbar
           value={stored_code}