separate key handlers into different hooks

Author: raclim

client/modules/IDE/components/ConsoleInput.jsx

@@ -24,75 +24,116 @@ function ConsoleInput({ theme, dispatchConsoleEvent, fontSize }) {
       inputStyle: 'contenteditable'
     });
 
-    cmInstance.current.on('keydown', (cm, e) => {
+    cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`;
+
+    return () => {
+      if (cmInstance.current) {
+        cmInstance.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (cmInstance.current) {
+      cmInstance.current.setOption('theme', `p5-${theme}`);
+      cmInstance.current.getWrapperElement().style[
+        'font-size'
+      ] = `${fontSize}px`;
+      cmInstance.current.refresh();
+    }
+  }, [theme, fontSize]);
+
+  useEffect(() => {
+    const handleEnterKey = (cm, e) => {
       if (e.key === 'Enter' && !e.shiftKey) {
         e.preventDefault();
         e.stopPropagation();
-        const value = cm.getValue();
-        if (value.trim(' ') === '') {
-          return false;
-        }
+
+        const value = cm.getValue().trim();
+        if (value === '') return;
+
         const messages = [
           { log: Encode({ method: 'command', data: [value] }) }
         ];
         const consoleEvent = [{ method: 'command', data: [value] }];
+
         dispatchMessage({
           type: MessageTypes.EXECUTE,
-          payload: {
-            source: 'console',
-            messages
-          }
+          payload: { source: 'console', messages }
         });
+
         dispatchConsoleEvent(consoleEvent);
         cm.setValue('');
         setCommandHistory([value, ...commandHistory]);
         setCommandCursor(-1);
-      } else if (e.key === 'ArrowUp') {
-        const lineNumber = cmInstance.current.getDoc().getCursor().line;
-        if (lineNumber !== 0) {
-          return false;
-        }
+      }
+    };
+
+    if (cmInstance.current) {
+      cmInstance.current.on('keydown', handleEnterKey);
+    }
+
+    return () => {
+      if (cmInstance.current) {
+        cmInstance.current.off('keydown', handleEnterKey);
+      }
+    };
+  }, [commandHistory, dispatchConsoleEvent]);
+
+  useEffect(() => {
+    const handleUpArrowKey = (cm, e) => {
+      if (e.key === 'ArrowUp') {
+        const lineNumber = cm.getDoc().getCursor().line;
+        if (lineNumber !== 0) return;
 
         const newCursor = Math.min(
           commandCursor + 1,
           commandHistory.length - 1
         );
-        cmInstance.current.getDoc().setValue(commandHistory[newCursor] || '');
-        const cursorPos = cmInstance.current.getDoc().getLine(0).length - 1;
-        cmInstance.current.getDoc().setCursor({ line: 0, ch: cursorPos });
+        cm.setValue(commandHistory[newCursor] || '');
+        const cursorPos = cm.current.getDoc().getLine(0).length - 1;
+        cm.getDoc().setCursor({ line: 0, ch: cursorPos });
         setCommandCursor(newCursor);
-      } else if (e.key === 'ArrowDown') {
-        const lineNumber = cmInstance.current.getDoc().getCursor().line;
-        const lineCount = cmInstance.current.getValue().split('\n').length;
-        if (lineNumber + 1 !== lineCount) {
-          return false;
-        }
+      }
+    };
+
+    if (cmInstance.current) {
+      cmInstance.current.on('keydown', handleUpArrowKey);
+    }
+
+    return () => {
+      if (cmInstance.current) {
+        cmInstance.current.off('keydown', handleUpArrowKey);
+      }
+    };
+  }, [commandCursor, commandHistory]);
+
+  useEffect(() => {
+    const handleArrowDownKey = (cm, e) => {
+      if (e.key === 'ArrowDown') {
+        const lineNumber = cm.getDoc().getCursor().line;
+        const lineCount = cm.lineCount();
+        if (lineNumber + 1 !== lineCount) return;
 
         const newCursor = Math.max(commandCursor - 1, -1);
-        cmInstance.current.getDoc().setValue(commandHistory[newCursor] || '');
-        const newLineCount = cmInstance.current.getValue().split('\n').length;
-        const newLine = cmInstance.current.getDoc().getLine(newLineCount);
+        cm.setValue(commandHistory[newCursor] || '');
+        const newLine = cm.getDoc().getLine(lineCount - 1);
         const cursorPos = newLine ? newLine.length - 1 : 1;
-        cmInstance.current
-          .getDoc()
-          .setCursor({ line: lineCount, ch: cursorPos });
+        cm.getDoc().setCursor({ line: lineCount - 1, ch: cursorPos });
         setCommandCursor(newCursor);
       }
-      return true;
-    });
+    };
 
-    cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`;
+    if (cmInstance.current) {
+      cmInstance.current.on('keydown', handleArrowDownKey);
+    }
 
     return () => {
-      cmInstance.current = null;
+      if (cmInstance.current) {
+        cmInstance.current.off('keydown', handleArrowDownKey);
+      }
     };
-  }, []);
-
-  useEffect(() => {
-    cmInstance.current.setOption('theme', `p5-${theme}`);
-    cmInstance.current.getWrapperElement().style['font-size'] = `${fontSize}px`;
-    cmInstance.current.refresh();
-  }, [theme, fontSize]);
+  }, [commandCursor, commandHistory]);
 
   return (
     <div className="console__input">