better indentation

4 files changed, 22 insertions, 28 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 9d0f4dc..afa7e08 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
     "d3-scale": "^3.2.1",
     "elliptic": "^6.5.3",
     "file-saver": "^2.0.2",
+    "indent-textarea": "^2.0.2",
     "rc-slider": "^9.2.4",
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.4",
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index bfa3507..3adad92 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -1,9 +1,10 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import CharLimit from './decorators/CharLimit'
 import styled from 'styled-components'
 import FloatingLabel from './decorators/FloatingLabel'
 import Dropdown from 'react-dropdown';
 import { LANGS, THEMES } from './renderers/Code';
+import * as indentation from 'indent-textarea';
 
 const RelPositioning = styled.div`
     position: relative; 
@@ -40,45 +41,31 @@ const TitleInput = (props) => {
     );
 }
 
-const PasteInput = (props) => {
+const PasteInput = ({content, ...props}) => {
     const textInput = useRef(null);
 
-    function 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
-
-            props.insertTabCallback(start, end, () => {
-                textInput.current.focus()
-                textInput.current.selectionStart = textInput.current.selectionEnd + 4
-            })
-        }
-    }
+    useEffect(() => {
+        indentation.watch(textInput.current);
+    }, [textInput])
 
     return (
         <RelPositioning>
             <FloatingLabel
                 label="content"
                 id={props.id}
-                value={props.content} />
+                value={content} />
             <textarea
                 name="content"
                 readOnly={props.readOnly}
                 placeholder="Paste your text here"
-                value={props.content}
+                value={content}
                 id={props.id}
                 ref={textInput}
                 required
                 onChange={props.onChange}
-                onKeyDown={handleKeyDown}
                 className="lt-shadow" />
             <CharLimit
-                content={props.content}
+                content={content}
                 maxLength={props.maxLength} />
         </RelPositioning>
     );
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index f778a05..ff945a0 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -77,15 +77,9 @@ const NewPaste = () =>  {
         }
     }
 
-    function insertTab(start, end, callback) {
-        setContent(content.substring(0, start) + '    ' + content.substring(end))
-        callback()
-    }
-
     function renderPreview() {
         const pasteInput = <PasteInput
             onChange={(e) => { setContent(e.target.value) }}
-            insertTabCallback={insertTab}
             content={content}
             maxLength="100000"
             id="pasteInput" />
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 27c4c85..3d6f2cc 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5697,6 +5697,13 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indent-textarea@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/indent-textarea/-/indent-textarea-2.0.2.tgz#9fc142cb0cf40c1b0320558c017eddb8dd494174"
+  integrity sha512-2E/WQXpCOd3lLJoLPk8QIArLfflZNoGD6udendhbRpRpA+nkIYSNexsY9fpSCjw4poqKfuP51d9ASYucFdjm4Q==
+  dependencies:
+    insert-text-textarea "^2.0.0"
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -5773,6 +5780,11 @@ inquirer@^7.0.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+insert-text-textarea@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/insert-text-textarea/-/insert-text-textarea-2.0.1.tgz#ac3ccbb05b27a1280ca9ea62349c5ef65ba7d4a0"
+  integrity sha512-I4PC8aD1HjD61lqPiAxauv1r6Tc0vPk3BGauZw/oQl+1YnKhStzHOIG0K7peKZgZ7XG0N/OmbR8KMZ5wE0n1tA==
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"