feat: matching punctuation (#791)

web/src/components/MemoEditor.tsx

@@ -15,6 +15,7 @@ import "../less/memo-editor.less";
 
 const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
 const emptyOlReg = /^(\d+)\. $/;
+const pairSymbols = ["[]", "()", '""', "''", "{}", "``", "”“", "‘‘", "【】", "（）", "《》"];
 
 const getEditorContentCache = (): string => {
   return storage.get(["editorContentCache"]).editorContentCache ?? "";
@@ -169,6 +170,26 @@ const MemoEditor = () => {
       editorRef.current.insertText(" ".repeat(TAB_SPACE_WIDTH));
       return;
     }
+
+    for (const symbol of pairSymbols) {
+      if (event.key === symbol[0]) {
+        event.preventDefault();
+        editorRef.current.insertText("", symbol[0], symbol[1]);
+        return;
+      }
+    }
+
+    if (event.key === "Backspace") {
+      const cursor = editorRef.current.getCursorPosition();
+      const content = editorRef.current.getContent();
+      const deleteChar = content?.slice(cursor - 1, cursor);
+      const nextChar = content?.slice(cursor, cursor + 1);
+      if (pairSymbols.includes(`${deleteChar}${nextChar}`)) {
+        event.preventDefault();
+        editorRef.current.removeText(cursor - 1, 2);
+      }
+      return;
+    }
   };
 
   const uploadMultiFiles = async (files: FileList) => {