refactor: super date time plugin [skip e2e]

standardnotes · Apr 15, 2024 · 795ca5b · 795ca5b
1 parent cf60d8f
commit 795ca5b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 59 deletions.
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/DateTime.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/DateTime.tsx
@@ -1,7 +1,7 @@
 import { BlockPickerOption } from '../BlockPickerPlugin/BlockPickerOption'
 import { LexicalEditor } from 'lexical'
 import { LexicalIconName } from '@/Components/Icon/LexicalIcons'
-import { INSERT_DATETIME_COMMAND, INSERT_DATE_COMMAND, INSERT_TIME_COMMAND } from '../Commands'
+import { INSERT_DATETIME_COMMAND } from '../Commands'
 
 export function GetDatetimeBlocks(editor: LexicalEditor) {
   return [
@@ -15,13 +15,13 @@ export function GetDatetimeBlocks(editor: LexicalEditor) {
       name: 'Current time',
       iconName: 'authenticator',
       keywords: ['time', 'current'],
-      onSelect: () => editor.dispatchCommand(INSERT_TIME_COMMAND, 'datetime'),
+      onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'time'),
     },
     {
       name: 'Current date',
       iconName: 'authenticator',
       keywords: ['date', 'current'],
-      onSelect: () => editor.dispatchCommand(INSERT_DATE_COMMAND, 'datetime'),
+      onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'date'),
     },
   ]
 }

diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Commands.ts b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Commands.ts
@@ -2,8 +2,7 @@ import { createCommand, LexicalCommand } from 'lexical'
 
 export const INSERT_FILE_COMMAND: LexicalCommand<string> = createCommand('INSERT_FILE_COMMAND')
 export const INSERT_BUBBLE_COMMAND: LexicalCommand<string> = createCommand('INSERT_BUBBLE_COMMAND')
-export const INSERT_TIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_TIME_COMMAND')
-export const INSERT_DATE_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATE_COMMAND')
-export const INSERT_DATETIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATETIME_COMMAND')
+export const INSERT_DATETIME_COMMAND: LexicalCommand<'date' | 'time' | 'datetime'> =
+  createCommand('INSERT_DATETIME_COMMAND')
 export const INSERT_PASSWORD_COMMAND: LexicalCommand<string> = createCommand('INSERT_PASSWORD_COMMAND')
 export const INSERT_REMOTE_IMAGE_COMMAND: LexicalCommand<string> = createCommand('INSERT_REMOTE_IMAGE_COMMAND')
diff --git a/...ages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx b/...ages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx
@@ -5,9 +5,11 @@ import {
   $getSelection,
   $isRangeSelection,
   $createParagraphNode,
+  $isParagraphNode,
+  LexicalNode,
 } from 'lexical'
 import { useEffect } from 'react'
-import { INSERT_DATETIME_COMMAND, INSERT_TIME_COMMAND, INSERT_DATE_COMMAND } from '../Commands'
+import { INSERT_DATETIME_COMMAND } from '../Commands'
 import { mergeRegister } from '@lexical/utils'
 import { $createHeadingNode } from '@lexical/rich-text'
 import { formatDateAndTimeForNote, dateToHoursAndMinutesTimeString } from '@/Utils/DateUtils'
@@ -18,79 +20,59 @@ export default function DatetimePlugin(): JSX.Element | null {
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerCommand<string>(
+      editor.registerCommand(
         INSERT_DATETIME_COMMAND,
-        () => {
+        (payload) => {
           const now = new Date()
           const selection = $getSelection()
 
           if (!$isRangeSelection(selection)) {
             return false
           }
 
-          const heading = $createHeadingNode('h1')
-          const dateString = $createTextNode(formatDateAndTimeForNote(now, false))
-          dateString.setFormat('italic')
-          heading.append(dateString)
+          const focusNode = selection.focus.getNode()
+          const focusOffset = selection.focus.offset
 
-          const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now))
-          timeNode.toggleFormat('superscript')
-          timeNode.toggleFormat('italic')
-          heading.append(timeNode)
+          const shouldAddHR = $isParagraphNode(focusNode) && focusOffset === 0
 
-          const newLineNode = $createParagraphNode()
+          const shouldAddDate = payload.includes('date')
+          const shouldAddTime = payload.includes('time')
 
-          selection.insertNodes([heading, newLineNode])
+          const nodesToInsert: LexicalNode[] = []
 
-          editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+          const containingNode = shouldAddHR
+            ? $createHeadingNode(payload === 'datetime' ? 'h1' : 'h2')
+            : $createParagraphNode()
 
-          return true
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
-      editor.registerCommand<string>(
-        INSERT_DATE_COMMAND,
-        () => {
-          const now = new Date()
-          const selection = $getSelection()
-
-          if (!$isRangeSelection(selection)) {
-            return false
+          if (shouldAddDate) {
+            const dateNode = $createTextNode(formatDateAndTimeForNote(now, false))
+            dateNode.setFormat('italic')
+            containingNode.append(dateNode)
           }
 
-          const heading = $createHeadingNode('h1')
-          const dateString = $createTextNode(formatDateAndTimeForNote(now, false))
-          dateString.setFormat('italic')
-          heading.append(dateString)
-
-          const newLineNode = $createParagraphNode()
-
-          selection.insertNodes([heading, newLineNode])
+          if (shouldAddTime) {
+            const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now))
+            timeNode.toggleFormat('italic')
+            if (shouldAddDate) {
+              timeNode.toggleFormat('superscript')
+            }
+            containingNode.append(timeNode)
+          }
 
-          editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+          containingNode.append($createTextNode(' '))
 
-          return true
-        },
-        COMMAND_PRIORITY_EDITOR,
-      ),
-      editor.registerCommand<string>(
-        INSERT_TIME_COMMAND,
-        () => {
-          const now = new Date()
-          const selection = $getSelection()
+          nodesToInsert.push(containingNode)
 
-          if (!$isRangeSelection(selection)) {
-            return false
+          const newLineNode = $createParagraphNode()
+          if (shouldAddHR) {
+            nodesToInsert.push(newLineNode)
           }
 
-          const heading = $createHeadingNode('h2')
-          const dateString = $createTextNode(dateToHoursAndMinutesTimeString(now))
-          dateString.setFormat('italic')
-          heading.append(dateString)
+          selection.insertNodes(nodesToInsert)
 
-          const newLineNode = $createParagraphNode()
-
-          selection.insertNodes([heading, newLineNode])
+          if (shouldAddHR) {
+            editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
+          }
 
           return true
         },