add plain text serializer

History.md

@@ -1,5 +1,5 @@
 
-0.0.1
------
-- :sparkles:
+:tada: - July 13, 2016
+----------------------
+:sparkles:
 

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:
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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 })
   }
 

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,

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
+}