Fix contenteditalbe firefox table selection (#5491)

* Fix firefox contenteditable table selection

* Add changeset

* Update changeset

.changeset/itchy-falcons-dream.md

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

packages/slate-react/src/plugin/react-editor.ts

@@ -836,6 +836,55 @@ export const ReactEditor: ReactEditorInterface = {
           const firstRange = domRange.getRangeAt(0)
           const lastRange = domRange.getRangeAt(domRange.rangeCount - 1)
 
+          // 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 {
+            // This is the read only mode of a firefox table
             // Right to left
             if (firstRange.startContainer === focusNode) {
               anchorNode = lastRange.endContainer
@@ -847,6 +896,7 @@ export const ReactEditor: ReactEditorInterface = {
               anchorOffset = firstRange.endOffset
               focusOffset = lastRange.startOffset
             }
+          }
         } else {
           anchorNode = domRange.anchorNode
           anchorOffset = domRange.anchorOffset