update

Author: guFalcon

main.js

@@ -4,74 +4,19 @@
  * Compatible with plain JavaScript use (no bundler required).
  */
 
-class SafeLearnPlugin extends Plugin {
+module.exports = class SafeLearnPlugin extends Plugin {
   async onload() {
-    this.addStyles();
-    this.registerDomEvent(document, "DOMContentLoaded", () => {
-      this.processAll();
-    });
-    this.registerEvent(
-      this.app.workspace.on("layout-change", () => this.processAll())
-    );
+    console.log("✅ SafeLearn Plugin loaded");
+    this.registerEvent(this.app.workspace.on("layout-change", () => this.processAll()));
   }
 
   onunload() {
+    console.log("❎ SafeLearn Plugin unloaded");
     document.querySelectorAll(".fragment-highlight, .permission-block, .side-by-side").forEach(el => {
       el.classList.remove("fragment-highlight", "permission-block", "side-by-side");
     });
   }
 
-  addStyles() {
-    const style = document.createElement("style");
-    style.id = "safelearn-style";
-    style.textContent = `
-      .fragment-highlight {
-        background-color: var(--fragment-bg);
-        color: var(--fragment-fg);
-        border: 2px solid var(--fragment-border);
-        border-radius: 8px;
-        padding: 2px 6px;
-        margin: 1px;
-        display: inline-block;
-        font-weight: 500;
-      }
-      .fragment-highlight::before {
-        content: "🔀 ";
-        opacity: 0.6;
-      }
-      .permission-block {
-        background-color: var(--permission-bg, #eef7ff);
-        border-left: 4px solid var(--permission-border, #3399ff);
-        padding: 4px 8px;
-        margin: 8px 0;
-      }
-      .permission-block .perm-label,
-      .permission-block .perm-end {
-        font-family: monospace;
-        font-size: 0.8em;
-        background: #ddeeff;
-        color: #225577;
-        padding: 2px 4px;
-        border-radius: 4px;
-        display: inline-block;
-        margin-bottom: 4px;
-      }
-      .side-by-side {
-        display: flex;
-        gap: 20px;
-        margin: 1em 0;
-        border: 1px dashed #bbb;
-        padding: 8px;
-      }
-      .side-by-side > div {
-        flex: 1;
-        padding: 0 10px;
-        border-left: 2px dashed #ccc;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
   processAll() {
     const leaves = this.app.workspace.getLeavesOfType("markdown");
     for (const leaf of leaves) {
@@ -135,6 +80,4 @@ class SafeLearnPlugin extends Plugin {
       return `<div class="side-by-side">${columns}</div>`;
     });
   }
-}
-
-module.exports = SafeLearnPlugin;
+};

styles.css

@@ -1,8 +1,45 @@
-:root {
-  --fragment-bg: #f3e6ff;
-  --fragment-fg: #4b0082;
-  --fragment-border: #4b0082;
+.fragment-highlight {
+  background-color: var(--fragment-bg);
+  color: var(--fragment-fg);
+  border: 2px solid var(--fragment-border);
+  border-radius: 8px;
+  padding: 2px 6px;
+  margin: 1px;
+  display: inline-block;
+  font-weight: 500;
+}
+.fragment-highlight::before {
+  content: "🔀 ";
+  opacity: 0.6;
+}
+
+.permission-block {
+  background-color: var(--permission-bg, #eef7ff);
+  border-left: 4px solid var(--permission-border, #3399ff);
+  padding: 4px 8px;
+  margin: 8px 0;
+}
+.permission-block .perm-label,
+.permission-block .perm-end {
+  font-family: monospace;
+  font-size: 0.8em;
+  background: #ddeeff;
+  color: #225577;
+  padding: 2px 4px;
+  border-radius: 4px;
+  display: inline-block;
+  margin-bottom: 4px;
+}
 
-  --permission-bg: #eef7ff;
-  --permission-border: #3399ff;
+.side-by-side {
+  display: flex;
+  gap: 20px;
+  margin: 1em 0;
+  border: 1px dashed #bbb;
+  padding: 8px;
+}
+.side-by-side > div {
+  flex: 1;
+  padding: 0 10px;
+  border-left: 2px dashed #ccc;
 }