feat: Add date and time slash commands to block menu

app/editor/menus/block.ts

@@ -16,6 +16,8 @@ import {
   InfoIcon,
   LinkIcon,
   AttachmentIcon,
+  ClockIcon,
+  CalendarIcon,
 } from "outline-icons";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
@@ -124,6 +126,24 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] {
       keywords: "page print break line",
       attrs: { markup: "***" },
     },
+    {
+      name: "date",
+      title: dictionary.insertDate,
+      keywords: "clock",
+      icon: CalendarIcon,
+    },
+    {
+      name: "time",
+      title: dictionary.insertTime,
+      keywords: "clock",
+      icon: ClockIcon,
+    },
+    {
+      name: "datetime",
+      title: dictionary.insertDateTime,
+      keywords: "clock",
+      icon: CalendarIcon,
+    },
     {
       name: "separator",
     },

app/hooks/useDictionary.ts

@@ -71,6 +71,9 @@ export default function useDictionary() {
       tipNotice: t("Tip notice"),
       warning: t("Warning"),
       warningNotice: t("Warning notice"),
+      insertDate: t("Current date"),
+      insertTime: t("Current time"),
+      insertDateTime: t("Current date and time"),
     };
   }, [t]);
 }

package.json

@@ -124,7 +124,7 @@
     "mobx-react": "^6.3.1",
     "natural-sort": "^1.0.0",
     "nodemailer": "^6.6.1",
-    "outline-icons": "^1.41.1",
+    "outline-icons": "^1.42.0",
     "oy-vey": "^0.10.0",
     "passport": "^0.4.1",
     "passport-google-oauth2": "^0.2.0",

shared/editor/plugins/DateTime.ts

@@ -1,11 +1,13 @@
 import { InputRule } from "prosemirror-inputrules";
+import { Schema } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
 import {
   getCurrentDateAsString,
   getCurrentDateTimeAsString,
   getCurrentTimeAsString,
 } from "../../utils/date";
 import Extension from "../lib/Extension";
-import { EventType } from "../types";
+import { Dispatch, EventType } from "../types";
 
 /**
  * An editor extension that adds commands to insert the current date and time.
@@ -18,22 +20,41 @@ export default class DateTime extends Extension {
   inputRules() {
     return [
       // Note: There is a space at the end of the pattern here otherwise the
-      //  /datetime rule can never be matched.
+      // /datetime rule can never be matched.
+      // these extra input patterns are needed until the block menu matches
+      // in places other than the start of a line
       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) => {
+      new InputRule(/\/time\s$/, ({ 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) => {
+      new InputRule(/\/datetime\s$/, ({ tr }, _match, start, end) => {
         tr.delete(start, end).insertText(`${getCurrentDateTimeAsString()} `);
         this.editor.events.emit(EventType.blockMenuClose);
         return tr;
       }),
     ];
   }
+
+  commands(_options: { schema: Schema }) {
+    return {
+      date: () => (state: EditorState, dispatch: Dispatch) => {
+        dispatch(state.tr.insertText(getCurrentDateAsString() + " "));
+        return true;
+      },
+      time: () => (state: EditorState, dispatch: Dispatch) => {
+        dispatch(state.tr.insertText(getCurrentTimeAsString() + " "));
+        return true;
+      },
+      datetime: () => (state: EditorState, dispatch: Dispatch) => {
+        dispatch(state.tr.insertText(getCurrentDateTimeAsString() + " "));
+        return true;
+      },
+    };
+  }
 }

shared/i18n/locales/en_US/translation.json

@@ -230,6 +230,9 @@
   "Tip notice": "Tip notice",
   "Warning": "Warning",
   "Warning notice": "Warning notice",
+  "Current date": "Current date",
+  "Current time": "Current time",
+  "Current date and time": "Current date and time",
   "Could not import file": "Could not import file",
   "Show path to document": "Show path to document",
   "Path to document": "Path to document",