diff --git a/examples/iframes/Readme.md b/examples/iframes/Readme.md
deleted file mode 100644
index a4756b524..000000000
--- a/examples/iframes/Readme.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# IFrame rendering example
-
-This example shows how to render Slate into IFrame, preserving single react component tree.
-You may need this if you want to have separate styles for editor content & application.
-
-In example this exmaple you can see,
-that editor is using bootstrap styles, while they are not included to parent page.
-
-## React onSelect problem
-Current react version has a problem with onSelect event handling, if input is rendered from parent component tree to iframe.
-
-This problem is solved by custom SelectEventPlugin - [react-frame-aware-selection-plugin](https://www.npmjs.com/package/react-frame-aware-selection-plugin)
-
-Check out the [Examples readme](..) to see how to run it!
diff --git a/examples/iframes/index.js b/examples/iframes/index.js
deleted file mode 100644
index c401fff08..000000000
--- a/examples/iframes/index.js
+++ /dev/null
@@ -1,270 +0,0 @@
-
-import { Editor } from 'slate-react'
-import { State } from 'slate'
-
-import Frame from 'react-frame-component'
-import React from 'react'
-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 schema.
- *
- * @type {Object}
- */
-
-const schema = {
- nodes: {
- 'block-code': props =>
{props.children}
,
- 'block-quote': props =>
{props.children}
,
- 'heading-two': props =>
{props.children}
,
- 'paragraph': props =>
{props.children}
,
- },
- marks: {
- bold: props => {props.children},
- highlight: props => {props.children},
- italic: props => {props.children},
- }
-}
-
-/**
- * The iframes example.
- *
- * @type {Component}
- */
-
-class Iframes extends React.Component {
-
- /**
- * Deserialize the initial editor state.
- *
- * @type {Object}
- */
-
- state = {
- state: State.fromJSON(initialState)
- }
-
- /**
- * 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.activeMarks.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.
- *
- * @param {Change} change
- */
-
- onChange = ({ state }) => {
- this.setState({ state })
- }
-
- /**
- * On key down, if it's a formatting command toggle a mark.
- *
- * @param {Event} e
- * @param {Object} data
- * @param {Change} change
- * @return {State}
- */
-
- onKeyDown = (e, data, change) => {
- if (!data.isMod) return
- let mark
-
- switch (data.key) {
- case 'b':
- mark = 'bold'
- break
- case 'i':
- mark = 'italic'
- break
- default:
- return
- }
-
- e.preventDefault()
- return change.toggleMark(mark)
- }
-
- /**
- * When a mark button is clicked, toggle the current mark.
- *
- * @param {Event} e
- * @param {String} type
- */
-
- onClickMark = (e, type) => {
- e.preventDefault()
- const change = this.state.state
- .change()
- .toggleMark(type)
- this.onChange(change)
- }
-
- /**
- * When a block button is clicked, toggle the block type.
- *
- * @param {Event} e
- * @param {String} type
- */
-
- onClickBlock = (e, type) => {
- e.preventDefault()
- const isActive = this.hasBlock(type)
- const change = this.state.state
- .change()
- .setBlock(isActive ? DEFAULT_NODE : type)
- this.onChange(change)
- }
-
- /**
- * Render.
- *
- * @return {Element}
- */
-
- render() {
- const bootstrap = (
-
- )
-
- const style = {
- width: '100%',
- height: '500px'
- }
-
- return (
-
-
This editor is rendered inside of an iframe 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.
-
In this example's case, we've added Bootstrap's CSS to the iframe for default styles: