web: add setting for toggling markdown in editor

apps/web/src/components/editor/tiptap.tsx

@@ -141,6 +141,7 @@ function TipTap(props: TipTapProps) {
   );
   const dateFormat = useSettingsStore((store) => store.dateFormat);
   const timeFormat = useSettingsStore((store) => store.timeFormat);
+  const inputRules = useSettingsStore((store) => store.inputRules);
   const { toolbarConfig } = useToolbarConfig();
   const { isSearching, toggleSearch } = useSearch();
 
@@ -180,6 +181,7 @@ function TipTap(props: TipTapProps) {
           }
         }
       },
+      enableInputRules: inputRules,
       downloadOptions,
       doubleSpacedLines,
       dateFormat,
@@ -290,7 +292,7 @@ function TipTap(props: TipTapProps) {
       },
       getAttachmentData: onGetAttachmentData
     };
-  }, [readonly, nonce, doubleSpacedLines, dateFormat, timeFormat]);
+  }, [readonly, nonce, doubleSpacedLines, dateFormat, timeFormat, inputRules]);
 
   const editor = useTiptap(
     tiptapOptions,

apps/web/src/dialogs/settings/editor-settings.ts

@@ -101,7 +101,7 @@ symbols (e.g. 202305261253)`,
         key: "double-spacing",
         title: "Double spaced paragraphs",
         description:
-          "Use double spacing between paragraphs and when you press Enter in the editor.",
+          "Use double spacing between paragraphs when you press Enter in the editor.",
         onStateChange: (listener) =>
           useSettingStore.subscribe((c) => c.doubleSpacedParagraphs, listener),
         components: [
@@ -112,6 +112,28 @@ symbols (e.g. 202305261253)`,
               useSettingStore.getState().toggleDoubleSpacedParagraphs()
           }
         ]
+      },
+      {
+        key: "input-rules",
+        title: "Input rules",
+        description: `Input rules are triggered whenever you input a specific character combination.
+        
+A few examples of this:
+
+1. Typing '/date' adds the current Date
+2. Wrapping something in '**' turns it into bold text
+3. Typing '1.' automatically creates a numbered list.
+
+This behavior can be disabled via this setting.`,
+        onStateChange: (listener) =>
+          useSettingStore.subscribe((c) => c.inputRules, listener),
+        components: [
+          {
+            type: "toggle",
+            isToggled: () => useSettingStore.getState().inputRules,
+            toggle: () => useSettingStore.getState().toggleInputRules()
+          }
+        ]
       }
     ]
   },

apps/web/src/stores/setting-store.js

@@ -38,6 +38,7 @@ class SettingStore extends BaseStore {
     PATHS.backupsDirectory
   );
   doubleSpacedParagraphs = Config.get("doubleSpacedLines", true);
+  inputRules = Config.get("inputRules", true);
   notificationsSettings = Config.get("notifications", { reminder: true });
 
   zoomFactor = 1.0;
@@ -166,6 +167,14 @@ class SettingStore extends BaseStore {
     Config.set("doubleSpacedLines", !doubleSpacedParagraphs);
   };
 
+  toggleInputRules = (toggleState) => {
+    this.set((state) => {
+      state.inputRules =
+        toggleState !== undefined ? toggleState : !state.inputRules;
+      Config.set("inputRules", state.inputRules);
+    });
+  };
+
   toggleTelemetry = () => {
     const telemetry = this.get().telemetry;
     this.set({ telemetry: !telemetry });