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

Author: anlambert

src/highlightjs-line-numbers.js

@@ -5,6 +5,8 @@
 
     var TABLE_NAME = 'hljs-ln',
         LINE_NAME = 'hljs-ln-line',
+        NUMBERS_CONTAINER_NAME = 'hljs-ln-numbers-container',
+        CODE_CONTAINER_NAME = 'hljs-ln-code-container',
         CODE_BLOCK_NAME = 'hljs-ln-code',
         NUMBERS_BLOCK_NAME = 'hljs-ln-numbers',
         NUMBER_LINE_NAME = 'hljs-ln-n',
@@ -25,8 +27,8 @@
         var css = d.createElement('style');
         css.type = 'text/css';
         css.innerHTML = format(
-            '.{0}{border-collapse:collapse}' +
-            '.{0} td{padding:0}' +
+            '.{0} table{float:left}' +
+            '.{0} table td{padding:0}' +
             '.{1}:before{content:attr({2})}',
         [
             TABLE_NAME,
@@ -65,6 +67,11 @@
 
         async(function () {
             element.innerHTML = lineNumbersInternal(element, options);
+            // adjust left margin of code div as line numbers is a float left dom element
+            var codeMargin = element.querySelector('.' + NUMBERS_CONTAINER_NAME).offsetWidth;
+            var codeContainerStyle = 'margin-left:' + codeMargin + 'px';
+            var codeContainer = element.querySelector('.' + CODE_CONTAINER_NAME);
+            codeContainer.style.cssText = codeContainerStyle;
         });
     }
 
@@ -101,30 +108,57 @@
         }
 
         if (lines.length > firstLineIndex) {
-            var html = '';
+            // Previous implementation was using a single table element
+            // to render the line numbers and the lines of code.
+            // But to overcome an annoying copy/paste behavior when using Firefox or Edge
+            // (see https://github.com/wcoder/highlightjs-line-numbers.js/issues/51)
+            // the following workaround is used while obtaining the exact same rendering
+            // as before:
+            //    1. render the lines number in a table with single column
+            //    2. render the lines of code in a div
+            //    3. wrap these in a div and make the table float left
+            //    4. adjust the left margin of the code div once inserted in the dom
+            var htmlLinesNumber = '';
+            var htmlCode = '';
 
             for (var i = 0, l = lines.length; i < l; i++) {
-                html += format(
-                    '<tr>' +
-                        '<td class="{0}">' +
-                            '<div class="{1} {2}" {3}="{5}"></div>' +
-                        '</td>' +
-                        '<td class="{4}">' +
-                            '<div class="{1}">{6}</div>' +
+                htmlLinesNumber += format(
+                    '<tr class="{0} {1}" {3}="{4}">' +
+                        '<td>' +
+                            '<div class="{2}" {3}="{4}"></div>' +
                         '</td>' +
                     '</tr>',
                 [
-                    NUMBERS_BLOCK_NAME,
                     LINE_NAME,
+                    NUMBERS_BLOCK_NAME,
                     NUMBER_LINE_NAME,
                     DATA_ATTR_NAME,
+                    i + 1
+                ]);
+
+                htmlCode += format(
+                    '<div class="{0} {1}" {2}="{3}">{4}</div>',
+                [
+                    LINE_NAME,
                     CODE_BLOCK_NAME,
+                    DATA_ATTR_NAME,
                     i + 1,
                     lines[i].length > 0 ? lines[i] : ' '
                 ]);
             }
 
-            return format('<table class="{0}">{1}</table>', [ TABLE_NAME, html ]);
+            return format(
+              '<div class="{0}">' +
+                  '<table class="{1}">{2}</table>' +
+                  '<div class="{3}">{4}</div>' +
+              '</div>',
+            [
+                TABLE_NAME,
+                NUMBERS_CONTAINER_NAME,
+                htmlLinesNumber,
+                CODE_CONTAINER_NAME,
+                htmlCode
+            ]);
         }
 
         return inputHtml;