mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 17:56:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added line numbering

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-01-21 10:53:18 +01:00
parent 14bf169631
commit bd2423a52c
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
2 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/views/rooms/_EventTile.scss
View file

@ -501,6 +501,18 @@ $left-gutter: 64px;
} }
} }
.mx_EventTile_lineNumbers {
float: left;
margin: 0 0.5em 0 -1.5em;
color: gray;
}
.mx_EventTile_lineNumber {
text-align: right;
display: block;
padding-left: 1em;
}
.mx_EventTile_collapsedCodeBlock { .mx_EventTile_collapsedCodeBlock {
max-height: 30vh; max-height: 30vh;
} }

17
src/components/views/messages/TextualBody.js
View file

@ -101,6 +101,8 @@ export default class TextualBody extends React.Component {
this._handleCodeBlockExpansion(pres[i]); this._handleCodeBlockExpansion(pres[i]);
this._addCodeExpansionButton(div, pres[i]); this._addCodeExpansionButton(div, pres[i]);
this._addCodeCopyButton(div); this._addCodeCopyButton(div);
// TODO: Add option to disable this
this._addLineNumbers(pres[i]);
} }
} }
// Highlight code // Highlight code
@ -159,7 +161,7 @@ export default class TextualBody extends React.Component {
if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom"; if (expansionButtonExists.length > 0) button.className += "mx_EventTile_buttonBottom";
button.onclick = async () => { button.onclick = async () => {
const copyCode = button.parentNode.getElementsByTagName("pre")[0]; const copyCode = button.parentNode.getElementsByTagName("code")[0];
const successful = await copyPlaintext(copyCode.textContent); const successful = await copyPlaintext(copyCode.textContent);
const buttonRect = button.getBoundingClientRect(); const buttonRect = button.getBoundingClientRect();
@ -192,6 +194,19 @@ export default class TextualBody extends React.Component {
} }
} }
_addLineNumbers(pre) {
//const lineNumbers = document.createElement("span");
//lineNumbers.className = "mx_EventTile_lineNumbers";
pre.innerHTML = '<span class="mx_EventTile_lineNumbers"></span>' + pre.innerHTML + '<span class="cl"></span>';
const lineNumbers = pre.getElementsByClassName("mx_EventTile_lineNumbers")[0];
// Calculate number of lines in pre
const number = pre.innerHTML.split(/\n/).length;
// Iterate through lines starting with 1 (number of the first line is 1)
for (let i = 1; i < number; i++) {
lineNumbers.innerHTML += '<span class="mx_EventTile_lineNumber">' + i + '</span>';
}
}
_highlightCode(code) { _highlightCode(code) {
if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) { if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) {
highlight.highlightBlock(code); highlight.highlightBlock(code);