element,
+ // itself wrapped inside a 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 | element wrapping the first line of selected code
+ var tdAnchor = selection.anchorNode;
+ while (tdAnchor.nodeName !== 'TD') {
+ tdAnchor = tdAnchor.parentNode;
+ }
+
+ // get the | 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';
css.innerHTML = format(
- '.{0} table{float:left; border-collapse:collapse}' +
- '.{0} table td{padding:0}' +
- '.{1}::before{content:attr({2})}' +
- '.{3}::before{content: "\\200B"}', // force display of empty lines of code
+ '.{0}{border-collapse:collapse}' +
+ '.{0} td{padding:0}' +
+ '.{1}:before{content:attr({2})}',
[
TABLE_NAME,
NUMBER_LINE_NAME,
- DATA_ATTR_NAME,
- CODE_BLOCK_NAME
+ DATA_ATTR_NAME
]);
d.getElementsByTagName('head')[0].appendChild(css);
}
@@ -66,41 +167,11 @@
}
}
- function adjustLineNumbersHeights(element) {
- var lnNumbers = element.querySelectorAll('.' + NUMBERS_BLOCK_NAME);
- var lnCode = element.querySelectorAll('.' + CODE_BLOCK_NAME);
-
- for (var i = 0 ; i < lnNumbers.length; ++i) {
- lnNumbers[i].style.height = lnCode[i].offsetHeight + 'px';
- }
- }
-
function lineNumbersBlock (element, options) {
if (typeof element !== 'object') return;
+
async(function () {
element.innerHTML = lineNumbersInternal(element, options);
- // adjust left margin of code div as line numbers is a float left dom element
- var lineNumbersContainer = element.querySelector('.' + NUMBERS_CONTAINER_NAME);
- if (lineNumbersContainer) {
- var codeMargin = lineNumbersContainer.offsetWidth;
- var codeContainerStyle = 'margin-left:' + codeMargin + 'px';
- var codeContainer = element.querySelector('.' + CODE_CONTAINER_NAME);
- codeContainer.style.cssText = codeContainerStyle;
-
- // adjust each line number cell height to the one of the div containing
- // the wrapped line of code and set a handler to execute this
- // operation when the browser window gets resized.
- adjustLineNumbersHeights(element);
- if (!resizeHandlerSet) {
- window.addEventListener('resize', function() {
- var hljsLnElts = document.querySelectorAll('.' + TABLE_NAME);
- for (var i = 0 ; i < hljsLnElts.length; ++i) {
- adjustLineNumbersHeights(hljsLnElts[i]);
- }
- });
- resizeHandlerSet = true;
- }
- }
});
}
@@ -137,24 +208,16 @@
}
if (lines.length > firstLineIndex) {
- // 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 = '';
+ var html = '';
for (var i = 0, l = lines.length; i < l; i++) {
- htmlLinesNumber += format(
- ' | ' +
- '| ' +
- '' +
+ html += format(
+ ' |
' +
+ '| ' +
+ '' +
+ ' | ' +
+ '' +
+ '{6}' +
' | ' +
'
',
[
@@ -162,32 +225,13 @@
NUMBERS_BLOCK_NAME,
NUMBER_LINE_NAME,
DATA_ATTR_NAME,
- i + 1
- ]);
-
- htmlCode += format(
- '{4}
',
- [
- LINE_NAME,
CODE_BLOCK_NAME,
- DATA_ATTR_NAME,
i + 1,
lines[i].length > 0 ? lines[i] : ' '
]);
}
- return format(
- '',
- [
- TABLE_NAME,
- NUMBERS_CONTAINER_NAME,
- htmlLinesNumber,
- CODE_CONTAINER_NAME,
- htmlCode
- ]);
+ return format('', [ TABLE_NAME, html ]);
}
return inputHtml;
diff --git a/swh/web/assets/src/utils/highlightjs.css b/swh/web/assets/src/utils/highlightjs.css
--- a/swh/web/assets/src/utils/highlightjs.css
+++ b/swh/web/assets/src/utils/highlightjs.css
@@ -24,7 +24,7 @@
color: #aaa;
border-right: 1px solid #ccc;
vertical-align: top;
- padding-right: 5px !important;
+ padding-right: 1px !important;
}
/* for block of code */