update iframe rendering logic, refactor iframes example

examples/iframe-rendering/index.js

@@ -1,153 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import injector from 'react-frame-aware-selection-plugin'
-
-injector()
-
-import { Editor, Mark, Raw } from '../..'
-import initialState from './state.json'
-import Frame from 'react-frame-component'
-
-const MARKS = {
-    bold: {
-        fontWeight: 'bold'
-    },
-    italic: {
-        fontStyle: 'italic'
-    }
-}
-
-const NODES = {
-    'table': props => <table className={"table"}><tbody {...props.attributes}>{props.children}</tbody></table>,
-    'table-row': props => <tr {...props.attributes}>{props.children}</tr>,
-    'table-cell': props => <td {...props.attributes}>{props.children}</td>
-}
-
-class IFrameRendering extends React.Component {
-
-    state = {
-        state: Raw.deserialize(initialState, { terse: true })
-    };
-
-    onChange = (state) => {
-        this.setState({ state })
-    }
-
-    /**
-     * On backspace, do nothing if at the start of a table cell.
-     *
-     * @param {Event} e
-     * @param {State} state
-     * @return {State or Null} state
-     */
-
-    onBackspace = (e, state) => {
-        if (state.startOffset != 0) return
-        e.preventDefault()
-        return state
-    }
-
-    /**
-     * On change.
-     *
-     * @param {State} state
-     */
-
-    onChange = (state) => {
-        this.setState({ state })
-    }
-
-    /**
-     * On delete, do nothing if at the end of a table cell.
-     *
-     * @param {Event} e
-     * @param {State} state
-     * @return {State or Null} state
-     */
-
-    onDelete = (e, state) => {
-        if (state.endOffset != state.startText.length) return
-        e.preventDefault()
-        return state
-    }
-
-    /**
-     * On return, do nothing if inside a table cell.
-     *
-     * @param {Event} e
-     * @param {State} state
-     * @return {State or Null} state
-     */
-
-    onEnter = (e, state) => {
-        e.preventDefault()
-        return state
-    }
-
-    /**
-     * On key down, check for our specific key shortcuts.
-     *
-     * @param {Event} e
-     * @param {Object} data
-     * @param {State} state
-     * @return {State or Null} state
-     */
-
-    onKeyDown = (e, data, state) => {
-        if (state.startBlock.type != 'table-cell') return
-        switch (data.key) {
-            case 'backspace': return this.onBackspace(e, state)
-            case 'delete': return this.onDelete(e, state)
-            case 'enter': return this.onEnter(e, state)
-        }
-    }
-
-    /**
-     * Return a node renderer for a Slate `node`.
-     *
-     * @param {Node} node
-     * @return {Component or Void}
-     */
-
-    renderNode = (node) => {
-        return NODES[node.type]
-    }
-
-    /**
-     * Return a mark renderer for a Slate `mark`.
-     *
-     * @param {Mark} mark
-     * @return {Object or Void}
-     */
-
-    renderMark = (mark) => {
-        return MARKS[mark.type]
-    }
-
-    render() {
-        const bootstrapCDN = (
-            <link
-                href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
-                rel="stylesheet"
-                integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
-                crossOrigin="anonymous"
-            >
-            </link>
-        )
-
-        return (
-            <Frame head={bootstrapCDN} style={{width: `100%`, height: '300px'}}>
-                <Editor
-                    state={this.state.state}
-                    onChange={this.onChange}
-                    renderNode={this.renderNode}
-                    renderMark={this.renderMark}
-                    onKeyDown={this.onKeyDown}
-                />
-            </Frame>
-        )
-    }
-
-}
-
-export default IFrameRendering

examples/iframe-rendering/state.json

