editor: make date-time format configurable

packages/editor/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@notesnook/theme": "*",
+    "@notesnook/core": "*",
     "@social-embed/lib": "^0.0.2-next.1",
     "@theme-ui/components": "^0.14.7",
     "@theme-ui/core": "^0.14.7",

packages/editor/src/extensions/date-time/date-time.ts

@@ -23,6 +23,9 @@ import {
   InputRuleFinder,
   ExtendedRegExpMatchArray
 } from "@tiptap/core";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { formatDate } from "@notesnook/core/utils/date";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -44,8 +47,21 @@ declare module "@tiptap/core" {
   }
 }
 
-export const DateTime = Extension.create({
+export type DateTimeOptions = {
+  dateFormat: string;
+  timeFormat: "12-hour" | "24-hour";
+};
+
+export const DateTime = Extension.create<DateTimeOptions>({
   name: "datetime",
+
+  addOptions() {
+    return {
+      dateFormat: "DD-MM-YYYY",
+      timeFormat: "12-hour"
+    };
+  },
+
   addKeyboardShortcuts() {
     return {
       "Alt-t": ({ editor }) => editor.commands.insertTime(),
@@ -59,15 +75,31 @@ export const DateTime = Extension.create({
       insertDate:
         () =>
         ({ commands }) =>
-          commands.insertContent(currentDate()),
+          commands.insertContent(
+            formatDate(Date.now(), {
+              dateFormat: this.options.dateFormat,
+              type: "date"
+            })
+          ),
       insertTime:
         () =>
         ({ commands }) =>
-          commands.insertContent(currentTime()),
+          commands.insertContent(
+            formatDate(Date.now(), {
+              timeFormat: this.options.timeFormat,
+              type: "time"
+            })
+          ),
       insertDateTime:
         () =>
         ({ commands }) =>
-          commands.insertContent(currentDateTime())
+          commands.insertContent(
+            formatDate(Date.now(), {
+              dateFormat: this.options.dateFormat,
+              timeFormat: this.options.timeFormat,
+              type: "date-time"
+            })
+          )
     };
   },
 
@@ -76,44 +108,35 @@ export const DateTime = Extension.create({
       shortcutInputRule({
         shortcut: "/time",
         replace: () => {
-          return currentTime();
+          return formatDate(Date.now(), {
+            timeFormat: this.options.timeFormat,
+            type: "time"
+          });
         }
       }),
       shortcutInputRule({
         shortcut: "/date",
         replace: () => {
-          return currentDate();
+          return formatDate(Date.now(), {
+            dateFormat: this.options.dateFormat,
+            type: "date"
+          });
         }
       }),
       shortcutInputRule({
         shortcut: "/now",
         replace: () => {
-          return currentDateTime();
+          return formatDate(Date.now(), {
+            dateFormat: this.options.dateFormat,
+            timeFormat: this.options.timeFormat,
+            type: "date-time"
+          });
         }
       })
     ];
   }
 });
 
-function currentTime() {
-  return new Date().toLocaleTimeString(window.navigator.languages.slice(), {
-    hour: "2-digit",
-    minute: "2-digit"
-  });
-}
-
-function currentDateTime() {
-  return `${currentDate()}, ${currentTime()}`;
-}
-
-function currentDate() {
-  return new Date().toLocaleDateString(window.navigator.languages.slice(), {
-    month: "long",
-    day: "2-digit",
-    year: "numeric"
-  });
-}
-
 function shortcutInputRule(config: {
   shortcut: string;
   replace: () => string;

packages/editor/src/index.ts

@@ -44,7 +44,7 @@ import BulletList from "./extensions/bullet-list";
 import { ClipboardTextSerializer } from "./extensions/clipboard-text-serializer";
 import { CodeBlock } from "./extensions/code-block";
 import { Codemark } from "./extensions/code-mark";
-import { DateTime } from "./extensions/date-time";
+import { DateTime, DateTimeOptions } from "./extensions/date-time";
 import { EmbedNode } from "./extensions/embed";
 import FontFamily from "./extensions/font-family";
 import FontSize from "./extensions/font-size";
@@ -88,10 +88,11 @@ const CoreExtensions = Object.entries(TiptapCoreExtensions)
   .filter(([name]) => name !== "ClipboardTextSerializer")
   .map(([, extension]) => extension);
 
-type TiptapOptions = EditorOptions &
+export type TiptapOptions = EditorOptions &
   Omit<AttachmentOptions, "HTMLAttributes"> &
   Omit<WebClipOptions, "HTMLAttributes"> &
   Omit<ImageOptions, "HTMLAttributes"> &
+  DateTimeOptions &
   OpenLinkOptions & {
     downloadOptions?: DownloadOptions;
     theme: Theme;
@@ -113,6 +114,8 @@ const useTiptap = (
     onOpenLink,
     onBeforeCreate,
     downloadOptions,
+    dateFormat,
+    timeFormat,
     ...restOptions
   } = options;
   const PortalProviderAPI = usePortalProvider();
@@ -235,7 +238,7 @@ const useTiptap = (
         MathBlock,
         KeepInView,
         SelectionPersist,
-        DateTime,
+        DateTime.configure({ dateFormat, timeFormat }),
         KeyMap,
         WebClipNode
       ],
@@ -252,7 +255,9 @@ const useTiptap = (
       onOpenAttachmentPicker,
       PortalProviderAPI,
       onBeforeCreate,
-      onOpenLink
+      onOpenLink,
+      dateFormat,
+      timeFormat
     ]
   );