From dbdf3760e9621f87cfa49bdfe3d385d1ef2d6bbd Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Tue, 21 Jun 2016 14:49:08 -0700 Subject: [PATCH] refactor examples, normalize selections --- Makefile | 8 -- examples/auto-markdown/index.js | 79 +------------------ examples/auto-markdown/state.json | 69 +++++++++++++++++ examples/basic/index.css | 24 ------ examples/basic/index.html | 11 --- examples/basic/index.js | 123 ------------------------------ examples/plain-text/index.js | 25 +++--- examples/plain-text/state.json | 1 + examples/rich-text/index.js | 105 +------------------------ examples/rich-text/state.json | 99 ++++++++++++++++++++++++ lib/models/node.js | 18 ++++- lib/models/selection.js | 48 ++++++++++++ 12 files changed, 252 insertions(+), 358 deletions(-) create mode 100644 examples/auto-markdown/state.json delete mode 100644 examples/basic/index.css delete mode 100644 examples/basic/index.html delete mode 100644 examples/basic/index.js create mode 100644 examples/plain-text/state.json create mode 100644 examples/rich-text/state.json diff --git a/Makefile b/Makefile index e84698d5c..45ad6a1f7 100644 --- a/Makefile +++ b/Makefile @@ -31,10 +31,6 @@ dist: $(shell find ./lib) example-auto-markdown: @ $(browserify) --debug --transform babelify --outfile ./examples/auto-markdown/build.js ./examples/auto-markdown/index.js -# Build the basic example. -example-basic: - @ $(browserify) --debug --transform babelify --outfile ./examples/basic/build.js ./examples/basic/index.js - # Build the plain-text example. example-plain-text: @ $(browserify) --debug --transform babelify --outfile ./examples/plain-text/build.js ./examples/plain-text/index.js @@ -70,10 +66,6 @@ test-server: watch-example-auto-markdown: @ $(MAKE) example-auto-markdown browserify=$(watchify) -# Watch the basic example. -watch-example-basic: - @ $(MAKE) example-basic browserify=$(watchify) - # Watch the plain-text example. watch-example-plain-text: @ $(MAKE) example-plain-text browserify=$(watchify) diff --git a/examples/auto-markdown/index.js b/examples/auto-markdown/index.js index 6a29f94dd..8567ce518 100644 --- a/examples/auto-markdown/index.js +++ b/examples/auto-markdown/index.js @@ -1,84 +1,9 @@ -import Editor, { Mark, Raw } from '../..' +import Editor, { Raw } from '../..' import React from 'react' import ReactDOM from 'react-dom' import keycode from 'keycode' - -/** - * Define the initial state. - * - * @type {Object} state - */ - -const state = { - nodes: [ - { - type: 'paragraph', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'The editor gives you full control over the logic you can add. For example, it\'s fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with "> " you get a blockquote that looks like this:', - } - ] - } - ] - }, - { - type: 'block-quote', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'A wise quote.' - } - ] - } - ] - }, - { - type: 'paragraph', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'Order when you start a line with "## " you get a level-two heading, like this:', - } - ] - } - ] - }, - { - type: 'heading-two', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'Try it out!' - } - ] - } - ] - }, - { - type: 'paragraph', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'Try it out for yourself! Try starting a new line with ">", "-", or "#"s.' - } - ] - } - ] - } - ] -} +import state from './state.json' /** * Define our example app. diff --git a/examples/auto-markdown/state.json b/examples/auto-markdown/state.json new file mode 100644 index 000000000..65a13faf7 --- /dev/null +++ b/examples/auto-markdown/state.json @@ -0,0 +1,69 @@ +{ + "nodes": [ + { + "type": "paragraph", + "nodes": [ + { + "type": "text", + "ranges": [ + { + "text": "The editor gives you full control over the logic you can add. For example, it's fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with \"> \" you get a blockquote that looks like this:" + } + ] + } + ] + }, + { + "type": "block-quote", + "nodes": [ + { + "type": "text", + "ranges": [ + { + "text": "A wise quote." + } + ] + } + ] + }, + { + "type": "paragraph", + "nodes": [ + { + "type": "text", + "ranges": [ + { + "text": "Order when you start a line with \"## \" you get a level-two heading, like this:" + } + ] + } + ] + }, + { + "type": "heading-two", + "nodes": [ + { + "type": "text", + "ranges": [ + { + "text": "Try it out!" + } + ] + } + ] + }, + { + "type": "paragraph", + "nodes": [ + { + "type": "text", + "ranges": [ + { + "text": "Try it out for yourself! Try starting a new line with \">\", \"-\", or \"#\"s." + } + ] + } + ] + } + ] +} diff --git a/examples/basic/index.css b/examples/basic/index.css deleted file mode 100644 index 3a4e7ef3c..000000000 --- a/examples/basic/index.css +++ /dev/null @@ -1,24 +0,0 @@ - -html { - background: #eee; - padding: 20px; -} - -main { - background: #fff; - padding: 10px; - max-width: 40em; - margin: 0 auto; -} - -p { - margin: 0; -} - -pre { - margin: 0; -} - -main * + * { - margin-top: 1em; -} diff --git a/examples/basic/index.html b/examples/basic/index.html deleted file mode 100644 index d0026b102..000000000 --- a/examples/basic/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Editor | Basic Example - - - -
- - - diff --git a/examples/basic/index.js b/examples/basic/index.js deleted file mode 100644 index b8b71b858..000000000 --- a/examples/basic/index.js +++ /dev/null @@ -1,123 +0,0 @@ - -import Editor, { State, Raw } from '../..' -import React from 'react' -import ReactDOM from 'react-dom' - -/** - * State. - */ - -const state = { - nodes: [ - { - type: 'code', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'A\nfew\nlines\nof\ncode.' - } - ] - } - ] - }, - { - type: 'paragraph', - nodes: [ - { - type: 'text', - ranges: [ - { - text: 'A ' - }, - { - text: 'simple', - marks: [ - { - type: 'bold' - } - ] - }, - { - text: ' paragraph of text.' - } - ] - } - ] - } - ] -} - -/** - * App. - */ - -class App extends React.Component { - - state = { - state: Raw.deserialize(state) - }; - - render() { - return ( - this.renderNode(node)} - renderMark={mark => this.renderMark(mark)} - state={this.state.state} - onChange={(state) => { - console.groupCollapsed('Change!') - console.log('Document:', state.document.toJS()) - console.log('Selection:', state.selection.toJS()) - console.log('Content:', Raw.serialize(state)) - console.groupEnd() - this.setState({ state }) - }} - /> - ) - } - - renderNode(node) { - switch (node.type) { - case 'code': { - return (props) => { - return ( - 
-              
-                {props.children}
-              
-
- ) - } - } - case 'paragraph': { - return (props) => { - return ( -

- {props.children} -

- ) - } - } - } - } - - renderMark(mark) { - switch (mark.type) { - case 'bold': { - return { - fontWeight: 'bold' - } - } - } - } - -} - -/** - * Attach. - */ - -const app = -const root = document.body.querySelector('main') -ReactDOM.render(app, root) diff --git a/examples/plain-text/index.js b/examples/plain-text/index.js index b4f517838..de4e3a08c 100644 --- a/examples/plain-text/index.js +++ b/examples/plain-text/index.js @@ -2,14 +2,7 @@ import Editor, { Character, Document, Element, State, Text } from '../..' import React from 'react' import ReactDOM from 'react-dom' - -/** - * The initial editor state. - * - * @type {String} - */ - -const state = 'This is editable plain text, just like a