Compare commits
No commits in common. "c3ad5cab5fdac8715e95f191155cfc1e1c821db4" and "0b60398337e38fd2ff17937984dc17b09894931c" have entirely different histories.
c3ad5cab5f
...
0b60398337
2 changed files with 165 additions and 178 deletions
292
Core.js
292
Core.js
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* SimonUp Core Compiler (Core.js) - Version 1.2b.005
|
* SimonUp Core Compiler (Core.js) - Version 1.2.1
|
||||||
* Eine moderne, fluss- und blockorientierte Auszeichnungssprache.
|
* Eine moderne, fluss- und blockorientierte Auszeichnungssprache.
|
||||||
*/
|
*/
|
||||||
class SimonUp {
|
class SimonUp {
|
||||||
|
|
@ -7,18 +7,22 @@ class SimonUp {
|
||||||
this.plugins = [];
|
this.plugins = [];
|
||||||
this.headings = [];
|
this.headings = [];
|
||||||
this.counters = [0, 0, 0, 0, 0, 0];
|
this.counters = [0, 0, 0, 0, 0, 0];
|
||||||
this.currentFootnotes = []; // Sammelt Fußnoten für den aktuellen Abschnitt
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Registriert eine Erweiterung (Plugin)
|
||||||
|
*/
|
||||||
use(plugin) {
|
use(plugin) {
|
||||||
this.plugins.push(plugin);
|
this.plugins.push(plugin);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hauptfunktion: Wandelt SimonUp-Text (.up) in valides HTML um
|
||||||
|
*/
|
||||||
parse(text) {
|
parse(text) {
|
||||||
this.headings = [];
|
this.headings = [];
|
||||||
this.counters = [0, 0, 0, 0, 0, 0];
|
this.counters = [0, 0, 0, 0, 0, 0];
|
||||||
this.currentFootnotes = [];
|
|
||||||
|
|
||||||
let html = text;
|
let html = text;
|
||||||
|
|
||||||
|
|
@ -30,10 +34,10 @@ class SimonUp {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Phase 1: Strukturelle Blöcke isolieren
|
// Phase 1: Blöcke und Inline-Strukturen parsen (sammelt alle Überschriften)
|
||||||
html = this._parseBlocks(html);
|
html = this._parseBlocks(html);
|
||||||
|
|
||||||
// Phase 2: Das Inhaltsverzeichnis nachträglich injizieren
|
// Phase 2: Das Inhaltsverzeichnis nachträglich in die vorbereitete Box einsetzen
|
||||||
html = this._injectTOC(html);
|
html = this._injectTOC(html);
|
||||||
|
|
||||||
if (this.plugins && this.plugins.length > 0) {
|
if (this.plugins && this.plugins.length > 0) {
|
||||||
|
|
@ -47,6 +51,9 @@ class SimonUp {
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Verarbeitet strukturelle Blöcke und freie Strukturen zeilenweise
|
||||||
|
*/
|
||||||
_parseBlocks(text) {
|
_parseBlocks(text) {
|
||||||
const lines = text.replace(/\r\n/g, '\n').split('\n');
|
const lines = text.replace(/\r\n/g, '\n').split('\n');
|
||||||
let result = [];
|
let result = [];
|
||||||
|
|
@ -57,24 +64,8 @@ class SimonUp {
|
||||||
|
|
||||||
for (let i = 0; i < lines.length; i++) {
|
for (let i = 0; i < lines.length; i++) {
|
||||||
let line = lines[i];
|
let line = lines[i];
|
||||||
let trimmed = line.trim();
|
|
||||||
|
|
||||||
// Block-Ende erkennen mit /&
|
if (!inBlock && line.startsWith('&') && line.trim().length > 1) {
|
||||||
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;
|
inBlock = true;
|
||||||
const fullHeader = line.substring(1).trim();
|
const fullHeader = line.substring(1).trim();
|
||||||
const spaceIndex = fullHeader.indexOf(' ');
|
const spaceIndex = fullHeader.indexOf(' ');
|
||||||
|
|
@ -90,13 +81,19 @@ class SimonUp {
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Überschriften abfangen, um vorherige Fußnoten zu flushen
|
if (inBlock && line.trim().replace(/\u00A0/g, ' ') === '&') {
|
||||||
if (/^([1-6])(x|-)?#\s*/.test(trimmed)) {
|
result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
|
||||||
let footnoteBlock = this._flushFootnotes();
|
inBlock = false;
|
||||||
if (footnoteBlock) result.push(footnoteBlock);
|
blockType = null;
|
||||||
|
blockMeta = "";
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Freie Linien und Listen-Strukturen
|
if (inBlock) {
|
||||||
|
blockBuffer.push(line);
|
||||||
|
} else {
|
||||||
|
let trimmed = line.trim();
|
||||||
|
|
||||||
if (trimmed === '___') {
|
if (trimmed === '___') {
|
||||||
result.push('<hr>');
|
result.push('<hr>');
|
||||||
} else if (trimmed.startsWith('- ')) {
|
} else if (trimmed.startsWith('- ')) {
|
||||||
|
|
@ -110,18 +107,14 @@ class SimonUp {
|
||||||
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);
|
return this._processParagraphsAndLists(result);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Erzeugt das HTML für einen geschlossenen Block
|
||||||
|
*/
|
||||||
_renderBlock(type, meta, lines) {
|
_renderBlock(type, meta, lines) {
|
||||||
const content = lines.join('\n');
|
const content = lines.join('\n');
|
||||||
let self = this;
|
let self = this;
|
||||||
|
|
@ -172,47 +165,52 @@ class SimonUp {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Hilfsfunktion zum Rendern von Multi-line-Tabellen und Galerien
|
||||||
|
*/
|
||||||
_renderTable(meta, lines) {
|
_renderTable(meta, lines) {
|
||||||
let tableHtml = '<table>\n';
|
let tableHtml = '<table>\n';
|
||||||
let colCount = 0;
|
let currentCells = [];
|
||||||
if (meta) {
|
let cellBuffer = [];
|
||||||
let metaParts = meta.trim().split(/\s+/);
|
let self = this;
|
||||||
if (metaParts.length === 1 && metaParts[0].endsWith('x')) {
|
|
||||||
colCount = parseInt(metaParts[0]);
|
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 {
|
} else {
|
||||||
colCount = metaParts.length;
|
cellBuffer.push(part);
|
||||||
|
currentCells.push(cellBuffer.join('\n'));
|
||||||
|
cellBuffer = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let processedLines = lines
|
if (line.endsWith('|') && currentCells.length > 0) {
|
||||||
.map(l => l.trim())
|
let rowContent = currentCells.map(function(c) {
|
||||||
.filter(l => l.length > 0)
|
let parsedCell = self._parseInline(c.trim()).replace(/\n/g, '<br>');
|
||||||
.map(l => {
|
return `<td>${parsedCell}</td>`;
|
||||||
if (l.startsWith('|')) l = l.substring(1);
|
}).join('\n');
|
||||||
if (l.endsWith('|')) l = l.slice(0, -1);
|
tableHtml += `<tr>\n${rowContent}\n</tr>\n`;
|
||||||
return l;
|
currentCells = [];
|
||||||
});
|
|
||||||
|
|
||||||
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>';
|
tableHtml += '</table>';
|
||||||
return tableHtml;
|
return tableHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Verarbeitet Fluss-Formatierungen (Inline) mittels V1.2-RegEx
|
||||||
|
*/
|
||||||
_parseInline(text) {
|
_parseInline(text) {
|
||||||
if (!text) return '';
|
if (!text) return '';
|
||||||
let html = text;
|
let html = text;
|
||||||
|
|
@ -223,55 +221,17 @@ class SimonUp {
|
||||||
return `__ESCAPED_CHAR_${escapes.length - 1}__`;
|
return `__ESCAPED_CHAR_${escapes.length - 1}__`;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Überschriften parsen
|
html = html.replace(/\/\/(( \s|$))/g, '$1');
|
||||||
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}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
html = html.replace(/^([1-6])-#\s*(.*)/gm, (match, level, titleAndRest) => {
|
// 1. ZUERST: Die kritischen Doppel-Sterne (fett) verarbeiten
|
||||||
let { title, rest } = this._extractHeadingRest(titleAndRest);
|
html = html.replace(/\*\*(.+?)\\\*\*/g, '<strong>$1</strong>');
|
||||||
return `<h${level}>${title}</h${level}>${rest}`;
|
html = html.replace(/\*\*(.+?)(?=\*\*|$)/g, '<strong>$1</strong>');
|
||||||
});
|
|
||||||
|
|
||||||
html = html.replace(/^([1-6])#\s*(.*)/gm, (match, level, titleAndRest) => {
|
// 2. DANACH: Das einzelne Sternchen (medium) separat behandeln, damit es keine Tags beschädigt
|
||||||
let { title, rest } = this._extractHeadingRest(titleAndRest);
|
html = html.replace(/\*(.+?)\\\*/g, '<span style="font-weight: 500;">$1</span>');
|
||||||
const id = this._slugify(title);
|
html = html.replace(/\*(.+?)(?=\*|$)/g, '<span style="font-weight: 500;">$1</span>');
|
||||||
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 = [
|
const inlineRules = [
|
||||||
{ tag: 'em', symbol: '%' },
|
{ tag: 'em', symbol: '%' },
|
||||||
{ tag: 'u', symbol: '_' },
|
{ tag: 'u', symbol: '_' },
|
||||||
|
|
@ -285,27 +245,68 @@ class SimonUp {
|
||||||
for (let k = 0; k < inlineRules.length; k++) {
|
for (let k = 0; k < inlineRules.length; k++) {
|
||||||
let rule = inlineRules[k];
|
let rule = inlineRules[k];
|
||||||
let tagSimple = rule.tag.split(' ')[0];
|
let tagSimple = rule.tag.split(' ')[0];
|
||||||
replaceOutsideTags(new RegExp(rule.symbol + '(.+?)(?:\\/' + rule.symbol + '|\\/|' + rule.symbol + '|$)'), `<${rule.tag}>$1</${tagSimple}>`);
|
|
||||||
|
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}>`);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fußnoten abfangen und registrieren
|
// 4. Überschriften generieren
|
||||||
let self = this;
|
let self = this;
|
||||||
html = html.replace(/\^x\[([^\]]+)\]\^x/g, function(m, content) {
|
const processHeading = function(pattern, callback) {
|
||||||
self.currentFootnotes.push(content);
|
let match;
|
||||||
const num = self.currentFootnotes.length;
|
while ((match = pattern.exec(html)) !== null) {
|
||||||
return `<sup class="footnote-auto" title="${content}">[${num}]</sup>`;
|
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(/\^(\d+)\[([^\]]+)\]\^x/g, function(m, num, content) {
|
processHeading(/^([1-6])-#\s*(.*)/g, function(level, title, rest) {
|
||||||
self.currentFootnotes.push(`${num}: ${content}`);
|
return `<h${level}>${title}</h${level}>${rest}`;
|
||||||
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' };
|
const alignMap = { 'l': 'left', 'r': 'right', 'c': 'center', 'j': 'justify' };
|
||||||
html = html.replace(/>([lrcj])\s+(.+?)\s*\/>/g, function(m, dir, content) {
|
html = html.replace(/>([lrcj])\s+(.+?)\s*\/>/g, function(m, dir, content) {
|
||||||
return `<div style="text-align: ${alignMap[dir]};">${content}</div>`;
|
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) {
|
html = html.replace(/__ESCAPED_CHAR_(\d+)__/g, function(match, idx) {
|
||||||
return escapes[idx];
|
return escapes[idx];
|
||||||
});
|
});
|
||||||
|
|
@ -313,29 +314,9 @@ class SimonUp {
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hilfsfunktion: Gibt gesammelte Fußnoten als HTML-Block aus und leert den Speicher
|
/**
|
||||||
_flushFootnotes() {
|
* INTERN: Errechnet die nächste fortlaufende Kapitelnummer
|
||||||
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) {
|
_getAutoNumber(level) {
|
||||||
let idx = level - 1;
|
let idx = level - 1;
|
||||||
this.counters[idx]++;
|
this.counters[idx]++;
|
||||||
|
|
@ -346,16 +327,28 @@ class SimonUp {
|
||||||
return activeParts.join('.') + '.';
|
return activeParts.join('.') + '.';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Macht aus Text eine URL-konforme ID
|
||||||
|
*/
|
||||||
_slugify(text) {
|
_slugify(text) {
|
||||||
return text.toLowerCase()
|
return text.toLowerCase()
|
||||||
.replace(/[^a-z0-9\s-]/g, '')
|
.replace(/[^a-z0-9\s-]/g, '')
|
||||||
.replace(/\s+/g, '-');
|
.replace(/\s+/g, '-');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Erzeugt die fertige HTML-Liste des TOC und injiziert sie in den Block
|
||||||
|
*/
|
||||||
_injectTOC(html) {
|
_injectTOC(html) {
|
||||||
const placeholder = 'STRENG_GEHEIMER_TOC_PLATZHALTER';
|
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 tocListHtml = '<div class="simonup-toc">\n<ul>\n';
|
||||||
let currentLevel = 1;
|
let currentLevel = 1;
|
||||||
|
|
@ -382,6 +375,9 @@ class SimonUp {
|
||||||
return html.replace(placeholder, tocListHtml);
|
return html.replace(placeholder, tocListHtml);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERN: Fasst freie Listen-Elemente zusammen und generiert Absätze (p)
|
||||||
|
*/
|
||||||
_processParagraphsAndLists(elements) {
|
_processParagraphsAndLists(elements) {
|
||||||
let processed = [];
|
let processed = [];
|
||||||
let paragraphBuffer = [];
|
let paragraphBuffer = [];
|
||||||
|
|
@ -390,8 +386,8 @@ class SimonUp {
|
||||||
|
|
||||||
function flushList() {
|
function flushList() {
|
||||||
if (listBuffer.length > 0) {
|
if (listBuffer.length > 0) {
|
||||||
let items = listBuffer.map(function(item) { return " <li style='margin-bottom: 4px;'>" + item + "</li>"; }).join("\n");
|
let items = listBuffer.map(function(item) { return " <li>" + item + "</li>"; }).join("\n");
|
||||||
processed.push("<" + currentListType + " style='margin-bottom: 12px; margin-left: 20px;'>\n" + items + "\n</" + currentListType + ">");
|
processed.push("<" + currentListType + ">\n" + items + "\n</" + currentListType + ">");
|
||||||
listBuffer = [];
|
listBuffer = [];
|
||||||
currentListType = null;
|
currentListType = null;
|
||||||
}
|
}
|
||||||
|
|
@ -400,7 +396,7 @@ class SimonUp {
|
||||||
function flushParagraph() {
|
function flushParagraph() {
|
||||||
if (paragraphBuffer.length > 0) {
|
if (paragraphBuffer.length > 0) {
|
||||||
let pContent = paragraphBuffer.join("<br>");
|
let pContent = paragraphBuffer.join("<br>");
|
||||||
processed.push("<p style='margin-bottom: 12px;'>" + pContent + "</p>");
|
processed.push("<p>" + pContent + "</p>");
|
||||||
paragraphBuffer = [];
|
paragraphBuffer = [];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -422,7 +418,7 @@ class SimonUp {
|
||||||
}
|
}
|
||||||
currentListType = type;
|
currentListType = type;
|
||||||
listBuffer.push(content);
|
listBuffer.push(content);
|
||||||
} 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)) {
|
} else if (element.startsWith("<") && !/^(<a>|<strong>|<em>|<u>|<del>|<mark>|<sup>|<sub>|<span>|<code>|<img>|<h\d)/i.test(element)) {
|
||||||
flushList();
|
flushList();
|
||||||
flushParagraph();
|
flushParagraph();
|
||||||
processed.push(element);
|
processed.push(element);
|
||||||
|
|
|
||||||
19
index.html
19
index.html
|
|
@ -152,13 +152,13 @@
|
||||||
<div class="panel-header">SimonUp Input (.up)</div>
|
<div class="panel-header">SimonUp Input (.up)</div>
|
||||||
<textarea id="editor" placeholder="Tippe dein SimonUp hier..." spellcheck="false">&toc Inhaltsverzeichnis
|
<textarea id="editor" placeholder="Tippe dein SimonUp hier..." spellcheck="false">&toc Inhaltsverzeichnis
|
||||||
Die Spielwiese läuft! Hier ist die Übersicht deiner Kapitel.
|
Die Spielwiese läuft! Hier ist die Übersicht deiner Kapitel.
|
||||||
/&
|
&
|
||||||
|
|
||||||
1x# Willkommen bei SimonUp!
|
1x# Willkommen bei SimonUp!
|
||||||
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.
|
Das hier ist der Live-Editor für die neue Sprache SimonUp. Wenn du diesen Text änderst, siehst du rechts sofort das Ergebnis.
|
||||||
|
|
||||||
2x# Coole Fluss-Formatierungen
|
2x# Coole Fluss-Formatierungen
|
||||||
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!
|
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!
|
||||||
|
|
||||||
2x# Intelligente Blöcke /# (Mit einer Anmerkung im Titel)
|
2x# Intelligente Blöcke /# (Mit einer Anmerkung im Titel)
|
||||||
Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
|
Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
|
||||||
|
|
@ -166,17 +166,8 @@ Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
|
||||||
&t 3x
|
&t 3x
|
||||||
**Name** | **Beruf** | **Status** |
|
**Name** | **Beruf** | **Status** |
|
||||||
Steve Jobs | Visionär | Legende |
|
Steve Jobs | Visionär | Legende |
|
||||||
Simon | Doulos | Baut SimonUp |
|
Simon | Architekt | 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>
|
Viel Spaß beim Testen!</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue