Update Core.js

Core.js

@@ -1,5 +1,5 @@
 /**
- * SimonUp Core Compiler (Core.js) - Version 1.2.1
+ * SimonUp Core Compiler (Core.js) - Version 1.2b.005
  * Eine moderne, fluss- und blockorientierte Auszeichnungssprache.
  */
 class SimonUp {
@@ -7,22 +7,18 @@ class SimonUp {
         this.plugins = [];
         this.headings = [];
         this.counters = [0, 0, 0, 0, 0, 0];
+        this.currentFootnotes = []; // Sammelt Fußnoten für den aktuellen Abschnitt
     }
 
-    /**
-     * Registriert eine Erweiterung (Plugin)
-     */
     use(plugin) {
         this.plugins.push(plugin);
         return this;
     }
 
-    /**
-     * Hauptfunktion: Wandelt SimonUp-Text (.up) in valides HTML um
-     */
     parse(text) {
         this.headings = [];
         this.counters = [0, 0, 0, 0, 0, 0];
+        this.currentFootnotes = [];
 
         let html = text;
 
@@ -34,10 +30,10 @@ class SimonUp {
             }
         }
 
-        // Phase 1: Blöcke und Inline-Strukturen parsen (sammelt alle Überschriften)
+        // Phase 1: Strukturelle Blöcke isolieren
         html = this._parseBlocks(html);
         
-        // Phase 2: Das Inhaltsverzeichnis nachträglich in die vorbereitete Box einsetzen
+        // Phase 2: Das Inhaltsverzeichnis nachträglich injizieren
         html = this._injectTOC(html);
 
         if (this.plugins && this.plugins.length > 0) {
@@ -51,9 +47,6 @@ class SimonUp {
         return html;
     }
 
-    /**
-     * INTERN: Verarbeitet strukturelle Blöcke und freie Strukturen zeilenweise
-     */
     _parseBlocks(text) {
         const lines = text.replace(/\r\n/g, '\n').split('\n');
         let result = [];
@@ -64,8 +57,24 @@ class SimonUp {
 
         for (let i = 0; i < lines.length; i++) {
             let line = lines[i];
+            let trimmed = line.trim();
 
-            if (!inBlock && line.startsWith('&') && line.trim().length > 1) {
+            // Block-Ende erkennen mit /&
+            if (inBlock && trimmed.replace(/\u00A0/g, ' ') === '/&') {
+                result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
+                inBlock = false;
+                blockType = null;
+                blockMeta = "";
+                continue;
+            }
+
+            if (inBlock) {
+                blockBuffer.push(line);
+                continue;
+            }
+
+            // Block-Start erkennen
+            if (line.startsWith('&') && trimmed.length > 1) {
                 inBlock = true;
                 const fullHeader = line.substring(1).trim();
                 const spaceIndex = fullHeader.indexOf(' ');
@@ -81,40 +90,38 @@ class SimonUp {
                 continue;
             }
 
-            if (inBlock && line.trim().replace(/\u00A0/g, ' ') === '&') {
-                result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
-                inBlock = false;
-                blockType = null;
-                blockMeta = "";
-                continue;
+            // Überschriften abfangen, um vorherige Fußnoten zu flushen
+            if (/^([1-6])(x|-)?#\s*/.test(trimmed)) {
+                let footnoteBlock = this._flushFootnotes();
+                if (footnoteBlock) result.push(footnoteBlock);
             }
 
-            if (inBlock) {
-                blockBuffer.push(line);
+            // Freie Linien und Listen-Strukturen
+            if (trimmed === '___') {
+                result.push('<hr>');
+            } else if (trimmed.startsWith('- ')) {
+                let insideUl = this._parseInline(line.replace(/^\s*-\s+/, ''));
+                result.push(`<ul-item>${insideUl}</ul-item>`);
+            } else if (/^\d+\.\s+/.test(trimmed)) {
+                let cleanLine = line.replace(/^\s*\d+\.\s+/, '');
+                let insideOl = this._parseInline(cleanLine);
+                result.push(`<ol-item>${insideOl}</ol-item>`);
             } else {
-                let trimmed = line.trim();
-                
-                if (trimmed === '___') {
-                    result.push('<hr>');
-                } else if (trimmed.startsWith('- ')) {
-                    let insideUl = this._parseInline(line.replace(/^\s*-\s+/, ''));
-                    result.push(`<ul-item>${insideUl}</ul-item>`);
-                } else if (/^\d+\.\s+/.test(trimmed)) {
-                    let cleanLine = line.replace(/^\s*\d+\.\s+/, '');
-                    let insideOl = this._parseInline(cleanLine);
-                    result.push(`<ol-item>${insideOl}</ol-item>`);
-                } else {
-                    result.push(this._parseInline(line));
-                }
+                result.push(this._parseInline(line));
             }
         }
 
+        if (inBlock && blockBuffer.length > 0) {
+            result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
+        }
+
+        // Letzte Fußnoten am Ende des Dokuments anfügen
+        let finalFootnotes = this._flushFootnotes();
+        if (finalFootnotes) result.push(finalFootnotes);
+
         return this._processParagraphsAndLists(result);
     }
 
-    /**
-     * INTERN: Erzeugt das HTML für einen geschlossenen Block
-     */
     _renderBlock(type, meta, lines) {
         const content = lines.join('\n');
         let self = this;
@@ -165,52 +172,47 @@ class SimonUp {
         }
     }
 
-    /**
-     * INTERN: Hilfsfunktion zum Rendern von Multi-line-Tabellen und Galerien
-     */
     _renderTable(meta, lines) {
         let tableHtml = '<table>\n';
-        let currentCells = [];
-        let cellBuffer = [];
-        let self = this;
-
-        for (let i = 0; i < lines.length; i++) {
-            let line = lines[i];
-            let parts = line.split('|');
-            for (let j = 0; j < parts.length; j++) {
-                let part = parts[j];
-                
-                if (j === parts.length - 1) {
-                    if (part.trim() !== '') {
-                        cellBuffer.push(part);
-                    }
-                    if (line.endsWith('|') && cellBuffer.length > 0) {
-                        currentCells.push(cellBuffer.join('\n'));
-                        cellBuffer = [];
-                    }
-                } else {
-                    cellBuffer.push(part);
-                    currentCells.push(cellBuffer.join('\n'));
-                    cellBuffer = [];
-                }
-            }
-
-            if (line.endsWith('|') && currentCells.length > 0) {
-                let rowContent = currentCells.map(function(c) {
-                    let parsedCell = self._parseInline(c.trim()).replace(/\n/g, '<br>');
-                    return `<td>${parsedCell}</td>`;
-                }).join('\n');
-                tableHtml += `<tr>\n${rowContent}\n</tr>\n`;
-                currentCells = [];
+        let colCount = 0;
+        if (meta) {
+            let metaParts = meta.trim().split(/\s+/);
+            if (metaParts.length === 1 && metaParts[0].endsWith('x')) {
+                colCount = parseInt(metaParts[0]);
+            } else {
+                colCount = metaParts.length;
             }
         }
-        tableHtml += '</table>';
+
+        let processedLines = lines
+            .map(l => l.trim())
+            .filter(l => l.length > 0)
+            .map(l => {
+                if (l.startsWith('|')) l = l.substring(1);
+                if (l.endsWith('|')) l = l.slice(0, -1);
+                return l;
+            });
+
+        let fullContent = processedLines.join('|');
+        let rawCells = fullContent.split('|');
+        let currentConfiguredCols = colCount || 1; 
+        let cellIndex = 0;
+
+        tableHtml += '<tr>\n';
+        for (let i = 0; i < rawCells.length; i++) {
+            let cellText = rawCells[i].trim();
+            let parsedCell = this._parseInline(cellText);
+            tableHtml += `  <td>${parsedCell}</td>\n`;
+            cellIndex++;
+            if (cellIndex === currentConfiguredCols && i < rawCells.length - 1) {
+                tableHtml += '</tr>\n<tr>\n';
+                cellIndex = 0;
+            }
+        }
+        tableHtml += '</tr>\n</table>';
         return tableHtml;
     }
 
-    /**
-     * INTERN: Verarbeitet Fluss-Formatierungen (Inline) mittels V1.2-RegEx
-     */
     _parseInline(text) {
         if (!text) return '';
         let html = text;
@@ -221,17 +223,55 @@ class SimonUp {
             return `__ESCAPED_CHAR_${escapes.length - 1}__`;
         });
 
-        html = html.replace(/\/\/(( \s|$))/g, '$1');
+        // Überschriften parsen
+        html = html.replace(/^([1-6])x#\s*(.*)/gm, (match, level, titleAndRest) => {
+            let { title, rest } = this._extractHeadingRest(titleAndRest);
+            const numStr = this._getAutoNumber(parseInt(level));
+            const fullTitle = `${numStr} ${title}`;
+            const id = this._slugify(fullTitle);
+            this.headings.push({ level: parseInt(level), text: title, id: id }); 
+            return `<h${level} id="${id}">${fullTitle}</h${level}>${rest}`;
+        });
 
-        // 1. ZUERST: Die kritischen Doppel-Sterne (fett) verarbeiten
-        html = html.replace(/\*\*(.+?)\\\*\*/g, '<strong>$1</strong>');
-        html = html.replace(/\*\*(.+?)(?=\*\*|$)/g, '<strong>$1</strong>');
+        html = html.replace(/^([1-6])-#\s*(.*)/gm, (match, level, titleAndRest) => {
+            let { title, rest } = this._extractHeadingRest(titleAndRest);
+            return `<h${level}>${title}</h${level}>${rest}`;
+        });
 
-        // 2. DANACH: Das einzelne Sternchen (medium) separat behandeln, damit es keine Tags beschädigt
-        html = html.replace(/\*(.+?)\\\*/g, '<span style="font-weight: 500;">$1</span>');
-        html = html.replace(/\*(.+?)(?=\*|$)/g, '<span style="font-weight: 500;">$1</span>');
+        html = html.replace(/^([1-6])#\s*(.*)/gm, (match, level, titleAndRest) => {
+            let { title, rest } = this._extractHeadingRest(titleAndRest);
+            const id = this._slugify(title);
+            this.headings.push({ level: parseInt(level), text: title, id: id });
+            return `<h${level} id="${id}">${title}</h${level}>${rest}`;
+        });
+
+        // Medien & Links
+        html = html.replace(/!\[([^\]]+)\s+w:(\d+)\]\(([^)]+)\)/g, '<img src="$3" alt="$1" style="width: $2px; height: auto;">');
+        html = html.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+        html = html.replace(/\[([^\]]+)\]\{([^}]+)\}/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+
+        const replaceOutsideTags = (regex, replacement) => {
+            const masterRegex = new RegExp(/(<[^>]+>)/g.source + '|' + regex.source, 'g');
+            html = html.replace(masterRegex, (match, p1) => {
+                if (p1) return p1; 
+                const innerMatch = regex.exec(match);
+                if (innerMatch) {
+                    if (typeof replacement === 'function') return replacement(...innerMatch);
+                    let res = replacement;
+                    for (let idx = 1; idx < innerMatch.length; idx++) {
+                        res = res.replace(new RegExp('\\$' + idx, 'g'), innerMatch[idx]);
+                    }
+                    return res;
+                }
+                return match;
+            });
+        };
+
+        // Exakte Trennung für Fett und Medium (Verhindert das Überschneiden)
+        replaceOutsideTags(/\*\*([^*]+?)(?:\/\*\*|\/|\*\*|$)/, '<strong>$1</strong>');
+        replaceOutsideTags(/\*([^*]+?)(?:\/\*|\/|\*|$)/, '<span style="font-weight: 500;">$1</span>');
 
-        // 3. Restliche Standard Text-Inline-Rules parsen
         const inlineRules = [
             { tag: 'em', symbol: '%' },
             { tag: 'u', symbol: '_' },
@@ -245,68 +285,27 @@ class SimonUp {
         for (let k = 0; k < inlineRules.length; k++) {
             let rule = inlineRules[k];
             let tagSimple = rule.tag.split(' ')[0];
-            
-            let regex = new RegExp(rule.symbol + '(.+?)\\\\' + rule.symbol, 'g');
-            html = html.replace(regex, `<${rule.tag}>$1</${tagSimple}>`);
-
-            let resetRegex = new RegExp(rule.symbol + '(.+?)(?=' + rule.symbol + '|$)', 'g');
-            html = html.replace(resetRegex, `<${rule.tag}>$1</${tagSimple}>`);
+            replaceOutsideTags(new RegExp(rule.symbol + '(.+?)(?:\\/' + rule.symbol + '|\\/|' + rule.symbol + '|$)'), `<${rule.tag}>$1</${tagSimple}>`);
         }
 
-        // 4. Überschriften generieren
+        // Fußnoten abfangen und registrieren
         let self = this;
-        const processHeading = function(pattern, callback) {
-            let match;
-            while ((match = pattern.exec(html)) !== null) {
-                const fullMatch = match[0];
-                const level = parseInt(match[1]);
-                const titleAndRest = match[2];
-                
-                let title = titleAndRest;
-                let rest = "";
-                const closeIdx = titleAndRest.indexOf('/#');
-                if (closeIdx !== -1) {
-                    title = titleAndRest.substring(0, closeIdx);
-                    rest = titleAndRest.substring(closeIdx + 2);
-                }
-
-                const result = callback(level, title.trim(), rest);
-                html = html.substring(0, match.index) + result + html.substring(match.index + fullMatch.length);
-            }
-        };
-
-        processHeading(/^([1-6])x#\s*(.*)/g, function(level, title, rest) {
-            const numStr = self._getAutoNumber(level);
-            const fullTitle = `${numStr} ${title}`;
-            const id = self._slugify(fullTitle);
-            self.headings.push({ level: level, text: title, id: id }); 
-            return `<h${level} id="${id}">${fullTitle}</h${level}>${rest}`;
+        html = html.replace(/\^x\[([^\]]+)\]\^x/g, function(m, content) {
+            self.currentFootnotes.push(content);
+            const num = self.currentFootnotes.length;
+            return `<sup class="footnote-auto" title="${content}">[${num}]</sup>`;
         }); 
 
-        processHeading(/^([1-6])-#\s*(.*)/g, function(level, title, rest) {
-            return `<h${level}>${title}</h${level}>${rest}`;
+        html = html.replace(/\^(\d+)\[([^\]]+)\]\^x/g, function(m, num, content) {
+            self.currentFootnotes.push(`${num}: ${content}`);
+            return `<sup class="footnote-manual" title="${content}">[${num}]</sup>`;
         });
 
-        processHeading(/^([1-6])#\s*(.*)/g, function(level, title, rest) {
-            const id = self._slugify(title);
-            self.headings.push({ level: level, text: title, id: id });
-            return `<h${level} id="${id}">${title}</h${level}>${rest}`;
-        });
-
-        // 5. RESTLICHE STRUKTUREN (Ausrichtungen, Links, Medien)
         const alignMap = { 'l': 'left', 'r': 'right', 'c': 'center', 'j': 'justify' };
         html = html.replace(/>([lrcj])\s+(.+?)\s*\/>/g, function(m, dir, content) {
             return `<div style="text-align: ${alignMap[dir]};">${content}</div>`;
         });
 
-        html = html.replace(/!\[([^\]]+)\s+w:(\d+)\]\(([^)]+)\)/g, '<img src="$3" alt="$1" style="width: $2px; height: auto;">');
-        html = html.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
-        html = html.replace(/\[([^\]]+)\]\{([^}]+)\}/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
-
-        html = html.replace(/\^x\[([^\]]+)\]\^x/g, '<span class="footnote-auto" title="$1">[*]</span>'); 
-        html = html.replace(/\^(\d+)\[([^\]]+)\]\^x/g, '<sup class="footnote-manual" title="$2">[$1]</sup>');
-
         html = html.replace(/__ESCAPED_CHAR_(\d+)__/g, function(match, idx) {
             return escapes[idx];
         });
