mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-01-17 13:38:37 +01:00
Code Issues Releases Wiki Activity

Fix contenteditalbe firefox table selection (#5491)

Browse Source 
* Fix firefox contenteditable table selection

* Add changeset

* Update changeset
This commit is contained in:
WcaleNieWolny 2023-07-31 12:41:12 +01:00 committed by GitHub
parent c8236ee112
commit a5576e56a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 64 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/itchy-falcons-dream.md Normal file
View File

@ -0,0 +1,5 @@
---
'slate-react': patch
---
Fix firefox table selection if table is contentedtiable

68
packages/slate-react/src/plugin/react-editor.ts
View File

@ -836,16 +836,66 @@ export const ReactEditor: ReactEditorInterface = {
const firstRange = domRange.getRangeAt(0)
const lastRange = domRange.getRangeAt(domRange.rangeCount - 1)
// Right to left
if (firstRange.startContainer === focusNode) {
anchorNode = lastRange.endContainer
anchorOffset = lastRange.endOffset
focusOffset = firstRange.startOffset
// Here we are in the contenteditable mode of a table in firefox
if (
focusNode instanceof HTMLTableRowElement &&
firstRange.startContainer instanceof HTMLTableRowElement &&
lastRange.startContainer instanceof HTMLTableRowElement
) {
// HTMLElement, becouse Element is a slate element
function getLastChildren(element: HTMLElement): HTMLElement {
if (element.childElementCount > 0) {
return getLastChildren(<HTMLElement>element.children[0])
} else {
return element
}
}
const firstNodeRow = <HTMLTableRowElement>firstRange.startContainer
const lastNodeRow = <HTMLTableRowElement>lastRange.startContainer
// This should never fail as "The HTMLElement interface represents any HTML element."
const firstNode = getLastChildren(
<HTMLElement>firstNodeRow.children[firstRange.startOffset]
)
const lastNode = getLastChildren(
<HTMLElement>lastNodeRow.children[lastRange.startOffset]
)
// Zero, as we allways take the right one as the anchor point
focusOffset = 0
if (lastNode.childNodes.length > 0) {
anchorNode = lastNode.childNodes[0]
} else {
anchorNode = lastNode
}
if (firstNode.childNodes.length > 0) {
focusNode = firstNode.childNodes[0]
} else {
focusNode = firstNode
}
if (lastNode instanceof HTMLElement) {
anchorOffset = (<HTMLElement>lastNode).innerHTML.length
} else {
// Fallback option
anchorOffset = 0
}
} else {
// Left to right
anchorNode = firstRange.startContainer
anchorOffset = firstRange.endOffset
focusOffset = lastRange.startOffset
// This is the read only mode of a firefox table
// Right to left
if (firstRange.startContainer === focusNode) {
anchorNode = lastRange.endContainer
anchorOffset = lastRange.endOffset
focusOffset = firstRange.startOffset
} else {
// Left to right
anchorNode = firstRange.startContainer
anchorOffset = firstRange.endOffset
focusOffset = lastRange.startOffset
}
}
} else {
anchorNode = domRange.anchorNode