rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: super date time plugin [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2024-04-15 13:41:07 +05:30
parent cf60d8f0d5
commit 795ca5b883
3 changed files with 41 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/DateTime.tsx
View File

@@ -1,7 +1,7 @@
import { BlockPickerOption } from '../BlockPickerPlugin/BlockPickerOption' import { BlockPickerOption } from '../BlockPickerPlugin/BlockPickerOption'
import { LexicalEditor } from 'lexical' import { LexicalEditor } from 'lexical'
import { LexicalIconName } from '@/Components/Icon/LexicalIcons' 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) { export function GetDatetimeBlocks(editor: LexicalEditor) {
return [ return [
@@ -15,13 +15,13 @@ export function GetDatetimeBlocks(editor: LexicalEditor) {
name: 'Current time', name: 'Current time',
iconName: 'authenticator', iconName: 'authenticator',
keywords: ['time', 'current'], keywords: ['time', 'current'],
onSelect: () => editor.dispatchCommand(INSERT_TIME_COMMAND, 'datetime'), onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'time'),
}, },
{ {
name: 'Current date', name: 'Current date',
iconName: 'authenticator', iconName: 'authenticator',
keywords: ['date', 'current'], keywords: ['date', 'current'],
onSelect: () => editor.dispatchCommand(INSERT_DATE_COMMAND, 'datetime'), onSelect: () => editor.dispatchCommand(INSERT_DATETIME_COMMAND, 'date'),
}, },
] ]
} }

5
packages/web/src/javascripts/Components/SuperEditor/Plugins/Commands.ts
View File

@@ -2,8 +2,7 @@ import { createCommand, LexicalCommand } from 'lexical'
export const INSERT_FILE_COMMAND: LexicalCommand<string> = createCommand('INSERT_FILE_COMMAND') 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_BUBBLE_COMMAND: LexicalCommand<string> = createCommand('INSERT_BUBBLE_COMMAND')
export const INSERT_TIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_TIME_COMMAND') export const INSERT_DATETIME_COMMAND: LexicalCommand<'date' | 'time' | 'datetime'> =
export const INSERT_DATE_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATE_COMMAND') createCommand('INSERT_DATETIME_COMMAND')
export const INSERT_DATETIME_COMMAND: LexicalCommand<string> = createCommand('INSERT_DATETIME_COMMAND')
export const INSERT_PASSWORD_COMMAND: LexicalCommand<string> = createCommand('INSERT_PASSWORD_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') export const INSERT_REMOTE_IMAGE_COMMAND: LexicalCommand<string> = createCommand('INSERT_REMOTE_IMAGE_COMMAND')

90
packages/web/src/javascripts/Components/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx
View File

@@ -5,9 +5,11 @@ import {
$getSelection, $getSelection,
$isRangeSelection, $isRangeSelection,
$createParagraphNode, $createParagraphNode,
$isParagraphNode,
LexicalNode,
} from 'lexical' } from 'lexical'
import { useEffect } from 'react' 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 { mergeRegister } from '@lexical/utils'
import { $createHeadingNode } from '@lexical/rich-text' import { $createHeadingNode } from '@lexical/rich-text'
import { formatDateAndTimeForNote, dateToHoursAndMinutesTimeString } from '@/Utils/DateUtils' import { formatDateAndTimeForNote, dateToHoursAndMinutesTimeString } from '@/Utils/DateUtils'
@@ -18,9 +20,9 @@ export default function DatetimePlugin(): JSX.Element | null {
useEffect(() => { useEffect(() => {
return mergeRegister( return mergeRegister(
editor.registerCommand<string>( editor.registerCommand(
INSERT_DATETIME_COMMAND, INSERT_DATETIME_COMMAND,
() => { (payload) => {
const now = new Date() const now = new Date()
const selection = $getSelection() const selection = $getSelection()
@@ -28,69 +30,49 @@ export default function DatetimePlugin(): JSX.Element | null {
return false return false
} }
const heading = $createHeadingNode('h1') const focusNode = selection.focus.getNode()
const dateString = $createTextNode(formatDateAndTimeForNote(now, false)) const focusOffset = selection.focus.offset
dateString.setFormat('italic')
heading.append(dateString)
const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now)) const shouldAddHR = $isParagraphNode(focusNode) && focusOffset === 0
timeNode.toggleFormat('superscript')
timeNode.toggleFormat('italic')
heading.append(timeNode)
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 if (shouldAddDate) {
}, const dateNode = $createTextNode(formatDateAndTimeForNote(now, false))
COMMAND_PRIORITY_EDITOR, dateNode.setFormat('italic')
), containingNode.append(dateNode)
editor.registerCommand<string>(
INSERT_DATE_COMMAND,
() => {
const now = new Date()
const selection = $getSelection()
if (!$isRangeSelection(selection)) {
return false
} }
const heading = $createHeadingNode('h1') if (shouldAddTime) {
const dateString = $createTextNode(formatDateAndTimeForNote(now, false)) const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now))
dateString.setFormat('italic') timeNode.toggleFormat('italic')
heading.append(dateString) if (shouldAddDate) {
timeNode.toggleFormat('superscript')
const newLineNode = $createParagraphNode() }
containingNode.append(timeNode)
selection.insertNodes([heading, newLineNode])
editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
return true
},
COMMAND_PRIORITY_EDITOR,
),
editor.registerCommand<string>(
INSERT_TIME_COMMAND,
() => {
const now = new Date()
const selection = $getSelection()
if (!$isRangeSelection(selection)) {
return false
} }
const heading = $createHeadingNode('h2') containingNode.append($createTextNode(' '))
const dateString = $createTextNode(dateToHoursAndMinutesTimeString(now))
dateString.setFormat('italic') nodesToInsert.push(containingNode)
heading.append(dateString)
const newLineNode = $createParagraphNode() const newLineNode = $createParagraphNode()
if (shouldAddHR) {
nodesToInsert.push(newLineNode)
}
selection.insertNodes([heading, newLineNode]) selection.insertNodes(nodesToInsert)
if (shouldAddHR) {
editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
}
return true return true
}, },