add tab support

2 files changed, 35 insertions, 0 deletions

diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index 872afd7..08cf3fc 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -43,6 +43,31 @@ class TitleInput extends React.Component {
 }
 
 class PasteInput extends React.Component {
+
+    constructor(props) {
+        super(props)
+
+        this.textArea = React.createRef()
+        this.handleKeyDown = this.handleKeyDown.bind(this)
+    }
+
+    handleKeyDown(e) {
+        if (e.keyCode === 9) { // tab was pressed
+
+            // prevent autofocus on next intput
+            e.preventDefault();
+
+            // get selection start and end
+            const start = e.target.selectionStart
+            const end = e.target.selectionEnd
+
+            this.props.insertTabCallback(start, end)
+
+            // set cursor position to be at start
+            e.target.selectionEnd = end + 4;
+        }
+    }
+
     render() {
         return (
             <RelPositioning>
@@ -58,6 +83,7 @@ class PasteInput extends React.Component {
                     id={this.props.id}
                     required
                     onChange={this.props.onChange}
+                    onKeyDown={this.handleKeyDown}
                     className="lt-shadow" />
                 <CharLimit
                     content={this.props.content}
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index f17c8b4..55e9c93 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -52,6 +52,7 @@ class NewPaste extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.togglePreview = this.togglePreview.bind(this);
         this.renderPreview = this.renderPreview.bind(this);
+        this.insertTab = this.insertTab.bind(this);
         this.ErrorLabel = React.createRef();
     }
 
@@ -101,9 +102,17 @@ class NewPaste extends React.Component {
         }
     }
 
+    insertTab(start, end) {
+        const oldContent = this.state.content
+        this.setState({
+            content: oldContent.substring(0, start) + '    ' + oldContent.substring(end)
+        })
+    }
+
     renderPreview() {
         const pasteInput = <PasteInput
             onChange={this.handleChange}
+            insertTabCallback={this.insertTab}
             content={this.state.content}
             maxLength="100000"
             id="pasteInput" />