refactor: move props to Editor

quake_webapp/quake-board/src/components/concept/ConceptNodeWidget.tsx

@@ -28,14 +28,6 @@ export class ConceptNodeWidget extends React.Component<ConceptNodeWidgetProps,
     };
   }
 
-  setText(value: string) {
-    this.setState({ value })
-  }
-
-  setToggle(toggle: boolean) {
-    this.setState({ toggle })
-  }
-
   render() {
     return (
       <StyledConceptNodeWidget style={ {
@@ -59,19 +51,6 @@ export class ConceptNodeWidget extends React.Component<ConceptNodeWidgetProps,
 
         <StyledNodeColor>
           <Editor />
-          <StyleInputBox
-            value={ this.state.value }
-            onChange={ (event) => {
-              this.setText(event.target.value)
-            } }
-            onKeyDown={ (event) => {
-              if (event.key === 'Enter' || event.key === 'Escape') {
-                this.setToggle(true)
-                event.preventDefault()
-                event.stopPropagation()
-              }
-            } }
-          />
         </StyledNodeColor>
       </StyledConceptNodeWidget>
     );
@@ -106,9 +85,3 @@ const StyledNodeColor = styled.div`
   justify-content: center;
   padding: 2px;
 `
-
-const StyleInputBox = styled.textarea`
-  background: transparent;
-  width: 100%;
-  border: none;
-`

quake_webapp/quake-board/src/components/concept/Editor.tsx

@@ -1,7 +1,40 @@
 import * as React from "react";
+import styled from "styled-components";
+import { useCallback, useState } from "react";
 
-const Editor = () => {
-  return <div>Editor</div>;
+export interface EditorProps {
+  onChange: (value: string) => void;
 }
 
+const Editor = (props: EditorProps) => {
+  const [value, setValue] = useState("text");
+  const [editable, setEditable] = useState(false);
+
+  const onChange = useCallback((event) => {
+    setValue(event.target.value)
+  }, [setValue]);
+
+  const toggleEditable = useCallback((enable: boolean) => {
+    setEditable(enable)
+  }, [setEditable]);
+
+  return <StyleInputBox
+    value={ value }
+    onChange={ onChange }
+    onKeyDown={ (event) => {
+      if (event.key === 'Enter' || event.key === 'Escape') {
+        toggleEditable(true)
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    } }
+  />;
+}
+
+const StyleInputBox = styled.textarea`
+  background: transparent;
+  width: 100%;
+  border: none;
+`
+
 export default Editor;