HTMLView: add paragraph break hints for previews

Author: dwertheimer

helpers/HTMLView.js

@@ -169,6 +169,8 @@ export async function getNoteContentAsHTML(content: string, note: TNote): Promis
       }
     }
 
+    lines = addParagraphBreakHints(lines)
+
     // Make this proper Markdown -> HTML via showdown library
     // Set some options to turn on various more advanced HTML conversions (see actual code at https://github.com/showdownjs/showdown/blob/master/src/options.js#L109):
     const converterOptions = {
@@ -1157,6 +1159,44 @@ export function convertHighlightsToHTML(input: string): string {
   return output
 }
 
+function addParagraphBreakHints(lines: Array<string>): Array<string> {
+  const output: Array<string> = []
+  for (let i = 0; i < lines.length; i++) {
+    const currentLine = lines[i]
+    output.push(currentLine)
+
+    const trimmedCurrent = currentLine.trim()
+    if (trimmedCurrent === '') {
+      continue
+    }
+
+    const nextLine = lines[i + 1]
+    if (nextLine == null) {
+      continue
+    }
+    const trimmedNext = nextLine.trim()
+    if (trimmedNext === '') {
+      continue
+    }
+
+    const currentIsList = isListLine(trimmedCurrent)
+    const nextIsList = isListLine(trimmedNext)
+
+    if ((currentIsList && !nextIsList) || isIsolatedWikiLink(trimmedCurrent)) {
+      output.push('')
+    }
+  }
+  return output
+}
+
+function isListLine(line: string): boolean {
+  return /^([*\-+]|\d+\.)\s+/.test(line)
+}
+
+function isIsolatedWikiLink(line: string): boolean {
+  return /^\[\[[^\]]+\]\]$/.test(line)
+}
+
 function convertWikiLinksToHTML(input: string): string {
   return input.replace(/\[\[(.+?)\]\]/g, (_match, content) => {
     const { url, displayText } = buildNotePlanLinkFromWikiContent(content)

helpers/__tests__/HTMLView.test.js

@@ -226,6 +226,38 @@ describe('getNoteContentAsHTML()', () => {
       `<a class="internal-note-link" href="${expectedUrl}">Rehearsal Setup for Playback Tracks</a>`,
     )
   })
+
+  test('keeps wiki-link paragraph separate from following text', async () => {
+    const targetNote = {
+      filename: 'Library/Example.md',
+      title: 'Example',
+    }
+    DataStore.projectNoteByTitle = jest.fn().mockReturnValue([targetNote])
+    DataStore.projectNoteByFilename = jest.fn().mockReturnValue(targetNote)
+
+    const result = await h.getNoteContentAsHTML('[[Example]]\nFollow up text', {
+      filename: 'Projects/Test/Test Note.md',
+      title: 'Test Note',
+      type: 'Notes',
+    })
+
+    expect(result).toContain('<p>Follow up text</p>')
+    expect(result).not.toMatch(/<a class="internal-note-link"[^>]*>Example<\/a><br \/>Follow up text/)
+  })
+
+  test('ensures text following a list is not captured inside the list item', async () => {
+    const note = {
+      filename: 'Projects/Test/Test Note.md',
+      title: 'Test Note',
+      type: 'Notes',
+    }
+
+    const markdown = '- Item one\n- Item two\nFollow up text'
+    const result = await h.getNoteContentAsHTML(markdown, note)
+
+    expect(result).toContain('<p>Follow up text</p>')
+    expect(result).not.toMatch(/<li>[^<]*Follow up text/)
+  })
 })
 
 /*

np.Preview/CHANGELOG.md

@@ -8,6 +8,7 @@ Arbitrary elevation to 1.0.0
 ### General HTML Helper Change
 - convert `[[wikilinks]]` in HTML output to be real NotePlan callback URLs rather than just underlined text that does nothing
 - fix bug in showdown relative to NP to ensure horizontal rules have a blank line before them so they render properly
+- add paragraph break hints so isolated wikilinks and text following lists render in their own paragraphs
 
 ### Preview-specific Changes
 - move preview-specific spacing and typography to `previewStyles` file, with: