From f204f693092f37a5d9430cd97fdc10c265c71cdf Mon Sep 17 00:00:00 2001 From: alexa Date: Sun, 28 Apr 2024 22:50:49 +0200 Subject: [PATCH] md stuff --- ui/js/MarkdownProcessor.mjs | 28 +++++++++++++++++++++------- ui/styles.css | 7 +++++++ ui/templates/MarkdownTemplates.mjs | 2 +- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/ui/js/MarkdownProcessor.mjs b/ui/js/MarkdownProcessor.mjs index cc1a328..34a9515 100644 --- a/ui/js/MarkdownProcessor.mjs +++ b/ui/js/MarkdownProcessor.mjs @@ -60,16 +60,14 @@ export class MarkdownProcessor { static parseText(text) { const elements = []; - // Create regular expressions for each formatting type const formattingTypes = [ {name: 'boldItalic', regex: /\*\*\*(.*?)\*\*\*/g}, - {name: 'bold', regex: /\*\*(.*?)\*\*/g}, + {name: 'bold', regex: /\*\*(.*?)?\*\*/g}, {name: 'italic', regex: /\*(.*?)\*/g}, {name: 'link', regex: /\[(.*?)]\((.*?)\)/g}, {name: 'image', regex: /!\[(.*?)]\((.*?)\)/g}, ]; - // Keep examining the text until all formatting has been extracted while (text.length > 0) { // Find the nearest formatting @@ -77,8 +75,8 @@ export class MarkdownProcessor { index: text.length }; let nearestType; - for (let type of formattingTypes) { + type.regex.lastIndex = 0; // Reset lastIndex to start search from beginning of string const match = type.regex.exec(text); if (match && match.index < nearest.index) { console.log(match, type.name); @@ -105,11 +103,9 @@ export class MarkdownProcessor { } elements.push(element); } - // Remove the processed portion of the text text = text.substring(nearest.index + (nearest[0] ? nearest[0].length : 0)); } - return elements; } @@ -120,7 +116,7 @@ export class MarkdownProcessor { } static generateHtml(elements) { - const nodes = []; + let nodes = []; for (let element of elements) { const parsedNodes = MarkdownProcessor.processText(element.text); if (parsedNodes.length > 1) { @@ -156,6 +152,24 @@ export class MarkdownProcessor { break; } } + nodes = MarkdownProcessor.postProcessBlockQuotes(nodes); + return nodes; + } + + static postProcessBlockQuotes(nodes) { + // if any blockquote is followed by another blockquote, + // merge their children into the first blockquote and remove the second blockquote + for (let i = 0; i < nodes.length - 1; i++) { + if (nodes[i].tagName === 'BLOCKQUOTE' && nodes[i + 1].tagName === 'BLOCKQUOTE') { + const firstBlockQuote = nodes[i]; + const secondBlockQuote = nodes[i + 1]; + for (let child of secondBlockQuote.children) { + firstBlockQuote.appendChild(child); + } + nodes.splice(i + 1, 1); + i--; + } + } return nodes; } diff --git a/ui/styles.css b/ui/styles.css index 6b344b8..f6472db 100644 --- a/ui/styles.css +++ b/ui/styles.css @@ -335,6 +335,13 @@ button, input, textarea { font-family: sans-serif; } +blockquote { + background: var(--background); + margin: 0; + padding: var(--regular-padding); + border-radius: var(--border-radius); +} + input { padding: var(--input-padding); border-radius: var(--border-radius); diff --git a/ui/templates/MarkdownTemplates.mjs b/ui/templates/MarkdownTemplates.mjs index 6fba49f..46bc884 100644 --- a/ui/templates/MarkdownTemplates.mjs +++ b/ui/templates/MarkdownTemplates.mjs @@ -62,7 +62,7 @@ export class MarkdownTemplates { static quote(text) { return create("blockquote") - .classes("markdown") + .classes("markdown", "flex-v") .children(text) .build(); }