Repository: zestedesavoir/zmarkdown
Pull request #353 (2019-08-13 08:48:57)

Solve the new \vec problem
# Context

Once more, a bug was found on a LaTeX command; after PR #327 , ZMarkdown was still generating bad HTML for the `\vec` command; it have been reported on the forum this morning.

# Resolution

I always proceed as follow for theses issues:

1. write a simple unit test;
2. comment the rehype-sanitize line on the `common.js` file;
3. generate the snapshot;
4. uncomment the line;
5. run the test and compare diffs;
6. add the missing element or attribute;
7. repeat from 5.

Here, only one attribute was missing: `style` on `svg`; the command generating the issue now has a test, and the sanitizer has been reconfigured one more.

Nothing left to do, except for merging (and publishing).


Patch:
diff --git a/packages/zmarkdown/config/sanitize-katex.json b/packages/zmarkdown/config/sanitize-katex.json
index d50b3d41..523e11ae 100644
--- a/packages/zmarkdown/config/sanitize-katex.json
+++ b/packages/zmarkdown/config/sanitize-katex.json
@@ -270,6 +270,7 @@
     "svg": [
       "width",
       "height",
+      "style",
       "viewBox",
       "preserveAspectRatio"
     ],
@@ -277,4 +278,4 @@
       "d"
     ]
   }
-}
\ No newline at end of file
+}


Test patch:
diff --git a/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap b/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
index b6211428..d336b287 100644
--- a/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
+++ b/packages/zmarkdown/__tests__/__snapshots__/sanitizer.tests.js.snap
@@ -27,3 +27,13 @@ s76,-59,76,-59s76,-60,76,-60z M1001 80H40000v40H1012z\\"></path></svg></span></s
 `;
 
 exports[`#math do not oversanitize math - test sub/sup 1`] = `"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><msub><mn>1</mn><mi>n</mi></msub><mo>+</mo><msup><mn>1</mn><mi>n</mi></msup></mrow><annotation encoding=\\"application/x-tex\\">1_n + 1^n</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.79444em;vertical-align:-0.15em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t vlist-t2\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.151392em;\\"><span style=\\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span><span class=\\"vlist-s\\">​</span></span><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.15em;\\"><span></span></span></span></span></span></span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span><span class=\\"mbin\\">+</span><span class=\\"mspace\\" style=\\"margin-right:0.2222222222222222em;\\"></span></span><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.7143919999999999em;vertical-align:0em;\\"></span><span class=\\"mord\\"><span class=\\"mord\\">1</span><span class=\\"msupsub\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.7143919999999999em;\\"><span style=\\"top:-3.113em;margin-right:0.05em;\\"><span class=\\"pstrut\\" style=\\"height:2.7em;\\"></span><span class=\\"sizing reset-size6 size3 mtight\\"><span class=\\"mord mathdefault mtight\\">n</span></span></span></span></span></span></span></span></span></span></span></span></span></p>"`;
+
+exports[`#math do not oversanitize math - test vec 1`] = `
+"<p><span class=\\"inlineMath inlineMathDouble\\"><span class=\\"katex-display\\"><span class=\\"katex\\"><span class=\\"katex-mathml\\"><math><semantics><mrow><mover accent=\\"true\\"><mi>a</mi><mo>⃗</mo></mover></mrow><annotation encoding=\\"application/x-tex\\">\\\\vec{a}</annotation></semantics></math></span><span class=\\"katex-html\\" aria-hidden=\\"true\\"><span class=\\"base\\"><span class=\\"strut\\" style=\\"height:0.714em;vertical-align:0em;\\"></span><span class=\\"mord accent\\"><span class=\\"vlist-t\\"><span class=\\"vlist-r\\"><span class=\\"vlist\\" style=\\"height:0.714em;\\"><span style=\\"top:-3em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"mord\\"><span class=\\"mord mathdefault\\">a</span></span></span><span style=\\"top:-3em;\\"><span class=\\"pstrut\\" style=\\"height:3em;\\"></span><span class=\\"accent-body\\" style=\\"left:-0.2355em;\\"><span class=\\"overlay\\" style=\\"height:0.714em;width:0.471em;\\"><svg width=\\"0.471em\\" height=\\"0.714em\\" style=\\"width:0.471em\\" viewBox=\\"0 0 471 714\\" preserveAspectRatio=\\"xMinYMin\\"><path d=\\"M377 20c0-5.333 1.833-10 5.5-14S391 0 397 0c4.667 0 8.667 1.667 12 5
+3.333 2.667 6.667 9 10 19 6.667 24.667 20.333 43.667 41 57 7.333 4.667 11
+10.667 11 18 0 6-1 10-3 12s-6.667 5-14 9c-28.667 14.667-53.667 35.667-75 63
+-1.333 1.333-3.167 3.5-5.5 6.5s-4 4.833-5 5.5c-1 .667-2.5 1.333-4.5 2s-4.333 1
+-7 1c-4.667 0-9.167-1.833-13.5-5.5S337 184 337 178c0-12.667 15.667-32.333 47-59
+H213l-171-1c-8.667-6-13-12.333-13-19 0-4.667 4.333-11.333 13-20h359
+c-16-25.333-24-45-24-59z\\"></path></svg></span></span></span></span></span></span></span></span></span></span></span></span></p>"
+`;
diff --git a/packages/zmarkdown/__tests__/sanitizer.tests.js b/packages/zmarkdown/__tests__/sanitizer.tests.js
index 5c169a22..1b0f2de4 100644
--- a/packages/zmarkdown/__tests__/sanitizer.tests.js
+++ b/packages/zmarkdown/__tests__/sanitizer.tests.js
@@ -46,6 +46,11 @@ describe('#math', () => {
     expect(rendered).resolves.toMatchSnapshot()
   })
 
+  it('do not oversanitize math - test vec', () => {
+    const rendered = renderString()('$$\\vec{a}$$')
+    expect(rendered).resolves.toMatchSnapshot()
+  })
+
   it('do not oversanitize math - test color', () => {
     const rendered = renderString()('$$\\color{red}{x}$$')
     expect(rendered).resolves.toMatchSnapshot()