Don't native insert in elements with white-space="pre" containing tab chars (#5045)

* don't native insert in elements with white-space="pre" containing tab chars

* apply suggestions from code review

packages/slate-react/src/components/editable.tsx

@@ -380,11 +380,15 @@ export const Editable = (props: EditableProps) => {
           const [node, offset] = ReactEditor.toDOMPoint(editor, anchor)
           const anchorNode = node.parentElement?.closest('a')
 
-          if (anchorNode && ReactEditor.hasDOMNode(editor, anchorNode)) {
-            const { document } = ReactEditor.getWindow(editor)
+          const window = ReactEditor.getWindow(editor)
 
+          if (
+            native &&
+            anchorNode &&
+            ReactEditor.hasDOMNode(editor, anchorNode)
+          ) {
             // Find the last text node inside the anchor.
-            const lastText = document
+            const lastText = window?.document
               .createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT)
               .lastChild() as DOMText | null
 
@@ -392,6 +396,23 @@ export const Editable = (props: EditableProps) => {
               native = false
             }
           }
+
+          // Chrome has issues with the presence of tab characters inside elements with whiteSpace = 'pre'
+          // causing abnormal insert behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=1219139
+          if (
+            native &&
+            node.parentElement &&
+            window?.getComputedStyle(node.parentElement)?.whiteSpace === 'pre'
+          ) {
+            const block = Editor.above(editor, {
+              at: anchor.path,
+              match: n => Editor.isBlock(editor, n),
+            })
+
+            if (block && Node.string(block[0]).includes('\t')) {
+              native = false
+            }
+          }
         }
 
         // COMPAT: For the deleting forward/backward input types we don't want