editor: support datetime shortcuts in task list title & note title (#3746)

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

apps/web/src/components/editor/title-box.tsx

@@ -26,6 +26,8 @@ import useTablet from "../../hooks/use-tablet";
 import { useEditorConfig } from "./context";
 import { getFontById } from "@notesnook/editor";
 import { AppEventManager, AppEvents } from "../../common/app-events";
+import { replaceDateTime } from "@notesnook/editor/dist/extensions/date-time";
+import { useStore as useSettingsStore } from "../../stores/setting-store";
 
 type TitleBoxProps = {
   readonly: boolean;
@@ -38,6 +40,9 @@ function TitleBox(props: TitleBoxProps) {
   const isMobile = useMobile();
   const isTablet = useTablet();
   const { editorConfig } = useEditorConfig();
+  const dateFormat = useSettingsStore((store) => store.dateFormat);
+  const timeFormat = useSettingsStore((store) => store.timeFormat);
+
   const fontFamily = useMemo(
     () => getFontById(editorConfig.fontFamily)?.font || "heading",
     [editorConfig.fontFamily]
@@ -111,6 +116,11 @@ function TitleBox(props: TitleBoxProps) {
       }}
       onChange={(e) => {
         const { sessionId, id } = store.get().session;
+        e.target.value = replaceDateTime(
+          e.target.value,
+          dateFormat,
+          timeFormat
+        );
         debouncedOnTitleChange(sessionId, id, e.target.value);
         updateFontSize(e.target.value.length);
       }}

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

@@ -174,3 +174,36 @@ function textInputRule(config: {
     }
   });
 }
+
+export function replaceDateTime(
+  value: string,
+  dateFormat = "DD-MM-YYYY",
+  timeFormat: "12-hour" | "24-hour" = "12-hour"
+) {
+  value = value.replaceAll(
+    "/time ",
+    formatDate(Date.now(), {
+      timeFormat,
+      type: "time"
+    }) + " "
+  );
+
+  value = value.replaceAll(
+    "/date ",
+    formatDate(Date.now(), {
+      dateFormat,
+      type: "date"
+    }) + " "
+  );
+
+  value = value.replaceAll(
+    "/now ",
+    formatDate(Date.now(), {
+      dateFormat,
+      timeFormat,
+      type: "date-time"
+    }) + " "
+  );
+
+  return value;
+}

packages/editor/src/extensions/task-list/component.tsx

@@ -31,6 +31,7 @@ import { ReactNodeViewProps } from "../react";
 import { TaskItemNode } from "../task-item";
 import { TaskListAttributes, TaskListNode } from "./task-list";
 import { countCheckedItems, deleteCheckedItems, sortList } from "./utils";
+import { replaceDateTime } from "../date-time";
 
 export function TaskListComponent(
   props: ReactNodeViewProps<TaskListAttributes>
@@ -133,6 +134,11 @@ export function TaskListComponent(
             }}
             placeholder="Untitled"
             onChange={(e) => {
+              e.target.value = replaceDateTime(
+                e.target.value,
+                editor.current?.storage.dateFormat,
+                editor.current?.storage.timeFormat
+              );
               updateAttributes(
                 { title: e.target.value },
                 { addToHistory: true, preventUpdate: false }

packages/editor/src/index.ts

@@ -308,6 +308,8 @@ const useTiptap = (
       ],
       onBeforeCreate: ({ editor }) => {
         editor.storage.portalProviderAPI = PortalProviderAPI;
+        editor.storage.dateFormat = dateFormat;
+        editor.storage.timeFormat = timeFormat;
         if (onBeforeCreate) onBeforeCreate({ editor });
       },
       injectCSS: false,