improved text parsing

README.md

@@ -1,9 +1,6 @@
 # ContentKit-Editor [![Build Status](https://travis-ci.org/ContentKit/content-kit-editor.svg?branch=master)](https://travis-ci.org/ContentKit/content-kit-editor)
 ### A modern, minimalist WYSIWYG editor.
 
-![screenshot]
-(https://rawgit.com/ContentKit/content-kit-editor/master/screenshot.png)
-
 *Currently under heavy active development.  API subject to change.*
 
 ## Prerequisites

demo/demo.css

@@ -32,7 +32,7 @@ body {
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 3;
+  z-index: 2;
 }
 .demo-buttons a {
   display: block;
@@ -49,7 +49,7 @@ body {
   bottom: 0;
   right: -50%;
   width: 0;
-  z-index: 2;
+  z-index: 1;
 }
 .code-pane-open .code-panes {
   right: 0;
@@ -71,11 +71,11 @@ body {
 .code-pane code {
   white-space: pre-wrap;
   font-family: Consolas, Menlo, Courier, monospace;
-  font-size: 0.8em;
-  line-height: 1.4em;
+  font-size: 0.75em;
+  line-height: 1.2em;
   background-color: transparent;
   color: #c0c5ce;
-  padding: 1.5em 1em 1em;
+  padding: 5em 1em 1em;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   position: absolute;

demo/index.html

@@ -21,27 +21,27 @@
     <!-- This is the element we will target for the `Editor` -->
     <article class="editor">
       <h2>ContentKit Editor</h2>
-      <p>A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as <b>bold</b> and <i>italic</i>, or create a <a href="https://github.com/ContentKit">link</a>.</p>
+      <p>A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as <strong>bold</strong> and <em>italic</em>, or create a <a href="https://github.com/ContentKit">link</a>.</p>
       <h2>Create headings by pressing "H1" on the toolbar</h2>
       <h3>Pressing "H2" will create a subheading, like this one.</h3>
       <blockquote>Create block quotes by selecting any text and pressing the "quote" button.  Press it again to toggle back to a standard paragraph.</blockquote>
-      <p>To create a <i>list</i>, start typing a dash followed by a space (<b>"- "</b>) on a new line and a list will be automatically created.</p>
-      <p>To create an <i>ordered list</i>, start typing a one followed by a period and a space (<b>"1. "</b>) and the list will be automatically created.</p>
+      <p>To create a <em>list</em>, start typing a dash followed by a space (<strong>"- "</strong>) on a new line and a list will be automatically created.</p>
+      <p>To create an <em>ordered list</em>, start typing a one followed by a period and a space (<strong>"1. "</strong>) and the list will be automatically created.</p>
 
       <h3>Tips &amp; Tricks:</h3>
       <ul>
-        <li>Close the formatting toolbar by clicking anywhere, or press <b>ESC</b></li>
-        <li>Make the toolbar sticky by pressing <b>F5</b></li>
+        <li>Close the formatting toolbar by clicking anywhere, or press <strong>ESC</strong></li>
+        <li>Make the toolbar sticky by pressing <strong>F5</strong></li>
         <li>Double click a word to select it</li>
         <li>You only have to select a portion of a paragraph if you want to change it to a heading, subheading, or quote</li>
-        <li>To create a soft line break, press <b><i>shift</i></b> + <b>enter</b></li>
-        <li>Press <b>enter</b> twice to exit a list</li>
+        <li>To create a soft line break, press <strong><em>shift</em></strong> + <strong>enter</strong></li>
+        <li>Press <strong>enter</strong> twice to exit a list</li>
       </ul>
 
       <h3>Keyboard shortcuts:</h3>
       <ul>
-        <li><b>bold</b>: (cmd+B)</li>
-        <li><i>italic</i>: (cmd+I)</li>
+        <li><strong>bold</strong>: (cmd+B)</li>
+        <li><em>italic</em>: (cmd+I)</li>
         <li>undo: (cmd+z)</li>
         <li>redo: (cmd+y)</li>
         <li>select all text: (cmd+a)</li>

src/css/animations.less

@@ -2,11 +2,11 @@
  * Animations
  */
 
-@-webkit-keyframes fadeIn {
+@-webkit-keyframes fade-in {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }
-@keyframes fadeIn {
+@keyframes fade-in {
   0% { opacity: 0; }
   100% { opacity: 1; }
 }

src/css/embeds.less

@@ -125,11 +125,7 @@
   height: 100%;
 }
 
-.ck-image-local img {
-  filter: grayscale(100%);
-  -webkit-filter: grayscale(100%);
-  -moz-filter: grayscale(100%);
-  -ms-filter: grayscale(100%); 
-  filter: gray;
-  opacity: (0.85);
+.ck-image-embed {
+  -webkit-animation: fade-in 1s;
+          animation: fade-in 1s;
 }

src/css/message.less

@@ -1,4 +1,4 @@
-@messageHeight : 3.125em;
+@messageHeight : 3em;
 
 .ck-message {
   position: fixed;

src/css/tooltip.less

@@ -12,8 +12,8 @@
   line-height: 1em;
   padding: 0.7em 0.9em;
   color: #FFF;
-  -webkit-animation: fadeIn 0.2s;
-          animation: fadeIn 0.2s;
+  -webkit-animation: fade-in 0.2s;
+          animation: fade-in 0.2s;
 }
 .ck-tooltip:before {
   content: '';

src/js/content-kit-compiler/compiler.js

@@ -16,7 +16,7 @@ function Compiler(options) {
     renderer         : renderer,
     blockTypes       : DefaultBlockTypeSet,
     markupTypes      : DefaultMarkupTypeSet,
-    includeTypeNames : false // true will output type_name: 'TEXT' etc. when parsing for easier debugging
+    includeTypeNames : false // Outputs `type_name:'HEADING'` etc. when parsing. Good for debugging.
   };
   mergeWithOptions(this, defaults, options);
 
@@ -37,22 +37,31 @@ Compiler.prototype.parse = function(input) {
 
 /**
  * @method render
- * @param data
+ * @param model
  * @return String
  */
-Compiler.prototype.render = function(data) {
-  return this.renderer.render(data);
+Compiler.prototype.render = function(model) {
+  return this.renderer.render(model);
 };
 
 /**
- * @method sanitize
+ * @method rerender
  * @param input
  * @return String
  */
-Compiler.prototype.sanitize = function(input) {
+Compiler.prototype.rerender = function(input) {
   return this.render(this.parse(input));
 };
 
+/**
+ * @method reparse
+ * @param model
+ * @return String
+ */
+Compiler.prototype.reparse = function(model) {
+  return this.parse(this.render(model));
+};
+
 /**
  * @method registerBlockType
  * @param {Type} type

src/js/content-kit-compiler/models/block.js

@@ -1,4 +1,5 @@
 import Model from './model';
+import { inherit } from '../../content-kit-utils/object-utils';
 
 /**
  * Ensures block markups at the same index are always in a specific order.
@@ -26,4 +27,6 @@ function BlockModel(options) {
   this.markup = sortBlockMarkups(options.markup || []);
 }
 
+inherit(BlockModel, Model);
+
 export default BlockModel;

src/js/content-kit-compiler/models/markup.js

@@ -1,4 +1,5 @@
 import Model from './model';
+import { inherit } from '../../content-kit-utils/object-utils';
 
 /**
  * @class MarkupModel
@@ -12,4 +13,6 @@ function MarkupModel(options) {
   this.end = options.end || 0;
 }
 
+inherit(MarkupModel, Model);
+
 export default MarkupModel;

src/js/content-kit-compiler/models/model.js

@@ -17,4 +17,17 @@ function Model(options) {
   }
 }
 
+/**
+ * @method createWithType
+ * @static
+ * @param type Type
+ * @param options Object
+ */
+Model.createWithType = function(type, options) {
+  options = options || {};
+  options.type = type.id;
+  options.type_name = type.name;
+  return new this(options);
+};
+
 export default Model;