mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-31 19:01:54 +02:00
remove iframes example, since it depends on react internals
This commit is contained in:
Ian Storm Taylor
@@ -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!
|
||||
@@ -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 => <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>,
|
||||
},
|
||||
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: 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 = (
|
||||
<link
|
||||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
)
|
||||
|
||||
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}`} />
|
||||
</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}`} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the Slate editor.
|
||||
*
|
||||
* @return {Element}
|
||||
*/
|
||||
|
||||
renderEditor = () => {
|
||||
return (
|
||||
<Editor
|
||||
placeholder={'Enter some rich text...'}
|
||||
schema={schema}
|
||||
state={this.state.state}
|
||||
onChange={this.onChange}
|
||||
onKeyDown={this.onKeyDown}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Iframes
|
||||
@@ -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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -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],
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user