broke lots of stuff, but added tests

vleletko · Jun 23, 2016 · 74cab69 · 74cab69
1 parent b42fd18
commit 74cab69
Show file tree

Hide file tree

Showing 241 changed files with 4,149 additions and 323 deletions.
diff --git a/Makefile b/Makefile
@@ -31,6 +31,10 @@ dist:  $(shell find ./lib)
 example-auto-markdown:
 	@ $(browserify) --debug --transform babelify --outfile ./examples/auto-markdown/build.js ./examples/auto-markdown/index.js
 
+# Build the links example.
+example-links:
+	@ $(browserify) --debug --transform babelify --outfile ./examples/links/build.js ./examples/links/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
@@ -52,24 +56,28 @@ lint:
 	@ $(standard) ./lib
 
 # Build the test source.
-test/support/build.js:  $(shell find ./lib) ./test/browser.js
-	@ $(browserify) --debug --transform babelify --outfile ./test/support/build.js ./test/browser.js
+test/browser/support/build.js: $(shell find ./lib) ./test/browser/index.js
+	@ $(browserify) --debug --transform babelify --outfile ./test/browser/support/build.js ./test/browser/index.js
 
 # Run the tests.
 test: test-browser test-server
 
 # Run the browser-side tests.
-test-browser:  ./test/support/build.js
-	@ $(mocha-phantomjs) --reporter spec --timeout 5000 ./test/support/browser.html
+test-browser: ./test/browser/support/build.js
+	@ $(mocha-phantomjs) --reporter spec --timeout 5000 ./test/browser/support/browser.html
 
 # Run the server-side tests.
 test-server:
-	@ $(mocha) --reporter spec --timeout 5000 ./test/server.js
+	@ $(mocha) --compilers js:babel-core/register --reporter spec --timeout 5000 ./test/server
 
 # Watch the auto-markdown example.
 watch-example-auto-markdown:
 	@ $(MAKE) example-auto-markdown browserify=$(watchify)
 
