From 3d33ab3da2a43bbde59f63a5d9f56be43b4ad6d8 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Wed, 13 Jul 2016 14:55:41 -0700 Subject: [PATCH] add plain text serializer --- History.md | 6 ++-- Readme.md | 2 +- examples/auto-markdown/index.js | 5 --- examples/code-highlighting/index.js | 5 --- examples/hovering-menu/index.js | 5 --- examples/images/index.js | 5 --- examples/links/index.js | 5 --- examples/paste-html/index.js | 5 --- examples/plain-text/index.js | 45 ++------------------------ examples/rich-text/index.js | 5 --- examples/tables/index.js | 5 --- lib/index.js | 3 ++ lib/serializers/plain.js | 50 +++++++++++++++++++++++++++++ 13 files changed, 60 insertions(+), 86 deletions(-) create mode 100644 lib/serializers/plain.js diff --git a/History.md b/History.md index 0a28595f1..9bcafce30 100644 --- a/History.md +++ b/History.md @@ -1,5 +1,5 @@ -0.0.1 ------ -- :sparkles: +:tada: - July 13, 2016 +---------------------- +:sparkles: diff --git a/Readme.md b/Readme.md index 2b2293707..ed12b6f78 100644 --- a/Readme.md +++ b/Readme.md @@ -20,7 +20,7 @@ _**Slate is currently in beta**. It's useable now, but you might need to pull re Why create Slate? Well... _(Beware: this section has a few of [my](https://github.com/ianstormtaylor) opinions!)_ -Before creating Slate, I tried a lot of the other rich text libraries out there. What I found was that while getting simple examples to work might be possible, once you start trying to build something like [Medium](https://medium.com/), [Dropbox Paper](https://www.dropbox.com/paper) or [Canvas](https://usecanvas.com/), you have to resort to very hacky things to get the user experience you want. And some experiences are just impossible. On the way, your codebase becomes harder and harder to maintain well. +Before creating Slate, I tried a lot of the other rich text libraries out there. What I found was that while getting simple examples to work might be possible, once you start trying to build something like [Medium](https://medium.com/), [Dropbox Paper](https://www.dropbox.com/paper) or [Canvas](https://usecanvas.com/), you have to resort to very hacky things to get the user experience you want. And some experiences are just impossible. On the way, your codebase becomes harder and harder to maintain. Here's how Slate compares to some of the existing editors out there: diff --git a/examples/auto-markdown/index.js b/examples/auto-markdown/index.js index 4f54cc226..4d2996c48 100644 --- a/examples/auto-markdown/index.js +++ b/examples/auto-markdown/index.js @@ -101,11 +101,6 @@ class AutoMarkdown extends React.Component { */ 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 }) } diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js index c6db5d1aa..a9be58351 100644 --- a/examples/code-highlighting/index.js +++ b/examples/code-highlighting/index.js @@ -46,11 +46,6 @@ class CodeHighlighting extends React.Component { }; 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 }) } diff --git a/examples/hovering-menu/index.js b/examples/hovering-menu/index.js index 910e9ddff..5f333837d 100644 --- a/examples/hovering-menu/index.js +++ b/examples/hovering-menu/index.js @@ -121,11 +121,6 @@ class HoveringMenu extends React.Component { } 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 }) } diff --git a/examples/images/index.js b/examples/images/index.js index af91c824d..f3834bdf2 100644 --- a/examples/images/index.js +++ b/examples/images/index.js @@ -100,11 +100,6 @@ class Images extends React.Component { */ 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 }) } diff --git a/examples/links/index.js b/examples/links/index.js index 35ea95639..13e335793 100644 --- a/examples/links/index.js +++ b/examples/links/index.js @@ -153,11 +153,6 @@ class Links extends React.Component { */ 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 }) } diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js index bdcbd162f..e487f7fff 100644 --- a/examples/paste-html/index.js +++ b/examples/paste-html/index.js @@ -191,11 +191,6 @@ class PasteHtml extends React.Component { } 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 }) } diff --git a/examples/plain-text/index.js b/examples/plain-text/index.js index a9ec8e82c..54a2797f2 100644 --- a/examples/plain-text/index.js +++ b/examples/plain-text/index.js @@ -1,43 +1,8 @@ -import { Block, Character, Document, Editor, State, Text } from '../..' +import { Editor, Plain } from '../..' import React from 'react' import initialState from './state.json' -/** - * A helper to deserialize a string into an editor state. - * - * @param {String} string - * @return {State} state - */ - -function deserialize(string) { - const characters = string.split('').map(char => { - return { text: char } - }) - - const text = Text.create({ characters }) - const block = Block.create({ - type: 'paragraph', - nodes: [text] - }) - - const document = Document.create({ nodes: [block] }) - const state = State.create({ document }) - return state -} - -/** - * A helper to serialize an editor state into a string. - * - * @param {State} state - * @return {String} string - */ - -function serialize(state) { - return state.blocks - .map(block => block.text) - .join('\n') -} /** * The plain text example. @@ -54,7 +19,7 @@ class PlainText extends React.Component { */ state = { - state: deserialize(initialState) + state: Plain.deserialize(initialState) }; /** @@ -80,11 +45,7 @@ class PlainText extends React.Component { */ onChange = (state) => { - console.groupCollapsed('Change!') - console.log('Document:', state.document.toJS()) - console.log('Selection:', state.selection.toJS()) - console.log('Content:', serialize(state)) - console.groupEnd() + console.log('Content:', Plain.serialize(state)) this.setState({ state }) } diff --git a/examples/rich-text/index.js b/examples/rich-text/index.js index 2c2b6ce68..74390800f 100644 --- a/examples/rich-text/index.js +++ b/examples/rich-text/index.js @@ -136,11 +136,6 @@ class RichText extends React.Component { } 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 }) } diff --git a/examples/tables/index.js b/examples/tables/index.js index 0004474f4..6e0056e47 100644 --- a/examples/tables/index.js +++ b/examples/tables/index.js @@ -95,11 +95,6 @@ class Tables extends React.Component { */ 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 }) } diff --git a/lib/index.js b/lib/index.js index 3112f9251..3ee114321 100644 --- a/lib/index.js +++ b/lib/index.js @@ -25,6 +25,7 @@ import Text from './models/text' */ import Html from './serializers/html' +import Plain from './serializers/plain' import Raw from './serializers/raw' /** @@ -53,6 +54,7 @@ export { Inline, Mark, Placeholder, + Plain, Raw, Selection, State, @@ -70,6 +72,7 @@ export default { Inline, Mark, Placeholder, + Plain, Raw, Selection, State, diff --git a/lib/serializers/plain.js b/lib/serializers/plain.js new file mode 100644 index 000000000..6e73be23a --- /dev/null +++ b/lib/serializers/plain.js @@ -0,0 +1,50 @@ + +import Block from '../models/block' +import Document from '../models/document' +import State from '../models/state' +import Text from '../models/text' + +/** + * Deserialize a plain text `string` to a state. + * + * @param {String} string + * @return {State} + */ + +function deserialize(string) { + const characters = string.split('').map(char => { + return { text: char } + }) + + const text = Text.create({ characters }) + const block = Block.create({ + type: 'paragraph', + nodes: [text] + }) + + const document = Document.create({ nodes: [block] }) + const state = State.create({ document }) + return state +} + +/** + * Serialize a `state` to plain text. + * + * @param {State} state + * @return {String} + */ + +function serialize(state) { + return state.blocks + .map(block => block.text) + .join('\n') +} + +/** + * Export. + */ + +export default { + deserialize, + serialize +}