diff --git a/packages/editor/package.json b/packages/editor/package.json index 16346f1aa..502cfe9f4 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -7,6 +7,7 @@ "dependencies": { "@emotion/react": "^11.10.0", "@notesnook/theme": "*", + "@notesnook/core": "*", "@social-embed/lib": "^0.0.2-next.1", "@theme-ui/components": "^0.14.7", "@theme-ui/core": "^0.14.7", diff --git a/packages/editor/src/extensions/date-time/date-time.ts b/packages/editor/src/extensions/date-time/date-time.ts index d3b78f64a..ed8981eb5 100644 --- a/packages/editor/src/extensions/date-time/date-time.ts +++ b/packages/editor/src/extensions/date-time/date-time.ts @@ -23,6 +23,9 @@ import { InputRuleFinder, ExtendedRegExpMatchArray } from "@tiptap/core"; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import { formatDate } from "@notesnook/core/utils/date"; declare module "@tiptap/core" { interface Commands { @@ -44,8 +47,21 @@ declare module "@tiptap/core" { } } -export const DateTime = Extension.create({ +export type DateTimeOptions = { + dateFormat: string; + timeFormat: "12-hour" | "24-hour"; +}; + +export const DateTime = Extension.create({ name: "datetime", + + addOptions() { + return { + dateFormat: "DD-MM-YYYY", + timeFormat: "12-hour" + }; + }, + addKeyboardShortcuts() { return { "Alt-t": ({ editor }) => editor.commands.insertTime(), @@ -59,15 +75,31 @@ export const DateTime = Extension.create({ insertDate: () => ({ commands }) => - commands.insertContent(currentDate()), + commands.insertContent( + formatDate(Date.now(), { + dateFormat: this.options.dateFormat, + type: "date" + }) + ), insertTime: () => ({ commands }) => - commands.insertContent(currentTime()), + commands.insertContent( + formatDate(Date.now(), { + timeFormat: this.options.timeFormat, + type: "time" + }) + ), insertDateTime: () => ({ commands }) => - commands.insertContent(currentDateTime()) + commands.insertContent( + formatDate(Date.now(), { + dateFormat: this.options.dateFormat, + timeFormat: this.options.timeFormat, + type: "date-time" + }) + ) }; }, @@ -76,44 +108,35 @@ export const DateTime = Extension.create({ shortcutInputRule({ shortcut: "/time", replace: () => { - return currentTime(); + return formatDate(Date.now(), { + timeFormat: this.options.timeFormat, + type: "time" + }); } }), shortcutInputRule({ shortcut: "/date", replace: () => { - return currentDate(); + return formatDate(Date.now(), { + dateFormat: this.options.dateFormat, + type: "date" + }); } }), shortcutInputRule({ shortcut: "/now", replace: () => { - return currentDateTime(); + return formatDate(Date.now(), { + dateFormat: this.options.dateFormat, + timeFormat: this.options.timeFormat, + type: "date-time" + }); } }) ]; } }); -function currentTime() { - return new Date().toLocaleTimeString(window.navigator.languages.slice(), { - hour: "2-digit", - minute: "2-digit" - }); -} - -function currentDateTime() { - return `${currentDate()}, ${currentTime()}`; -} - -function currentDate() { - return new Date().toLocaleDateString(window.navigator.languages.slice(), { - month: "long", - day: "2-digit", - year: "numeric" - }); -} - function shortcutInputRule(config: { shortcut: string; replace: () => string; diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index d0fdbdee9..9537d08df 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -44,7 +44,7 @@ import BulletList from "./extensions/bullet-list"; import { ClipboardTextSerializer } from "./extensions/clipboard-text-serializer"; import { CodeBlock } from "./extensions/code-block"; import { Codemark } from "./extensions/code-mark"; -import { DateTime } from "./extensions/date-time"; +import { DateTime, DateTimeOptions } from "./extensions/date-time"; import { EmbedNode } from "./extensions/embed"; import FontFamily from "./extensions/font-family"; import FontSize from "./extensions/font-size"; @@ -88,10 +88,11 @@ const CoreExtensions = Object.entries(TiptapCoreExtensions) .filter(([name]) => name !== "ClipboardTextSerializer") .map(([, extension]) => extension); -type TiptapOptions = EditorOptions & +export type TiptapOptions = EditorOptions & Omit & Omit & Omit & + DateTimeOptions & OpenLinkOptions & { downloadOptions?: DownloadOptions; theme: Theme; @@ -113,6 +114,8 @@ const useTiptap = ( onOpenLink, onBeforeCreate, downloadOptions, + dateFormat, + timeFormat, ...restOptions } = options; const PortalProviderAPI = usePortalProvider(); @@ -235,7 +238,7 @@ const useTiptap = ( MathBlock, KeepInView, SelectionPersist, - DateTime, + DateTime.configure({ dateFormat, timeFormat }), KeyMap, WebClipNode ], @@ -252,7 +255,9 @@ const useTiptap = ( onOpenAttachmentPicker, PortalProviderAPI, onBeforeCreate, - onOpenLink + onOpenLink, + dateFormat, + timeFormat ] );