Add makeCodeSnippet & removeCodeSnippet methods + documentation.

Adds the ability to wrap text as code. The entire selection is wrapped in a <pre> tag. Each line is a <code> tag inside a <div> tag. Lines are located at the path BODY > PRE > DIV > CODE.

Demo.html

@@ -63,6 +63,10 @@
   <span id="makeLink" class="prompt">Link</span>
   </p>
   <p>
+    
+    <span id="makeCodeSnippet">Make Code Snippet</span>
+    <span id="removeCodeSnippet">Remove Code Snippet</span>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <span id="increaseQuoteLevel">Quote</span>
     <span id="decreaseQuoteLevel">Dequote</span>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Makefile

@@ -2,7 +2,7 @@
 
 all: install build
 
-intall:
+install:
 	npm install
 
 clean:

README.md

@@ -352,3 +352,16 @@ Returns self (the Squire instance).
 Decreases by 1 the nesting level of any at-least-partially selected blocks which are part of a list.
 
 Returns self (the Squire instance).
+
+### makeCodeSnippet ###
+
+Makes the currently selected text a code snippet. The entire selection is wrapped in a  `<pre>` tag. Each line is wrapped in a  `<code>` tag within a  `<div>` tag. If no text is selected, the input mode is set to a code snippet.
+Lines are located at the path `PRE > DIV > CODE`.
+
+Returns self (the Squire instance).
+
+### removeCodeSnippet ###
+
+Removes any `<pre>` or `<code>` tags, that are currently (at least partially) selected.
+
+Returns self (the Squire instance).

build/squire-raw.js

@@ -3417,6 +3417,44 @@ proto.setTextDirection = function ( direction ) {
     return this.focus();
 };
 
+proto.makeCodeSnippet = function () {
+    this.changeFormat({
+        tag: 'CODE'
+    }, null, this.getSelection(), true );
+    
+    this.modifyBlocks(function ( frag ) {
+        if (frag.querySelectorAll( 'pre' ).length === 0) {
+            return this.createElement( 'PRE', [
+                frag
+            ]);
+        } else {
+            // Return original fragment, prevent adding more than one pre tag.
+            return frag;
+        }
+    });
+    
+    return this.focus();
+};
+
+proto.removeCodeSnippet = function () {
+    this.changeFormat( null, {
+        tag: 'CODE'
+    }, this.getSelection(), true );
+
+    this.modifyBlocks(function ( frag ) {
+        var pres = frag.querySelectorAll( 'pre' );
+        Array.prototype.filter.call( pres, function ( el ) {
+            return !getNearest( el.parentNode, 'PRE' );
+        }).forEach( function ( el ) {
+            replaceWith( el, empty( el ) );
+        });
+        
+        return frag;
+    });
+
+    return this.focus();
+};
+
 proto.increaseQuoteLevel = command( 'modifyBlocks', increaseBlockQuoteLevel );
 proto.decreaseQuoteLevel = command( 'modifyBlocks', decreaseBlockQuoteLevel );
 

source/Editor.js

@@ -2339,6 +2339,44 @@ proto.setTextDirection = function ( direction ) {
     return this.focus();
 };
 
+proto.makeCodeSnippet = function () {
+    this.changeFormat({
+        tag: 'CODE'
+    }, null, this.getSelection(), true );
+    
+    this.modifyBlocks(function ( frag ) {
+        if (frag.querySelectorAll( 'pre' ).length === 0) {
+            return this.createElement( 'PRE', [
+                frag
+            ]);
+        } else {
+            // Return original fragment, prevent adding more than one pre tag.
+            return frag;
+        }
+    });
+    
+    return this.focus();
+};
+
+proto.removeCodeSnippet = function () {
+    this.changeFormat( null, {
+        tag: 'CODE'
+    }, this.getSelection(), true );
+
+    this.modifyBlocks(function ( frag ) {
+        var pres = frag.querySelectorAll( 'pre' );
+        Array.prototype.filter.call( pres, function ( el ) {
+            return !getNearest( el.parentNode, 'PRE' );
+        }).forEach( function ( el ) {
+            replaceWith( el, empty( el ) );
+        });
+        
+        return frag;
+    });
+
+    return this.focus();
+};
+
 proto.increaseQuoteLevel = command( 'modifyBlocks', increaseBlockQuoteLevel );
 proto.decreaseQuoteLevel = command( 'modifyBlocks', decreaseBlockQuoteLevel );