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

Fix markdown formatting for bold (#7257)

Browse source 
* Fix markdown formatting for bold

Fix https://github.com/vector-im/element-web/issues/4674

* I hate you too eslint
This commit is contained in:
Dariusz Niemczyk 2021-12-02 11:56:23 +01:00 • committed by GitHub
parent ab750aefce
commit fda0c2cf79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Markdown.ts
View file

@ -93,6 +93,11 @@ function getTextUntilEndOrLinebreak(node: commonmark.Node) {
return text; return text;
} }
const formattingChangesByNodeType = {
'emph': '_',
'strong': '__',
};
/** /**
* Class that wraps commonmark, adding the ability to see whether * Class that wraps commonmark, adding the ability to see whether
* a given message actually uses any markdown syntax or whether * a given message actually uses any markdown syntax or whether
@ -128,7 +133,7 @@ export default class Markdown {
let text = ''; let text = '';
let isInPara = false; let isInPara = false;
let previousNode: commonmark.Node | null = null; let previousNode: commonmark.Node | null = null;
let shouldUnlinkEmphasisNode = false; let shouldUnlinkFormattingNode = false;
while ((event = walker.next())) { while ((event = walker.next())) {
const { node } = event; const { node } = event;
if (node.type === 'paragraph') { if (node.type === 'paragraph') {
@ -152,7 +157,7 @@ export default class Markdown {
text += node.literal; text += node.literal;
} }
// We should not do this if previous node was not a textnode, as we can't combine it then. // We should not do this if previous node was not a textnode, as we can't combine it then.
if (node.type === 'emph' && previousNode.type === 'text') { if ((node.type === 'emph' || node.type === 'strong') && previousNode.type === 'text') {
if (event.entering) { if (event.entering) {
const foundLinks = linkify.find(text); const foundLinks = linkify.find(text);
for (const { value } of foundLinks) { for (const { value } of foundLinks) {
@ -161,7 +166,8 @@ export default class Markdown {
* NOTE: This technically should unlink the emph node and create LINK nodes instead, adding all the next elements as siblings * NOTE: This technically should unlink the emph node and create LINK nodes instead, adding all the next elements as siblings
* but this solution seems to work well and is hopefully slightly easier to understand too * but this solution seems to work well and is hopefully slightly easier to understand too
*/ */
const nonEmphasizedText = `_${node.firstChild.literal}_`; const format = formattingChangesByNodeType[node.type];
const nonEmphasizedText = `${format}${node.firstChild.literal}${format}`;
const f = getTextUntilEndOrLinebreak(node); const f = getTextUntilEndOrLinebreak(node);
const newText = value + nonEmphasizedText + f; const newText = value + nonEmphasizedText + f;
const newLinks = linkify.find(newText); const newLinks = linkify.find(newText);
@ -175,7 +181,7 @@ export default class Markdown {
// Remove `em` opening and closing nodes // Remove `em` opening and closing nodes
node.unlink(); node.unlink();
previousNode.insertAfter(event.node); previousNode.insertAfter(event.node);
shouldUnlinkEmphasisNode = true; shouldUnlinkFormattingNode = true;
} else { } else {
logger.error( logger.error(
"Markdown links escaping found too many links for following text: ", "Markdown links escaping found too many links for following text: ",
@ -189,9 +195,9 @@ export default class Markdown {
} }
} }
} else { } else {
if (shouldUnlinkEmphasisNode) { if (shouldUnlinkFormattingNode) {
node.unlink(); node.unlink();
shouldUnlinkEmphasisNode = false; shouldUnlinkFormattingNode = false;
} }
} }
} }

28
test/Markdown-test.ts
View file

@ -46,7 +46,7 @@ describe("Markdown parser test", () => {
"https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org", "https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org",
].join("\n"); ].join("\n");
it('tests that links are getting properly HTML formatted', () => { it('tests that links with markdown empasis in them are getting properly HTML formatted', () => {
/* eslint-disable max-len */ /* eslint-disable max-len */
const expectedResult = [ const expectedResult = [
"<p>Test1:<br />#_foonetic_xkcd:matrix.org<br />http://google.com/_thing_<br />https://matrix.org/_matrix/client/foo/123_<br />#_foonetic_xkcd:matrix.org</p>", "<p>Test1:<br />#_foonetic_xkcd:matrix.org<br />http://google.com/_thing_<br />https://matrix.org/_matrix/client/foo/123_<br />#_foonetic_xkcd:matrix.org</p>",
@ -125,7 +125,7 @@ describe("Markdown parser test", () => {
expect(md.toHTML()).toEqual(expectedResult); expect(md.toHTML()).toEqual(expectedResult);
}); });
it('expects that links in one line will be "escaped" properly', () => { it('expects that links with emphasis are "escaped" correctly', () => {
/* eslint-disable max-len */ /* eslint-disable max-len */
const testString = [ const testString = [
'http://domain.xyz/foo/bar-_stuff-like-this_-in-it.jpg' + " " + 'http://domain.xyz/foo/bar-_stuff-like-this_-in-it.jpg', 'http://domain.xyz/foo/bar-_stuff-like-this_-in-it.jpg' + " " + 'http://domain.xyz/foo/bar-_stuff-like-this_-in-it.jpg',
@ -139,5 +139,29 @@ describe("Markdown parser test", () => {
const md = new Markdown(testString); const md = new Markdown(testString);
expect(md.toHTML()).toEqual(expectedResult); expect(md.toHTML()).toEqual(expectedResult);
}); });
it('expects that the link part will not be accidentally added to <strong>', () => {
/* eslint-disable max-len */
const testString = `https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py`;
const expectedResult = 'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py';
/* eslint-enable max-len */
const md = new Markdown(testString);
expect(md.toHTML()).toEqual(expectedResult);
});
it('expects that the link part will not be accidentally added to <strong> for multiline links', () => {
/* eslint-disable max-len */
const testString = [
'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py' + " " + 'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py',
'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py' + " " + 'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py',
].join('\n');
const expectedResult = [
'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py' + " " + 'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py',
'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py' + " " + 'https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py',
].join('<br />');
/* eslint-enable max-len */
const md = new Markdown(testString);
expect(md.toHTML()).toEqual(expectedResult);
});
}); });
}); });