mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-01 19:22:35 +02:00
Code Issues Releases Wiki Activity

remove iframes example, since it depends on react internals

Browse Source
This commit is contained in:
Ian Storm Taylor
2017-10-13 15:05:12 -07:00
parent d65931c74a
commit 8fd46bb599
5 changed files with 0 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/iframes/Readme.md
View File

@@ -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!

270
examples/iframes/index.js
View File

@@ -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

114
examples/iframes/state.json
View File

@@ -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!"
}
]
}
]
}
]
}
}

2
examples/index.js
View File

@@ -9,7 +9,6 @@ import Embeds from './embeds'
import Emojis from './emojis' import Emojis from './emojis'
import ForcedLayout from './forced-layout' import ForcedLayout from './forced-layout'
import HoveringMenu from './hovering-menu' import HoveringMenu from './hovering-menu'
import Iframes from './iframes'
import Images from './images' import Images from './images'
import Links from './links' import Links from './links'
import MarkdownPreview from './markdown-preview' import MarkdownPreview from './markdown-preview'
@@ -59,7 +58,6 @@ const EXAMPLES = [
['Read-only', ReadOnly, '/read-only'], ['Read-only', ReadOnly, '/read-only'],
['RTL', RTL, '/rtl'], ['RTL', RTL, '/rtl'],
['Plugins', Plugins, '/plugins'], ['Plugins', Plugins, '/plugins'],
['Iframes', Iframes, '/iframes'],
['Forced Layout', ForcedLayout, '/forced-layout'], ['Forced Layout', ForcedLayout, '/forced-layout'],
['DEV:Huge', DevHugeDocument, '/dev-huge', true], ['DEV:Huge', DevHugeDocument, '/dev-huge', true],

7
yarn.lock
View File

@@ -5012,13 +5012,6 @@ rc@^1.1.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" 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: react-dom@^16.0.0:
version "16.0.0" version "16.0.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"