web: use editor date/time format from settings

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

@@ -225,7 +225,7 @@ export default function EditorManager({
           )}
           <Editor
             nonce={timestamp}
-            content={
+            content={() =>
               previewSession.current?.content?.data ||
               editorstore.get().session?.content?.data
             }
@@ -331,7 +331,7 @@ type EditorOptions = {
   onLoadMedia?: () => void;
 };
 type EditorProps = {
-  content: string;
+  content: () => string;
   nonce?: number;
   options?: EditorOptions;
   onContentChange?: () => void;

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

@@ -36,10 +36,11 @@ import {
   type DownloadOptions,
   getTotalWords,
   countWords,
-  getFontById
+  getFontById,
+  TiptapOptions
 } from "@notesnook/editor";
 import { Box, Flex } from "@theme-ui/components";
-import { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, useEffect, useMemo, useRef, useState } from "react";
 import { Attachment } from "./picker";
 import { IEditor } from "./types";
 import {
@@ -67,7 +68,7 @@ type TipTapProps = {
   onPreviewAttachment?: (attachment: Attachment) => void;
   onAttachFile?: (file: File) => void;
   onFocus?: () => void;
-  content?: string;
+  content?: () => string;
   toolbarContainerId?: string;
   readonly?: boolean;
   nonce?: number;
@@ -131,6 +132,8 @@ function TipTap(props: TipTapProps) {
   const doubleSpacedLines = useSettingsStore(
     (store) => store.doubleSpacedLines
   );
+  const dateFormat = useSettingsStore((store) => store.dateFormat);
+  const timeFormat = useSettingsStore((store) => store.timeFormat);
   const { toolbarConfig } = useToolbarConfig();
   const { isSearching, toggleSearch } = useSearch();
 
@@ -143,8 +146,10 @@ function TipTap(props: TipTapProps) {
     }
   });
 
-  const editor = useTiptap(
-    {
+  const oldNonce = useRef<number>();
+
+  const tiptapOptions = useMemo<Partial<TiptapOptions>>(() => {
+    return {
       editorProps: {
         handlePaste: (view, event) => {
           const hasText = event.clipboardData?.types?.some((type) =>
@@ -166,13 +171,19 @@ function TipTap(props: TipTapProps) {
       },
       downloadOptions,
       doubleSpacedLines,
+      dateFormat,
+      timeFormat,
       isMobile: isMobile || false,
       element: editorContainer,
       editable: !readonly,
-      content,
+      content: content?.(),
       autofocus: "start",
       onFocus,
       onCreate: ({ editor }) => {
+        if (oldNonce.current !== nonce)
+          editor.commands.focus("start", { scrollIntoView: true });
+        oldNonce.current = nonce;
+
         configure({
           editor: toIEditor(editor as Editor),
           canRedo: editor.can().redo(),
@@ -263,9 +274,13 @@ function TipTap(props: TipTapProps) {
         window.open(url, "_blank");
         return true;
       }
-    },
+    };
+  }, [readonly, nonce, doubleSpacedLines, dateFormat, timeFormat]);
+
+  const editor = useTiptap(
+    tiptapOptions,
     // IMPORTANT: only put stuff here that the editor depends on.
-    [readonly, nonce]
+    [tiptapOptions]
   );
 
   useEffect(

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

@@ -28,6 +28,7 @@ import { store as attachmentStore } from "./attachment-store";
 import { store as monographStore } from "./monograph-store";
 import { store as reminderStore } from "./reminder-store";
 import { store as announcementStore } from "./announcement-store";
+import { store as settingStore } from "./setting-store";
 import BaseStore from "./index";
 import { showToast } from "../utils/toast";
 import { resetReminders } from "../common/reminders";
@@ -65,6 +66,7 @@ class AppStore extends BaseStore {
   lastSynced = 0;
 
   init = () => {
+    settingStore.refresh();
     // this needs to happen here so reminders can be set on app load.
     reminderStore.refresh();
     announcementStore.refresh();
@@ -151,7 +153,9 @@ class AppStore extends BaseStore {
     tagStore.refresh();
     attachmentStore.refresh();
     monographStore.refresh();
+    settingStore.refresh();
     await editorstore.refresh();
+
     this.refreshNavItems();
 
     logger.measure("refreshing app");

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

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { db } from "../common/db";
 import createStore from "../common/store";
 import Config from "../utils/config";
 import BaseStore from "./index";
@@ -24,6 +25,34 @@ import BaseStore from "./index";
 class SettingStore extends BaseStore {
   encryptBackups = Config.get("encryptBackups", false);
   doubleSpacedLines = Config.get("doubleSpacedLines", true);
+  /** @type {string} */
+  dateFormat = null;
+  /** @type {"12-hour" | "24-hour"} */
+  timeFormat = null;
+  titleFormat = null;
+
+  refresh = () => {
+    this.set((state) => {
+      state.dateFormat = db.settings.getDateFormat();
+      state.timeFormat = db.settings.getTimeFormat();
+      state.titleFormat = db.settings.getTitleFormat();
+    });
+  };
+
+  setDateFormat = async (dateFormat) => {
+    await db.settings.setDateFormat(dateFormat);
+    this.set((state) => (state.dateFormat = dateFormat));
+  };
+
+  setTimeFormat = async (timeFormat) => {
+    await db.settings.setTimeFormat(timeFormat);
+    this.set((state) => (state.timeFormat = timeFormat));
+  };
+
+  setTitleFormat = async (titleFormat) => {
+    await db.settings.setTitleFormat(titleFormat);
+    this.set((state) => (state.titleFormat = titleFormat));
+  };
 
   setEncryptBackups = (encryptBackups) => {
     this.set((state) => (state.encryptBackups = encryptBackups));

apps/web/src/views/settings.js

@@ -17,13 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Box, Button, Flex, Input, Text } from "@theme-ui/components";
 import * as Icon from "../components/icons";
 import { useStore as useUserStore } from "../stores/user-store";
 import { useStore as useNoteStore } from "../stores/note-store";
 import { useStore as useThemeStore } from "../stores/theme-store";
-import { useStore as useSettingStore } from "../stores/setting-store";
+import {
+  useStore as useSettingStore,
+  store as settingstore
+} from "../stores/setting-store";
 import { useStore as useAppStore } from "../stores/app-store";
 import AccentItem from "../components/accent-item";
 import {
@@ -224,7 +227,10 @@ function Settings() {
     "https://cors.notesnook.com"
   );
   const { editorConfig, setEditorConfig } = useEditorConfig();
-  const [none, setNonce] = useState(0);
+
+  const dateFormat = useSettingStore((store) => store.dateFormat);
+  const timeFormat = useSettingStore((store) => store.timeFormat);
+  const titleFormat = useSettingStore((store) => store.titleFormat);
 
   useEffect(() => {
     (async () => {
@@ -232,10 +238,6 @@ function Settings() {
     })();
   }, [backupReminderOffset]);
 
-  const forceUpdate = useCallback(() => {
-    setNonce((s) => ++s);
-  });
-
   return (
     <FlexScrollContainer style={{ height: "100%" }}>
       <Flex variant="columnFill" px={2}>
@@ -600,11 +602,10 @@ function Settings() {
                 { value: "12-hour", title: "12h" },
                 { value: "24-hour", title: "24h" }
               ]}
-              selectedOption={db.settings.getTimeFormat()}
-              onSelectionChanged={async (option) => {
-                await db.settings.setTimeFormat(option.value);
-                forceUpdate();
-              }}
+              selectedOption={timeFormat}
+              onSelectionChanged={(option) =>
+                settingstore.get().setTimeFormat(option.value)
+              }
             />
             <Flex
               sx={{
@@ -628,11 +629,10 @@ function Settings() {
                   borderRadius: "default",
                   width: "120px"
                 }}
-                value={db.settings.getDateFormat()}
-                onChange={async (e) => {
-                  await db.settings.setDateFormat(e.target.value);
-                  forceUpdate();
-                }}
+                value={dateFormat}
+                onChange={(e) =>
+                  settingstore.get().setDateFormat(e.target.value)
+                }
               >
                 {DATE_FORMATS.map((format) => (
                   <option key={format} value={format}>
@@ -662,10 +662,9 @@ function Settings() {
               <Input
                 sx={{ mt: 1, p: 1 }}
                 value={db.settings.getTitleFormat()}
-                onChange={async (e) => {
-                  await db.settings.setTitleFormat(e.target.value);
-                  forceUpdate();
-                }}
+                onChange={(e) =>
+                  settingstore.get().setTitleFormat(e.target.value)
+                }
               />
               <Text variant="subBody" sx={{ mt: 1 }}>
                 Use the following key to format the title: