[WEB-65] [EDITOR] Make blog title editable within editor (#374)

* created styled text box for editable titles

* basic graphical functionality of renaming files done. Onto redux integration

* changed cursor to ibeam (text) when hovering over

* removed unused types

* renaming partially working -> updates on dashboard but doesn't persist on immediate refresh of editor

* fixed persistence of changes on reload issue but now it's messing up the back button ;-;

* fixed back button issue by setting replace to true -> Doesn't add to react router history :D

* added code to prevent users from naming their documents with an empty string

---------

Co-authored-by: Josh Ramos <josh.ramos@student.unsw.edu.au>

Author: josh-ramos-22

frontend/src/cse-ui-kit/EditableTitle_textbox/EditableTitle-Styled.tsx

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+
+export const StyledTextBox = styled.input`
+  background: transparent;
+
+  border: none;
+  border-color: transparent;
+
+  
+  padding: 0.5em;
+  
+  font-size: inherit;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  user-select: none;
+  
+  &:hover {
+    cursor: text;
+    color: black;
+    transform: scale(1.04);
+  }
+
+  cursor: pointer;
+`;

frontend/src/cse-ui-kit/EditableTitle_textbox/EditableTitle.tsx

@@ -0,0 +1,15 @@
+import React  from "react";
+import { StyledTextBox } from "./EditableTitle-Styled";
+
+type Props = {
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>
+  value: string
+};
+
+export default function EditableTitle({ onChange, onBlur, value, ...styleProps }: Props) { 
+  return (
+    <StyledTextBox onChange={onChange} onBlur={onBlur} value={value} {...styleProps}/>
+  );
+}
+

frontend/src/cse-ui-kit/EditableTitle_textbox/index.ts

@@ -0,0 +1,3 @@
+import EditableTitle from './EditableTitle';
+
+export default EditableTitle;

frontend/src/packages/editor/index.tsx

@@ -8,6 +8,8 @@ import CreateContentBlock from "src/cse-ui-kit/CreateContentBlock_button";
 import CreateHeadingBlock from "src/cse-ui-kit/CreateHeadingBlock_button";
 import SyncDocument from "src/cse-ui-kit/SyncDocument_button";
 import PublishDocument from "src/cse-ui-kit/PublishDocument_button";
+import EditableTitle from "src/cse-ui-kit/EditableTitle_textbox";
+
 import EditorHeader from "src/deprecated/components/Editor/EditorHeader";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
 
@@ -20,6 +22,12 @@ import CreateCodeBlock from "src/cse-ui-kit/CreateCodeBlock_button ";
 import IconButton from "@mui/material/IconButton";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
+import {
+  RenamePayloadType,
+  renameFileEntityAction,
+} from "src/packages/dashboard/state/folders/actions";
+import { useDispatch } from "react-redux";
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -52,7 +60,34 @@ const EditorPage: FC = () => {
   const [focusedId, setFocusedId] = useState<number>(0);
 
   const state = useLocation().state as LocationState;
-  const filename = state != null ? state.filename : "";
+
+  const [filename, setFilename] = useState<string>(state != null ? state.filename : "");
+
+  const [savedFilename, setSavedFilename] = useState<string>(`${filename}`);
+
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const updateFilename = () => {
+    // No empty names allowed!
+    if (filename == "") {
+      setFilename(savedFilename);
+      
+    } else if (filename !== savedFilename && id !== undefined) {
+      const newPayload: RenamePayloadType = { id, newName: filename };
+      dispatch(renameFileEntityAction(newPayload));
+      
+      // Re-navigate to current page with new file name so that
+      // filename changes are persistent on reloads
+      navigate("/editor/" + id, { 
+        replace: true,
+        state: {
+          filename
+        } 
+      }), [navigate];
+      
+      setSavedFilename(`${filename}`);
+    }
+  }
 
   const updateValues: UpdateCallback = (idx, updatedBlock) => {
     const requiresUpdate = JSON.stringify(blocks[idx]) !== JSON.stringify(updateValues);
@@ -100,16 +135,26 @@ const EditorPage: FC = () => {
     opManager.current?.pushToServer(newCreationOperation(newElement, blocks.length));
   }  
 
-  const navigate = useNavigate();
 
   return (
     <div style={{ height: "100%" }}>
       <EditorHeader>
           <LeftContainer>
-            <IconButton aria-label="back" onClick={() => navigate(-1)} sx={{ 'paddingRight': '20px' }}>
+            <IconButton 
+              aria-label="back"
+              onClick={() => navigate(-1)} 
+              sx={{ 'paddingRight': '20px' }}>
               <ArrowBackIcon fontSize="inherit"/>
             </IconButton>
-            {filename}
+
+            <EditableTitle 
+              value={filename}
+              onChange={(event) => {
+                setFilename(event.target.value)
+              }}
+              onBlur={updateFilename}
+            />
+
           </LeftContainer>
           <ButtonContainer>
             <SyncDocument onClick={() => syncDocument()} />