Added multiline tasks support. Added task saving with enter, new line is inserted by Shift+Enter

src/components/AddTask.tsx

@@ -12,18 +12,19 @@ import {
   close as closeAction,
 } from "../store/slices/uiState";
 import { add } from "../store/slices/todo";
+import { enterHandler } from "../utils";
 
 export const AddTask: React.FC = () => {
   const open = useAppSelector((state) => state.uiState.addBarOpen);
   const dispatch = useAppDispatch();
 
-  const { value, onChange, submit } = useInputValue("", (submitValue) =>
+  const { value, change, submit } = useInputValue("", (submitValue) =>
     dispatch(add(submitValue))
   );
 
   const save = () => {
     submit();
-    onChange("");
+    change("");
     dispatch(closeAction());
   };
 
@@ -58,6 +59,7 @@ export const AddTask: React.FC = () => {
           }}
         />
         <InputBase
+          sx={{ "& .MuiInputBase-inputMultiline": { whiteSpace: "pre-wrap" } }}
           fullWidth
           placeholder="New task"
           autoFocus={open}
@@ -65,7 +67,8 @@ export const AddTask: React.FC = () => {
           onFocus={(e) => {
             e.currentTarget.setSelectionRange(value.length, value.length);
           }}
-          onChange={(e) => onChange(e.currentTarget.value)}
+          onChange={(e) => change(e.currentTarget.value)}
+          onKeyDown={enterHandler(save)}
           multiline
         />
         <Box sx={{ paddingTop: (theme) => theme.spacing(1) }}>

src/components/TodoItem.tsx

@@ -11,6 +11,7 @@ import DeleteOutlined from "@mui/icons-material/DeleteOutlined";
 import { TaskItemT } from "../types";
 import { useAppDispatch, useInputValue } from "../hooks";
 import { updateText, markDone, remove } from "../store/slices/todo";
+import { enterHandler } from "../utils";
 
 export type TodoItemProps = { task: TaskItemT; index: number };
 
@@ -20,10 +21,15 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
   const dispatch = useAppDispatch();
 
   const [editing, setEditing] = useState(false);
-  const { value, onChange, submit } = useInputValue(text, (submitValue) =>
+  const { value, change, submit } = useInputValue(text, (submitValue) =>
     dispatch(updateText({ index, text: submitValue }))
   );
 
+  const save = () => {
+    setEditing(false);
+    submit();
+  };
+
   return (
     <ListItem>
       <Checkbox
@@ -39,17 +45,17 @@ export const TodoItem: React.FC<TodoItemProps> = ({ task, index }) => {
           onFocus={(e) => {
             e.currentTarget.setSelectionRange(value.length, value.length);
           }}
-          onChange={(e) => onChange(e.currentTarget.value)}
-          onBlur={() => {
-            setEditing(false);
-            submit();
-          }}
+          onChange={(e) => change(e.currentTarget.value)}
+          onBlur={save}
+          inputProps={{ onKeyDown: (e) => enterHandler(save) }}
           multiline
         />
       ) : (
         <ListItemText
           sx={{
             textDecoration: done ? "line-through" : undefined,
+            whiteSpace: "pre-wrap",
+            overflow: "hidden",
           }}
           onClick={() => setEditing(true)}
           primary={text}