From 0edb009cb8da449defed283633b2e60a864f6402 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 10 Nov 2022 21:07:41 -0600 Subject: [PATCH 1/2] feat(dev): insert current date and time command in super note --- .../Plugins/HorizontalRulePlugin/index.ts | 1 - .../blocks-editor/src/Lexical/Theme/base.scss | 4 +- .../BlockEditor/BlockEditorComponent.tsx | 2 + .../BlockPickerPlugin/BlockPickerPlugin.tsx | 2 + .../BlockPickerPlugin/Blocks/DateTime.tsx | 23 ++++ .../BlockEditor/Plugins/Commands.ts | 3 + .../Plugins/DateTimePlugin/DateTimePlugin.tsx | 104 ++++++++++++++++++ .../web/src/javascripts/Utils/DateUtils.ts | 6 + 8 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx create mode 100644 packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx diff --git a/packages/blocks-editor/src/Lexical/Plugins/HorizontalRulePlugin/index.ts b/packages/blocks-editor/src/Lexical/Plugins/HorizontalRulePlugin/index.ts index 02b6b26fb8d..e6ec895c4cf 100644 --- a/packages/blocks-editor/src/Lexical/Plugins/HorizontalRulePlugin/index.ts +++ b/packages/blocks-editor/src/Lexical/Plugins/HorizontalRulePlugin/index.ts @@ -35,7 +35,6 @@ export default function HorizontalRulePlugin(): null { if (focusNode !== null) { const horizontalRuleNode = $createHorizontalRuleNode(); - selection.insertParagraph(); selection.focus .getNode() .getTopLevelElementOrThrow() diff --git a/packages/blocks-editor/src/Lexical/Theme/base.scss b/packages/blocks-editor/src/Lexical/Theme/base.scss index b50ba09f5dc..e0b7c00e196 100644 --- a/packages/blocks-editor/src/Lexical/Theme/base.scss +++ b/packages/blocks-editor/src/Lexical/Theme/base.scss @@ -1041,7 +1041,7 @@ body { } hr { - padding: 2px 2px; + padding: 2px 0px; border: none; margin: 1em 0; cursor: pointer; @@ -1051,7 +1051,7 @@ body { content: ''; display: block; height: 2px; - background-color: var(--sn-stylekit-contrast-border-color); + background-color: var(--sn-stylekit-secondary-background-color); line-height: 2px; } diff --git a/packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx b/packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx index 27a08b8d2dd..cf2e333f078 100644 --- a/packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx +++ b/packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx @@ -15,6 +15,7 @@ import ItemBubblePlugin from './Plugins/ItemBubblePlugin/ItemBubblePlugin' import { NodeObserverPlugin } from './Plugins/NodeObserverPlugin/NodeObserverPlugin' import { FilesController } from '@/Controllers/FilesController' import FilesControllerProvider from '@/Controllers/FilesControllerProvider' +import DatetimePlugin from './Plugins/DateTimePlugin/DateTimePlugin' const NotePreviewCharLimit = 160 @@ -68,6 +69,7 @@ export const BlockEditor: FunctionComponent = ({ + diff --git a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx index aaab09bf631..b2c3af42721 100644 --- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx +++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx @@ -20,6 +20,7 @@ import { GetEmbedsBlocks } from './Blocks/Embeds' import { GetDynamicTableBlocks, GetTableBlock } from './Blocks/Table' import Popover from '@/Components/Popover/Popover' import { PopoverClassNames } from '../ClassNames' +import { GetDatetimeBlocks } from './Blocks/DateTime' export default function BlockPickerMenuPlugin(): JSX.Element { const [editor] = useLexicalComposerContext() @@ -45,6 +46,7 @@ export default function BlockPickerMenuPlugin(): JSX.Element { GetQuoteBlock(editor), GetCodeBlock(editor), GetDividerBlock(editor), + ...GetDatetimeBlocks(editor), ...GetAlignmentBlocks(editor), GetCollapsibleBlock(editor), ...GetEmbedsBlocks(editor), diff --git a/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx new file mode 100644 index 00000000000..ed1735ca43a --- /dev/null +++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx @@ -0,0 +1,23 @@ +import { BlockPickerOption } from '../BlockPickerOption' +import { LexicalEditor } from 'lexical' +import { INSERT_DATETIME_COMMAND, INSERT_DATE_COMMAND, INSERT_TIME_COMMAND } from '../../Commands' + +export function GetDatetimeBlocks(editor: LexicalEditor) { + return [ + new BlockPickerOption('Current date and time', { + iconName: 'authenticator', + keywords: ['date'], + onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'datetime'), + }), + new BlockPickerOption('Current time', { + iconName: 'authenticator', + keywords: ['time'], + onSelect: () => editor.dispatchCommand(INSERT_TIME_COMMAND, 'datetime'), + }), + new BlockPickerOption('Current date', { + iconName: 'authenticator', + keywords: ['date'], + onSelect: () => editor.dispatchCommand(INSERT_DATE_COMMAND, 'datetime'), + }), + ] +} diff --git a/packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts b/packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts index 689bfed852c..e4541f61a6d 100644 --- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts +++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts @@ -2,3 +2,6 @@ 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') diff --git a/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx b/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx new file mode 100644 index 00000000000..ddd8618ab3f --- /dev/null +++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx @@ -0,0 +1,104 @@ +import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' +import { + COMMAND_PRIORITY_EDITOR, + $getRoot, + $createTextNode, + $getSelection, + $isRangeSelection, + $createParagraphNode, +} from 'lexical' +import { useEffect } from 'react' +import { INSERT_DATETIME_COMMAND, INSERT_TIME_COMMAND, INSERT_DATE_COMMAND } from '../Commands' +import { mergeRegister } from '@lexical/utils' +import { $createHeadingNode } from '@lexical/rich-text' +import { formatDateAndTimeForNote, dateToHoursAndMinutesTimeString } from '@/Utils/DateUtils' +import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode' + +export default function DatetimePlugin(): JSX.Element | null { + const [editor] = useLexicalComposerContext() + + useEffect(() => { + return mergeRegister( + editor.registerCommand( + INSERT_DATETIME_COMMAND, + () => { + 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 timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now)) + timeNode.toggleFormat('superscript') + timeNode.toggleFormat('italic') + heading.append(timeNode) + + const newLineNode = $createParagraphNode() + + selection.insertNodes([heading, newLineNode]) + + editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined) + + return true + }, + COMMAND_PRIORITY_EDITOR, + ), + editor.registerCommand( + INSERT_DATE_COMMAND, + () => { + 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 newLineNode = $createParagraphNode() + + selection.insertNodes([heading, newLineNode]) + + editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined) + + return true + }, + COMMAND_PRIORITY_EDITOR, + ), + editor.registerCommand( + INSERT_TIME_COMMAND, + () => { + const now = new Date() + const selection = $getSelection() + + if (!$isRangeSelection(selection)) { + return false + } + + const heading = $createHeadingNode('h2') + const dateString = $createTextNode(dateToHoursAndMinutesTimeString(now)) + dateString.setFormat('italic') + heading.append(dateString) + + const newLineNode = $createParagraphNode() + + selection.insertNodes([heading, newLineNode]) + + return true + }, + COMMAND_PRIORITY_EDITOR, + ), + ) + }, [editor]) + + return null +} diff --git a/packages/web/src/javascripts/Utils/DateUtils.ts b/packages/web/src/javascripts/Utils/DateUtils.ts index 77c3413bdd7..37bb88e85c4 100644 --- a/packages/web/src/javascripts/Utils/DateUtils.ts +++ b/packages/web/src/javascripts/Utils/DateUtils.ts @@ -29,6 +29,12 @@ export const formatDateAndTimeForNote = (date: Date, includeTime = true) => { } } +export const dateToHoursAndMinutesTimeString = (date: Date) => { + return date.toLocaleTimeString(undefined, { + timeStyle: 'short', + }) +} + export function numHoursBetweenDates(date1: Date, date2: Date): number { return Math.abs(date1.getTime() - date2.getTime()) / 3600000 } From 40fa56c3f797d3e2c47012d2a8da9c75bafd1b68 Mon Sep 17 00:00:00 2001 From: Mo Date: Thu, 10 Nov 2022 21:11:57 -0600 Subject: [PATCH 2/2] chore: lint --- .../BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx b/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx index ddd8618ab3f..2c3e4ad8742 100644 --- a/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx +++ b/packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx @@ -1,7 +1,6 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { COMMAND_PRIORITY_EDITOR, - $getRoot, $createTextNode, $getSelection, $isRangeSelection,