fix: svg style bug in @regexper/render

@regexper/render use a stylesheet in svg that cause bugs in whole site. So add regexper in a shadow root

package.json

@@ -42,8 +42,8 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
-    "@types/markdown-it": "^13.0.7",
     "@types/figlet": "^1.5.8",
+    "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -95,6 +95,7 @@
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.1.6",
+    "vue-shadow-dom": "^4.2.0",
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",
     "xml-js": "^1.6.11",

pnpm-lock.yaml

@@ -185,6 +185,9 @@ dependencies:
   vue-router:
     specifier: ^4.1.6
     version: 4.1.6(vue@3.3.4)
+  vue-shadow-dom:
+    specifier: ^4.2.0
+    version: 4.2.0
   vue-tsc:
     specifier: ^1.8.1
     version: 1.8.1(typescript@5.2.2)
@@ -9307,6 +9310,10 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue-shadow-dom@4.2.0:
+    resolution: {integrity: sha512-lguI064rT2HT/dxqSmXtz860KOvCq+W3nU1jMqroTmX3K1H46q22BMR4emh/Ld3ozy35XJKOaNGcr6mkJ/t/yg==}
+    dev: false
+
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:

src/main.ts

@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';
 import { createHead } from '@vueuse/head';
 
 import { registerSW } from 'virtual:pwa-register';
+import shadow from 'vue-shadow-dom';
 import { plausible } from './plugins/plausible.plugin';
 
 import 'virtual:uno.css';
@@ -23,5 +24,6 @@ app.use(i18nPlugin);
 app.use(router);
 app.use(naive);
 app.use(plausible);
+app.use(shadow);
 
 app.mount('#app');

src/tools/regex-tester/regex-tester.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import RandExp from 'randexp';
 import { render } from '@regexper/render';
+import type { ShadowRootExpose } from 'vue-shadow-dom';
 import { matchRegex } from './regex-tester.service';
 import { useValidation } from '@/composable/validation';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
@@ -13,7 +14,7 @@ const multiline = ref(false);
 const dotAll = ref(true);
 const unicode = ref(true);
 const unicodeSets = ref(false);
-const visualizerSVG = ref() as Ref<SVGSVGElement>;
+const visualizerSVG = ref<ShadowRootExpose>();
 
 const regexValidation = useValidation({
   source: regex,
@@ -70,13 +71,21 @@ const sample = computed(() => {
 watchEffect(
   async () => {
     const regexValue = regex.value;
-    const svg = visualizerSVG.value;
-    svg.childNodes.forEach(n => n.remove());
+    // shadow root is required:
+    // @regexper/render append a <defs><style> that broke svg transparency of icons in the whole site
+    const visualizer = visualizerSVG.value?.shadow_root;
+    if (visualizer) {
+      while (visualizer.lastChild) {
+        visualizer.removeChild(visualizer.lastChild);
+      }
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
       try {
         await render(regexValue, svg);
       }
       catch (_) {
       }
+      visualizer.appendChild(svg);
+    }
   },
 );
 </script>
@@ -176,7 +185,9 @@ watchEffect(
     </c-card>
 
     <c-card title="Regex Diagram" style="overflow-x: scroll;" mt-3>
-      <svg ref="visualizerSVG" />
+      <shadow-root ref="visualizerSVG">
+&#xa0;
+      </shadow-root>
     </c-card>
   </div>
 </template>