diff --git a/apps/web/src/components/editor/title-box.tsx b/apps/web/src/components/editor/title-box.tsx index 99f01c30f..91ba1fab8 100644 --- a/apps/web/src/components/editor/title-box.tsx +++ b/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); }} diff --git a/packages/editor/src/extensions/date-time/date-time.ts b/packages/editor/src/extensions/date-time/date-time.ts index 6691c9a3e..362f1c62e 100644 --- a/packages/editor/src/extensions/date-time/date-time.ts +++ b/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; +} diff --git a/packages/editor/src/extensions/task-list/component.tsx b/packages/editor/src/extensions/task-list/component.tsx index ef58a015e..d6604587f 100644 --- a/packages/editor/src/extensions/task-list/component.tsx +++ b/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 @@ -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 } diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index 69a696cb6..c144c9f3c 100644 --- a/packages/editor/src/index.ts +++ b/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,