Merge branch 'develop' into tab-row-scroll

apps/client/src/menus/context_menu.ts

@@ -192,13 +192,16 @@ class ContextMenu {
                         // it's important to stop the propagation especially for sub-menus, otherwise the event
                         // might be handled again by top-level menu
                         return false;
-                    })
-                    .on("mouseup", (e) =>{
+                    });
+
+                if (!this.isMobile) {
+                    $item.on("mouseup", (e) =>{
                         e.stopPropagation();
                         // Hide the content menu on mouse up to prevent the mouse event from propagating to the elements below.
                         this.hide();
                         return false;
                     });
+                }
 
                 if ("enabled" in item && item.enabled !== undefined && !item.enabled) {
                     $item.addClass("disabled");

apps/client/src/services/keyboard_actions.ts

@@ -115,6 +115,7 @@ function updateDisplayedShortcuts($container: JQuery<HTMLElement>) {
 export default {
     updateDisplayedShortcuts,
     setupActionsForElement,
+    getAction,
     getActions,
     getActionsForScope
 };

apps/client/src/services/utils.ts

@@ -124,8 +124,12 @@ function formatDateISO(date: Date) {
     return `${date.getFullYear()}-${padNum(date.getMonth() + 1)}-${padNum(date.getDate())}`;
 }
 
-function formatDateTime(date: Date) {
-    return `${formatDate(date)} ${formatTime(date)}`;
+function formatDateTime(date: Date, userSuppliedFormat?: string): string {
+    if (userSuppliedFormat?.trim()) {
+        return dayjs(date).format(userSuppliedFormat);
+    } else {
+        return `${formatDate(date)} ${formatTime(date)}`;
+    }
 }
 
 function localNowDateTime() {

apps/client/src/translations/en/translation.json

@@ -1431,6 +1431,12 @@
     "label": "Automatic read-only size (text notes)",
     "unit": "characters"
   },
+  "custom_date_time_format": {
+    "title": "Custom Date/Time Format",
+    "description": "Customize the format of the date and time inserted via <kbd></kbd> or the toolbar. See <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js docs</a> for available format tokens.",
+    "format_string": "Format string:",
+    "formatted_time": "Formatted date/time:"
+  },
   "i18n": {
     "title": "Localization",
     "language": "Language",

apps/client/src/widgets/type_widgets/ckeditor/config.ts

@@ -189,7 +189,7 @@ export function buildClassicToolbar(multilineToolbar: boolean) {
                 {
                     label: "Insert",
                     icon: "plus",
-                    items: ["imageUpload", "|", "link", "bookmark", "internallink", "includeNote", "|", "specialCharacters", "emoji", "math", "mermaid", "horizontalLine", "pageBreak"]
+                    items: ["imageUpload", "|", "link", "bookmark", "internallink", "includeNote", "|", "specialCharacters", "emoji", "math", "mermaid", "horizontalLine", "pageBreak", "dateTime"]
                 },
                 "|",
                 "outdent",
@@ -222,6 +222,7 @@ export function buildFloatingToolbar() {
                 "|",
                 "code",
                 "link",
+                "bookmark",
                 "removeFormat",
                 "internallink",
                 "cuttonote"
@@ -243,7 +244,7 @@ export function buildFloatingToolbar() {
             {
                 label: "Insert",
                 icon: "plus",
-                items: ["bookmark", "internallink", "includeNote", "|", "math", "mermaid", "horizontalLine", "pageBreak"]
+                items: ["bookmark", "internallink", "includeNote", "|", "math", "mermaid", "horizontalLine", "pageBreak", "dateTime"]
             },
             "|",
             "outdent",

apps/client/src/widgets/type_widgets/content_widget.ts

@@ -8,6 +8,7 @@ import HeadingStyleOptions from "./options/text_notes/heading_style.js";
 import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
 import HighlightsListOptions from "./options/text_notes/highlights_list.js";
 import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
+import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 import CodeEditorOptions from "./options/code_notes/code_editor.js";
 import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
 import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
@@ -88,7 +89,8 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (typeof NoteContextAw
         CodeBlockOptions,
         TableOfContentsOptions,
         HighlightsListOptions,
-        TextAutoReadOnlySizeOptions
+        TextAutoReadOnlySizeOptions,
+        DateTimeFormatOptions
     ],
     _optionsCodeNotes: [
         CodeEditorOptions,

apps/client/src/widgets/type_widgets/editable_text.ts

@@ -266,7 +266,7 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                         }
 
                         item.on("change:isOpen", () => {
-                            if (!("isOpen" in item) || !item.isOpen ) {
+                            if (!("isOpen" in item) || !item.isOpen) {
                                 return;
                             }
 
@@ -375,9 +375,10 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         }
     }
 
-    insertDateTimeToTextCommand() {
+    insertDateTimeToTextCommand() { 
         const date = new Date();
-        const dateString = utils.formatDateTime(date);
+        const customDateTimeFormat = options.get("customDateTimeFormat");
+        const dateString = utils.formatDateTime(date, customDateTimeFormat);
 
         this.addTextToEditor(dateString);
     }

apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts

@@ -0,0 +1,67 @@
+import OptionsWidget from "../options_widget.js";
+import { t } from "../../../../services/i18n.js";
+import type { OptionMap } from "@triliumnext/commons";
+import utils from "../../../../services/utils.js";
+import keyboardActionsService from "../../../../services/keyboard_actions.js";
+import linkService from "../../../.././services/link.js";
+
+const TPL = /*html*/`
+<div class="options-section">
+    <h4>${t("custom_date_time_format.title")}</h4>
+
+    <p class="description">
+        ${t("custom_date_time_format.description")}
+    </p>
+
+    <div class="form-group row align-items-center">
+        <div class="col-6">
+            <label for="custom-date-time-format">${t("custom_date_time_format.format_string")}</label>
+            <input type="text" id="custom-date-time-format" class="form-control custom-date-time-format" placeholder="YYYY-MM-DD HH:mm">
+        </div>
+        <div class="col-6">
+            <label>${t("custom_date_time_format.formatted_time")}</label>
+            <div class="formatted-date"></div>
+        </div>
+    </div>
+</div>
+`;
+
+export default class DateTimeFormatOptions extends OptionsWidget {
+
+    private $formatInput!: JQuery<HTMLInputElement>;
+    private $formattedDate!: JQuery<HTMLInputElement>;
+
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$formatInput = this.$widget.find("input.custom-date-time-format");
+        this.$formattedDate = this.$widget.find(".formatted-date");
+
+        this.$formatInput.on("input", () => {
+            const dateString = utils.formatDateTime(new Date(), this.$formatInput.val());
+            this.$formattedDate.text(dateString);
+        });
+
+        this.$formatInput.on('blur keydown', (e) => {
+            if (e.type === 'blur' || (e.type === 'keydown' && e.key === 'Enter')) {
+                this.updateOption("customDateTimeFormat", this.$formatInput.val());
+            }
+        });
+
+        return this.$widget;
+    }
+
+    async optionsLoaded(options: OptionMap) {
+        const shortcutKey = (await keyboardActionsService.getAction("insertDateTimeToText")).effectiveShortcuts.join(", ");
+        const $link = await linkService.createLink("_hidden/_options/_optionsShortcuts", {
+            "title": shortcutKey,
+            "showTooltip": false
+        });
+        this.$widget.find(".description").find("kbd").replaceWith($link);
+
+        const customDateTimeFormat = options.customDateTimeFormat || "YYYY-MM-DD HH:mm";
+        this.$formatInput.val(customDateTimeFormat);
+        const dateString = utils.formatDateTime(new Date(), customDateTimeFormat);
+        this.$formattedDate.text(dateString);
+    }
+}