fix: Handle support for URIs used in additional contexts

Examples: - Without explicit scheme (i.e. starting with `//`) - In single and double quote strings - Within unquoted HTML tag attributes - In css `url()` values
docsifyjs · Aug 2, 2022 · 62069de · 62069de
1 parent 9753530
commit 62069de
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/src/core/render/emojify.js b/src/core/render/emojify.js
@@ -36,7 +36,9 @@ export function emojify(text, useNativeEmoji) {
       // Mark colons in comments
       .replace(/<!--[\s\S]+?-->/g, m => m.replace(/:/g, '__colon__'))
       // Mark colons in URIs
-      .replace(/[a-z]{2,}:\/\/[^\s]+/gi, m => m.replace(/:/g, '__colon__'))
+      .replace(/([a-z]{2,}:)?\/\/[^\s'">)]+/gi, m =>
+        m.replace(/:/g, '__colon__')
+      )
       // Replace emoji shorthand codes
       .replace(/:([a-z0-9_\-+]+?):/g, (m, $1) =>
         replaceEmojiShorthand(m, $1, useNativeEmoji)

diff --git a/test/integration/__snapshots__/emoji.test.js.snap b/test/integration/__snapshots__/emoji.test.js.snap
@@ -20,6 +20,10 @@ exports[`Emoji Ignores emoji shorthand codes in code, pre, script, and template
 
 exports[`Emoji Ignores emoji shorthand codes in comments 1`] = `"<p>Text <!-- :foo: :100: --></p>"`;
 
+exports[`Emoji Ignores emoji shorthand codes in html attributes 1`] = `"<p><a href=\\"http://domain.com/:smile:/\\"> <img src=\\"http://domain.com/:smile:/file.png\\"> <script src=\\"http://domain.com/:smile:/file.js\\"></script></a></p>"`;
+
+exports[`Emoji Ignores emoji shorthand codes in style url() values 1`] = `"<style>@import url(http://domain.com/:smile/file.css);</style>"`;
+
 exports[`Emoji Ignores unmatched emoji shorthand codes 1`] = `"<p>hh:mm</p><p>hh:mm:ss</p><p>Namespace::SubNameSpace</p><p>Namespace::SubNameSpace::Class</p><p>2014-12-29T16:11:20+00:00</p>"`;
 
 exports[`Emoji Renders GitHub emoji images (nativeEmoji:false) 1`] = `"<p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"> <img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"> <img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"> <img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p>text<img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\"></p><p><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\">text</p><p>text<img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png\\" alt=\\"smile\\" class=\\"emoji\\" loading=\\"lazy\\">text</p>"`;

diff --git a/test/integration/emoji.test.js b/test/integration/emoji.test.js
@@ -134,6 +134,32 @@ describe('Emoji', function () {
     expect(mainElm.innerHTML).toMatchSnapshot();
   });
 
+  test('Ignores emoji shorthand codes in html attributes', async () => {
+    await docsifyInit({
+      markdown: {
+        homepage: `<a href="http://domain.com/:smile:/"> <img src='http://domain.com/:smile:/file.png'> <script src=http://domain.com/:smile:/file.js></script>`,
+      },
+      // _logHTML: true,
+    });
+
+    const mainElm = document.querySelector('#main');
+
+    expect(mainElm.innerHTML).toMatchSnapshot();
+  });
+
+  test('Ignores emoji shorthand codes in style url() values', async () => {
+    await docsifyInit({
+      markdown: {
+        homepage: `<style>@import url(http://domain.com/:smile/file.css);</style>`,
+      },
+      // _logHTML: true,
+    });
+
+    const mainElm = document.querySelector('#main');
+
+    expect(mainElm.innerHTML).toMatchSnapshot();
+  });
+
   test('Ignores emoji shorthand codes in code, pre, script, and template tags', async () => {
     await docsifyInit({
       markdown: {