RubyGems - squire-rails - Versions diffs - 0.0.3 → 0.0.4 - Mend

squire-rails 0.0.3 → 0.0.4

Files changed (6) hide show

checksums.yaml +4 -4
data/lib/generators/squire_rails/templates/Squire-UI.html +3 -3
data/lib/generators/squire_rails/templates/Squire-UI.js +21 -10
data/lib/squire-rails/version.rb +1 -1
data/vendor/assets/javascripts/squire/squire-raw.js +174 -94
metadata +3 -17

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 398337563890132e5830d98979f048918d241a65
-  data.tar.gz: 369080a22ada52156865c0761f168479f4a0ff49
+  metadata.gz: 71603b368ec71fe5cf214adf46464eef336023dd
+  data.tar.gz: 6b4dbbce99f7fbae8a142e1d67ae121028d04265
 SHA512:
-  metadata.gz: 8727b1dcdaa35bb14f3ba5e926254a9d36a55aefcf6932f622a40fde33687df45865669926d93ed3c75b8a45283430710213c65f848e96669fb98ffed3a6ddfb
-  data.tar.gz: 12ecb53d2bdeff9eb00fa9b818c9ab166de6702ae954f95e75a6e92c92080d2805cb415bf718b8f3b6567edbb3f05fc12f18c09712267d4cb5c75637e763e7bb
+  metadata.gz: 10e4d50c2b1eb393e8edff64c94e9ed1b12a4a7551b1b684a3b0027253a6d2a83c341cd501ab3df05f8cde4c08143f3e754fea7ef84c180c3c34dcd1b4ae0ece
+  data.tar.gz: 98162dbf3641b1a433f249c14d1548deb8eb1a8ee652b05f6730db7534c6b9cb10440acbef87e7c8fd0df30bdb7e31e3518f16de330fb1b88596362ac45d6182

data/lib/generators/squire_rails/templates/Squire-UI.html CHANGED Viewed

@@ -50,18 +50,18 @@
             <option data-fonts="verdana">Verdana</option>
         </select><br>
-        <div class="btn submitFont">Apply</div>
+        <div class="btn btn-black submitFont">Apply</div>
     </div>
     <div id="drop-link">
         <strong>Insert Link</strong>
         <i class="fa fa-chevron-up squire-quit"></i>
         <input placeholder="Link URL" type="text" id="url" />
-        <div class="btn submitLink">Insert</div>
+        <div class="btn btn-black submitLink">Insert</div>
     </div>
     <div id="drop-image">
         <strong>Insert Image</strong>
         <i class="fa fa-chevron-up squire-quit"></i>
         <input placeholder="Image URL" type="text" id="imageUrl" />
-        <div class="btn sumbitImageURL">Insert</div>
+        <div class="btn btn-black sumbitImageURL">Insert</div>
     </div>
 </div>

data/lib/generators/squire_rails/templates/Squire-UI.js CHANGED Viewed

