Merge pull request #1 from Anand987/master

Merge branch 'master' of https://github.com/Anand987/deep_learning_pi…

application/frontend/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "bootstrap": "^4.3.1",
+    "draft-js": "^0.11.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

application/frontend/src/App.js

@@ -4,6 +4,7 @@ import "./App.css";
 import Layout from "./components/layout/Layout";
 import HomePage from "./pages/HomePage";
 import ModelPage from "./pages/ModelPage";
+import FileEditor from "./pages/FileEditor";
 
 const App = () => {
   return (
@@ -15,6 +16,9 @@ const App = () => {
         <Route path="/model">
           <ModelPage />
         </Route>
+        <Route path="/tf_config_file_edited">
+          <FileEditor />
+        </Route>
       </Switch>
     </Layout>
   );

application/frontend/src/pages/FileEditor.js

@@ -0,0 +1,41 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { ContentState, convertToRaw, Editor, EditorState } from "draft-js";
+import file from "./hello.txt";
+
+const FileEditor = (props) => {
+  let _contentState = ContentState.createFromText(file);
+  const raw = convertToRaw(_contentState);
+  const [contentState, setContentState] = React.useState(raw);
+
+  const [editorState, setEditorState] = React.useState(
+    EditorState.createWithContent()
+  );
+
+  const editor = React.useRef(null);
+
+  function focusEditor() {
+    editor.current.focus();
+  }
+
+  React.useEffect(() => {
+    focusEditor();
+  }, []);
+
+  return (
+    <div className="container mt-4">
+      <h4 className="mb-4">Config File</h4>
+      <div onClick={focusEditor}>
+        <Editor
+          ref={editor}
+          // editorState={editorState}
+          defaultContentState={contentState}
+          onContentStateChange={setContentState}
+          onChange={(editorState) => setEditorState(editorState)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FileEditor;

application/frontend/src/pages/RichTextEditor.css

@@ -0,0 +1,63 @@
+RichEditor-root {
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: "Georgia", serif;
+  font-size: 14px;
+  padding: 15px;
+}
+
+.RichEditor-editor {
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root,
+.RichEditor-editor .public-DraftEditor-content {
+  margin: 0 -15px -15px;
+  padding: 15px;
+}
+
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 100px;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid #eee;
+  color: #666;
+  font-family: "Hoefler Text", "Georgia", serif;
+  font-style: italic;
+  margin: 16px 0;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  background-color: rgba(0, 0, 0, 0.05);
+  font-family: "Inconsolata", "Menlo", "Consolas", monospace;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.RichEditor-controls {
+  font-family: "Helvetica", sans-serif;
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+}
+
+.RichEditor-styleButton {
+  color: #999;
+  cursor: pointer;
+  margin-right: 16px;
+  padding: 2px 0;
+  display: inline-block;
+}
+
+.RichEditor-activeButton {
+  color: #5890ff;
+}