mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-11 17:53:59 +02:00
update iframe rendering logic, refactor iframes example
This commit is contained in:
@@ -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
|
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
315
examples/iframes/index.js
Normal file
315
examples/iframes/index.js
Normal file
@@ -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
|
96
examples/iframes/state.json
Normal file
96
examples/iframes/state.json
Normal file
@@ -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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
@@ -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>
|
||||
)
|
||||
|
@@ -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) {
|
||||
range = contextWindow.document.caretRangeFromPoint(x, y)
|
||||
if (window.document.caretRangeFromPoint) {
|
||||
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.
|
||||
|
@@ -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)
|
||||
|
@@ -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.
|
||||
|
@@ -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 native = contextWindow.getSelection()
|
||||
const window = getWindow(e.target)
|
||||
const native = window.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 div = contextWindow.document.createElement('div')
|
||||
const body = window.document.querySelector('body')
|
||||
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)
|
||||
|
@@ -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
|
67
lib/utils/scroll-to.js
Normal file
67
lib/utils/scroll-to.js
Normal file
@@ -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
|
@@ -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",
|
||||
|
Reference in New Issue
Block a user