mobile: formatted dates in editor

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -50,6 +50,8 @@ export type Settings = {
   corsProxy: string;
   fontSize: string;
   fontFamily: string;
+  dateFormat: string;
+  timeFormat: string;
 };
 
 export type EditorProps = {

apps/mobile/app/screens/editor/tiptap/use-editor-events.ts

@@ -130,6 +130,11 @@ export const useEditorEvents = (
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const fullscreen = useSettingStore((state) => state.fullscreen);
   const corsProxy = useSettingStore((state) => state.settings.corsProxy);
+  const [dateFormat, timeFormat] = useSettingStore((state) => [
+    state.dateFormat,
+    state.timeFormat
+  ]);
+
   const handleBack = useRef<NativeEventSubscription>();
   const readonly = useEditorStore((state) => state.readonly);
   const isPremium = useUserStore((state) => state.premium);
@@ -173,7 +178,9 @@ export const useEditorEvents = (
       doubleSpacedLines: doubleSpacedLines,
       corsProxy: corsProxy,
       fontSize: defaultFontSize,
-      fontFamily: defaultFontFamily
+      fontFamily: defaultFontFamily,
+      dateFormat: db.settings?.getDateFormat(),
+      timeFormat: db.settings?.getTimeFormat()
     });
   }, [
     fullscreen,
@@ -190,7 +197,9 @@ export const useEditorEvents = (
     noToolbar,
     corsProxy,
     defaultFontSize,
-    defaultFontFamily
+    defaultFontFamily,
+    dateFormat,
+    timeFormat
   ]);
 
   const onBackPress = useCallback(async () => {

apps/mobile/app/screens/settings/date-format.jsx

@@ -28,6 +28,7 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { DATE_FORMATS, TIME_FORMATS } from "@notesnook/core/common";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 export const DateFormatSelector = () => {
   const colors = useThemeStore((state) => state.colors);
@@ -38,6 +39,9 @@ export const DateFormatSelector = () => {
     menuRef.current?.hide();
     db.settings.setDateFormat(item);
     setDateFormat(item);
+    useSettingStore.setState({
+      dateFormat: item
+    });
   };
 
   return (
@@ -116,6 +120,9 @@ export const TimeFormatSelector = () => {
     menuRef.current?.hide();
     db.settings.setTimeFormat(item);
     setTimeFormat(item);
+    useSettingStore.setState({
+      timeFormat: item
+    });
   };
 
   const TimeFormats = {

apps/mobile/app/stores/use-setting-store.ts

@@ -106,6 +106,8 @@ export interface SettingStore extends State {
   setRequestBiometrics: (requestBiometrics: boolean) => void;
   insets: Insets;
   setInsets: (insets: Insets) => void;
+  timeFormat: string;
+  dateFormat: string;
 }
 
 const { width, height } = Dimensions.get("window");
@@ -170,6 +172,8 @@ export const useSettingStore = create<SettingStore>((set) => ({
   requestBiometrics: false,
   setRequestBiometrics: (requestBiometrics) => set({ requestBiometrics }),
   setInsets: (insets) => set({ insets }),
+  timeFormat: "12-hour",
+  dateFormat: "DD-MM-YYYY",
   insets: initialWindowMetrics?.insets
     ? initialWindowMetrics.insets
     : { top: 0, right: 0, left: 0, bottom: 0 }

packages/editor-mobile/src/components/editor.tsx

@@ -110,7 +110,9 @@ const Tiptap = ({
       },
       downloadOptions: {
         corsHost: settings.corsProxy
-      }
+      },
+      dateFormat: settings.dateFormat,
+      timeFormat: settings.timeFormat as "12-hour" | "24-hour" | undefined
     },
     [layout, settings.readonly, tick, settings.doubleSpacedLines]
   );

packages/editor-mobile/src/hooks/useSettings.ts

@@ -32,7 +32,9 @@ const initialState = {
   readonly: globalThis.readonly,
   doubleSpacedLines: true,
   fontFamily: "sans-serif",
-  fontSize: "16px"
+  fontSize: "16px",
+  timeFormat: "12-hour",
+  dateFormat: "DD-MM-YYYY"
 };
 
 global.settingsController = {

packages/editor-mobile/src/utils/index.ts

@@ -41,6 +41,8 @@ export type Settings = {
   corsProxy: string;
   fontSize: number;
   fontFamily: string;
+  timeFormat: string;
+  dateFormat: string;
 };
 
 /* eslint-disable no-var */