fix: auto complete in memo editor (#720)

web/src/components/ArchivedMemo.tsx

@@ -51,7 +51,7 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <div className={`memo-wrapper archived-memo ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
+    <div className={`memo-wrapper archived ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
       <div className="memo-top-wrapper">
         <span className="time-text">
           {t("common.archived-at")} {utils.getDateTimeString(memo.updatedTs)}

web/src/components/Editor/Editor.tsx

@@ -5,6 +5,7 @@ import "../../less/editor.less";
 export interface EditorRefActions {
   focus: FunctionType;
   insertText: (text: string, prefix?: string, suffix?: string) => void;
+  removeText: (start: number, length: number) => void;
   setContent: (text: string) => void;
   getContent: () => string;
   getSelectedContent: () => string;
@@ -67,6 +68,19 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
         handleContentChangeCallback(editorRef.current.value);
         refresh();
       },
+      removeText: (start: number, length: number) => {
+        if (!editorRef.current) {
+          return;
+        }
+
+        const prevValue = editorRef.current.value;
+        const value = prevValue.slice(0, start) + prevValue.slice(start + length);
+        editorRef.current.value = value;
+        editorRef.current.focus();
+        editorRef.current.selectionEnd = start;
+        handleContentChangeCallback(editorRef.current.value);
+        refresh();
+      },
       setContent: (text: string) => {
         if (editorRef.current) {
           editorRef.current.value = text;

web/src/components/MemoEditor.tsx

@@ -1,4 +1,4 @@
-import { toLower } from "lodash";
+import { last, toLower } from "lodash";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { deleteMemoResource, upsertMemoResource } from "../helpers/api";
@@ -14,6 +14,8 @@ import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";
 import "../less/memo-editor.less";
 
+const listItemSymbolList = ["* ", "- ", "- [ ] ", "- [x] ", "- [X] "];
+
 const getEditorContentCache = (): string => {
   return storage.get(["editorContentCache"]).editorContentCache ?? "";
 };
@@ -48,7 +50,7 @@ const MemoEditor = () => {
     shouldShowEmojiPicker: false,
   });
   const [allowSave, setAllowSave] = useState<boolean>(false);
-  const prevGlobalStateRef = useRef(editorState);
+  const prevEditorStateRef = useRef(editorState);
   const editorRef = useRef<EditorRefActions>(null);
   const tagSelectorRef = useRef<HTMLDivElement>(null);
   const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
@@ -87,10 +89,14 @@ const MemoEditor = () => {
       storage.remove(["editingMemoIdCache"]);
     }
 
-    prevGlobalStateRef.current = editorState;
+    prevEditorStateRef.current = editorState;
   }, [editorState.editMemoId]);
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (!editorRef.current) {
+      return;
+    }
+
     if (event.ctrlKey || event.metaKey) {
       if (event.key === "Enter") {
         handleSaveBtnClick();
@@ -98,39 +104,36 @@ const MemoEditor = () => {
       }
       if (event.key === "b") {
         event.preventDefault();
-        editorRef.current?.insertText("", "**", "**");
+        editorRef.current.insertText("", "**", "**");
         return;
       }
       if (event.key === "i") {
         event.preventDefault();
-        editorRef.current?.insertText("", "*", "*");
+        editorRef.current.insertText("", "*", "*");
         return;
       }
       if (event.key === "e") {
         event.preventDefault();
-        editorRef.current?.insertText("", "`", "`");
+        editorRef.current.insertText("", "`", "`");
         return;
       }
     }
+
     if (event.key === "Enter") {
-      if (!editorRef.current) {
-        return;
-      }
       const cursorPosition = editorRef.current.getCursorPosition();
-      const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
+      const contentBeforeCursor = editorRef.current.getContent().slice(0, cursorPosition);
-      const prevRows = prevValue.split("\n");
+      const rowValue = last(contentBeforeCursor.split("\n"));
-      const prevRowValue = prevRows[prevRows.length - 1];
+      if (rowValue) {
-      if (prevRowValue === "- " || prevRowValue === "- [ ] " || prevRowValue === "- [x] " || prevRowValue === "- [X] ") {
+        if (listItemSymbolList.includes(rowValue)) {
-        event.preventDefault();
-        prevRows[prevRows.length - 1] = "";
-        editorRef.current.setContent(prevRows.join("\n"));
-      } else {
-        if (prevRowValue.startsWith("- [ ] ") || prevRowValue.startsWith("- [x] ") || prevRowValue.startsWith("- [X] ")) {
           event.preventDefault();
-          editorRef.current.insertText("", "\n- [ ] ");
+          editorRef.current.removeText(cursorPosition - rowValue.length, rowValue.length);
-        } else if (prevRowValue.startsWith("- ")) {
+        } else {
-          event.preventDefault();
+          for (const listItemSymbol of listItemSymbolList) {
-          editorRef.current.insertText("", "\n- ");
+            if (rowValue.startsWith(listItemSymbol)) {
+              event.preventDefault();
+              editorRef.current.insertText("", `\n${listItemSymbol}`);
+            }
+          }
         }
       }
       return;
@@ -138,14 +141,14 @@ const MemoEditor = () => {
     if (event.key === "Escape") {
       if (state.fullscreen) {
         handleFullscreenBtnClick();
-      } else {
+      } else if (editorState.editMemoId) {
         handleCancelEdit();
       }
       return;
     }
     if (event.key === "Tab") {
       event.preventDefault();
-      editorRef.current?.insertText(" ".repeat(TAB_SPACE_WIDTH));
+      editorRef.current.insertText(" ".repeat(TAB_SPACE_WIDTH));
       return;
     }
   };
@@ -251,11 +254,13 @@ const MemoEditor = () => {
   };
 
   const handleCancelEdit = () => {
-    editorStateService.clearEditMemo();
+    if (editorState.editMemoId) {
-    editorStateService.clearResourceList();
+      editorStateService.clearEditMemo();
-    editorRef.current?.setContent("");
+      editorStateService.clearResourceList();
-    setEditorContentCache("");
+      editorRef.current?.setContent("");
-    storage.remove(["editingMemoVisibilityCache"]);
+      setEditorContentCache("");
+      storage.remove(["editingMemoVisibilityCache"]);
+    }
   };
 
   const handleContentChange = (content: string) => {

web/src/components/Settings/SystemSection.tsx

@@ -117,20 +117,16 @@ const SystemSection = () => {
         <span className="normal-text">
           {t("setting.system-section.database-file-size")}: <span className="font-mono font-medium">{formatBytes(state.dbSize)}</span>
         </span>
-        <Button size="sm" onClick={handleVacuumBtnClick}>
+        <Button onClick={handleVacuumBtnClick}>{t("common.vacuum")}</Button>
-          {t("common.vacuum")}
-        </Button>
       </label>
       <p className="title-text">{t("sidebar.setting")}</p>
       <label className="form-label">
         <span className="normal-text">{t("setting.system-section.allow-user-signup")}</span>
-        <Switch size="sm" checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
+        <Switch checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </label>
       <div className="form-label">
         <span className="normal-text">{t("setting.system-section.additional-style")}</span>
-        <Button size="sm" onClick={handleSaveAdditionalStyle}>
+        <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>
-          {t("common.save")}
-        </Button>
       </div>
       <Textarea
         className="w-full"
@@ -139,16 +135,14 @@ const SystemSection = () => {
           fontSize: "14px",
         }}
         minRows={4}
-        maxRows={10}
+        maxRows={4}
         placeholder={t("setting.system-section.additional-style-placeholder")}
         value={state.additionalStyle}
         onChange={(event) => handleAdditionalStyleChanged(event.target.value)}
       />
       <div className="form-label mt-2">
         <span className="normal-text">{t("setting.system-section.additional-script")}</span>
-        <Button size="sm" onClick={handleSaveAdditionalScript}>
+        <Button onClick={handleSaveAdditionalScript}>{t("common.save")}</Button>
-          {t("common.save")}
-        </Button>
       </div>
       <Textarea
         className="w-full"
@@ -158,7 +152,7 @@ const SystemSection = () => {
           fontSize: "14px",
         }}
         minRows={4}
-        maxRows={10}
+        maxRows={4}
         placeholder={t("setting.system-section.additional-script-placeholder")}
         value={state.additionalScript}
         onChange={(event) => handleAdditionalScriptChanged(event.target.value)}

web/src/less/memo.less

@@ -5,6 +5,10 @@
     @apply border-gray-200 border-2 dark:border-zinc-600;
   }
 
+  &.archived {
+    @apply border-gray-200 dark:border-zinc-600;
+  }
+
   > .corner-container {
     @apply absolute top-0 right-0 z-1;