fix: use built-in span element for spoiler

Defining custom element on global causing error when reenable the plugin. Hence, using regular span is more appropriate way.

src/preview-mode/custom-element/SpoilerSpanElement.ts

@@ -1,19 +0,0 @@
-export class SpoilerSpanElement extends HTMLElement {
-    constructor() {
-        super();
-    }
-    clickListener = (evt: MouseEvent) => {
-        let curTarget = evt.currentTarget as HTMLElement;
-        if (curTarget.getAttribute("revealed") === null) {
-            curTarget.setAttribute("revealed", "");
-        } else {
-            curTarget.removeAttribute("revealed");
-        }
-    }
-    connectedCallback() {
-        this.addEventListener("click", this.clickListener);
-    }
-    disconnectedCallback() {
-        this.removeEventListener("click", this.clickListener);
-    }
-}

src/preview-mode/custom-element/index.ts

@@ -1 +0,0 @@
-export * from "./SpoilerSpanElement";

src/preview-mode/post-processor/PreviewExtendedSyntax.ts

@@ -1,11 +1,9 @@
 import { MarkdownPostProcessor } from "obsidian";
 import { PreviewModeParser } from "src/preview-mode/parser";
 import { CustomAlign, CustomHighlight } from "src/preview-mode/post-processor";
-import { SpoilerSpanElement } from "src/preview-mode/custom-element";
 
 export class PreviewExtendedSyntax {
     constructor() {
-        customElements.define("spoiler-span", SpoilerSpanElement);
     }
     private readonly query = "p, h1, h2, h3, h4, h5, h6, td, th, li:not(:has(p)), .callout-title-inner";
     private customAlign = new CustomAlign();

src/shared-configs/FormatRules.ts

@@ -14,7 +14,15 @@ export const FormatRules: { [P in MainFormat]: {char: string, length: number, ex
         length: 2,
         exactLen: true,
         allowSpace: true,
-        getEl: () => document.createElement("spoiler-span")
+        getEl: () => {
+            return document.createSpan({ cls: "spoiler" }, (el) => {
+                el.addEventListener("click", (evt) => {
+                    let spoiler = evt.currentTarget as Element,
+                        isHidden = !spoiler.hasClass("spoiler-revealed");
+                    spoiler.toggleClass("spoiler-revealed", isHidden);
+                })
+            });
+        }
     },
     [Format.SUPERSCRIPT]: {
         char: "^",

styles.css

@@ -115,7 +115,7 @@ mark {
     }
 }
 
-spoiler-span {
+span.spoiler {
     border-radius: 2px;
     transition-duration: 0.1s;
     transition-property: color;
@@ -125,7 +125,7 @@ spoiler-span {
     .theme-light & {
         background-color: var(--color-base-40);
     }
-    &:not([revealed]) {
+    &:not(.spoiler-revealed) {
         color: transparent;
     }
 }