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

app/scenes/Document/components/EditableTitle.tsx

@@ -4,8 +4,13 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { MAX_TITLE_LENGTH } from "@shared/constants";
 import { light } from "@shared/theme";
+import {
+  getCurrentDateAsString,
+  getCurrentDateTimeAsString,
+  getCurrentTimeAsString,
+} from "@shared/utils/date";
 import Document from "~/models/Document";
-import ContentEditable from "~/components/ContentEditable";
+import ContentEditable, { RefHandle } from "~/components/ContentEditable";
 import Star, { AnimatedStar } from "~/components/Star";
 import useEmojiWidth from "~/hooks/useEmojiWidth";
 import usePolicy from "~/hooks/usePolicy";
@@ -42,7 +47,7 @@ const EditableTitle = React.forwardRef(
       starrable,
       placeholder,
     }: Props,
-    ref: React.RefObject<HTMLSpanElement>
+    ref: React.RefObject<RefHandle>
   ) => {
     const can = usePolicy(document.id);
     const normalizedTitle =
@@ -92,6 +97,24 @@ const EditableTitle = React.forwardRef(
       [onGoToNextInput, onSave]
     );
 
+    const handleChange = React.useCallback(
+      (text: string) => {
+        if (/\/date\s$/.test(text)) {
+          onChange(getCurrentDateAsString());
+          ref.current?.focusAtEnd();
+        } else if (/\/time$/.test(text)) {
+          onChange(getCurrentTimeAsString());
+          ref.current?.focusAtEnd();
+        } else if (/\/datetime$/.test(text)) {
+          onChange(getCurrentDateTimeAsString());
+          ref.current?.focusAtEnd();
+        } else {
+          onChange(text);
+        }
+      },
+      [ref, onChange]
+    );
+
     const emojiWidth = useEmojiWidth(document.emoji, {
       fontSize,
       lineHeight,
@@ -100,7 +123,7 @@ const EditableTitle = React.forwardRef(
     return (
       <Title
         onClick={handleClick}
-        onChange={onChange}
+        onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         value={normalizedTitle}

app/scenes/Document/components/Editor.tsx

@@ -5,6 +5,7 @@ import { useRouteMatch } from "react-router-dom";
 import fullPackage from "@shared/editor/packages/full";
 import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
+import { RefHandle } from "~/components/ContentEditable";
 import DocumentMetaWithViews from "~/components/DocumentMetaWithViews";
 import Editor, { Props as EditorProps } from "~/components/Editor";
 import Flex from "~/components/Flex";
@@ -41,7 +42,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     activeLinkEvent,
     setActiveLinkEvent,
   ] = React.useState<MouseEvent | null>(null);
-  const titleRef = React.useRef<HTMLSpanElement>(null);
+  const titleRef = React.useRef<RefHandle>(null);
   const { t } = useTranslation();
   const match = useRouteMatch();
 
@@ -114,9 +115,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
               : documentHistoryUrl(document)
           }
           rtl={
-            titleRef.current
-              ? window.getComputedStyle(titleRef.current).direction === "rtl"
-              : false
+            titleRef.current?.getComputedDirection() === "rtl" ? true : false
           }
         />
       )}