add reveal.js-fragment support

Author: guFalcon

docs-obsidian.md

@@ -72,3 +72,11 @@ Those work on normal image-links, like the standard DM ones and the shortcut-lin
 # And as short-link
 ![[my-img.png|120]]
 ```
+## Fragments in Reveal.js
+You can use fragments.
+Fragment lines have `#fragment` in the line above them.
+For blocks you may also have a `#fragment-start` followed by a `#fragment-end`.
+It is important to note that those flags must be on their own line.
+
+This then will become a fragment in the presentation-view.
+It will be invisible in the normal view.

md/test-exam-practice-question.md

@@ -30,9 +30,9 @@ class question
 ```bash
 class question
 ```
-* What development tools will you be using?
-* Make a plan.
-* Explain the steps to get to a finished new product.
+- What development tools will you be using?
+- Make a plan.
+- Explain the steps to get to a finished new product.
 @@@ #answer
 ## Answer
 ```plantuml
@@ -41,7 +41,7 @@ class answer
 ```bash
 class answer
 ```
-* Java and Javascript.
-* Just do it.
-* Do it. See, you're done.
+- Java and Javascript.
+- Just do it.
+- Do it. See, you're done.
 @@@

md/test-md-file.md

@@ -93,7 +93,6 @@ You may add images...
 ### Global Images (URL)
 Add them using an absolute image-url like so:
 `https://raw.githubusercontent.com/UnterrainerInformatik/java-http-server/master/docs/standard-request-response-process.png`
-
 ![global-image|100x300](https://raw.githubusercontent.com/UnterrainerInformatik/java-http-server/master/docs/standard-request-response-process.png) 
 
 ### Obsidian Link Images
@@ -109,4 +108,70 @@ Example:
 ### PDF
 ![[Test.pdf]]
 ### Docx
-![[Test.docx]]
+![[Test.docx]]
+## Lists And Fragments
+### Lists
+- one
+- two
+- three
+
++ one
++ two
++ three
+
+* one
+* two
+* three
+
+1. one
+2. two
+3. three
+### Fragments
+#fragment
+Fragmented Text.
+#fragment 
+- one
+#fragment 
+- two
+ #fragment
+![global-image|100x300](https://raw.githubusercontent.com/UnterrainerInformatik/java-http-server/master/docs/standard-request-response-process.png) 
+
+#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
+
+#fragment 
+1. one
+#fragment 
+2. two
+#fragment 
+3. three
+
+#fragment 
+Done.

obsidian.js

@@ -25,6 +25,15 @@ const internalSubstitutions = {
     string: "@#@##@@--@code@--@@##@#@",
     regexp: /@#@##@@--@code@--@@##@#@/gms,
   },
+  fragment_single: {
+    string: "<!-- __fragment-single__ -->"
+  },
+  fragment_start: {
+    string: "<!-- __fragment-start__ -->"
+  },
+  fragment_end: {
+    string: "<!-- __fragment-end__ -->"
+  }
 };
 let codeList = [];
 let openNavTreeScript = "";
@@ -369,6 +378,7 @@ export async function preParse(md, req) {
   r = preMarkCode(r);
   r = preReplaceObsidianFileLinks(r, req);
   r = preMarkCallouts(r);
+  r = preprocessFragments(r)
   r = unmarkCode(r);
   return r;
 }
@@ -447,6 +457,50 @@ function getFollowingQuotedLines(md, index) {
   return { trimmedLines: lines.slice(0, i).join("\n"), originalLength };
 }
 
+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>`;
+    });
+}
+
+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>`
+    );
+
+    return `<div class="fragment">\n${fixed}\n</div>\n\n`;
+  }
+);
+
+
+  // Inline fragment: list item
+  html = html.replace(
+    /<li[^>]*>\s*(?:<p>)?%%LI_FRAGMENT%%\s*(.*?)(?:<\/p>)?\s*<\/li>/g,
+    (_, content) => `<li class="fragment">${content.trim()}</li>`
+  );
+
+  return html;
+}
+
 function preReplaceObsidianFileLinks(html, req) {
   const regex = /(?<!\!)\[\[([^\]\n]+)\]\]/g;
 
@@ -472,8 +526,8 @@ function preReplaceObsidianFileLinks(html, req) {
     }
     const lastPartOfFileName = fileName.split("/").pop();
     const filePath = mdFilesMap[lastPartOfFileName];
-    console.log(fileName)
-    console.log(mdFilesMap)
+    // console.log(fileName)
+    // console.log(mdFilesMap)
     if (filePath) {
       let f = filePath[0];
       if (filePath.length > 1) {
@@ -543,6 +597,7 @@ export function manipulateHtml(html, req) {
   r = replacePreMarkCallouts(r);
   r = replaceObsidianImageLinks(r, req);
   r = replaceObsidianImageAltResizeValues(r);
+  r = postprocessFragments(r)
   r = makeContentMap(r);
   return r;
 }