+# Watch the links example.
+watch-example-links:
+	@ $(MAKE) example-links 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
@@ -24,6 +24,7 @@ class App extends React.Component {
   };
 
   /**
+   *
    * Render the example.
    *
    * @return {Component} component
@@ -153,12 +154,10 @@ class App extends React.Component {
       case '*':
       case '-':
       case '+':
-        if (node.type == 'list-item') break
-        transform = node.type == 'list-item'
-          ? transform
-          : transform
-              .setType('list-item')
-              .wrap('bulleted-list')
+        if (node.type == 'list-item') return
+        transform = transform
+          .setType('list-item')
+          .wrapBlock('bulleted-list')
         break
       default:
         return
@@ -196,7 +195,7 @@ class App extends React.Component {
       .transform()
       .setType('paragraph')
 
-    if (node.type == 'list-item') transform = transform.unwrap('bulleted-list')
+    if (node.type == 'list-item') transform = transform.unwrapBlock('bulleted-list')
 
     state = transform.apply()
     return state

diff --git a/examples/links/index.css b/examples/links/index.css
@@ -0,0 +1,48 @@
+
+html {
+  background: #eee;
+  padding: 20px;
+}
+
+main {
+  background: #fff;
+  padding: 10px;
+  max-width: 40em;
+  margin: 0 auto;
+}
+
+p {
+  margin: 0;
+}
+
+.editor > * > * + * {
+  margin-top: 1em;
+}
+
+.menu {
+  margin: 0 -10px;
+  padding: 1px 0 9px 8px;
+  border-bottom: 2px solid #eee;
+  margin-bottom: 10px;
+}
+
+.menu > * {
+  display: inline-block;
+}
+
+.menu > * + * {
+  margin-left: 10px;
+}
+
+.button {
+  color: #ccc;
+  cursor: pointer;
+}
+
+.button[data-active="true"] {
+  color: black;
+}
+
+.material-icons {
+  font-size: 18px;
+}
diff --git a/examples/links/index.html b/examples/links/index.html
@@ -0,0 +1,12 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Editor | Links Example</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="index.css">
+  </head>
+  <body>
+    <main></main>
+    <script src="build.js"></script>
+  </body>
+</html>
diff --git a/examples/links/index.js b/examples/links/index.js
@@ -0,0 +1,159 @@
+
+import Editor, { Mark, Raw } from '../..'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import state from './state.json'
+import { Map } from 'immutable'
+
+/**
+ * App.
+ */
+
+class App extends React.Component {
+
+  state = {
+    state: Raw.deserialize(state)
+  };
+
+  /**
+   * Check whether the current selection has a link in it.
+   *
+   * @return {Boolean} hasLinks
+   */
+
+  hasLinks() {
+    let { state } = this.state
+    const { currentInlineNodes } = state
+    const hasLinks = currentInlineNodes.some(inline => inline.type == 'link')
+    return hasLinks
+  }
+
+  /**
+   * When clicking a link, if the selection has a link in it, remove the link.
+   * Otherwise, add a new link with an href and text.
+   *
+   * @param {Event} e
+   */
+
+  onClickLink(e) {
+    e.preventDefault()
+    let { state } = this.state
+    const hasLinks = this.hasLinks()
+
+    if (hasLinks) {
+      state = state
+        .transform()
+        .unwrapInline('link')
+        .apply()
+    }
+
+    else if (state.isCurrentlyExpanded) {
+      // const href = window.prompt('Enter the URL of the link:')
+      state = state
+        .transform()
+        .wrapInline('link', new Map({ href: 'https://google.com' }))
+        .apply()
+    }
+
+    else {
+      const href = window.prompt('Enter the URL of the link:')
+      const text = window.prompt('Enter the text for the link:')
+      state = state
+        .transform()
+        .insertText(text)
+        .extendBackward(text.length)
+        .wrapInline('link', new Map({ href }))
+        .apply()
+    }
+
+    this.setState({ state })
+  }
+
+  /**
+   * Render the app.
+   *
+   * @return {Component} component
+   */
+
+  render() {
+    return (
+      <div>
+        {this.renderToolbar()}
+        {this.renderEditor()}
+      </div>
+    )
+  }
+
+  /**
+   * Render the toolbar.
+   *
+   * @return {Component} component
+   */
+
+  renderToolbar() {
+    const hasLinks = this.hasLinks()
+    return (
+      <div className="menu">
+        <span className="button" onMouseDown={e => this.onClickLink(e)} data-active={hasLinks}>
+          <span className="material-icons">link</span>
+        </span>
+      </div>
+    )
+  }
+
+  /**
+   * Render the editor.
+   *
+   * @return {Component} component
+   */
+
+  renderEditor() {
+    return (
+      <div className="editor">
+        <Editor
+          state={this.state.state}
+          renderNode={node => this.renderNode(node)}
+          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 })
+          }}
+        />
+      </div>
+    )
+  }
+
+  /**
+   * Render our custom `node`.
+   *
+   * @param {Node} node
+   * @return {Component} component
+   */
+
+  renderNode(node) {
+    switch (node.type) {
+      case 'link': {
+        return (props) => {
+          const { data } = props.node
+          const href = data.get('href')
+          return <a href={href}>{props.children}</a>
+        }
+      }
+      case 'paragraph': {
+        return (props) => <p>{props.children}</p>
+      }
+    }
+  }
+
+}
+
+/**
+ * Attach.
+ */
+
+const app = <App />
+const root = document.body.querySelector('main')
+ReactDOM.render(app, root)
diff --git a/examples/links/state.json b/examples/links/state.json
@@ -0,0 +1,57 @@
+{
+  "nodes": [
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "In addition to block nodes, you can create inline nodes, like "
+            },
+          ]
+        },
+        {
+          "kind": "inline",
+          "type": "link",
+          "data": {
+            "href": "https://en.wikipedia.org/wiki/Hypertext"
+          },
+          "nodes": [
+            {
+              "kind": "text",
+              "ranges": [
+                {
+                  "text": "hyperlinks"
+                },
+              ]
+            },
+          ]
+        },
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "!"
+            },
+          ]
+        }
+      ]
+    },
+    {
+      "kind": "block",
+      "type": "paragraph",
+      "nodes": [
+        {
+          "kind": "text",
+          "ranges": [
+            {
+              "text": "This example shows hyperlinks in action. It features two ways to add links. You can either add a link via the toolbar icon above, or if you want in on a little secret, copy a URL to your keyboard and paste it while a range of text is selected."
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/examples/table/index.html b/examples/table/index.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Editor | Auto-markdown Example</title>
+    <title>Editor | Table Example</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="index.css">
   </head>

diff --git a/lib/components/content.js b/lib/components/content.js
@@ -83,7 +83,7 @@ class Content extends React.Component {
     const { anchorNode, anchorOffset, focusNode, focusOffset } = native
     const anchor = OffsetKey.findPoint(anchorNode, anchorOffset)
     const focus = OffsetKey.findPoint(focusNode, focusOffset)
-    const edges = document.filterNodes((node) => {
+    const edges = document.filterDeep((node) => {
       return node.key == anchor.key || node.key == focus.key
     })
 

diff --git a/lib/index.js b/lib/index.js
@@ -12,6 +12,7 @@ export default Editor
 
 export { default as Block } from './models/block'
 export { default as Character } from './models/character'
+export { default as Data } from './models/data'
 export { default as Document } from './models/document'
 export { default as Inline } from './models/inline'
 export { default as Mark } from './models/mark'