From 8fd46bb59908906f7569bc70662cce8309ac5af7 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 13 Oct 2017 15:05:12 -0700 Subject: [PATCH] remove iframes example, since it depends on react internals --- examples/iframes/Readme.md | 14 -- examples/iframes/index.js | 270 ------------------------------------ examples/iframes/state.json | 114 --------------- examples/index.js | 2 - yarn.lock | 7 - 5 files changed, 407 deletions(-) delete mode 100644 examples/iframes/Readme.md delete mode 100644 examples/iframes/index.js delete mode 100644 examples/iframes/state.json 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:

- -
- {this.renderToolbar()} - {this.renderEditor()} -
- -
- ) - } - - /** - * Render the toolbar. - * - * @return {Element} - */ - - renderToolbar = () => { - return ( -
- {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')} -
- ) - } - - /** - * 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 ( - - ) - } - - /** - * 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 ( - - ) - } - - /** - * Render the Slate editor. - * - * @return {Element} - */ - - renderEditor = () => { - return ( - - ) - } - -} - -export default Iframes diff --git a/examples/iframes/state.json b/examples/iframes/state.json deleted file mode 100644 index 514552102..000000000 --- a/examples/iframes/state.json +++ /dev/null @@ -1,114 +0,0 @@ -{ - "document": { - "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", - "ranges": [ - { - "text": "A wise quote." - } - ] - } - ] - }, - { - "kind": "block", - "type": "paragraph", - "nodes": [ - { - "kind": "text", - "ranges": [ - { - "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", - "ranges": [ - { - "text": "console.log('Hello world!');" - } - ] - } - ] - }, - { - "kind": "block", - "type": "paragraph", - "nodes": [ - { - "kind": "text", - "ranges": [ - { - "text": "Try it out for yourself!" - } - ] - } - ] - } - ] - } -} diff --git a/examples/index.js b/examples/index.js index ede0629d9..edd5674b1 100644 --- a/examples/index.js +++ b/examples/index.js @@ -9,7 +9,6 @@ import Embeds from './embeds' import Emojis from './emojis' import ForcedLayout from './forced-layout' import HoveringMenu from './hovering-menu' -import Iframes from './iframes' import Images from './images' import Links from './links' import MarkdownPreview from './markdown-preview' @@ -59,7 +58,6 @@ const EXAMPLES = [ ['Read-only', ReadOnly, '/read-only'], ['RTL', RTL, '/rtl'], ['Plugins', Plugins, '/plugins'], - ['Iframes', Iframes, '/iframes'], ['Forced Layout', ForcedLayout, '/forced-layout'], ['DEV:Huge', DevHugeDocument, '/dev-huge', true], diff --git a/yarn.lock b/yarn.lock index 6dd0330ca..a2021c84e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5012,13 +5012,6 @@ rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-addons-perf@^16.0.0-alpha: - version "16.0.0-alpha.3" - resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-16.0.0-alpha.3.tgz#10a980395e78ad851404368c40670c97d82dafd4" - dependencies: - fbjs "^0.8.9" - object-assign "^4.1.0" - react-dom@^16.0.0: version "16.0.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"