Utilize DOMPurify hooks to preserve <use> elements in playground mode (#156)

Author: listopadiya

package.json

@@ -25,8 +25,8 @@
     "test-typescript": "karma start ./test/deployment/typescript/karma.conf.js",
     "test:ci": "cross-env SHOW_DIFF=true npm run test",
     "createreferences": "node test/common/reference-server.js",
-    "prettier": "prettier --write {src,tests,typings}/**/*.{ts,js}",
-    "lint": "eslint {src,tests,typings}/**/*.{ts,js}"
+    "prettier": "prettier --write {playground,src,tests,typings}/**/*.{ts,js}",
+    "lint": "eslint {playground,src,tests,typings}/**/*.{ts,js}"
   },
   "repository": {
     "type": "git",

playground/index.js

@@ -1,6 +1,15 @@
 const { jsPDF } = window.jspdf
 const DOMPurify = window.DOMPurify
 
+DOMPurify.addHook('afterSanitizeAttributes', node => {
+  if (
+    (node.hasAttribute('xlink:href') && !node.getAttribute('xlink:href').match(/^#/)) ||
+    (node.hasAttribute('href') && !node.getAttribute('href').match(/^#/))
+  ) {
+    node.remove()
+  }
+})
+
 const defaultSample = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150">
   <text x="20" y="20">Hello, world!</text>
 </svg>`
@@ -25,7 +34,7 @@ window.addEventListener('load', () => {
 editor.on(
   'change',
   debounce(() => {
-    const svgText = DOMPurify.sanitize(doc.getValue())
+    const svgText = DOMPurify.sanitize(doc.getValue(), { ADD_TAGS: ['use'] })
     updateUrl(svgText)
     updateIssueLinks()
     updateSvg(svgText)