imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename some variable and cleanup a bit

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-01-20 08:44:32 +01:00
parent 58b2c18cf5
commit 8535a11dd2
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 36 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -91,32 +91,39 @@ export default class TextualBody extends React.Component {
this.calculateUrlPreview(); this.calculateUrlPreview();
if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") { if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
const blocks = ReactDOM.findDOMNode(this).getElementsByTagName("pre"); // Handle expansion and add buttons
if (blocks.length > 0) { const pres = ReactDOM.findDOMNode(this).getElementsByTagName("pre");
for (let i = 0; i < blocks.length; i++) { if (pres.length > 0) {
// Wrap a div around <pre> so that the copy button can be correctly positioned for (let i = 0; i < pres.length; i++) {
// when the <pre> overflows and is scrolled horizontally. /* Wrap a div around <pre> so that the copy button can be correctly positioned
const div = this._wrapInDiv(blocks[i]); * when the <pre> overflows and is scrolled horizontally. */
this._handleCodeBlockExpansion(div.firstChild); const div = this._wrapInDiv(pres[i]);
this._handleCodeBlockExpansion(pres[i]);
this._addCodeCopyButton(div); this._addCodeCopyButton(div);
this._addCodeExpansionButton(div); this._addCodeExpansionButton(div);
} }
// Do this asynchronously: parsing code takes time and we don't }
// need to block the DOM update on it. // Highlight code
setTimeout(() => { const codes = ReactDOM.findDOMNode(this).getElementsByTagName("code");
if (this._unmounted) return; if (codes.length >0) {
for (let i = 0; i < blocks.length; i++) { for (let i = 0; i < codes.length; i++) {
this._highlightCode(blocks[i].firstChild); /* Do this asynchronously: parsing code takes time and we don't
} * need to block the DOM update on it. */
}, 10); setTimeout(() => {
if (this._unmounted) return;
for (let i = 0; i < pres.length; i++) {
this._highlightCode(codes[i]);
}
}, 10);
}
} }
} }
} }
_addCodeExpansionButton(codeBlock) { _addCodeExpansionButton(div) {
// TODO: What if the block is small and the we don't need the icon? // TODO: What if the block is small and the we don't need the icon?
const pre = codeBlock.getElementsByTagName("pre")[0]; const pre = div.getElementsByTagName("pre")[0];
const button = document.createElement("span"); const button = document.createElement("span");
if (pre.className == "mx_EventTile_collapsedCodeBlock") { if (pre.className == "mx_EventTile_collapsedCodeBlock") {
button.className = "mx_EventTile_expandButton"; button.className = "mx_EventTile_expandButton";
@ -134,10 +141,10 @@ export default class TextualBody extends React.Component {
} }
}; };
codeBlock.appendChild(button); div.appendChild(button);
} }
_addCodeCopyButton(codeBlock) { _addCodeCopyButton(div) {
const button = document.createElement("span"); const button = document.createElement("span");
button.className = "mx_EventTile_copyButton"; button.className = "mx_EventTile_copyButton";
button.onclick = async () => { button.onclick = async () => {
@ -153,38 +160,38 @@ export default class TextualBody extends React.Component {
button.onmouseleave = close; button.onmouseleave = close;
}; };
codeBlock.appendChild(button); div.appendChild(button);
} }
_wrapInDiv(codeBlock) { _wrapInDiv(pre) {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = "mx_EventTile_pre_container"; div.className = "mx_EventTile_pre_container";
// Insert containing div in place of <pre> block // Insert containing div in place of <pre> block
codeBlock.parentNode.replaceChild(div, codeBlock); pre.parentNode.replaceChild(div, pre);
// Append <pre> block and copy button to container // Append <pre> block and copy button to container
div.appendChild(codeBlock); div.appendChild(pre);
return div; return div;
} }
_handleCodeBlockExpansion(codeBlock) { _handleCodeBlockExpansion(pre) {
if (!SettingsStore.getValue("expandCodeByDefault")) { if (!SettingsStore.getValue("expandCodeByDefault")) {
codeBlock.className = "mx_EventTile_collapsedCodeBlock"; pre.className = "mx_EventTile_collapsedCodeBlock";
} }
} }
_highlightCode(codeBlock) { _highlightCode(code) {
if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) { if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) {
highlight.highlightBlock(codeBlock); highlight.highlightBlock(code);
} else { } else {
// Only syntax highlight if there's a class starting with language- // Only syntax highlight if there's a class starting with language-
const classes = codeBlock.className.split(/\s+/).filter(function(cl) { const classes = code.className.split(/\s+/).filter(function(cl) {
return cl.startsWith('language-') && !cl.startsWith('language-_'); return cl.startsWith('language-') && !cl.startsWith('language-_');
}); });
if (classes.length != 0) { if (classes.length != 0) {
highlight.highlightBlock(codeBlock); highlight.highlightBlock(code);
} }
} }
} }