@@ -314,9 +313,29 @@ class SimonUp {
         return html;
     }
 
-    /**
-     * INTERN: Errechnet die nächste fortlaufende Kapitelnummer
-     */
+    // Hilfsfunktion: Gibt gesammelte Fußnoten als HTML-Block aus und leert den Speicher
+    _flushFootnotes() {
+        if (this.currentFootnotes.length === 0) return null;
+        let html = '<div class="simonup-footnotes" style="margin-top: 10px; margin-bottom: 20px; font-size: 0.85em; color: #555; border-top: 1px dashed #ddd; padding-top: 5px;">\n';
+        for (let i = 0; i < this.currentFootnotes.length; i++) {
+            html += `<div class="footnote-entry">${this.currentFootnotes[i]}</div>\n`;
+        }
+        html += '</div>';
+        this.currentFootnotes = []; // Zurücksetzen fürs nächste Kapitel
+        return html;
+    }
+
+    _extractHeadingRest(text) {
+        let title = text;
+        let rest = "";
+        const closeIdx = text.indexOf('/#');
+        if (closeIdx !== -1) {
+            title = text.substring(0, closeIdx);
+            rest = text.substring(closeIdx + 2);
+        }
+        return { title: title.trim(), rest: rest };
+    }
+
     _getAutoNumber(level) {
         let idx = level - 1;
         this.counters[idx]++;
@@ -327,28 +346,16 @@ class SimonUp {
         return activeParts.join('.') + '.';
     }
 
-    /**
-     * INTERN: Macht aus Text eine URL-konforme ID
-     */
     _slugify(text) {
         return text.toLowerCase()
             .replace(/[^a-z0-9\s-]/g, '') 
             .replace(/\s+/g, '-');        
     }
 
-    /**
-     * INTERN: Erzeugt die fertige HTML-Liste des TOC und injiziert sie in den Block
-     */
     _injectTOC(html) {
         const placeholder = 'STRENG_GEHEIMER_TOC_PLATZHALTER';
-         
-        if (!html.includes(placeholder)) {
-            return html;
-        }
-         
-        if (this.headings.length === 0) {
-            return html.replace(placeholder, '');
-        }
+        if (!html.includes(placeholder)) return html;
+        if (this.headings.length === 0) return html.replace(placeholder, '');
      
         let tocListHtml = '<div class="simonup-toc">\n<ul>\n';
         let currentLevel = 1;
@@ -375,9 +382,6 @@ class SimonUp {
         return html.replace(placeholder, tocListHtml);
     }
 
-    /**
-     * INTERN: Fasst freie Listen-Elemente zusammen und generiert Absätze (p)
-     */
     _processParagraphsAndLists(elements) {
         let processed = [];
         let paragraphBuffer = [];
@@ -386,8 +390,8 @@ class SimonUp {
 
         function flushList() {
             if (listBuffer.length > 0) {
-                let items = listBuffer.map(function(item) { return "  <li>" + item + "</li>"; }).join("\n");
-                processed.push("<" + currentListType + ">\n" + items + "\n</" + currentListType + ">");
+                let items = listBuffer.map(function(item) { return "  <li style='margin-bottom: 4px;'>" + item + "</li>"; }).join("\n");
+                processed.push("<" + currentListType + " style='margin-bottom: 12px; margin-left: 20px;'>\n" + items + "\n</" + currentListType + ">");
                 listBuffer = [];
                 currentListType = null;
             }
@@ -396,7 +400,7 @@ class SimonUp {
         function flushParagraph() {
             if (paragraphBuffer.length > 0) {
                 let pContent = paragraphBuffer.join("<br>");
-                processed.push("<p>" + pContent + "</p>");
+                processed.push("<p style='margin-bottom: 12px;'>" + pContent + "</p>");
                 paragraphBuffer = [];
             }
         }
@@ -418,7 +422,7 @@ class SimonUp {
                 }
                 currentListType = type;
                 listBuffer.push(content);
-            } else if (element.startsWith("<") && !/^(<a>|<strong>|<em>|<u>|<del>|<mark>|<sup>|<sub>|<span>|<code>|<img>|<h\d)/i.test(element)) {
+            } else if (element.startsWith("<") && !/^(<a>|<strong>|<em>|<u>|<del>|<mark>|<sup>|<sub>|<span>|<code>|<img>|<h[1-6]|<table>|<thead|<tbody|<tr|<td)/i.test(element)) {
                 flushList();
                 flushParagraph();
                 processed.push(element);

index.html

@@ -152,13 +152,13 @@
             <div class="panel-header">SimonUp Input (.up)</div>
             <textarea id="editor" placeholder="Tippe dein SimonUp hier..." spellcheck="false">&toc Inhaltsverzeichnis
 Die Spielwiese läuft! Hier ist die Übersicht deiner Kapitel.
-&
+/&
 
 1x# Willkommen bei SimonUp!
-Das hier ist der Live-Editor für die neue Sprache SimonUp. Wenn du diesen Text änderst, siehst du rechts sofort das Ergebnis.
+Das hier ist der Live-Editor für die neue Sprache SimonUp^1[Auch wenn alles noch sehr aplpha ist]^. Wenn du diesen Text änderst, siehst du rechts sofort das Ergebnis.
 
 2x# Coole Fluss-Formatierungen
-Du kannst Text problemlos **fett/** oder *medium/* machen, ihn %kursiv setzen/% oder sogar =wichtige Dinge markieren/=, ohne den Schreibfluss zu unterbrechen. Alles mitten im Satz!
+Du kannst Text problemlos **fett/** oder *medium/* machen, ihn %kursiv setzen/% oder sogar =wichtige Dinge markieren/=, ohne den _Schreibfluss/_ zu ~brechen/~ unterbrechen. Alles mitten im Satz!
 
 2x# Intelligente Blöcke /# (Mit einer Anmerkung im Titel)
 Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
@@ -166,8 +166,17 @@ Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
 &t 3x
 **Name** | **Beruf** | **Status** |
 Steve Jobs | Visionär | Legende |
-Simon | Architekt | Baut SimonUp |
-&
+Simon | Doulos | Baut SimonUp |
+/&
+
+2x# Listige Listen
+Natürlich sind auch Listen möglich:
+
+- Ein Punkt
+- Und noch ein Punkt
+
+1. Ist das Punkt 2?
+2. Nein, das war Punkt 1.
 
 Viel Spaß beim Testen!</textarea>
         </div>