Merge pull request #73 from mixonic/placeholder

Refactor some method into public postEditor methods

README.md

@@ -56,6 +56,33 @@ var editor = new ContentKit.Editor(element, options);
   Mobiledoc.
 * `editor.destroy()` - teardown the editor event listeners, free memory etc.
 
+### Programmatic Post Editing
+
+A major goal of Content-Kit is to allow complete customization of user
+interfaces using the editing surface. The programmatic editing API allows
+the creation of completely custom interfaces for buttons, hot-keys, and
+other interactions.
+
+To change the post in code, use the `editor.run` API. For example, the
+following usage would mark currently selected text as bold:
+
+```js
+let strongMarkup = editor.builder.createMarkup('strong');
+let markerRange = editor.cursor.offsets;
+editor.run((postEditor) => {
+  postEditor.applyMarkupToMarkers(markerRange, strongMarkup);
+});
+```
+
+It is important that you make changes to posts, sections, and markers through
+the `run` and `postEditor` API. This API allows Content-Kit to conserve
+and better understand changes being made to the post.
+
+For more details on the API of `postEditor`, see the [API documentation](https://github.com/mixonic/content-kit-editor/blob/master/src/js/editor/post.js).
+
+For more details on the API for the builder, required to create new sections
+and markers, see the [builder API](https://github.com/mixonic/content-kit-editor/blob/master/src/js/models/post-node-builder.js).
+
 ### Contributing
 
 Fork the repo, write a test, make a change, open a PR.

src/js/commands/bold.js

@@ -14,10 +14,21 @@ export default class BoldCommand extends TextFormatCommand {
     this.markup = builder.createMarkup('strong');
   }
   exec() {
-    this.editor.applyMarkupToSelection(this.markup);
+    let markerRange = this.editor.cursor.offsets;
+    if (!markerRange.leftRenderNode || !markerRange.rightRenderNode) {
+      return;
+    }
+    let markers = this.editor.run((postEditor) => {
+      return postEditor.applyMarkupToMarkers(markerRange, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
   unexec() {
-    this.editor.removeMarkupFromSelection(this.markup);
+    let markerRange = this.editor.cursor.offsets;
+    let markers = this.editor.run((postEditor) => {
+      return postEditor.removeMarkupFromMarkers(markerRange, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
   isActive() {
     return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));

src/js/commands/image.js

@@ -9,14 +9,16 @@ export default class ImageCommand extends Command {
   }
 
   exec() {
-    let {post, builder} = this.editor;
-    let sections = this.editor.activeSections;
-    let lastSection = sections[sections.length - 1];
-    let section = builder.createCardSection('image');
-    post.sections.insertAfter(section, lastSection);
-    sections.forEach(section => section.renderNode.scheduleForRemoval());
+    let {headMarker} = this.editor.cursor.offsets;
+    let beforeSection = headMarker.section;
+    let afterSection = beforeSection.next;
+    let section = this.editor.builder.createCardSection('image');
 
-    this.editor.rerender();
-    this.editor.didUpdate();
+    this.editor.run((postEditor) => {
+      if (beforeSection.isBlank) {
+        postEditor.removeSection(beforeSection);
+      }
+      postEditor.insertSectionBefore(section, afterSection);
+    });
   }
 }

src/js/commands/italic.js

@@ -14,10 +14,21 @@ export default class ItalicCommand extends TextFormatCommand {
     this.markup = builder.createMarkup('em');
   }
   exec() {
-    this.editor.applyMarkupToSelection(this.markup);
+    let markerRange = this.editor.cursor.offsets;
+    if (!markerRange.leftRenderNode || !markerRange.rightRenderNode) {
+      return;
+    }
+    let markers = this.editor.run((postEditor) => {
+      return postEditor.applyMarkupToMarkers(markerRange, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
   unexec() {
-    this.editor.removeMarkupFromSelection(this.markup);
+    let markerRange = this.editor.cursor.offsets;
+    let markers = this.editor.run((postEditor) => {
+      return postEditor.removeMarkupFromMarkers(markerRange, this.markup);
+    });
+    this.editor.selectMarkers(markers);
   }
   isActive() {
     return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));