update

Author: guFalcon

docs-obsidian.md

@@ -79,15 +79,22 @@ Fragments are parts of you page that pop up one after another, step by step, whe
 You may mark single lines as Fragments. Those lines are denoted by having a `#fragment` in the line above them.
 A single line is defined as from the start of a line to the next `newline`, so that may as well span more than a single line when line-breaks are inserted by the browser in order to fit that single line on the screen.
 #### Single Fragment Example
-![[Pasted image 20250523183945.png]]
-### Fragment Blocks
-For blocks you may also have a `#fragment-start` followed by a `#fragment-end`.
-Everything between those tags will be treated as a fragment.
-That allows you to fade-in more than one line at a time.
-
-It is important to note that all those flags must be on their own line.
-
-This then will become a fragment in the presentation-view.
-All of this will be completely invisible in the normal view.
-#### Fragment Block Example
-![[Pasted image 20250523184030.png]]
+```bash
+This text displays already.
+##fragment
+Fragmented Text comes in after that.
+- ##fragment one
+- ##fragment two
+```
+Another example that fades in two blocks one after another would look like this:
+```bash
+This text is already on the page.
+##fragment
+- Then this
+- fades in
+##fragment
+- and then
+- these three
+- lines
+```
+So you may see the `##fragment` tag as some kind of a `stop here and wait for me to press space` tag.

md/test-md-file.md

@@ -115,63 +115,37 @@ Example:
 - two
 - three
 
-+ one
-+ two
-+ three
+>+ one
+>+ two
+>+ three
 
 * one
 * two
 * three
 
-1. one
-2. two
-3. three
+>1. one
+>2. two
+>3. three
 ### Fragments
-#fragment
+##fragment
 Fragmented Text.
-#fragment 
+##fragment 
 - one
-#fragment 
-- two
- #fragment
+- ##fragment two
 ![global-image|100x300](https://raw.githubusercontent.com/UnterrainerInformatik/java-http-server/master/docs/standard-request-response-process.png) 
 
-#fragment 
+##fragment 
 another text
 
-#fragment-start
-- Fragment 1
-- Fragment 2
-- Fragment 3
-#fragment-end
-
-#fragment 
-- one
-#fragment 
-- two
-#fragment 
-- three
-
-#fragment 
-+ one
-#fragment 
-+ two
-#fragment 
-+ three
-
-#fragment 
-* one
-#fragment 
-* two
-#fragment 
-* three
+## Second Fragment Test
+Text
+##fragment 
+>- one ##fragment 
+>- two ##fragment 
+>- three ##fragment 
 
-#fragment 
-1. one
-#fragment 
-2. two
-#fragment 
-3. three
+>+ one ##fragment 
+>+ two ##fragment 
+>+ three ##fragment
 
-#fragment 
 Done.

obsidian.js

@@ -26,13 +26,7 @@ const internalSubstitutions = {
     regexp: /@#@##@@--@code@--@@##@#@/gms,
   },
   fragment_single: {
-    string: "<!-- __fragment-single__ -->"
-  },
-  fragment_start: {
-    string: "<!-- __fragment-start__ -->"
-  },
-  fragment_end: {
-    string: "<!-- __fragment-end__ -->"
+    string: "<!-- __fragment-marker__ -->"
   }
 };
 let codeList = [];
@@ -458,46 +452,63 @@ function getFollowingQuotedLines(md, index) {
 }
 
 function preprocessFragments(md) {
-  return md
-    .replace(/^[ \t]*#fragment-start[ \t]*$/gm, internalSubstitutions.fragment_start.string)
-    .replace(/^[ \t]*#fragment-end[ \t]*$/gm, internalSubstitutions.fragment_end.string)
-
-    .replace(/^[ \t]*#fragment[ \t]*\n([^\n]+)/gm, (_, nextLine) => {
-      if (/^\s*[-*+1.]\s/.test(nextLine)) {
-        return nextLine.replace(/^(\s*[-*+1.]\s*)(.+)/, (_, prefix, content) => {
-          return `${prefix}%%LI_FRAGMENT%% ${content}`;
-        });
-      }
-      return `<span class="fragment">${nextLine.trim()}</span>`;
-    });
+  const marker = internalSubstitutions.fragment_single.string;
+  const r = md.replace(/##fragment(?=\s|$)/g, marker)
+  return r;
 }
 
 function postprocessFragments(html) {
-  const { fragment_start, fragment_end } = internalSubstitutions;
-
-  // Block fragments
-  html = html.replace(
-  new RegExp(`${fragment_start.string}([\\s\\S]*?)${fragment_end.string}([\\s\\S]*?</li>)`, 'g'),
-    (fullMatch, content, trailingLi) => {
-      let fixed = (content + trailingLi).trim();
-
-      // Remove <p> inside <li>
-      fixed = fixed.replace(
-        /<li>\s*\n?\s*<p>([\s\S]*?)<\/p>\s*\n?\s*<\/li>/gm,
-        (_, inner) => `<li>${inner.trim()}</li>`
-      );
+  const { fragment_single } = internalSubstitutions;
+  const markerValue = fragment_single.string.replace(/<!--|-->/g, "").trim();
 
-      return `<div class="fragment">\n${fixed}\n</div>\n\n`;
-    }
-  );
+  const dom = new JSDOM(html);
+  const document = dom.window.document;
 
-  // Inline fragment: list item
-  html = html.replace(
-    /<li[^>]*>\s*(?:<p>)?%%LI_FRAGMENT%%\s*(.*?)(?:<\/p>)?\s*<\/li>/g,
-    (_, content) => `<li class="fragment">${content.trim()}</li>`
-  );
+  let fragmentIndex = -1;
+  let started = false;
 
-  return html;
+  function walk(node) {
+    if (!node) return;
+
+    const childNodes = Array.from(node.childNodes);
+    for (let child of childNodes) {
+      // Marker detection
+      if (child.nodeType === 8 && child.nodeValue.trim() === markerValue) {
+        fragmentIndex++;
+        started = true;
+        child.remove();
+        continue;
+      }
+
+      // Skip before first marker
+      if (!started) {
+        if (child.nodeType === 1) {
+          walk(child); // still traverse deeper
+        }
+        continue;
+      }
+
+      // Text node
+      if (child.nodeType === 3 && child.textContent.trim() !== "") {
+        const span = document.createElement("span");
+        span.classList.add("fragment");
+        span.setAttribute("data-fragment-index", fragmentIndex);
+        span.textContent = child.textContent;
+        child.replaceWith(span);
+        continue;
+      }
+
+      // Element node
+      if (child.nodeType === 1) {
+        child.classList.add("fragment");
+        child.setAttribute("data-fragment-index", fragmentIndex);
+        walk(child); // recurse
+      }
+    }
+  }
+
+  walk(document.body);
+  return document.body.innerHTML;
 }
 
 function preReplaceObsidianFileLinks(html, req) {