Fix iframe crash (#4219)

* fixes #4170

* add smoke test for iframe example

* add changeset

* update changeset wording

.changeset/thick-apricots-fly.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fixes error that occurs when Editor is rendered inside iframe

cypress/integration/iframe.ts

@@ -0,0 +1,31 @@
+// Taken from https://www.cypress.io/blog/2020/02/12/working-with-iframes-in-cypress/
+const getIframeDocument = () => {
+  return cy
+    .get('iframe')
+    .its('0.contentDocument')
+    .should('exist')
+}
+
+const getIframeBody = () => {
+  return (
+    getIframeDocument()
+      .its('body')
+      // automatically retries until body is loaded
+      .should('not.be.undefined')
+      .then(cy.wrap)
+  )
+}
+
+describe('iframe editor', () => {
+  beforeEach(() => {
+    cy.visit('examples/iframe')
+  })
+
+  it('should be editable', () => {
+    getIframeBody()
+      .findByRole('textbox')
+      .type('{movetostart}')
+      .type('Hello World')
+      .should('contain.text', 'Hello World')
+  })
+})

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

@@ -106,6 +106,10 @@ export const ReactEditor = {
     const el = ReactEditor.toDOMNode(editor, editor)
     const root = el.getRootNode()
 
+    // The below exception will always be thrown for iframes because the document inside an iframe
+    // does not inherit it's prototype from the parent document, therefore we return early
+    if (el.ownerDocument !== document) return el.ownerDocument
+
     if (!(root instanceof Document || root instanceof ShadowRoot))
       throw new Error(
         `Unable to find DocumentOrShadowRoot for editor element: ${el}`