fix: escaping the URL passed to clip-path to handle parentheses (#217)

Fixing a bug where if the current page has parentheses in the URL, it would cause hanzi-writer to break. Thanks @ cqiangcode for finding this!

jest-jsdom-env.js

@@ -0,0 +1,20 @@
+/**
+ * Hack to allow us to modify jsdom from within tests
+ * from https://github.com/facebook/jest/issues/5124#issuecomment-352749005
+ * */
+
+const JSDOMEnvironment = require('jest-environment-jsdom');
+
+module.exports = class JSDOMEnvironmentGlobal extends JSDOMEnvironment {
+  constructor(config) {
+    super(config);
+
+    this.global.jsdom = this.dom;
+  }
+
+  teardown() {
+    this.global.jsdom = null;
+
+    return super.teardown();
+  }
+};

package.json

@@ -58,6 +58,7 @@
     "rootDir": "src",
     "coverageDirectory": "../coverage/",
     "testURL": "https://test.com/url#tag",
-    "collectCoverage": true
+    "collectCoverage": true,
+    "testEnvironment": "<rootDir>/../jest-jsdom-env"
   }
 }

src/renderers/svg/__tests__/StrokeRenderer-test.ts

@@ -37,7 +37,7 @@ describe('StrokeRenderer', () => {
       'rgba(12,101,20,0.3)',
     );
     expect((target.svg.childNodes[1] as Element).getAttribute('clip-path')).toBe(
-      `url(https://test.com/url#${maskId})`,
+      `url("https://test.com/url#${maskId}")`,
     );
 
     expect(maskPath).toMatchSnapshot();

src/renderers/svg/__tests__/svgUtils-test.ts

@@ -0,0 +1,24 @@
+import { urlIdRef } from '../svgUtils';
+
+describe('urlIdRef', () => {
+  it('prepends the ID with the current window location', () => {
+    (global as any).jsdom.reconfigure({
+      url: 'https://test.com',
+    });
+    expect(urlIdRef('123-blah')).toEqual('url("https://test.com/#123-blah")');
+  });
+
+  it('escapes " characters in the URL', () => {
+    (global as any).jsdom.reconfigure({
+      url: 'https://test-"(ok).com',
+    });
+    expect(urlIdRef('123-blah')).toEqual('url("https://test-%22(ok).com/#123-blah")');
+  });
+
+  it('strips everything after # in the URL', () => {
+    (global as any).jsdom.reconfigure({
+      url: 'https://test.com/path#existing-hash',
+    });
+    expect(urlIdRef('123-blah')).toEqual('url("https://test.com/path#123-blah")');
+  });
+});

src/renderers/svg/svgUtils.ts

@@ -14,9 +14,9 @@ export function attrs(elm: Element, attrsMap: Record<string, string>) {
 export function urlIdRef(id: string) {
   let prefix = '';
   if (window.location && window.location.href) {
-    prefix = window.location.href.replace(/#[^#]*$/, '');
+    prefix = window.location.href.replace(/#[^#]*$/, '').replace(/"/gi, '%22');
   }
-  return `url(${prefix}#${id})`;
+  return `url("${prefix}#${id}")`;
 }
 
 export function removeElm(elm: Element | undefined) {