fix: unexpected table selection behavior (#5821)

docs/walkthroughs/05-executing-commands.md

@@ -53,7 +53,9 @@ const App = () => {
               Transforms.setNodes(
                 editor,
                 { type: match ? null : 'code' },
-                { match: n => Element.isElement(n) && Editor.isBlock(editor, n) }
+                {
+                  match: n => Element.isElement(n) && Editor.isBlock(editor, n),
+                }
               )
               break
             }

site/examples/js/tables.jsx

@@ -8,6 +8,7 @@ import {
 } from 'slate'
 import { withHistory } from 'slate-history'
 import { Editable, Slate, withReact } from 'slate-react'
+import { css } from '@emotion/css'
 
 const TablesExample = () => {
   const renderElement = useCallback(props => <Element {...props} />, [])
@@ -83,7 +84,12 @@ const Element = ({ attributes, children, element }) => {
   switch (element.type) {
     case 'table':
       return (
-        <table>
+        <table
+          className={css`
+            // avoid unexpected selection behavior on both sides of the table
+            position: relative;
+          `}
+        >
           <tbody {...attributes}>{children}</tbody>
         </table>
       )

site/examples/ts/tables.tsx

@@ -16,6 +16,7 @@ import {
   withReact,
 } from 'slate-react'
 import { CustomEditor } from './custom-types.d'
+import { css } from '@emotion/css'
 
 const TablesExample = () => {
   const renderElement = useCallback(
@@ -114,7 +115,12 @@ const Element = ({ attributes, children, element }: RenderElementProps) => {
   switch (element.type) {
     case 'table':
       return (
-        <table>
+        <table
+          className={css`
+            // avoid unexpected selection behavior on both sides of the table
+            position: relative;
+          `}
+        >
           <tbody {...attributes}>{children}</tbody>
         </table>
       )