@@ -1,277 +0,0 @@
-{
-  "nodes": [
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "ranges": [
-            {
-              "text": "This example shows how you can render editor in frame component."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "ranges": [
-            {
-              "text": "Check out this table, it has bootstrap styles, and top level document is not polluted by "
-            },
-            {
-              "text": "bootstrap.min.css",
-              "marks": [
-                {
-                  "type": "italic"
-                },
-                {
-                  "type": "bold"
-                }
-              ]
-            },
-            {
-              "text": "."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "paragraph",
-      "nodes": [
-        {
-          "kind": "text",
-          "ranges": [
-            {
-              "text": ""
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "block",
-      "type": "table",
-      "nodes": [
-        {
-          "kind": "block",
-          "type": "table-row",
-          "nodes": [
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": ""
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "Human",
-                      "marks": [
-                        {
-                          "type": "bold"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "Dog",
-                      "marks": [
-                        {
-                          "type": "bold"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "Cat",
-                      "marks": [
-                        {
-                          "type": "bold"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "kind": "block",
-          "type": "table-row",
-          "nodes": [
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "# of Feet",
-                      "marks": [
-                        {
-                          "type": "bold"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "1"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "4"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "4"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "kind": "block",
-          "type": "table-row",
-          "nodes": [
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "# of Lives",
-                      "marks": [
-                        {
-                          "type": "bold"
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "1"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "1"
-                    }
-                  ]
-                }
-              ]
-            },
-            {
-              "kind": "block",
-              "type": "table-cell",
-              "nodes": [
-                {
-                  "kind": "text",
-                  "ranges": [
-                    {
-                      "text": "9"
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

examples/iframes/index.js

@@ -0,0 +1,315 @@
+
+import { Editor, Mark, Raw } from '../..'
+import Frame from 'react-frame-component'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import initialState from './state.json'
+
+/**
+ * Injector to make `onSelect` work in iframes in React.
+ */
+
+import injector from 'react-frame-aware-selection-plugin'
+
+injector()
+
+/**
+ * Define the default node type.
+ */
+
+const DEFAULT_NODE = 'paragraph'
+
+/**
+ * Define a set of node renderers.
+ *
+ * @type {Object}
+ */
+
+const NODES = {
+  'block-code': props => <pre><code {...props.attributes}>{props.children}</code></pre>,
+  'block-quote': props => <blockquote {...props.attributes}>{props.children}</blockquote>,
+  'heading-two': props => <h2 {...props.attributes}>{props.children}</h2>,
+  'paragraph': props => <p {...props.attributes}>{props.children}</p>
+}
+
+/**
+ * Define a set of mark renderers.
+ *
+ * @type {Object}
+ */
+
+const MARKS = {
+  bold: props => <strong>{props.children}</strong>,
+  highlight: props => <mark>{props.children}</mark>,
+  italic: props => <em>{props.children}</em>,
+}
+
+/**
+ * The iframes example.
+ *
+ * @type {Component}
+ */
+
+class Iframes extends React.Component {
+
+  /**
+   * Deserialize the initial editor state.
+   *
+   * @type {Object}
+   */
+
+  state = {
+    state: Raw.deserialize(initialState, { terse: true })
+  };
+
+  /**
+   * Check if the current selection has a mark with `type` in it.
+   *
+   * @param {String} type
+   * @return {Boolean}
+   */
+
+  hasMark = (type) => {
+    const { state } = this.state
+    return state.marks.some(mark => mark.type == type)
+  }
+
+  /**
+   * Check if the any of the currently selected blocks are of `type`.
+   *
+   * @param {String} type
+   * @return {Boolean}
+   */
+
+  hasBlock = (type) => {
+    const { state } = this.state
+    return state.blocks.some(node => node.type == type)
+  }
+
+  /**
+   * On change, save the new state.
+   *
+   * @param {State} state
+   */
+
+  onChange = (state) => {
+    this.setState({ state })
+  }
+
+  /**
+   * On key down, if it's a formatting command toggle a mark.
+   *
+   * @param {Event} e
+   * @param {Object} data
+   * @param {State} state
+   * @return {State}
+   */
+
+  onKeyDown = (e, data, state) => {
+    if (!data.isMod) return
+    let mark
+
+    switch (data.key) {
+      case 'b':
+        mark = 'bold'
+        break
+      case 'i':
+        mark = 'italic'
+        break
+      default:
+        return
+    }
+
+    state = state
+      .transform()
+      .toggleMark(mark)
+      .apply()
+
+    e.preventDefault()
+    return state
+  }
+
+  /**
+   * When a mark button is clicked, toggle the current mark.
+   *
+   * @param {Event} e
+   * @param {String} type
+   */
+
+  onClickMark = (e, type) => {
+    e.preventDefault()
+    let { state } = this.state
+
+    state = state
+      .transform()
+      .toggleMark(type)
+      .apply()
+
+    this.setState({ state })
+  }
+
+  /**
+   * When a block button is clicked, toggle the block type.
+   *
+   * @param {Event} e
+   * @param {String} type
+   */
+
+  onClickBlock = (e, type) => {
+    e.preventDefault()
+    let { state } = this.state
+    const isActive = this.hasBlock(type)
+
+    state = state
+      .transform()
+      .setBlock(isActive ? DEFAULT_NODE : type)
+      .apply()
+
+    this.setState({ state })
+  }
+
+  /**
+   * Render.
+   *
+   * @return {Element}
+   */
+
+  render = () => {
+    const bootstrap = (
+      <link
+        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+        rel="stylesheet"
+        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+        crossOrigin="anonymous"
+      ></link>
+    )
+
+    const style = {
+      width: '100%',
+      height: '500px'
+    }
+
+    return (
+      <div>
+        <p style={{ marginBottom: '10px' }}>This editor is rendered inside of an
+          <code>iframe</code> element, and everything works as usual! This is
+          helpful for scenarios where you need the content to be rendered in an
+          isolated, for example to create a "live example" with a specific set
+          of stylesheets applied.</p>
+        <p style={{ marginBottom: '10px' }}>In this example's case, we've added
+          Bootstrap's CSS to the <code>iframe</code> for default styles:</p>
+        <Frame head={bootstrap} style={style}>
+          <div style={{ padding: '20px' }}>
+            {this.renderToolbar()}
+            {this.renderEditor()}
+          </div>
+        </Frame>
+      </div>
+    )
+  }
+
+  /**
+   * Render the toolbar.
+   *
+   * @return {Element}
+   */
+
+  renderToolbar = () => {
+    return (
+      <div className="btn-group" style={{ marginBottom: '20px' }}>
+        {this.renderMarkButton('bold', 'bold')}
+        {this.renderMarkButton('italic', 'italic')}
+        {this.renderMarkButton('highlight', 'pencil')}
+        {this.renderBlockButton('heading-two', 'header')}
+        {this.renderBlockButton('block-code', 'console')}
+        {this.renderBlockButton('block-quote', 'comment')}
+      </div>
+    )
+  }
+
+  /**
+   * Render a mark-toggling toolbar button.
+   *
+   * @param {String} type
+   * @param {String} icon
+   * @return {Element}
+   */
+
+  renderMarkButton = (type, icon) => {
+    const isActive = this.hasMark(type)
+    const onMouseDown = e => this.onClickMark(e, type)
+    let className = 'btn btn-primary'
+    if (isActive) className += ' active'
+
+    return (
+      <button className={className} onMouseDown={onMouseDown}>
+        <span className={`glyphicon glyphicon-${icon}`}></span>
+      </button>
+    )
+  }
+
+  /**
+   * Render a block-toggling toolbar button.
+   *
+   * @param {String} type
+   * @param {String} icon
+   * @return {Element}
+   */
+
+  renderBlockButton = (type, icon) => {
+    const isActive = this.hasBlock(type)
+    const onMouseDown = e => this.onClickBlock(e, type)
+    let className = 'btn btn-primary'
+    if (isActive) className += ' active'
+
+    return (
+      <button className={className} onMouseDown={onMouseDown}>
+        <span className={`glyphicon glyphicon-${icon}`}></span>
+      </button>
+    )
+  }
+
+  /**
+   * Render the Slate editor.
+   *
+   * @return {Element}
+   */
+
+  renderEditor = () => {
+    return (
+      <Editor
+        placeholder={'Enter some rich text...'}
+        state={this.state.state}
+        renderNode={this.renderNode}
+        renderMark={this.renderMark}
+        onChange={this.onChange}
+        onKeyDown={this.onKeyDown}
+      />
+    )
+  }
+
+  /**
+   * Return a node renderer for a Slate `node`.
+   *
+   * @param {Node} node
+   * @return {Component or Void}
+   */
+
+  renderNode = (node) => {
+    return NODES[node.type]
+  }
+
+  /**
+   * Return a mark renderer for a Slate `mark`.
+   *
+   * @param {Mark} mark
+   * @return {Object or Void}
+   */
+
+  renderMark = (mark) => {
+    return MARKS[mark.type]
+  }
+
+}
+
+export default Iframes

examples/iframes/state.json

@@ -0,0 +1,96 @@
+{
+  "nodes": [
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "This is editable "
+            },
+            {
+              "text": "rich",
+              "marks": [
+                {
+                  "type": "bold"
+                },
+                {
+                  "type": "italic"
+                }
+              ]
+            },
+            {
+              "text": " text that is being styled by Bootstrap's CSS rules!"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "Since it's rich text, you can do things like turn a selection of text "
+            },
+            {
+              "text": "bold",
+              "marks": [
+                {
+                  "type": "bold"
+                }
+              ]
+            },{
+              "text": ", or add a semantically rendered block quote in the middle of the page, like this:"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-quote",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "A wise quote."
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "And since it's inside an iframe which loads Bootstrap's CSS, the content will automatically take on Bootstrap's style rules. For example, code blocks will look like Bootstrap code blocks do:"
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "block-code",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "console.log('Hello world!');"
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "text": "Try it out for yourself!"
+        }
+      ]
+    }
+  ]
+}

examples/index.js

@@ -11,18 +11,19 @@ import AutoMarkdown from './auto-markdown'
 import CodeHighlighting from './code-highlighting'
 import Embeds from './embeds'
 import HoveringMenu from './hovering-menu'
+import Iframes from './iframes'
 import Images from './images'
 import Links from './links'
 import PasteHtml from './paste-html'
 import PlainText from './plain-text'
 import Plugins from './plugins'
+import RTL from './rtl'
 import ReadOnly from './read-only'
 import RichText from './rich-text'
-import RTL from './rtl'
 import Tables from './tables'
+
 import DevPerformancePlain from './development/performance-plain'
 import DevPerformanceRich from './development/performance-rich'
-import IFrameRendering from './iframe-rendering'
 
 /**
  * Perf.
@@ -77,7 +78,7 @@ class App extends React.Component {
         {this.renderTab('Read-only', 'read-only')}
         {this.renderTab('RTL', 'rtl')}
         {this.renderTab('Plugins', 'plugins')}
-        {this.renderTab('IFrame', 'iframe')}
+        {this.renderTab('Iframes', 'iframes')}
       </div>
     )
   }
@@ -121,10 +122,12 @@ const router = (
   <Router history={hashHistory}>
     <Route path="/" component={App}>
       <IndexRedirect to="rich-text" />
+
       <Route path="auto-markdown" component={AutoMarkdown} />
       <Route path="code-highlighting" component={CodeHighlighting} />
       <Route path="embeds" component={Embeds} />
       <Route path="hovering-menu" component={HoveringMenu} />
+      <Route path="iframes" component={Iframes} />
       <Route path="images" component={Images} />
       <Route path="links" component={Links} />
       <Route path="paste-html" component={PasteHtml} />
@@ -134,9 +137,9 @@ const router = (
       <Route path="rich-text" component={RichText} />
       <Route path="rtl" component={RTL} />
       <Route path="tables" component={Tables} />
+
       <Route path="dev-performance-plain" component={DevPerformancePlain} />
       <Route path="dev-performance-rich" component={DevPerformanceRich} />
-      <Route path="iframe" component={IFrameRendering} />
     </Route>
   </Router>
 )

lib/components/content.js

@@ -6,10 +6,10 @@ import OffsetKey from '../utils/offset-key'
 import React from 'react'
 import Selection from '../models/selection'
 import TYPES from '../utils/types'
+import getWindow from 'get-window'
 import includes from 'lodash/includes'
 import keycode from 'keycode'
 import { IS_FIREFOX, IS_MAC } from '../utils/environment'
-import findElementWindow from '../utils/find-element-window'
 
 /**
  * Debug.
@@ -253,6 +253,7 @@ class Content extends React.Component {
 
   onCopy = (e) => {
     if (isNonEditable(e)) return
+    const window = getWindow(e.target)
 
     this.tmp.isCopying = true
     window.requestAnimationFrame(() => {
@@ -277,6 +278,7 @@ class Content extends React.Component {
   onCut = (e) => {
     if (this.props.readOnly) return
     if (isNonEditable(e)) return
+    const window = getWindow(e.target)
 
     this.tmp.isCopying = true
     window.requestAnimationFrame(() => {
@@ -370,6 +372,7 @@ class Content extends React.Component {
 
     e.preventDefault()
 
+    const window = getWindow(e.target)
     const { state, renderDecorations } = this.props
     const { selection } = state
     const { dataTransfer, x, y } = e.nativeEvent
@@ -381,13 +384,11 @@ class Content extends React.Component {
     // Resolve the point where the drop occured.
     let range
 
-    const contextWindow = findElementWindow(e.nativeEvent.target)
-
     // COMPAT: In Firefox, `caretRangeFromPoint` doesn't exist. (2016/07/25)
-    if (contextWindow.document.caretRangeFromPoint) {
+    if (window.document.caretRangeFromPoint) {
-      range = contextWindow.document.caretRangeFromPoint(x, y)
+      range = window.document.caretRangeFromPoint(x, y)
     } else {
-      range = contextWindow.document.createRange()
+      range = window.document.createRange()
       range.setStart(e.nativeEvent.rangeParent, e.nativeEvent.rangeOffset)
     }
 
@@ -462,11 +463,10 @@ class Content extends React.Component {
     if (isNonEditable(e)) return
     debug('onInput')
 
-    const contextWindow = findElementWindow(e.nativeEvent.target)
+    const window = getWindow(e.target)
-
     let { state, renderDecorations } = this.props
     const { selection } = state
-    const native = contextWindow.getSelection()
+    const native = window.getSelection()
     const { anchorNode, anchorOffset, focusOffset } = native
     const point = this.getPoint(anchorNode, anchorOffset)
     const { key, index, start, end } = point
@@ -629,11 +629,10 @@ class Content extends React.Component {
     if (this.tmp.isComposing) return
     if (isNonEditable(e)) return
 
-    const contextWindow = findElementWindow(e.nativeEvent.target)
+    const window = getWindow(e.target)
-
     const { state, renderDecorations } = this.props
     let { document, selection } = state
-    const native = contextWindow.getSelection()
+    const native = window.getSelection()
     const data = {}
 
     // If there are no ranges, the editor was blurred natively.

lib/components/leaf.js

@@ -3,7 +3,7 @@ import Debug from 'debug'
 import OffsetKey from '../utils/offset-key'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import findElementWindow from '../utils/find-element-window'
+import getWindow from 'get-window'
 
 /**
  * Debugger.
@@ -145,16 +145,15 @@ class Leaf extends React.Component {
       focusOffset = 0
     }
 
-    const contextWindow = findElementWindow(ReactDOM.findDOMNode(this))
-
     // We have a selection to render, so prepare a few things...
-    const native = contextWindow.getSelection()
     const el = findDeepestNode(ReactDOM.findDOMNode(this))
+    const window = getWindow(el)
+    const native = window.getSelection()
 
     // If both the start and end are here, set the selection all at once.
     if (hasAnchor && hasFocus) {
       native.removeAllRanges()
-      const range = contextWindow.document.createRange()
+      const range = window.document.createRange()
       range.setStart(el, anchorOffset - start)
       native.addRange(range)
       native.extend(el, focusOffset - start)
@@ -167,7 +166,7 @@ class Leaf extends React.Component {
     if (selection.isForward) {
       if (hasAnchor) {
         native.removeAllRanges()
-        const range = contextWindow.document.createRange()
+        const range = window.document.createRange()
         range.setStart(el, anchorOffset - start)
         native.addRange(range)
       } else if (hasFocus) {
@@ -182,14 +181,14 @@ class Leaf extends React.Component {
     else {
       if (hasFocus) {
         native.removeAllRanges()
-        const range = contextWindow.document.createRange()
+        const range = window.document.createRange()
         range.setStart(el, focusOffset - start)
         native.addRange(range)
       } else if (hasAnchor) {
         const endNode = native.focusNode
         const endOffset = native.focusOffset
         native.removeAllRanges()
-        const range = contextWindow.document.createRange()
+        const range = window.document.createRange()
         range.setStart(el, anchorOffset - start)
         native.addRange(range)
         native.extend(endNode, endOffset)

lib/components/node.js

@@ -6,7 +6,7 @@ import ReactDOM from 'react-dom'
 import TYPES from '../utils/types'
 import Text from './text'
 import Void from './void'
-import scrollTo from 'element-scroll-to'
+import scrollTo from '../utils/scroll-to'
 
 /**
  * Debug.

lib/plugins/core.js

@@ -5,7 +5,7 @@ import Debug from 'debug'
 import Placeholder from '../components/placeholder'
 import React from 'react'
 import String from '../utils/string'
-import findElementWindow from '../utils/find-element-window'
+import getWindow from 'get-window'
 
 /**
  * Debug.
@@ -180,6 +180,7 @@ function Plugin(options = {}) {
   function onCut(e, data, state, editor) {
     debug('onCut', data)
     onCutOrCopy(e, data, state)
+    const window = getWindow(e.target)
 
     // Once the fake cut content has successfully been added to the clipboard,
     // delete the content in the current selection.
@@ -205,9 +206,8 @@ function Plugin(options = {}) {
    */
 
   function onCutOrCopy(e, data, state) {
-    const contextWindow = findElementWindow(e.nativeEvent.target)
+    const window = getWindow(e.target)
-
+    const native = window.getSelection()
-    const native = contextWindow.getSelection()
     if (!native.rangeCount) return
 
     const { fragment } = data
@@ -217,10 +217,10 @@ function Plugin(options = {}) {
     // fragment attached as an attribute, so it will show up in the copied HTML.
     const range = native.getRangeAt(0)
     const contents = range.cloneContents()
-    const wrapper = contextWindow.document.createElement('span')
+    const wrapper = window.document.createElement('span')
     const text = contents.childNodes[0]
     const char = text.textContent.slice(0, 1)
-    const first = contextWindow.document.createTextNode(char)
+    const first = window.document.createTextNode(char)
     const rest = text.textContent.slice(1)
     text.textContent = rest
     wrapper.appendChild(first)
@@ -228,8 +228,8 @@ function Plugin(options = {}) {
     contents.insertBefore(wrapper, text)
 
     // Add the phony content to the DOM, and select it, so it will be copied.
-    const body = contextWindow.document.querySelector('body')
+    const body = window.document.querySelector('body')
-    const div = contextWindow.document.createElement('div')
+    const div = window.document.createElement('div')
     div.setAttribute('contenteditable', true)
     div.style.position = 'absolute'
     div.style.left = '-9999px'
@@ -238,7 +238,7 @@ function Plugin(options = {}) {
 
     // COMPAT: In Firefox, trying to use the terser `native.selectAllChildren`
     // throws an error, so we use the older `range` equivalent. (2016/06/21)
-    const r = contextWindow.document.createRange()
+    const r = window.document.createRange()
     r.selectNodeContents(div)
     native.removeAllRanges()
     native.addRange(r)

lib/utils/find-element-window.js

@@ -1,14 +0,0 @@
-
-/**
- * Find the window object for the domNode.
- *
- * @param {Node} domNode
- * @return {Window} window
- */
-
-function findElementWindow(domNode) {
-    const doc = domNode.ownerDocument || domNode
-    return doc.defaultView || doc.parentWindow
-}
-
-export default findElementWindow

lib/utils/scroll-to.js

@@ -0,0 +1,67 @@
+
+/**
+ * Copied from `element-scroll-to`, but edited to account for `window` being
+ * inside of iframes.
+ *
+ * https://github.com/webmodules/element-scroll-to
+ */
+
+import getWindow from 'get-window'
+
+function scrollWrapperElements(element, options) {
+  let window = getWindow(element)
+  let elementRect = element.getBoundingClientRect()
+  let wrapper = element.parentNode
+
+  while (wrapper != window.document.body) {
+    let wrapperRect = wrapper.getBoundingClientRect()
+    let margin = options.margin
+    let deltaX = 0
+    let deltaY = 0
+
+    if (elementRect.top < wrapperRect.top + margin) {
+      deltaY = elementRect.top - wrapperRect.top - margin
+    } else if (elementRect.bottom > wrapperRect.bottom - margin) {
+      deltaY = elementRect.bottom - wrapperRect.bottom + margin
+    }
+    if (elementRect.left < wrapperRect.left + margin) {
+      deltaX = elementRect.left - wrapperRect.left - margin
+    } else if (elementRect.right > wrapperRect.right - margin) {
+      deltaX = elementRect.right - wrapperRect.right + margin
+    }
+    wrapper.scrollTop += deltaY
+    wrapper.scrollLeft += deltaX
+    wrapper = wrapper.parentNode
+  }
+
+  return elementRect
+}
+
+function scrollWindow(element, options, elementRect) {
+  let window = getWindow(element)
+  let margin = options.margin
+  let deltaX = 0
+  let deltaY = 0
+
+  if (elementRect.top < 0 + margin) {
+    deltaY = elementRect.top - margin
+  } else if (elementRect.bottom > window.innerHeight - margin) {
+    deltaY = elementRect.bottom - window.innerHeight + margin
+  }
+  if (elementRect.left < 0 + margin) {
+    deltaX = elementRect.left - margin
+  } else if (elementRect.right > window.innerWidth - margin) {
+    deltaX = elementRect.right - window.innerWidth + margin
+  }
+
+  window.scrollBy(deltaX, deltaY)
+}
+
+function scrollTo(element, options) {
+  options = options || {}
+  options.margin = options.margin || 0
+  let rect = scrollWrapperElements(element, options)
+  scrollWindow(element, options, rect)
+}
+
+export default scrollTo

package.json

@@ -12,6 +12,7 @@
     "direction": "^0.1.5",
     "element-scroll-to": "^1.1.0",
     "esrever": "^0.2.0",
+    "get-window": "^1.1.1",
     "immutable": "^3.8.1",
     "is-empty": "^1.0.0",
     "keycode": "^2.1.2",