feat: Add patterns to insert current date and time into doc (#3309)

* feat: Add patterns to insert current date and time into doc

* Add commands to title input too

* lint: Remove console.log

shared/editor/packages/basic.ts

@@ -13,6 +13,7 @@ import Image from "../nodes/Image";
 import Node from "../nodes/Node";
 import Paragraph from "../nodes/Paragraph";
 import Text from "../nodes/Text";
+import DateTime from "../plugins/DateTime";
 import History from "../plugins/History";
 import MaxLength from "../plugins/MaxLength";
 import PasteHandler from "../plugins/PasteHandler";
@@ -39,6 +40,7 @@ const basicPackage: (typeof Node | typeof Mark | typeof Extension)[] = [
   PasteHandler,
   Placeholder,
   MaxLength,
+  DateTime,
 ];
 
 export default basicPackage;

shared/editor/plugins/DateTime.ts

@@ -0,0 +1,39 @@
+import { InputRule } from "prosemirror-inputrules";
+import {
+  getCurrentDateAsString,
+  getCurrentDateTimeAsString,
+  getCurrentTimeAsString,
+} from "../../utils/date";
+import Extension from "../lib/Extension";
+import { EventType } from "../types";
+
+/**
+ * An editor extension that adds commands to insert the current date and time.
+ */
+export default class DateTime extends Extension {
+  get name() {
+    return "date_time";
+  }
+
+  inputRules() {
+    return [
+      // Note: There is a space at the end of the pattern here otherwise the
+      //  /datetime rule can never be matched.
+      new InputRule(/\/date\s$/, ({ tr }, _match, start, end) => {
+        tr.delete(start, end).insertText(getCurrentDateAsString() + " ");
+        this.editor.events.emit(EventType.blockMenuClose);
+        return tr;
+      }),
+      new InputRule(/\/time$/, ({ tr }, _match, start, end) => {
+        tr.delete(start, end).insertText(getCurrentTimeAsString() + " ");
+        this.editor.events.emit(EventType.blockMenuClose);
+        return tr;
+      }),
+      new InputRule(/\/datetime$/, ({ tr }, _match, start, end) => {
+        tr.delete(start, end).insertText(`${getCurrentDateTimeAsString()} `);
+        this.editor.events.emit(EventType.blockMenuClose);
+        return tr;
+      }),
+    ];
+  }
+}

shared/utils/date.ts

@@ -19,3 +19,44 @@ export function subtractDate(date: Date, period: DateFilter) {
       return date;
   }
 }
+
+/**
+ * Returns the current date as a string formatted depending on current locale.
+ *
+ * @returns The current date
+ */
+export function getCurrentDateAsString() {
+  return new Date().toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ * Returns the current time as a string formatted depending on current locale.
+ *
+ * @returns The current time
+ */
+export function getCurrentTimeAsString() {
+  return new Date().toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "numeric",
+  });
+}
+
+/**
+ * Returns the current date and time as a string formatted depending on current
+ * locale.
+ *
+ * @returns The current date and time
+ */
+export function getCurrentDateTimeAsString() {
+  return new Date().toLocaleString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  });
+}