Merge pull request danielearwicker#45 from creately/break-hyperlinks

Break hyperlinks at the start and end

package.json

@@ -2,7 +2,7 @@
   "name": "@creately/carota",
   "author": "Daniel Earwicker ([email protected])",
   "description": "Simple, flexible rich text rendering/editing on HTML Canvas",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/danielearwicker/carota.git"

src/doc.js

@@ -635,6 +635,42 @@ var prototype = node.derive({
         return this.range( currentCaret - left + 1, currentCaret + right - 1 );
     },
 
+    /**
+     * This function applies the previouse value to the newly entered char.
+     * replacing the link and link related styles
+     */
+    breakHyperlink: function () {
+        var currentCaret = this.selection.start;
+        var newCharRange = this.range( currentCaret - 1, currentCaret );
+        var prevFormat = this.getPreviousFormat([ 'link' ], currentCaret - 1 );
+        newCharRange.setFormatting( 'link', undefined, true );
+        newCharRange.setFormatting( 'color', prevFormat.color, true );
+        newCharRange.setFormatting( 'underline', prevFormat.underline, true );
+    },
+
+    /**
+     * This function returns true if the caret is at the begining or end of a link
+     */
+    isCaretAtHyperlinkEdge: function () {
+        if ( this.selection.start !== this.selection.end && this.frame.length < 1 ) {
+            return false
+        }
+        if ( this.selection.start === 0 && this.range( 0, 0 ).getFormatting().link ) {
+            return true;
+        }
+        var last = this.frame.length - 1;
+        if ( this.selection.start === last && this.range( last, last ).getFormatting().link ) {
+            return true;
+        }
+        var caret = this.selection.start;
+        var leftFormat = this.range( caret, caret ).getFormatting();
+        var rightFormat = this.range( caret, caret + 1 ).getFormatting();
+        if ( leftFormat.link !== rightFormat.link ) {
+            return true;
+        }
+        return false;
+    },
+
     autoLink: function () {
         var links =this.words.filter( w => isUrlValid( w.text.plainText ));
         links.forEach( link =>  {

src/editor.js

@@ -358,13 +358,17 @@ exports.create = function(element, defaultFormatting, drawtext = true ) {
             if (newText === plainClipboard) {
                 newText = richClipboard;
             }
+            var isCaretAtLinkEdge =  doc.isCaretAtHyperlinkEdge();
             doc.insert(newText);
             if ( newText === ' ' || newText === '\n' ) {
                 doc.autolinkOnKeyup();
             }
             if ( newText.length >= 'http://x.xx'.length ) {
                 doc.autoLink();
             }
+            if ( isCaretAtLinkEdge ) {
+                doc.breakHyperlink();
+            }
         }
     });