diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/DateTime.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/DateTime.tsx index 04dde6e38b9..cc3ba30afda 100644 --- 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 index 215d9199b9f..33bfb5e54dd 100644 --- 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 = createCommand('INSERT_FILE_COMMAND') export const INSERT_BUBBLE_COMMAND: LexicalCommand = createCommand('INSERT_BUBBLE_COMMAND') -export const INSERT_TIME_COMMAND: LexicalCommand = createCommand('INSERT_TIME_COMMAND') -export const INSERT_DATE_COMMAND: LexicalCommand = createCommand('INSERT_DATE_COMMAND') -export const INSERT_DATETIME_COMMAND: LexicalCommand = createCommand('INSERT_DATETIME_COMMAND') +export const INSERT_DATETIME_COMMAND: LexicalCommand<'date' | 'time' | 'datetime'> = + createCommand('INSERT_DATETIME_COMMAND') export const INSERT_PASSWORD_COMMAND: LexicalCommand = createCommand('INSERT_PASSWORD_COMMAND') export const INSERT_REMOTE_IMAGE_COMMAND: LexicalCommand = createCommand('INSERT_REMOTE_IMAGE_COMMAND') diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx index 2c3e4ad8742..e59b9507a02 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx +++ b/packages/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,9 +20,9 @@ export default function DatetimePlugin(): JSX.Element | null { useEffect(() => { return mergeRegister( - editor.registerCommand( + editor.registerCommand( INSERT_DATETIME_COMMAND, - () => { + (payload) => { const now = new Date() const selection = $getSelection() @@ -28,69 +30,49 @@ export default function DatetimePlugin(): JSX.Element | null { 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( - 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( - 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 },