Fix copy/paste behavior when using Firefox or Edge (#51)

Author: anlambert

src/highlightjs-line-numbers.js

@@ -21,6 +21,113 @@
         w.console.error('highlight.js not detected!');
     }
 
+    function isHljsLnCodeDescendant(domElt) {
+        var curElt = domElt;
+        while (curElt) {
+            if (curElt.className && curElt.className.indexOf('hljs-ln-code') !== -1) {
+                return true;
+            }
+            curElt = curElt.parentNode;
+        }
+        return false;
+    }
+
+    function getHljsLnTable(hljsLnDomElt) {
+        var curElt = hljsLnDomElt;
+        while (curElt.nodeName !== 'TABLE') {
+            curElt = curElt.parentNode;
+        }
+        return curElt;
+    }
+
+    // Function to workaround a copy issue with Microsoft Edge.
+    // Due to hljs-ln wrapping the lines of code inside a <table> element,
+    // itself wrapped inside a <pre> element, window.getSelection().toString()
+    // does not contain any line breaks. So we need to get them back using the
+    // rendered code in the DOM as reference.
+    function edgeGetSelectedCodeLines(selection) {
+        // current selected text without line breaks
+        var selectionText = selection.toString();
+
+        // get the <td> element wrapping the first line of selected code
+        var tdAnchor = selection.anchorNode;
+        while (tdAnchor.nodeName !== 'TD') {
+            tdAnchor = tdAnchor.parentNode;
+        }
+
+        // get the <td> element wrapping the last line of selected code
+        var tdFocus = selection.focusNode;
+        while (tdFocus.nodeName !== 'TD') {
+            tdFocus = tdFocus.parentNode;
+        }
+
+        // extract line numbers
+        var firstLineNumber = parseInt(tdAnchor.dataset.lineNumber);
+        var lastLineNumber = parseInt(tdFocus.dataset.lineNumber);
+
+        // multi-lines copied case
+        if (firstLineNumber != lastLineNumber) {
+
+            var firstLineText = tdAnchor.textContent;
+            var lastLineText = tdFocus.textContent;
+
+            // if the selection was made backward, swap values
+            if (firstLineNumber > lastLineNumber) {
+                var tmp = firstLineNumber;
+                firstLineNumber = lastLineNumber;
+                lastLineNumber = tmp;
+                tmp = firstLineText;
+                firstLineText = lastLineText;
+                lastLineText = tmp;
+            }
+
+            // discard not copied characters in first line
+            while (selectionText.indexOf(firstLineText) !== 0) {
+                firstLineText = firstLineText.slice(1);
+            }
+
+            // discard not copied characters in last line
+            while (selectionText.lastIndexOf(lastLineText) === -1) {
+                lastLineText = lastLineText.slice(0, -1);
+            }
+
+            // reconstruct and return the real copied text
+            var selectedText = firstLineText;
+            var hljsLnTable = getHljsLnTable(tdAnchor);
+            for (var i = firstLineNumber + 1 ; i < lastLineNumber ; ++i) {
+                var codeLineSel = format('.{0}[{1}="{2}"]', [CODE_BLOCK_NAME, DATA_ATTR_NAME, i]);
+                var codeLineElt = hljsLnTable.querySelector(codeLineSel);
+                selectedText += '\n' + codeLineElt.textContent;
+            }
+            selectedText += '\n' + lastLineText;
+            return selectedText;
+        // single copied line case
+        } else {
+            return selectionText;
+        }
+    }
+
+    // ensure consistent code copy/paste behavior across all browsers
+    // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51)
+    document.addEventListener('copy', function(e) {
+        // get current selection
+        var selection = window.getSelection();
+        // override behavior when one wants to copy line of codes
+        if (isHljsLnCodeDescendant(selection.anchorNode)) {
+            var selectionText;
+            // workaround an issue with Microsoft Edge as copied line breaks
+            // are removed otherwise from the selection string
+            if (window.navigator.userAgent.indexOf("Edge") !== -1) {
+                selectionText = edgeGetSelectedCodeLines(selection);
+            } else {
+                // other browsers can directly use the selection string
+                selectionText = selection.toString();
+            }
+            e.clipboardData.setData('text/plain', selectionText);
+            e.preventDefault();
+        }
+    });
+
     function addStyles () {
         var css = d.createElement('style');
         css.type = 'text/css';
@@ -106,16 +213,16 @@
             for (var i = 0, l = lines.length; i < l; i++) {
                 html += format(
                     '<tr>' +
-                        '<td class="{0}">' +
-                            '<div class="{1} {2}" {3}="{5}"></div>' +
+                        '<td class="{0} {1}" {3}="{5}">' +
+                            '<div class="{2}" {3}="{5}"></div>' +
                         '</td>' +
-                        '<td class="{4}">' +
-                            '<div class="{1}">{6}</div>' +
+                        '<td class="{0} {4}" {3}="{5}">' +
+                            '{6}' +
                         '</td>' +
                     '</tr>',
                 [
-                    NUMBERS_BLOCK_NAME,
                     LINE_NAME,
+                    NUMBERS_BLOCK_NAME,
                     NUMBER_LINE_NAME,
                     DATA_ATTR_NAME,
                     CODE_BLOCK_NAME,