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

chore: fix issue with focus getting lost after pressing up/down after clicking inside checklist [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2024-07-17 15:06:41 +05:30
parent 5a7641c27f
commit 6e75d29664
1 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
packages/web/src/javascripts/Components/SuperEditor/Plugins/CheckListPlugin.tsx
View File

@@ -1,4 +1,4 @@
import { $isListItemNode, $isListNode, INSERT_CHECK_LIST_COMMAND, insertList, ListNode } from '@lexical/list' import { $isListItemNode, INSERT_CHECK_LIST_COMMAND, insertList, ListNode } from '@lexical/list'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { calculateZoomLevel, isHTMLElement, mergeRegister } from '@lexical/utils' import { calculateZoomLevel, isHTMLElement, mergeRegister } from '@lexical/utils'
import { import {
@@ -47,38 +47,36 @@ export function CheckListPlugin(): null {
return return
} }
editor.update(() => { editor.getRootElement()?.focus()
const targetNode = $getNearestNodeFromDOMNode(target)
const parentNode = targetNode?.getParent() const parentNode = target.parentNode
// @ts-expect-error internal field
if (!parentNode || parentNode.__lexicalListType !== 'check') {
return
}
if (!$isListNode(parentNode) || parentNode.getListType() !== 'check') { const rect = target.getBoundingClientRect()
return
}
const rect = target.getBoundingClientRect() const listItemElementStyles = getComputedStyle(target)
const paddingLeft = parseFloat(listItemElementStyles.paddingLeft) || 0
const paddingRight = parseFloat(listItemElementStyles.paddingRight) || 0
const lineHeight = parseFloat(listItemElementStyles.lineHeight) || 0
const listItemElementStyles = getComputedStyle(target) const checkStyles = getComputedStyle(target, ':before')
const paddingLeft = parseFloat(listItemElementStyles.paddingLeft) || 0 const checkWidth = parseFloat(checkStyles.width) || 0
const paddingRight = parseFloat(listItemElementStyles.paddingRight) || 0
const lineHeight = parseFloat(listItemElementStyles.lineHeight) || 0
const checkStyles = getComputedStyle(target, ':before') const pageX = event.pageX / calculateZoomLevel(target)
const checkWidth = parseFloat(checkStyles.width) || 0
const pageX = event.pageX / calculateZoomLevel(target) const isWithinHorizontalThreshold =
target.dir === 'rtl'
? pageX < rect.right && pageX > rect.right - paddingRight
: pageX > rect.left && pageX < rect.left + (checkWidth || paddingLeft)
const isWithinHorizontalThreshold = const isWithinVerticalThreshold = event.clientY > rect.top && event.clientY < rect.top + lineHeight
target.dir === 'rtl'
? pageX < rect.right && pageX > rect.right - paddingRight
: pageX > rect.left && pageX < rect.left + (checkWidth || paddingLeft)
const isWithinVerticalThreshold = event.clientY > rect.top && event.clientY < rect.top + lineHeight if (isWithinHorizontalThreshold && isWithinVerticalThreshold) {
callback()
if (isWithinHorizontalThreshold && isWithinVerticalThreshold) { }
callback()
}
})
} }
function handleClick(event: Event) { function handleClick(event: Event) {
@@ -100,7 +98,6 @@ export function CheckListPlugin(): null {
return return
} }
domNode.focus()
node.toggleChecked() node.toggleChecked()
}) })
}) })