attempt to add syntax highlighted code

examples/index.jade

@@ -4,6 +4,7 @@ html
     title Quill Editor Demo
     meta(charset='utf-8')
     link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css")
+    link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/tomorrow-night.min.css")
     style.
       body {
         font-family: 'Helvetica', 'Arial', san-serif;
@@ -74,13 +75,15 @@ html
         button.ql-strike(title='Strikethrough') Strike
         button.ql-link(title='Link') Link
         button.ql-image(title='Image') Image
+        button.ql-code-block(title='Code Block') Code
         button.ql-equation(title='Equation') Equation
         button.ql-list(title='Bullet' data-value='bullet') Bullet
         button.ql-list(title='List' data-value='ordered') List
       #editor-container
-        p Test
+        p var test = 1 + 1;
 
     script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.js')
+    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js')
     script(type='text/javascript', src='../quill.js')
     script(type='text/javascript').
       var quill = new Quill('#editor-container', {

src/blots/block.js

@@ -23,6 +23,13 @@ class Block extends Parchment.Block {
     }
   }
 
+  findNode(index) {
+    if (index === this.getLength()) {
+      return [this.children.tail, this.children.tail.getLength()];
+    }
+    return super.findNode(index);
+  }
+
   findPath(index) {
     return super.findPath(index, true);
   }

src/blots/cursor.js

@@ -10,6 +10,14 @@ class Cursor extends Parchment.Leaf {
     this.domNode.appendChild(this.textNode);
   }
 
+  findNode(index) {
+    return [this.textNode, index];
+  }
+
+  findOffset(node) {
+    return (node === this.domNode || node === this.textNode) ? 0 : -1;
+  }
+
   getLength() {
     return this.textNode.data.length;
   }

src/formats/code-block.js

@@ -0,0 +1,81 @@
+import Block from '../blots/block';
+import Delta from 'rich-text/lib/delta';
+import Parchment from 'parchment';
+
+
+class CodeBlock extends Block {
+  constructor(value) {
+    super(value);
+    if (typeof value === 'string') {
+      this.domNode.setAttribute('data-language', value)
+    }
+  }
+
+  build() {
+    this.domNode.innerHTML = this.domNode.innerText;
+    hljs.highlightBlock(this.domNode);
+  }
+
+  deleteAt(index, length) {
+    let text = this.domNode.innerText;
+    this.domNode.innerText = text.slice(0, index) + text.slice(index + length);
+    hljs.highlightBlock(this.domNode);
+  }
+
+  findNode() {
+    return [this.domNode, 0]
+  }
+
+  findOffset() {
+
+  }
+
+  format(name, value) {
+
+  }
+
+  formatAt(index, length, name, value) {
+
+  }
+
+  getFormat() {
+    return {
+      'code-block': this.domNode.getAttribute('data-language') || true
+    };
+  }
+
+  getLength() {
+    return this.getValue().length;
+  }
+
+  getValue() {
+    return this.domNode.innerText + '\n';
+  }
+
+  insertAt(index, value, def) {
+    if (def != null || typeof value !== 'string') return;
+    let text = this.domNode.innerText;
+    this.domNode.innerText = text.slice(0, index) + value + text.slice(index);
+    hljs.highlightBlock(this.domNode);
+  }
+
+  insertBefore(blot, ref) {
+    let values = blot.getValue();
+    if (!Array.isArray(values)) values = [values];
+    let text = values.map(function(value) {
+      return (typeof value === 'string') ? value : '';
+    }).join('');
+    this.insertAt(this.getLength() - 1, text);
+  }
+
+  update(mutation) {
+
+  }
+}
+CodeBlock.blotName = 'code-block';
+CodeBlock.tagName = 'PRE';
+
+
+Parchment.register(CodeBlock);
+
+export { CodeBlock as default };

src/formats/inline.js

@@ -25,6 +25,10 @@ class Bold extends Parchment.Inline { }
 Bold.blotName = 'bold';
 Bold.tagName = 'STRONG';
 
+class Code extends Parchment.Inline { }
+Code.blotName = 'code';
+Code.tagName = 'CODE';
+
 class Italic extends Parchment.Inline { }
 Italic.blotName = 'italic';
 Italic.tagName = 'EM';
@@ -37,10 +41,6 @@ class Underline extends Parchment.Inline { }
 Underline.blotName = 'underline';
 Underline.tagName = 'U';
 
-class InlineCode extends Parchment.Inline { }
-InlineCode.blotName = 'inline-code';
-InlineCode.tagName = 'CODE';
-
 
 class Link extends Parchment.Inline {
   constructor(value) {
@@ -81,12 +81,12 @@ Script.tagName = ['SUB', 'SUP'];
 
 
 Parchment.register(Bold);
+Parchment.register(Code);
 Parchment.register(Italic);
 Parchment.register(Strike);
 Parchment.register(Underline);
-Parchment.register(InlineCode);
 Parchment.register(Link);
 Parchment.register(Script);
 
 
-export { Bold, Italic, Strike, Underline, Link, InlineCode, Script };
+export { Bold, Italic, Strike, Underline, Link, Code, Script };

src/quill.js

@@ -12,6 +12,7 @@ import BlockBlot from './blots/block';
 import BreakBlot from './blots/break';
 import CursorBlot from './blots/cursor';
 
+import CodeBlockFormat from './formats/code-block';
 import HeaderFormat from './formats/header';
 import EquationFormat from './formats/equation';
 import ImageFormat from './formats/image';
@@ -344,7 +345,7 @@ Quill.themes = {};
 Quill.DEFAULTS = {
   formats: [
     'align', 'direction',
-    'bullet', 'header', 'list',
+    'bullet', 'code-block', 'header', 'list',
     'bold', 'code', 'italic', 'script', 'strike', 'underline',
     'link',
     'background', 'color', 'font', 'size',

src/selection.js

@@ -130,26 +130,18 @@ class Selection {
 
   getRange() {
     if (!this.checkFocus()) return null;
-    let convert = (node, offset) => {
-      // Does not handle custom parent blots with multiple non-blot children
-      let blot;
-      if (!(node instanceof Text)) {
-        if (offset < node.childNodes.length) {
-          node = node.childNodes[offset];
-          offset = 0;
-        } else {
-          blot = Parchment.findBlot(node, true);
-          return blot.offset(this.doc) + blot.getLength();
-        }
-      }
-      blot = Parchment.findBlot(node, true);
-      return blot.offset(this.doc) + offset;
-    }
     let nativeRange = this.getNativeRange();
     if (nativeRange == null) return null;
-    let start = convert(nativeRange.startContainer, nativeRange.startOffset);
-    let end = (nativeRange.collapsed) ? start : convert(nativeRange.endContainer, nativeRange.endOffset);
-    return new Range(Math.min(start, end), Math.max(start, end));
+    let positions = [[nativeRange.startContainer, nativeRange.startOffset]];
+    if (!nativeRange.collapsed) {
+      positions.push([nativeRange.endContainer, nativeRange.endContainer]);
+    }
+    let indexes = positions.map(function(position) {
+      let [container, offset] = position;
+      let blot = Parchment.findBlot(container, true);
+      return blot.findOffset(container) + offset;
+    });
+    return new Range(Math.min(...indexes), Math.max(...indexes));
   }
 
   onUpdate(range) { }
@@ -210,25 +202,18 @@ class Selection {
   }
 
   setRange(range) {
-    let convert = (index) => {
-      let pos = this.doc.findPath(index).pop();
-      if (pos.blot instanceof CursorBlot) {
-        return [pos.blot.textNode, pos.offset];
-      } else if (pos.blot instanceof Parchment.Embed) {
-        let node = pos.blot.domNode.parentNode;
-        return [node, [].indexOf.call(node.childNodes, pos.blot.domNode) + pos.offset];
-      } else {
-        return [pos.blot.domNode, pos.offset];
-      }
-    }
     if (range != null) {
-      let [startNode, startOffset] = convert(range.start);
-      if (range.isCollapsed()) {
-        this.setNativeRange(startNode, startOffset);
-      } else {
-        let [endNode, endOffset] = convert(range.end);
-        this.setNativeRange(startNode, startOffset, endNode, endOffset);
-      }
+      let indexes = range.isCollapsed() ? [range.start] : [range.start, range.end];
+      let args = [];
+      indexes.map((index) => {
+        let [node, offset] = this.doc.findNode(index);
+        if (node instanceof Text) {
+          args.push(node, offset);
+        } else {
+          args.push(node.parentNode, [].indexOf.call(node.parentNode.childNodes, node) + offset);
+        }
+      });
+      this.setNativeRange(...args);
     } else {
       this.setNativeRange(null);
     }