update

Author: guFalcon

main.ts

@@ -16,36 +16,50 @@ export default class SafeLearnPlugin extends Plugin {
 function cleanPreview(el: HTMLElement) {
  el.querySelectorAll("*").forEach((node) => {
  if (!(node instanceof HTMLElement)) return;
+
  const text = node.textContent?.trim();
  if (!text) return;
 
+ // Check for @@@ blocks, ##fragment, and ##side-by-side blocks
  if (
  /^ *@{3} *$/.test(text) ||
- /^ *@{3} +([^\s,]+([ ,]+[^\s,]+)*)$/.test(text)
+ /^ *@{3} +([^\s,]+([ ,]+[^\s,]+)*)$/.test(text) ||
+ /^##fragment$/.test(text) ||
+ /^##(side-by-side-(start|end)|separator)$/.test(text)
  ) {
- node.classList.add("safelearn-hidden");
- return;
- }
-
- if (/^##fragment$/.test(text)) {
- node.classList.add("safelearn-hidden");
+ node.addClass("safelearn-hidden");
  return;
  }
 
- if (/^##(side-by-side-(start|end)|separator)$/.test(text)) {
- node.classList.add("safelearn-hidden");
- return;
- }
+ // Remove @@@ blocks, ##fragment, and ##side-by-side blocks from text nodes
+ node.childNodes.forEach(child => {
+ if (child.nodeType === Node.TEXT_NODE) {
+ let changed = false;
+ let newText = child.textContent ?? "";
+
+ const replacePatterns: RegExp[] = [
+ /@@@(?: +[^\s,]+([ ,]+[^\s,]+)*)?/g,
+ /##fragment(?![\w-])/gi,
+ /##(side-by-side-(start|end)|separator)/gi
+ ];
+
+ for (const pattern of replacePatterns) {
+ if (pattern.test(newText)) {
+ newText = newText.replace(pattern, "");
+ changed = true;
+ }
+ }
 
- node.innerHTML = node.innerHTML
- .replace(/(##fragment)(?![\w-])/gi, '<span class="safelearn-hidden">$1</span>')
- .replace(/@@@(?: +[^\s,]+([ ,]+[^\s,]+)*)?/g, '<span class="safelearn-hidden">$&</span>')
- .replace(/##(side-by-side-(start|end)|separator)/g, '<span class="safelearn-hidden">$&</span>');
+ if (changed) {
+ const span = document.createElement("span");
+ span.textContent = newText;
+ child.replaceWith(span);
+ }
+ }
+ });
  });
 }
 
-
-
 const safelearnHighlighter = ViewPlugin.fromClass(class {
  decorations;
 
@@ -76,10 +90,17 @@ const safelearnHighlighter = ViewPlugin.fromClass(class {
  const text = line.text.trim();
 
  // === ##fragment ===
- const fragIndex = line.text.indexOf("##fragment");
+ let fragIndex = line.text.indexOf("##fragment ");
+ if (fragIndex === -1) {
+ fragIndex = line.text.indexOf("##fragment");
+ // only if the line ends with this "##fragment" without any trailing text
+ if (fragIndex !== -1 && line.text.slice(fragIndex + "##fragment".length).trim() !== "") {
+ fragIndex = -1;
+ }
+ }
  if (fragIndex !== -1) {
  const from = line.from + fragIndex;
- const to = from + "##fragment".length;
+ const to = from + "##fragment ".length;
  decorations.push({
  from,
  to,

manifest.json

@@ -1,9 +1,9 @@
 {
- "id": "safelearn-formatter",
- "name": "SafeLearn Formatter",
+ "id": "safelearn-plugin",
+ "name": "SafeLearn Plugin",
  "version": "1.0.1",
  "minAppVersion": "1.5.7",
- "description": "Offers visual aids for tags specific for SafeLearn (an open-source project) such as ##fragment, permission blocks, and side-by-side layouts for Reveal.js.",
+ "description": "This plugin offers visual aids for SafeLearn-specific tags such as ##fragment, permission blocks, and side-by-side layouts for Reveal.js.",
  "author": "UnterrainerInformatik",
  "authorUrl": "https://github.com/UnterrainerInformatik",
  "repo": "UnterrainerInformatik/safeLearn-Obsidian-plugin",

styles.css

@@ -61,12 +61,12 @@
 
 /* Light Theme */
 .theme-light {
- --fragment-bg: #eaf7f9;
- --fragment-fg: #006164a7;
- --fragment-border: #91bcc2;
+ --fragment-bg: #f59c2e25;
+ --fragment-fg: #51320c;
+ --fragment-border: #f59c2e8e;
 
- --permission-bg: #ede2e2;
- --permission-border: #db9a8f;
+ --permission-bg: #ede2e218;
+ --permission-border: #db9a8fdc;
  --permission-label-bg: #f9e2e2;
  --permission-label-fg: #225577;
 
@@ -78,17 +78,17 @@
 
 /* Dark Theme */
 .theme-dark {
- --fragment-bg: #004d4041;
- --fragment-fg: #5c7574;
- --fragment-border: #004d40;
+ --fragment-bg: #f59c2e13;
+ --fragment-fg: #6a5c4b;
+ --fragment-border: #f59c2e63;
 
- --permission-bg: #5739344b;
+ --permission-bg: #290a0510;
  --permission-border: #290a05;
  --permission-label-bg: #573934;
  --permission-label-fg: #b2dfdb;
 
  --side-separator-fg: #444466;
- --side-block-bg: #2a2a33;
+ --side-block-bg: #2a2a3337;
  --side-block-border: #444466;
  --side-separator-color: #666;
 }

tsconfig.json

@@ -8,8 +8,7 @@
  "esModuleInterop": true,
  "resolveJsonModule": true,
  "skipLibCheck": true,
- "types": [],
- "typeRoots": ["types"]
+ "types": []
  },
  "include": ["./**/*.ts"]
 }