diff --git a/tgui/packages/tgui/interfaces/NtslEditor.js b/tgui/packages/tgui/interfaces/NtslEditor.js index c4847a61a418..7e38752075ba 100644 --- a/tgui/packages/tgui/interfaces/NtslEditor.js +++ b/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 ( {user_name ? -