From 9e977506d4e1d7aa722e0681ba5a0f62253f57b1 Mon Sep 17 00:00:00 2001 From: WcaleNieWolny Date: Sun, 30 Jul 2023 08:26:43 +0200 Subject: [PATCH 1/3] Fix firefox contenteditable table selection --- .../slate-react/src/plugin/react-editor.ts | 68 ++++++++++++++++--- 1 file changed, 59 insertions(+), 9 deletions(-) diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index f2e56ba300..3653c99c04 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -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(element.children[0]) + } else { + return element + } + } + + const firstNodeRow = firstRange.startContainer + const lastNodeRow = lastRange.startContainer + + // This should never fail as "The HTMLElement interface represents any HTML element." + const firstNode = getLastChildren( + firstNodeRow.children[firstRange.startOffset] + ) + const lastNode = getLastChildren( + 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 = (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 From 5b3a4fc8835ef80abc67a62177de42459c8f8fb9 Mon Sep 17 00:00:00 2001 From: WcaleNieWolny Date: Sun, 30 Jul 2023 08:31:02 +0200 Subject: [PATCH 2/3] Add changeset --- .changeset/itchy-falcons-dream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-falcons-dream.md diff --git a/.changeset/itchy-falcons-dream.md b/.changeset/itchy-falcons-dream.md new file mode 100644 index 0000000000..2e79840173 --- /dev/null +++ b/.changeset/itchy-falcons-dream.md @@ -0,0 +1,5 @@ +--- +'slate-react': minor +--- + +Fix firefox table selection if table is contentedtiable From 55b3b602555807c1c524dffdce59059c9c809b09 Mon Sep 17 00:00:00 2001 From: WcaleNieWolny <50914789+WcaleNieWolny@users.noreply.github.com> Date: Sun, 30 Jul 2023 14:07:14 +0100 Subject: [PATCH 3/3] Update changeset --- .changeset/itchy-falcons-dream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/itchy-falcons-dream.md b/.changeset/itchy-falcons-dream.md index 2e79840173..4c1091ec81 100644 --- a/.changeset/itchy-falcons-dream.md +++ b/.changeset/itchy-falcons-dream.md @@ -1,5 +1,5 @@ --- -'slate-react': minor +'slate-react': patch --- Fix firefox table selection if table is contentedtiable