Further enhancements to spans (#13035)

This commit is contained in:
Chris LaFreniere
2020-10-22 13:21:05 -07:00
committed by GitHub
parent c97f75283b
commit ff8e451af9
2 changed files with 38 additions and 2 deletions

View File

@@ -21,7 +21,7 @@ export class HTMLMarkdownConverter {
}
private setTurndownOptions() {
this.turndownService.keep(['u', 'mark']);
this.turndownService.keep(['u', 'mark', 'style']);
this.turndownService.use(turndownPluginGfm.gfm);
this.turndownService.addRule('pre', {
filter: 'pre',
@@ -39,6 +39,22 @@ export class HTMLMarkdownConverter {
this.turndownService.addRule('span', {
filter: 'span',
replacement: function (content, node) {
// There are certain properties that either don't have equivalents in markdown or whose transformations
// don't have actions defined in WYSIWYG yet. To unblock users, leaving these elements alone (including their child elements)
// Note: the initial list was generated from our TSG Jupyter Book
if (node && node.style) {
if (node.style.color ||
node.style.fontSize ||
(node.style.backgroundColor && node.style.backgroundColor !== 'yellow') ||
(node.style.background && node.style.background !== 'yellow') ||
node.style.lineHeight ||
node.style.marginLeft ||
node.style.marginBottom ||
node.style.textAlign
) {
return node.outerHTML;
}
}
let beginString = '';
let endString = '';
// TODO: handle other background colors and more styles
@@ -58,7 +74,7 @@ export class HTMLMarkdownConverter {
beginString = '<u>' + beginString;
endString += '</u>';
}
return beginString + node.textContent + endString;
return beginString + content + endString;
}
});
this.turndownService.addRule('img', {

View File

@@ -79,6 +79,26 @@ suite('HTML Markdown Converter', function (): void {
assert.equal(htmlMarkdownConverter.convert(htmlString), 'Yes<u>Hello test</u>', 'Basic underline span no space failed');
htmlString = '<h1>Yes<span style="text-decoration-line:underline; font-style:italic; font-weight:bold; background-color: yellow">Hello test</span></h1>';
assert.equal(htmlMarkdownConverter.convert(htmlString), '# Yes<u>_**<mark>Hello test</mark>**_</u>', 'Compound elements span failed');
htmlString = '<span style="color: orangered">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with color style should not be altered');
htmlString = '<span style="font-size: 10.0pt">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with font size style should not be altered');
htmlString = '<span style="font-size: 10.0pt">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with font size style should not be altered');
htmlString = '<span style="background-color: green">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with background color (non yellow) style should not be altered');
htmlString = '<span style="background: green">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with background (non yellow) style should not be altered');
htmlString = '<span style="line-height: 12.0pt">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with line height style should not be altered');
htmlString = '<span style="margin-left: 12.0pt">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with margin left style should not be altered');
htmlString = '<span style="margin-bottom: 12.0pt">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with margin bottom style should not be altered');
htmlString = '<span style="text-align: center">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with text align style should not be altered');
htmlString = '<span style="list-style-type: circle">Hello test</span>';
assert.equal(htmlMarkdownConverter.convert(htmlString), 'Hello test', 'Span with style that is not included in allowlist should be altered');
});
test('Should transform <img> tag', () => {