From 4fbfcefa9416334c73a4287103d31742697b15e1 Mon Sep 17 00:00:00 2001
From: iamvann <sovannsean9@gmail.com>
Date: Sun, 18 May 2025 03:14:18 +0800
Subject: [PATCH 1/3] feat: Implement configurable date/time format for Alt+T
 shortcut

---
 apps/client/src/services/utils.ts             | 27 ++++++-
 .../widgets/type_widgets/content_widget.ts    |  2 +
 .../src/widgets/type_widgets/editable_text.ts | 31 ++++++-
 .../options/text_notes/date_time_format.ts    | 80 +++++++++++++++++++
 apps/server/src/routes/api/options.ts         |  1 +
 packages/commons/src/lib/options_interface.ts |  1 +
 6 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts

diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index a52b7443a..92ca2bc70 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -124,8 +124,31 @@ function formatDateISO(date: Date) {
     return `${date.getFullYear()}-${padNum(date.getMonth() + 1)}-${padNum(date.getDate())}`;
 }
 
-function formatDateTime(date: Date) {
-    return `${formatDate(date)} ${formatTime(date)}`;
+
+// old version
+// function formatDateTime(date: Date) {
+//     return `${formatDate(date)} ${formatTime(date)}`;
+// }
+
+// new version 
+export function formatDateTime(date: Date, userSuppliedFormat?: string): string { 
+    const DEFAULT_FORMAT = 'YYYY-MM-DD HH:mm'; 
+    let formatToUse = DEFAULT_FORMAT;
+
+    if (userSuppliedFormat && typeof userSuppliedFormat === 'string' && userSuppliedFormat.trim() !== "") {
+        formatToUse = userSuppliedFormat.trim();
+    }
+
+    if (!date) {
+        date = new Date(); 
+    }
+
+    try {
+        return dayjs(date).format(formatToUse);
+    } catch (e: any) {
+        console.warn(`TriliumNext: Day.js encountered an error with format string "${formatToUse}". Falling back to default. Error: ${e.message}`);
+        return dayjs(date).format(DEFAULT_FORMAT);
+    }
 }
 
 function localNowDateTime() {
diff --git a/apps/client/src/widgets/type_widgets/content_widget.ts b/apps/client/src/widgets/type_widgets/content_widget.ts
index 00c30f5f7..aa3eadcb0 100644
--- a/apps/client/src/widgets/type_widgets/content_widget.ts
+++ b/apps/client/src/widgets/type_widgets/content_widget.ts
@@ -45,6 +45,7 @@ import LanguageOptions from "./options/i18n/language.js";
 import type BasicWidget from "../basic_widget.js";
 import CodeTheme from "./options/code_notes/code_theme.js";
 import RelatedSettings from "./options/related_settings.js";
+import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -83,6 +84,7 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (typeof NoteContextAw
         KeyboardShortcutsOptions
     ],
     _optionsTextNotes: [
+        DateTimeFormatOptions,
         EditorOptions,
         HeadingStyleOptions,
         CodeBlockOptions,
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
index e1faac24f..4e530f990 100644
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets/editable_text.ts
@@ -267,7 +267,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                         }
 
                         item.on("change:isOpen", () => {
-                            if (!("isOpen" in item) || !item.isOpen ) {
+                            if (!("isOpen" in item) || !item.isOpen) {
                                 return;
                             }
 
@@ -287,7 +287,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
             // Touch bar integration
             if (hasTouchBar) {
-                for (const event of [ "bold", "italic", "underline", "paragraph", "heading" ]) {
+                for (const event of ["bold", "italic", "underline", "paragraph", "heading"]) {
                     editor.commands.get(event)?.on("change", () => this.triggerCommand("refreshTouchBar"));
                 }
             }
@@ -373,10 +373,33 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
             });
         }
     }
+    // old version
+    // insertDateTimeToTextCommand() {
+    //     const date = new Date();
+    //     const dateString = utils.formatDateTime(date);
 
-    insertDateTimeToTextCommand() {
+    //     this.addTextToEditor(dateString);
+    // }
+
+    // new version
+    async insertDateTimeToTextCommand() { 
         const date = new Date();
-        const dateString = utils.formatDateTime(date);
+        let userPreferredFormat = "";
+
+        try {
+
+            await options.initializedPromise;
+
+            const customFormatFromSettings = options.get("customDateTimeFormatString");
+
+            if (typeof customFormatFromSettings === 'string') { 
+                userPreferredFormat = customFormatFromSettings;
+            }
+        } catch (e: any) {
+            console.error("TriliumNext: Error during options initialization or getting custom date/time format. Using default.", e);
+        }
+
+        const dateString = utils.formatDateTime(date, userPreferredFormat);
 
         this.addTextToEditor(dateString);
     }
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
new file mode 100644
index 000000000..5a16b3d2c
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
@@ -0,0 +1,80 @@
+import OptionsWidget from "../options_widget.js"; // Path might need adjustment
+import { t } from "../../../../services/i18n.js"; // For internationalization, if you want to use it
+import type { OptionMap } from "@triliumnext/commons"; // For typing the options object
+
+// Using t() for translatable strings is good practice if the project uses it.
+// If not, you can use plain strings.
+const TPL = /*html*/`
+<div class="options-section">
+    <h4>${t("options.customDateTimeFormatTitle", "Custom Date/Time Format (Alt+T)")}</h4>
+
+    <p>
+        ${t("options.customDateTimeFormatDesc1", "Define a custom format for the date and time inserted using the Alt+T shortcut.")}
+        ${t("options.customDateTimeFormatDesc2", "Uses <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js format tokens</a>. Refer to the Day.js documentation for valid tokens.")}
+    </p>
+    <p>
+        <strong>${t("options.customDateTimeFormatImportant", "Important:")}</strong>
+        ${t("options.customDateTimeFormatDesc3", "If you provide a format string that Day.js does not recognize (e.g., mostly plain text without valid Day.js tokens), the text you typed might be inserted literally. If the format string is left empty, or if Day.js encounters a critical internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.")}
+    </p>
+
+    <div class="form-group">
+        <label for="customDateTimeFormatInput" style="margin-right: 10px;">
+            ${t("options.customDateTimeFormatLabel", "Format String:")}
+        </label>
+        <input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input" 
+               placeholder="${t("options.customDateTimeFormatPlaceholder", "e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D")}" 
+               style="width: 300px; display: inline-block;">
+    </div>
+    <p style="margin-top: 5px;">
+        <em>${t("options.customDateTimeFormatExamplesLabel", "Examples of valid Day.js formats:")}</em>
+        <code>YYYY-MM-DD HH:mm</code> (${t("options.customDateTimeFormatExampleDefault", "Default-like")}),
+        <code>DD.MM.YYYY</code>,
+        <code>MMMM D, YYYY h:mm A</code>,
+        <code>[Today is] dddd</code>
+    </p>
+</div>
+`;
+
+export default class DateTimeFormatOptions extends OptionsWidget {
+    // Declare class properties with types if needed (jQuery objects are often typed as JQuery<HTMLElement>)
+    private $formatInput!: JQuery<HTMLInputElement>; // The "!" is a non-null assertion operator
+
+    doRender() {
+        this.$widget = $(TPL); // $ is jQuery, ensure it's available (likely is if OptionsWidget uses it)
+        this.$formatInput = this.$widget.find(
+            "input.custom-datetime-format-input"
+        ) as JQuery<HTMLInputElement>; // Type assertion for jQuery result
+
+        this.$formatInput.on("input", () => {
+            const formatString = this.$formatInput.val() as string; // Get value, assert as string
+            this.updateOption("customDateTimeFormatString", formatString);
+        });
+
+        return this.$widget;
+    }
+
+    async optionsLoaded(options: OptionMap) { // Use the imported OptionMap type
+        const currentFormat = options.customDateTimeFormatString || "";
+
+        if (this.$formatInput) {
+            this.$formatInput.val(currentFormat);
+        } else {
+            // Fallback logic as before, ensure $widget is available if $formatInput isn't yet
+            console.warn(
+                "TriliumNext DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
+            );
+            const inputField = this.$widget?.find( // Optional chaining for $widget
+                "input.custom-datetime-format-input"
+            ) as JQuery<HTMLInputElement> | undefined; // Result could be undefined
+
+            if (inputField?.length) { // Optional chaining and check length
+                this.$formatInput = inputField;
+                this.$formatInput.val(currentFormat);
+            } else {
+                console.error(
+                    "TriliumNext DateTimeFormatOptions: Could not find format input field in optionsLoaded."
+                );
+            }
+        }
+    }
+}
diff --git a/apps/server/src/routes/api/options.ts b/apps/server/src/routes/api/options.ts
index 4b7ce655d..cd34c1693 100644
--- a/apps/server/src/routes/api/options.ts
+++ b/apps/server/src/routes/api/options.ts
@@ -84,6 +84,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "redirectBareDomain",
     "showLoginInShareTheme",
     "splitEditorOrientation",
+    "customDateTimeFormatString",
 
     // AI/LLM integration options
     "aiEnabled",
diff --git a/packages/commons/src/lib/options_interface.ts b/packages/commons/src/lib/options_interface.ts
index 19125d125..d898ddad2 100644
--- a/packages/commons/src/lib/options_interface.ts
+++ b/packages/commons/src/lib/options_interface.ts
@@ -47,6 +47,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     passwordDerivedKeySalt: string;
     encryptedDataKey: string;
     hoistedNoteId: string;
+    customDateTimeFormatString: string;
 
     // Multi-Factor Authentication
     mfaEnabled: boolean;

From 2e3a8dfacb8e91c271063dc3644f2be2d9bc4b13 Mon Sep 17 00:00:00 2001
From: iamvann <sovannsean9@gmail.com>
Date: Sun, 18 May 2025 03:36:39 +0800
Subject: [PATCH 2/3] fix/commet

---
 .../options/text_notes/date_time_format.ts    | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
index 5a16b3d2c..7ddf05565 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
+++ b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
@@ -1,9 +1,8 @@
-import OptionsWidget from "../options_widget.js"; // Path might need adjustment
-import { t } from "../../../../services/i18n.js"; // For internationalization, if you want to use it
-import type { OptionMap } from "@triliumnext/commons"; // For typing the options object
+import OptionsWidget from "../options_widget.js"; 
+import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "@triliumnext/commons"; 
+
 
-// Using t() for translatable strings is good practice if the project uses it.
-// If not, you can use plain strings.
 const TPL = /*html*/`
 <div class="options-section">
     <h4>${t("options.customDateTimeFormatTitle", "Custom Date/Time Format (Alt+T)")}</h4>
@@ -36,38 +35,38 @@ const TPL = /*html*/`
 `;
 
 export default class DateTimeFormatOptions extends OptionsWidget {
-    // Declare class properties with types if needed (jQuery objects are often typed as JQuery<HTMLElement>)
-    private $formatInput!: JQuery<HTMLInputElement>; // The "!" is a non-null assertion operator
+    
+    private $formatInput!: JQuery<HTMLInputElement>;
 
     doRender() {
-        this.$widget = $(TPL); // $ is jQuery, ensure it's available (likely is if OptionsWidget uses it)
+        this.$widget = $(TPL); 
         this.$formatInput = this.$widget.find(
             "input.custom-datetime-format-input"
-        ) as JQuery<HTMLInputElement>; // Type assertion for jQuery result
+        ) as JQuery<HTMLInputElement>; 
 
         this.$formatInput.on("input", () => {
-            const formatString = this.$formatInput.val() as string; // Get value, assert as string
+            const formatString = this.$formatInput.val() as string; 
             this.updateOption("customDateTimeFormatString", formatString);
         });
 
         return this.$widget;
     }
 
-    async optionsLoaded(options: OptionMap) { // Use the imported OptionMap type
+    async optionsLoaded(options: OptionMap) {
         const currentFormat = options.customDateTimeFormatString || "";
 
         if (this.$formatInput) {
             this.$formatInput.val(currentFormat);
         } else {
-            // Fallback logic as before, ensure $widget is available if $formatInput isn't yet
+
             console.warn(
                 "TriliumNext DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
             );
-            const inputField = this.$widget?.find( // Optional chaining for $widget
+            const inputField = this.$widget?.find( 
                 "input.custom-datetime-format-input"
-            ) as JQuery<HTMLInputElement> | undefined; // Result could be undefined
+            ) as JQuery<HTMLInputElement> | undefined; 
 
-            if (inputField?.length) { // Optional chaining and check length
+            if (inputField?.length) { 
                 this.$formatInput = inputField;
                 this.$formatInput.val(currentFormat);
             } else {

From d1f8e651f46c6a06f8f3cdf7c38b634176cc6296 Mon Sep 17 00:00:00 2001
From: iamvann <sovannsean9@gmail.com>
Date: Tue, 20 May 2025 19:46:50 +0800
Subject: [PATCH 3/3] fix: address the review feedback

---
 apps/client/src/services/utils.ts             | 20 ++++++-------------
 .../src/translations/en/translation.json      | 11 ++++++++++
 .../src/widgets/type_widgets/editable_text.ts | 10 +---------
 .../options/text_notes/date_time_format.ts    | 18 ++++++++---------
 4 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index 92ca2bc70..c31faf98d 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -125,22 +125,14 @@ function formatDateISO(date: Date) {
 }
 
 
-// old version
-// function formatDateTime(date: Date) {
-//     return `${formatDate(date)} ${formatTime(date)}`;
-// }
-
-// new version 
-export function formatDateTime(date: Date, userSuppliedFormat?: string): string { 
-    const DEFAULT_FORMAT = 'YYYY-MM-DD HH:mm'; 
-    let formatToUse = DEFAULT_FORMAT;
-
-    if (userSuppliedFormat && typeof userSuppliedFormat === 'string' && userSuppliedFormat.trim() !== "") {
-        formatToUse = userSuppliedFormat.trim();
-    }
+export function formatDateTime(date: Date, userSuppliedFormat?: string): string {
+    const DEFAULT_FORMAT = 'YYYY-MM-DD HH:mm';
+    const formatToUse = (typeof userSuppliedFormat === 'string' && userSuppliedFormat.trim() !== "")
+        ? userSuppliedFormat.trim()
+        : DEFAULT_FORMAT;
 
     if (!date) {
-        date = new Date(); 
+        date = new Date();
     }
 
     try {
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 24f104441..efa2e5a83 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1956,5 +1956,16 @@
     "title": "Appearance",
     "word_wrapping": "Word wrapping",
     "color-scheme": "Color scheme"
+  },
+  "custom_date_time_format": {
+    "title": "Custom Date/Time Format (Alt+T)",
+    "desc1": "Define a custom format for the date and time inserted using the Alt+T shortcut.",
+    "desc2": "Uses <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js format tokens</a>. Refer to the Day.js documentation for valid tokens.",
+    "important_label": "Important:",
+    "desc3": "If you provide a format string that Day.js does not recognize (e.g., mostly plain text without valid Day.js tokens), the text you typed might be inserted literally. If the format string is left empty, or if Day.js encounters a critical internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.",
+    "format_string_label": "Format String:",
+    "placeholder": "e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D",
+    "examples_label": "Examples of valid Day.js formats:",
+    "example_default": "Default-like"
   }
 }
diff --git a/apps/client/src/widgets/type_widgets/editable_text.ts b/apps/client/src/widgets/type_widgets/editable_text.ts
index 4e530f990..1670a0ce1 100644
--- a/apps/client/src/widgets/type_widgets/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets/editable_text.ts
@@ -287,7 +287,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
 
             // Touch bar integration
             if (hasTouchBar) {
-                for (const event of ["bold", "italic", "underline", "paragraph", "heading"]) {
+                for (const event of [ "bold", "italic", "underline", "paragraph", "heading" ]) {
                     editor.commands.get(event)?.on("change", () => this.triggerCommand("refreshTouchBar"));
                 }
             }
@@ -373,15 +373,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
             });
         }
     }
-    // old version
-    // insertDateTimeToTextCommand() {
-    //     const date = new Date();
-    //     const dateString = utils.formatDateTime(date);
 
-    //     this.addTextToEditor(dateString);
-    // }
-
-    // new version
     async insertDateTimeToTextCommand() { 
         const date = new Date();
         let userPreferredFormat = "";
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
index 7ddf05565..0690e77a9 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
+++ b/apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts
@@ -5,28 +5,28 @@ import type { OptionMap } from "@triliumnext/commons";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <h4>${t("options.customDateTimeFormatTitle", "Custom Date/Time Format (Alt+T)")}</h4>
+    <h4>${t("custom_date_time_format.title")}</h4>
 
     <p>
-        ${t("options.customDateTimeFormatDesc1", "Define a custom format for the date and time inserted using the Alt+T shortcut.")}
-        ${t("options.customDateTimeFormatDesc2", "Uses <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js format tokens</a>. Refer to the Day.js documentation for valid tokens.")}
+        ${t("custom_date_time_format.desc1")}
+        ${t("custom_date_time_format.desc2")}
     </p>
     <p>
-        <strong>${t("options.customDateTimeFormatImportant", "Important:")}</strong>
-        ${t("options.customDateTimeFormatDesc3", "If you provide a format string that Day.js does not recognize (e.g., mostly plain text without valid Day.js tokens), the text you typed might be inserted literally. If the format string is left empty, or if Day.js encounters a critical internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.")}
+        <strong>${t("custom_date_time_format.important_label")}</strong>
+        ${t("custom_date_time_format.desc3")}
     </p>
 
     <div class="form-group">
         <label for="customDateTimeFormatInput" style="margin-right: 10px;">
-            ${t("options.customDateTimeFormatLabel", "Format String:")}
+            ${t("custom_date_time_format.format_string_label")}
         </label>
         <input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input" 
-               placeholder="${t("options.customDateTimeFormatPlaceholder", "e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D")}" 
+               placeholder="${t("custom_date_time_format.placeholder")}" 
                style="width: 300px; display: inline-block;">
     </div>
     <p style="margin-top: 5px;">
-        <em>${t("options.customDateTimeFormatExamplesLabel", "Examples of valid Day.js formats:")}</em>
-        <code>YYYY-MM-DD HH:mm</code> (${t("options.customDateTimeFormatExampleDefault", "Default-like")}),
+        <em>${t("custom_date_time_format.examples_label")}</em>
+        <code>YYYY-MM-DD HH:mm</code> (${t("custom_date_time_format.example_default")}),
         <code>DD.MM.YYYY</code>,
         <code>MMMM D, YYYY h:mm A</code>,
         <code>[Today is] dddd</code>