rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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 { 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'),
},
]
}

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_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')

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

@@ -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<string>(
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<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])
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
if (shouldAddTime) {
const timeNode = $createTextNode(dateToHoursAndMinutesTimeString(now))
timeNode.toggleFormat('italic')
if (shouldAddDate) {
timeNode.toggleFormat('superscript')
}
containingNode.append(timeNode)
}
const heading = $createHeadingNode('h2')
const dateString = $createTextNode(dateToHoursAndMinutesTimeString(now))
dateString.setFormat('italic')
heading.append(dateString)
containingNode.append($createTextNode(' '))
nodesToInsert.push(containingNode)
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
},