diff --git a/app/components/Markdown/Renderer.vue b/app/components/Markdown/Renderer.vue index 85f9843..039bb33 100644 --- a/app/components/Markdown/Renderer.vue +++ b/app/components/Markdown/Renderer.vue @@ -10,8 +10,58 @@ const props = defineProps<{ const { $remark } = useNuxtApp(); +// this function effectively removes lazy concetenation from the markdown +// normally in markdown, if you have two lines that are separated by only +// one new line. E.g.: +// +// This is some markdown text but I split +// it into two lines so it's easier to read in the editor +// +// they are *usually* concatenated into one line, however, +// since we are a web editor, with line wrapping, that behavior +// in undesirable, so pre preserve newlines by just maiking +// every new line two newlines (as long as we arent in a codeblock) +function preprocessMarkdown(doc: string) { + const lines = doc.split('\n'); + let inCode = false; + let result: string[] = []; + + for (let i = 0; i < lines.length; i++) { + const fullLine = lines[i]!; + + const match = fullLine.match(/^( {0,3})(.*)/); + const content = match?.[2] || ''; + + if (content.startsWith('```')) { + if (!inCode) { + inCode = true; + } else { + inCode = false; + } + result.push(fullLine); + continue; + } + + if (inCode) { + result.push(fullLine); + } else { + if (content.trim().length === 0) { + result.push(''); + } else { + if (result.length > 0 && result[result.length - 1] !== '') { + result.push(''); + } + result.push(fullLine); + } + } + } + + return result.join('\n'); +} + + const ast = computed(() => { - const mdast = $remark.parse(props.content); + const mdast = $remark.parse(preprocessMarkdown(props.content)); return $remark.runSync(mdast); }); diff --git a/app/plugins/remark.ts b/app/plugins/remark.ts index acacb17..61404bb 100644 --- a/app/plugins/remark.ts +++ b/app/plugins/remark.ts @@ -1,6 +1,5 @@ import { unified } from 'unified'; import remarkParse from 'remark-parse'; -import remarkBreaks from 'remark-breaks'; import remarkGfm from 'remark-gfm'; import remarkRehype from 'remark-rehype'; import remarkMath from 'remark-math'; @@ -10,7 +9,6 @@ export default defineNuxtPlugin((nuxtApp) => { const remark = unified() .use(remarkParse) - .use(remarkBreaks) .use(remarkGfm) .use(remarkMath) .use(remarkRehype, { allowDangerousHtml: true })