core: add nowz and timestampz formats (#7270)

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

docs/help/contents/rich-text-editor/markdown-notes-editing.md

@@ -29,6 +29,7 @@ Notesnook supports the following (Markdown) shortcuts in the editor:
 | Current Date        | `/date`                                                               |
 | Date Time           | `/time`                                                               |
 | Current Date & Time | `/now`                                                                |
+| Current Date & Time with timezone | `/nowz`                                                 |
 
 ## FAQs
 

docs/help/contents/rich-text-editor/personalizing-rich-text-editor.md

@@ -36,6 +36,8 @@ Go to `Settings` > `Editor` > `Title format` to customize the title formatting.
 
 **$timestamp$**: Full date & time without any spaces or symbols (e.g. 202305261253)
 
+**$timestampz$**: UTC offset added to _timestamp_
+
 You can use a combination of these templates in the note title. For example `$headline$ - $date$` will become `Your note headline - 06-22-2023`.
 
 ## Paragraph spacing

packages/core/src/utils/date.ts

@@ -18,8 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import timezone from "dayjs/plugin/timezone";
 import { TimeFormat } from "../types.js";
 
+dayjs.extend(advancedFormat);
+dayjs.extend(timezone);
+
 export function getWeekGroupFromTimestamp(timestamp: number) {
   const date = new Date(timestamp);
   const { start, end } = getWeek(date);
@@ -63,6 +68,9 @@ export function getTimeFormat(format: TimeFormat) {
   return format === "12-hour" ? "hh:mm A" : "HH:mm";
 }
 
+export type TimeZoneOptions = {
+  type: "timezone";
+};
 export type TimeOptions = {
   type: "time";
   timeFormat: TimeFormat;
@@ -76,7 +84,17 @@ export type DateTimeOptions = {
   dateFormat: string;
   timeFormat: TimeFormat;
 };
-export type FormatDateOptions = TimeOptions | DateOptions | DateTimeOptions;
+export type DateTimeWithTimeZoneOptions = {
+  type: "date-time-timezone";
+  dateFormat: string;
+  timeFormat: TimeFormat;
+};
+export type FormatDateOptions =
+  | TimeZoneOptions
+  | TimeOptions
+  | DateOptions
+  | DateTimeOptions
+  | DateTimeWithTimeZoneOptions;
 
 export function formatDate(
   date: string | number | Date | null | undefined,
@@ -87,6 +105,10 @@ export function formatDate(
   }
 ) {
   switch (options.type) {
+    case "date-time-timezone":
+      return dayjs(date).format(
+        `${options.dateFormat} ${getTimeFormat(options.timeFormat)} z`
+      );
     case "date-time":
       return dayjs(date).format(
         `${options.dateFormat} ${getTimeFormat(options.timeFormat)}`
@@ -95,6 +117,8 @@ export function formatDate(
       return dayjs(date).format(getTimeFormat(options.timeFormat));
     case "date":
       return dayjs(date).format(options.dateFormat);
+    case "timezone":
+      return dayjs(date).format("ZZ");
   }
 }
 

packages/core/src/utils/title-format.ts

@@ -27,6 +27,7 @@ const COUNT_REGEX = /\$count\$/g;
 const TIME_REGEX = /\$time\$/g;
 const HEADLINE_REGEX = /\$headline\$/g;
 const TIMESTAMP_REGEX = /\$timestamp\$/g;
+const TIMESTAMP_Z_REGEX = /\$timestampz\$/g;
 const DATE_TIME_STRIP_REGEX = /[\\\-:./, ]/g;
 
 export function formatTitle(
@@ -45,7 +46,11 @@ export function formatTitle(
     timeFormat,
     type: "time"
   });
+  const timezone = formatDate(Date.now(), {
+    type: "timezone"
+  });
   const timestamp = `${date}${time}`.replace(DATE_TIME_STRIP_REGEX, "");
+  const timestampWithTimeZone = `${timestamp}${timezone}`;
 
   return titleFormat
     .replace(NEWLINE_STRIP_REGEX, " ")
@@ -53,5 +58,6 @@ export function formatTitle(
     .replace(TIME_REGEX, time)
     .replace(HEADLINE_REGEX, headline || "")
     .replace(TIMESTAMP_REGEX, timestamp)
+    .replace(TIMESTAMP_Z_REGEX, timestampWithTimeZone)
     .replace(COUNT_REGEX, `${totalNotes + 1}`);
 }

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

@@ -41,6 +41,11 @@ declare module "@tiptap/core" {
        * Insert date & time at current position
        */
       insertDateTime: () => ReturnType;
+
+      /**
+       * Insert date & time with time zone at current position
+       */
+      insertDateTimeWithTimeZone: () => ReturnType;
     };
   }
 }
@@ -64,7 +69,8 @@ export const DateTime = Extension.create<DateTimeOptions>({
     return {
       "Alt-t": ({ editor }) => editor.commands.insertTime(),
       "Alt-d": ({ editor }) => editor.commands.insertDate(),
-      "Mod-Alt-d": ({ editor }) => editor.commands.insertDateTime()
+      "Mod-Alt-d": ({ editor }) => editor.commands.insertDateTime(),
+      "Mod-Alt-z": ({ editor }) => editor.commands.insertDateTimeWithTimeZone()
     };
   },
 
@@ -97,6 +103,16 @@ export const DateTime = Extension.create<DateTimeOptions>({
               timeFormat: this.options.timeFormat,
               type: "date-time"
             })
+          ),
+      insertDateTimeWithTimeZone:
+        () =>
+        ({ commands }) =>
+          commands.insertContent(
+            formatDate(Date.now(), {
+              dateFormat: this.options.dateFormat,
+              timeFormat: this.options.timeFormat,
+              type: "date-time-timezone"
+            })
           )
     };
   },
@@ -130,6 +146,16 @@ export const DateTime = Extension.create<DateTimeOptions>({
             type: "date-time"
           });
         }
+      }),
+      shortcutInputRule({
+        shortcut: "/nowz",
+        replace: () => {
+          return formatDate(Date.now(), {
+            dateFormat: this.options.dateFormat,
+            timeFormat: this.options.timeFormat,
+            type: "date-time-timezone"
+          });
+        }
       })
     ];
   }
@@ -203,5 +229,14 @@ export function replaceDateTime(
     }) + " "
   );
 
+  value = value.replaceAll(
+    "/nowz ",
+    formatDate(Date.now(), {
+      dateFormat,
+      timeFormat,
+      type: "date-time-timezone"
+    }) + " "
+  );
+
   return value;
 }