Skip to content

Commit

Permalink
Leave tags following code blocks intact
Browse files Browse the repository at this point in the history 
Google docs interleaves the end-of-code marker with the following tag.
eg:

<p>&#xEC03;my code block</p><h2>&#xEC02;my heading</h2>

Make sure we match and retain the following tag.
  • Loading branch information
@RohanM
RohanM committed Aug 13, 2024
1 parent 9c32405 commit 2720f4b
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 4 deletions.
7 changes: 5 additions & 2 deletions server/formatter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,11 @@ function formatCode(html) {
})

// Expand native code blocks
html = html.replace(/<p>&#xEC03;(.*?)&#xEC02;(.*?)<\/p>/ig, (match, content, tailingPara) => {
return `${formatCodeBlock(content)}<p>${tailingPara}</p>`
// Google docs interleaves the end-of-code marker with the following tag. eg:
// <p>&#xEC03;my code block</p><h2>&#xEC02;my heading</h2>
// Make sure we match and retain the following tag
html = html.replace(/<p>&#xEC03;(.*?)<\/p>(<[^>]*>)&#xEC02;/ig, (match, content, followingTag) => {
return `${formatCodeBlock(content)}${followingTag}`
})

// Replace double backticks with <code>, for supporting backticks in inline code blocks
Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/supportedFormats.nativeCode.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css"> @import url(https://themes.googleusercontent.com/fonts/css?kit=XGMkxXUZTA64h2imyzu79g);</style></head><body class="doc-content" style="background-color:#ffffff;padding:72pt 72pt 72pt 72pt;max-width:468pt"><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">Intro sentence.</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span>&#60419;</span><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal">// This is a code block</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal">// Here&#39;s another line</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">&#60418;</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">Middle sentence.</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span>&#60419;</span><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal"># A second code block</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">&#60418;Outro sentence.</span></p></body></html>
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type"><style type="text/css"> @import url(https://themes.googleusercontent.com/fonts/css?kit=XGMkxXUZTA64h2imyzu79g);</style></head><body class="doc-content" style="background-color:#ffffff;padding:72pt 72pt 72pt 72pt;max-width:468pt"><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">Intro sentence.</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span>&#60419;</span><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal">// This is a code block</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal">// Here&#39;s another line</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">&#60418;</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">Middle sentence.</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span>&#60419;</span><span style="color:#b80672;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:&quot;Roboto Mono&quot;;font-style:normal"># A second code block</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal">&#60418;Outro sentence.</span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;text-align:left"><span>&#60419;</span><span style="font-size:9pt;font-family:&quot;Roboto Mono&quot;;color:#37474f;font-weight:400">/* Another code block */</span></p><h2 id="h.w1cnitpw5bz6" style="padding-top:18pt;margin:0;color:#000000;padding-left:0;font-size:16pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;font-family:&quot;Arial&quot;;orphans:2;widows:2;text-align:left;padding-right:0"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:&quot;Arial&quot;;font-style:normal">&#60418;Heading following a code block</span></h2><p style="padding:0;margin:0;color:#000000;font-size:11pt;font-family:&quot;Arial&quot;;line-height:1.15;orphans:2;widows:2;height:11pt;text-align:left"><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:&quot;Arial&quot;;font-style:normal"></span></p></body></html>
7 changes: 6 additions & 1 deletion test/unit/htmlProcessing.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,12 @@ describe('HTML processing', () => {
it('formats the code blocks', () => {
const codeBlock = testGlobal.native.output('pre > code')
assert.exists(codeBlock.html())
assert.equal(codeBlock.length, 2)
assert.equal(codeBlock.length, 3)
})

it('leaves the trailing heading intact', () => {
const heading = testGlobal.native.output('h2')
assert.equal(heading.html(), 'Heading following a code block')
})

it('removes code block marker unicode characters', () => {
Expand Down

0 comments on commit 2720f4b

Please sign in to comment.