Merge pull request #56 from substance/develop

Beta 6

Author: Michael Aufreiter

.gitignore

@@ -34,4 +34,5 @@ node_modules
 
 
 *.sqlite
-*.sqlite3
+*.sqlite3
+.DS_Store

README.md

@@ -4,15 +4,20 @@ Here you can find a number of examples that cover various Substance API's.
 
 ## Install
 
-You can start playing around with the code by cloning this repo and starting the dev server.
+You can start playing around with the code by cloning this repo and starting the dev server. 
 
 ```bash
 $ git clone https://github.com/substance/examples.git
+```
+
+Now install dependencies and start the dev environment.
+
+```bash
 $ npm install
 $ npm start
 ```
 
-And navigate to [http://localhost:5000](http://localhost:5000)
+Now you can navigate to [http://localhost:5555](http://localhost:5555)
 
 ## Questions
 

code-editor/app.css

@@ -1,9 +1,4 @@
-/* Substance Component styles */
-@import '../lib/substance/substance.css';
-/* You may want to use your own reset and pagestyle */
-@import '../lib/substance/substance-reset.css';
-@import '../lib/substance/substance-pagestyle.css';
-@import url('../lib/font-awesome/css/font-awesome.min.css');
+@import '../common.css';
 
 body {
   overflow: hidden;
@@ -12,4 +7,4 @@ body {
 .sc-script-editor {
   background: #efefef;
   padding: 5px 10px;
-}
+}

code-editor/app.js

@@ -1,7 +1,7 @@
-const {
-  Component, ProseEditor, ProseEditorConfigurator, DocumentSession,
+import {
+  Component, ProseEditor, ProseEditorConfigurator, EditorSession,
   ProseEditorPackage, BlockNode, Tool, InsertNodeCommand
-} = substance
+} from 'substance'
 
 /*
   Node definition
@@ -33,6 +33,7 @@ class ScriptEditor extends Component {
   }
 
   didMount() {
+    let editorSession = this.context.editorSession
     let node = this.props.node;
     let editor = ace.edit(this.refs.source.getNativeElement())
     // editor.setTheme("ace/theme/monokai");
@@ -59,11 +60,13 @@ class ScriptEditor extends Component {
     });
 
     this.editor = editor
-    this.props.node.on('source:changed', this._onModelChange, this)
+    editorSession.onRender('document', this._onModelChange, this, {
+      path: [node.id, 'source']
+    })
   }
 
   dispose() {
-    this.props.node.off(this)
+    this.context.editorSession.off(this)
     this.editor.destroy()
   }
 
@@ -72,7 +75,7 @@ class ScriptEditor extends Component {
     let nodeId = this.props.node.id
     let source = editor.getValue()
     if (source !== this.props.node.source) {
-      this.context.surface.transaction(function(tx) {
+      this.context.editorSession.transaction(function(tx) {
         tx.set([nodeId, 'source'], editor.getValue())
       }, { source: this, skipSelection: true })
     }
@@ -109,7 +112,7 @@ let ScriptPackage = {
     config.addNode(Script)
     config.addComponent(Script.type, ScriptEditor)
     config.addCommand('insert-script', InsertScriptCommand)
-    config.addTool('insert-script', Tool, {target: 'insert'})
+    config.addTool('insert-script', Tool, {toolGroup: 'insert'})
     config.addIcon('insert-script', { 'fontawesome': 'fa-code' })
     config.addLabel('insert-script', 'Source Code')
   }
@@ -160,20 +163,16 @@ let fixture = function(tx) {
 /*
   Application
 */
-let config = {
-  name: 'code-editor-example',
-  configure: function(config) {
-    config.import(ProseEditorPackage)
-    config.import(ScriptPackage)
-  }
-}
-let configurator = new ProseEditorConfigurator().import(config)
+let cfg = new ProseEditorConfigurator()
+cfg.import(ProseEditorPackage)
+cfg.import(ScriptPackage)
 
 window.onload = function() {
-  let doc = configurator.createArticle(fixture)
-  let documentSession = new DocumentSession(doc)
+  let doc = cfg.createArticle(fixture)
+  let editorSession = new EditorSession(doc, {
+    configurator: cfg
+  })
   ProseEditor.mount({
-    documentSession: documentSession,
-    configurator: configurator
+    editorSession: editorSession
   }, document.body)
 }

collab-writer/README.md

@@ -0,0 +1,6 @@
+@import url('../lib/font-awesome/css/font-awesome.min.css');
+
+/* styles shared by all examples */
+@import './node_modules/substance/substance.css';
+@import './node_modules/substance/substance-reset.css';
+@import './node_modules/substance/substance-pagestyle.css';

collab-writer/app.css

@@ -1,9 +1,4 @@
-/* Substance Component styles */
-@import '../lib/substance/substance.css';
-/* You may want to use your own reset and pagestyle */
-@import '../lib/substance/substance-reset.css';
-@import '../lib/substance/substance-pagestyle.css';
-@import url('../lib/font-awesome/css/font-awesome.min.css');
+@import '../common.css';
 
 body {
   overflow: hidden;