@@ -42,7 +42,7 @@ $(document).ready(function() {
       });
       this.linkDrop.on('open', function () {
-        $('.squire-quit').click(function () {
+        $('.quit').click(function () {
           $(this).parent().parent().removeClass('drop-open');
         });
@@ -62,7 +62,7 @@ $(document).ready(function() {
       });
       this.imageDrop.on('open', function () {
-        $('.squire-quit').unbind().click(function () {
+        $('.quit').unbind().click(function () {
           $(this).parent().parent().removeClass('drop-open');
         });
@@ -85,7 +85,7 @@ $(document).ready(function() {
       });
       this.fontDrop.on('open', function () {
-        $('.squire-quit').click(function () {
+        $('.quit').click(function () {
           $(this).parent().parent().removeClass('drop-open');
         });
@@ -153,19 +153,30 @@ $(document).ready(function() {
       });
     });
+    iframe.addEventListener('load', function() {
+      // Make sure we're in standards mode.
+      var doc = iframe.contentDocument;
+      if ( doc.compatMode !== 'CSS1Compat' ) {
+          doc.open();
+          doc.write( '<!DOCTYPE html><title></title>' );
+          doc.close();
+      }
+      // doc.close() can cause a re-entrant load event in some browsers,
+      // such as IE9.
+      if ( iframe.contentWindow.editor ) {
+          return;
+      }
+      iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
+      iframe.contentWindow.document.head.appendChild(style);
+    });
     $(container).append(div);
     $(container).append(iframe);
     var style = document.createElement('style');
     style.innerHTML = 'blockquote { border-left: 3px green solid; padding-left: 5px; }';
-    iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
-    iframe.addEventListener('load', function() {
-      iframe.contentWindow.editor = new Squire(iframe.contentWindow.document);
-    });
-    iframe.contentWindow.document.head.appendChild(style);
     return iframe.contentWindow.editor;
   };
 });

data/lib/squire-rails/version.rb CHANGED Viewed

@@ -1,3 +1,3 @@
 module SquireRails
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
 end

data/vendor/assets/javascripts/squire/squire-raw.js CHANGED Viewed

@@ -291,12 +291,14 @@ function fixCursor ( node ) {
     // cursor to appear.
     var doc = node.ownerDocument,
         root = node,
-        fixer, child,
-        l, instance;
+        fixer, child, instance;
     if ( node.nodeName === 'BODY' ) {
         if ( !( child = node.firstChild ) || child.nodeName === 'BR' ) {
-            fixer = doc.createElement( 'DIV' );
+            instance = getSquireInstance( doc );
+            fixer = instance ?
+                instance.createDefaultBlock() :
+                createElement( doc, 'DIV' );
             if ( child ) {
                 node.replaceChild( fixer, child );
             }
@@ -318,14 +320,7 @@ function fixCursor ( node ) {
         if ( !child ) {
             if ( cantFocusEmptyTextNodes ) {
                 fixer = doc.createTextNode( ZWS );
-                // Find the relevant Squire instance and notify
-                l = instances.length;
-                while ( l-- ) {
-                    instance = instances[l];
-                    if ( instance._doc === doc ) {
-                        instance._didAddZWS();
-                    }
-                }
+                getSquireInstance( doc )._didAddZWS();
             } else {
                 fixer = doc.createTextNode( '' );
             }
@@ -351,7 +346,7 @@ function fixCursor ( node ) {
             }
         }
         else if ( !node.querySelector( 'BR' ) ) {
-            fixer = doc.createElement( 'BR' );
+            fixer = createElement( doc, 'BR' );
             while ( ( child = node.lastElementChild ) && !isInline( child ) ) {
                 node = child;
             }
@@ -426,8 +421,8 @@ function split ( node, offset, stopNode ) {
             offset = next;
         }
-        // Maintain li numbering
-        if ( node.nodeName === 'OL' ) {
+        // Maintain li numbering if inside a quote.
+        if ( node.nodeName === 'OL' && getNearest( node, 'BLOCKQUOTE' ) ) {
             clone.start = ( +node.start || 1 ) + node.childNodes.length - 1;
         }
@@ -566,7 +561,7 @@ function mergeContainers ( node ) {
     if ( prev && areAlike( prev, node ) ) {
         if ( !isContainer( prev ) ) {
             if ( isListItem ) {
-                block = doc.createElement( 'DIV' );
+                block = createElement( doc, 'DIV' );
                 block.appendChild( empty( prev ) );
                 prev.appendChild( block );
             } else {
@@ -583,7 +578,7 @@ function mergeContainers ( node ) {
             mergeContainers( first );
         }
     } else if ( isListItem ) {
-        prev = doc.createElement( 'DIV' );
+        prev = createElement( doc, 'DIV' );
         node.insertBefore( prev, first );
         fixCursor( prev );
     }
@@ -616,43 +611,6 @@ var getNodeAfter = function ( node, offset ) {
 // ---
-var forEachTextNodeInRange = function ( range, fn ) {
-    range = range.cloneRange();
-    moveRangeBoundariesDownTree( range );
-    var startContainer = range.startContainer,
-        endContainer = range.endContainer,
-        root = range.commonAncestorContainer,
-        walker = new TreeWalker(
-            root, SHOW_TEXT, function (/* node */) {
-                return true;
-        }, false ),
-        textnode = walker.currentNode = startContainer;
-    while ( !fn( textnode, range ) &&
-        textnode !== endContainer &&
-        ( textnode = walker.nextNode() ) ) {}
-};
-var getTextContentInRange = function ( range ) {
-    var textContent = '';
-    forEachTextNodeInRange( range, function ( textnode, range ) {
-        var value = textnode.data;
-        if ( value && ( /\S/.test( value ) ) ) {
-            if ( textnode === range.endContainer ) {
-                value = value.slice( 0, range.endOffset );
-            }
-            if ( textnode === range.startContainer ) {
-                value = value.slice( range.startOffset );
-            }
-            textContent += value;
-        }
-    });
-    return textContent;
-};
-// ---
 var insertNodeInRange = function ( range, node ) {
     // Insert at start.
     var startContainer = range.startContainer,
@@ -810,7 +768,7 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
         deleteContentsOfRange( range );
     }
-    // Move range down into text ndoes
+    // Move range down into text nodes
     moveRangeBoundariesDownTree( range );
     // If inline, just insert at the current position.
@@ -818,11 +776,14 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
         insertNodeInRange( range, frag );
         range.collapse( false );
     }
-    // Otherwise, split up to body, insert inline before and after split
-    // and insert block in between split, then merge containers.
+    // Otherwise, split up to blockquote (if a parent) or body, insert inline
+    // before and after split and insert block in between split, then merge
+    // containers.
     else {
-        var nodeAfterSplit = split( range.startContainer, range.startOffset,
-                range.startContainer.ownerDocument.body ),
+        var splitPoint = range.startContainer,
+            nodeAfterSplit = split( splitPoint, range.startOffset,
+                getNearest( splitPoint.parentNode, 'BLOCKQUOTE' ) ||
+                splitPoint.ownerDocument.body ),
             nodeBeforeSplit = nodeAfterSplit.previousSibling,
             startContainer = nodeBeforeSplit,
             startOffset = startContainer.childNodes.length,
@@ -1097,6 +1058,18 @@ var expandRangeToBlockBoundaries = function ( range ) {
 var instances = [];
+function getSquireInstance ( doc ) {
+    var l = instances.length,
+        instance;
+    while ( l-- ) {
+        instance = instances[l];
+        if ( instance._doc === doc ) {
+            return instance;
+        }
+    }
+    return null;
+}
 function Squire ( doc ) {
     var win = doc.defaultView;
     var body = doc.body;
@@ -1353,12 +1326,7 @@ proto.setSelection = function ( range ) {
         if ( isIOS ) {
             this._win.focus();
         }
-        var sel;
-        if(this._sel === null){
-            sel  = this._win.getSelection();
-        }else{
-            sel = this._sel;
-        }
+        var sel = this._sel;
         sel.removeAllRanges();
         sel.addRange( range );
     }
@@ -1390,7 +1358,47 @@ proto.getSelection = function () {
 };
 proto.getSelectedText = function () {
-    return getTextContentInRange( this.getSelection() );
+    var range = this.getSelection(),
+        walker = new TreeWalker(
+            range.commonAncestorContainer,
+            SHOW_TEXT|SHOW_ELEMENT,
+            function ( node ) {
+                return isNodeContainedInRange( range, node, true );
+            }
+        ),
+        startContainer = range.startContainer,
+        endContainer = range.endContainer,
+        node = walker.currentNode = startContainer,
+        textContent = '',
+        addedTextInBlock = false,
+        value;
+    if ( !walker.filter( node ) ) {
+        node = walker.nextNode();
+    }
+    while ( node ) {
+        if ( node.nodeType === TEXT_NODE ) {
+            value = node.data;
+            if ( value && ( /\S/.test( value ) ) ) {
+                if ( node === endContainer ) {
+                    value = value.slice( 0, range.endOffset );
+                }
+                if ( node === startContainer ) {
+                    value = value.slice( range.startOffset );
+                }
+                textContent += value;
+                addedTextInBlock = true;
+            }
+        } else if ( node.nodeName === 'BR' ||
+                addedTextInBlock && !isInline( node ) ) {
+            textContent += '\n';
+            addedTextInBlock = false;
+        }
+        node = walker.nextNode();
+    }
+    return textContent;
 };
 proto.getPath = function () {
@@ -1405,10 +1413,19 @@ var removeZWS = function ( root ) {
     var walker = new TreeWalker( root, SHOW_TEXT, function () {
             return true;
         }, false ),
-        node, index;
+        parent, node, index;
     while ( node = walker.nextNode() ) {
         while ( ( index = node.data.indexOf( ZWS ) ) > -1 ) {
-            node.deleteData( index, 1 );
+            if ( node.length === 1 ) {
+                do {
+                    parent = node.parentNode;
+                    parent.removeChild( node );
+                    node = parent;
+                } while ( isInline( node ) && !getLength( node ) );
+                break;
+            } else {
+                node.deleteData( index, 1 );
+            }
         }
     }
 };
@@ -1698,7 +1715,7 @@ proto._addFormat = function ( tag, attributes, range ) {
     // If the range is collapsed we simply insert the node by wrapping
     // it round the range and focus it.
     var el, walker, startContainer, endContainer, startOffset, endOffset,
-        textNode, needsFormat;
+        node, needsFormat;
     if ( range.collapsed ) {
         el = fixCursor( this.createElement( tag, attributes ) );
@@ -1710,16 +1727,21 @@ proto._addFormat = function ( tag, attributes, range ) {
     // partially selected nodes) and if they're not already formatted
     // correctly we wrap them in the appropriate tag.
     else {
-        // We don't want to apply formatting twice so we check each text
-        // node to see if it has an ancestor with the formatting already.
         // Create an iterator to walk over all the text nodes under this
         // ancestor which are in the range and not already formatted
         // correctly.
+        //
+        // In Blink/WebKit, empty blocks may have no text nodes, just a <br>.
+        // Therefore we wrap this in the tag as well, as this will then cause it
+        // to apply when the user types something in the block, which is
+        // presumably what was intended.
         walker = new TreeWalker(
             range.commonAncestorContainer,
-            SHOW_TEXT,
+            SHOW_TEXT|SHOW_ELEMENT,
             function ( node ) {
-                return isNodeContainedInRange( range, node, true );
+                return ( node.nodeType === TEXT_NODE ||
+                                                    node.nodeName === 'BR' ) &&
+                    isNodeContainedInRange( range, node, true );
             },
             false
         );
@@ -1731,41 +1753,53 @@ proto._addFormat = function ( tag, attributes, range ) {
         endContainer = range.endContainer;
         endOffset = range.endOffset;
-        // Make sure we start inside a text node.
+        // Make sure we start with a valid node.
         walker.currentNode = startContainer;
-        if ( startContainer.nodeType !== TEXT_NODE ) {
+        if ( !walker.filter( startContainer ) ) {
             startContainer = walker.nextNode();
             startOffset = 0;
         }
+        // If there are no interesting nodes in the selection, abort
+        if ( !startContainer ) {
+            return range;
+        }
         do {
-            textNode = walker.currentNode;
-            needsFormat = !getNearest( textNode, tag, attributes );
+            node = walker.currentNode;
+            needsFormat = !getNearest( node, tag, attributes );
             if ( needsFormat ) {
-                if ( textNode === endContainer &&
-                        textNode.length > endOffset ) {
-                    textNode.splitText( endOffset );
+                // <br> can never be a container node, so must have a text node
+                // if node == (end|start)Container
+                if ( node === endContainer && node.length > endOffset ) {
+                    node.splitText( endOffset );
                 }
-                if ( textNode === startContainer && startOffset ) {
-                    textNode = textNode.splitText( startOffset );
+                if ( node === startContainer && startOffset ) {
+                    node = node.splitText( startOffset );
                     if ( endContainer === startContainer ) {
-                        endContainer = textNode;
+                        endContainer = node;
                         endOffset -= startOffset;
                     }
-                    startContainer = textNode;
+                    startContainer = node;
                     startOffset = 0;
                 }
                 el = this.createElement( tag, attributes );
-                replaceWith( textNode, el );
-                el.appendChild( textNode );
+                replaceWith( node, el );
+                el.appendChild( node );
             }
         } while ( walker.nextNode() );
-        // Make sure we finish inside a text node. Otherwise offset may have
-        // changed.
+        // If we don't finish inside a text node, offset may have changed.
         if ( endContainer.nodeType !== TEXT_NODE ) {
-            endContainer = textNode;
-            endOffset = textNode.length;
+            if ( node.nodeType === TEXT_NODE ) {
+                endContainer = node;
+                endOffset = node.length;
+            } else {
+                // If <br>, we must have just wrapped it, so it must have only
+                // one child
+                endContainer = node.parentNode;
+                endOffset = 1;
+            }
         }
         // Now set the selection to as it was before
@@ -2218,7 +2252,7 @@ var addLinks = function ( frag ) {
     }
 };
-var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|UL)$/;
+var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|UL)$/;
 var fontSizes = {
     1: 10,
@@ -2555,7 +2589,7 @@ var cleanupBRs = function ( root ) {
 proto._ensureBottomLine = function () {
     var body = this._body,
-        last = body.lastChild;
+        last = body.lastElementChild;
     if ( !last || last.nodeName !== this.defaultBlockTag || !isBlock( last ) ) {
         body.appendChild( this.createDefaultBlock() );
     }
@@ -2857,10 +2891,12 @@ var keyHandlers = {
             // Don't continue links over a block break; unlikely to be the
             // desired outcome.
             if ( nodeAfterSplit.nodeName === 'A' &&
-                    !nodeAfterSplit.textContent ) {
-                replaceWith( nodeAfterSplit, empty( nodeAfterSplit ) );
+                    ( !nodeAfterSplit.textContent ||
+                        nodeAfterSplit.textContent === ZWS ) ) {
+                child = self._doc.createTextNode( '' );
+                replaceWith( nodeAfterSplit, child );
                 nodeAfterSplit = child;
-                continue;
+                break;
             }
             while ( child && child.nodeType === TEXT_NODE && !child.data ) {
@@ -3283,6 +3319,50 @@ proto.insertImage = function ( src ) {
     return img;
 };
+// Insert HTML at the cursor location. If the selection is not collapsed
+// insertTreeFragmentIntoRange will delete the selection so that it is replaced
+// by the html being inserted.
+proto.insertHTML = function ( html ) {
+    var range = this.getSelection(),
+        frag = this._doc.createDocumentFragment(),
+        div = this.createElement( 'DIV' );
+    // Parse HTML into DOM tree
+    div.innerHTML = html;
+    frag.appendChild( empty( div ) );
+    // Record undo checkpoint
+    this._recordUndoState( range );
+    this._getRangeAndRemoveBookmark( range );
+    try {
+        frag.normalize();
+        addLinks( frag );
+        cleanTree( frag, true );
+        cleanupBRs( frag );
+        removeEmptyInlines( frag );
+        fixContainer( frag );
+        var node = frag;
+        while ( node = getNextBlock( node ) ) {
+            fixCursor( node );
+        }
+        insertTreeFragmentIntoRange( range, frag );
+        if ( !canObserveMutations ) {
+            this._docWasChanged();
+        }
+        range.collapse( false );
+        this._ensureBottomLine();
+        this.setSelection( range );
+        this._updatePath( range, true );
+    } catch ( error ) {
+        this.didError( error );
+    }
+    return this;
+};
 // --- Formatting ---
 var command = function ( method, arg, arg2 ) {

metadata CHANGED Viewed

@@ -1,29 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: squire-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - candle
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2015-04-02 00:00:00.000000000 Z
-dependencies:
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ~>
-      - !ruby/object:Gem::Version
-        version: 4.0.0
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ~>
-      - !ruby/object:Gem::Version
-        version: 4.0.0
+date: 2015-04-20 00:00:00.000000000 Z
+dependencies: []
 description: Squire Editor for rails
 email:
 - progted@gmail.com