np.Preview v0.5 preview any note; improve CSS for tables

Author: jgclark

helpers/HTMLView.js

@@ -132,17 +132,36 @@ export async function getNoteContentAsHTML(content: string, note: TNote): Promis
     // Change frontmatter for this note (if present)
     // In particular remove trigger line
     if (hasFrontmatter) {
-      let titleAsMD = ''
+      let fmTitleText = ''
       // look for 2nd '---' and double it, because of showdown bug
       for (let i = 1; i < lines.length; i++) {
-        if (lines[i].match(/^title:\s/)) {
-          titleAsMD = lines[i].replace('title:', '#')
+        const titleMatch = lines[i].match(/^title:\s*(.*)$/)
+        if (titleMatch) {
+          // Strip optional YAML quotes around the value
+          fmTitleText = titleMatch[1].trim().replace(/^["'](.*)["']$/, '$1').trim()
           logDebug('getNoteContentAsHTML', `removing title line ${String(i)}`)
           lines.splice(i, 1)
         }
-        if (lines[i].trim() === '---') {
+        if (lines[i] != null && lines[i].trim() === '---') {
           lines.splice(i, 0, '') // add a blank before second HR to stop it acting as an ATX header line
-          lines.splice(i + 2, 0, titleAsMD) // add the title (as MD)
+          // After this splice: blank at i, closing --- at i+1; body starts at i+2
+          // If the first H1 in the body already matches the frontmatter title, do not inject a second H1
+          let bodyHasSameTitleH1 = false
+          if (fmTitleText !== '') {
+            for (let j = i + 2; j < lines.length; j++) {
+              const h1Match = lines[j].match(/^#\s+(.+)$/)
+              if (h1Match) {
+                if (h1Match[1].trim() === fmTitleText) {
+                  bodyHasSameTitleH1 = true
+                  logDebug('getNoteContentAsHTML', `skipping frontmatter title injection; body already has matching first H1 '${fmTitleText}'`)
+                }
+                break
+              }
+            }
+          }
+          if (fmTitleText !== '' && !bodyHasSameTitleH1) {
+            lines.splice(i + 2, 0, `# ${fmTitleText}`) // add the title as an H1 once
+          }
           break
         }
       }

np.Preview/CHANGELOG.md

@@ -1,8 +1,14 @@
 # What's Changed in 🖥️ Previews plugin?
 See [website README for more details](https://github.com/NotePlan/plugins/tree/main/np.Preview), and how to configure it.
 
+## [0.5.0] - 2026-08-04
+- tables: 1px solid grey borders; left- and top-aligned cells; bold thead and tfoot only (not tbody)
+- fix: do not show the title twice when frontmatter `title:` matches the first body H1
+- Preview can be called for a specified note (filename, title, relative date, or calendar identifier) via x-callback / other plugins; Command Bar still previews the open Editor note
+- Mermaid theme auto-selects light/dark from the NotePlan theme unless overridden as arg1
+
 ## [0.4.6] - 2026-08-04
-- dev: Mermaid loads latest 11.x from CDN when online; falls back to shipped offline UMD snapshot (11.16.1)
+- Mermaid loads latest 11.x from CDN when online; falls back to shipped offline UMD snapshot (11.16.1)
 
 ## [0.4.5] - 2025-03-14
 - upgraded to use Mermaid v11.x

np.Preview/README.md

@@ -1,5 +1,5 @@
 # 🖥️ Preview Plugin
-This plugin provides the **/preview note** and **/start live preview** commands that renders the current note to HTML including:
+This plugin provides the **/preview note** and **/start live preview** commands that render a note to HTML including:
 - standard Markdown conversion (including referenced images)
 - [Mermaid diagrams](https://mermaid.js.org) (e.g. flowcharts, gantt charts, sequence diagrams ...)
 - [MathJax](https://www.mathjax.org/) fragments or lines (for mathematical equations and notation)
@@ -24,6 +24,27 @@ triggers: onEditorWillSave => np.Preview.updatePreview
 
 It deliberately updates the Preview window without giving it focus, so that you can continue editing.
 
+## Preview a specified note (x-callback / other plugins)
+
+From the Command Bar, **/preview note** always previews the **currently open Editor note**.
+
+Other plugins and automations can **preview any note** (without opening it in the Editor first) by passing a note identifier as `arg0`:
+
+```
+noteplan://x-callback-url/runPlugin?pluginID=np.Preview&command=preview%20note&arg0=<encoded filename or identifier>
+```
+
+Examples of `arg0`:
+
+- Filename: `Projects/My%20Note.md`
+- Note title: `My%20Note`
+- Relative date: `today`, `yesterday`, `this%20week`
+- Calendar date string: `20260804`
+
+Optional `arg1` sets the Mermaid theme (e.g. `default`, `dark`, `forest`). If omitted, the plugin picks `default` or `dark` from the current NotePlan theme.
+
+If the specified note is open in the Editor, unsaved Editor content is used. Live preview (**start live preview**) still applies only to the note that has the trigger in the open Editor.
+
 ## Mermaid charts
 <img src="kanban-mermaid@2x.png" alt="Example of Kanban board in Mermaid charts" />
 Mermaid is a third-party library that makes a wide variety of diagrams (including Flowcharts, Gantt, Kanban, state transition etc.) and some simple charts, using markdown-ish definitions. These definitions are placed in one or more fenced code blocks, like this:

np.Preview/plugin.json

@@ -3,12 +3,12 @@
   "macOS.minVersion": "10.13.0",
   "plugin.id": "np.Preview",
   "plugin.name": "🖥️ Preview",
-  "plugin.description": "Shows HTML preview of the current note, including Mermaid diagrams and MathJax equations. Requires NP v3.9.2.",
+  "plugin.description": "Shows HTML preview of a note, including Mermaid diagrams and MathJax equations. Runs on current Editor, or a specified note via x-callback. Requires NP v3.9.2.",
   "plugin.icon": "",
   "plugin.author": "Jonathan Clark",
   "plugin.url": "https://github.com/NotePlan/plugins/tree/main/np.Preview/",
-  "plugin.version": "0.4.6",
-  "plugin.lastUpdateInfo": "v0.4.6: Mermaid via CDN latest 11.x, with offline UMD fallback 11.16.1.\nv0.4.5: updated to use Mermaid v11.",
+  "plugin.version": "0.5.0",
+  "plugin.lastUpdateInfo": "v0.5.0: Add basic table styling (bold thead/tfoot only; left/top-aligned cells; grey borders).\nDon't show title twice when frontmatter title and first H1 match.\nAdd support for x-callback to preview a specified note, rather than just the current note.\nv0.4.6: Update offline support for Mermaid to v11.16.1 (latest).\n",
   "plugin.changelog": "https://github.com/NotePlan/plugins/blob/main/np.Preview/CHANGELOG.md",
   "plugin.dependencies": [],
   "plugin.requiredFiles": [
@@ -24,7 +24,7 @@
       "alias": [
         "pn"
       ],
-      "description": "Preview note in HTML window",
+      "description": "Preview current (or specified) note in HTML window",
       "jsFunction": "previewNote"
     },
     {

np.Preview/src/previewMain.js

@@ -2,7 +2,7 @@
 
 //--------------------------------------------------------------
 // Main rendering function for Preview
-// by Jonathan Clark, last updated 2026-08-04 for v0.4.6
+// by Jonathan Clark, last updated 2026-08-04 for v0.5.0
 //--------------------------------------------------------------
 
 
@@ -11,6 +11,7 @@ import pluginJson from '../plugin.json'
 import { logDebug, logError, logWarn } from '@helpers/dev'
 import { addTrigger } from '@helpers/NPFrontMatter'
 import { displayTitle } from '@helpers/general'
+import { getNoteFromFilename, getNoteFromIdentifier } from '@helpers/NPnote'
 
 import {
   getNoteContentAsHTML,
@@ -19,6 +20,56 @@ import {
 } from '@helpers/HTMLView'
 import { showMessageYesNo } from '@helpers/userInput'
 
+/**
+ * Resolved note + markdown content for preview.
+ * Prefer Editor content when the target file is open (includes unsaved edits).
+ */
+type PreviewNoteAndContent = {
+  note: TNote,
+  content: string,
+}
+
+/**
+ * Resolve which note and content to preview.
+ * - Empty/null noteSpec => Editor.note + Editor.content
+ * - TNote => that note
+ * - string => filename (teamspace-aware) then identifier (title / relative date / calendar)
+ * If Editor is open on the same filename, use Editor.content for unsaved text.
+ * @param {string | TNote | null | void} noteSpec
+ * @returns {PreviewNoteAndContent}
+ * @throws {Error} if no note or content can be resolved
+ */
+function resolveNoteAndContent(noteSpec?: string | TNote | null): PreviewNoteAndContent {
+  let note: ?TNote = null
+
+  if (noteSpec == null || noteSpec === '') {
+    note = Editor.note
+    if (!note) {
+      throw new Error('No note or content found in Editor. Stopping.')
+    }
+  } else if (typeof noteSpec === 'object' && noteSpec.filename) {
+    note = noteSpec
+  } else if (typeof noteSpec === 'string') {
+    note = getNoteFromFilename(noteSpec) ?? getNoteFromIdentifier(noteSpec)
+    if (!note) {
+      throw new Error(`Cannot find note for '${noteSpec}'. Stopping.`)
+    }
+  } else {
+    throw new Error('Invalid note specifier for preview. Stopping.')
+  }
+
+  // Prefer open Editor buffer when it is the same file (unsaved edits)
+  if (Editor.note?.filename === note.filename && Editor.content != null) {
+    return { note: Editor.note, content: Editor.content }
+  }
+
+  const content = note.content
+  if (content == null) {
+    throw new Error(`No content found for note '${displayTitle(note)}'. Stopping.`)
+  }
+  return { note, content }
+}
+
 //--------------------------------------------------------------
 
 // Constants
@@ -88,6 +139,23 @@ Button a { text-decoration: none; font-size: 0.9rem; }
   padding: 0rem 0.4rem;
   background-color: var(--bg-alt-color);
   }
+table {
+  border-collapse: collapse;
+  border: 1px solid grey;
+}
+th, td {
+  border: 1px solid grey;
+  text-align: left;
+  vertical-align: top;
+  padding: 0.2rem 0.4rem;
+  font-weight: normal;
+}
+table thead th,
+table thead td,
+table tfoot th,
+table tfoot td {
+  font-weight: bold;
+}
 @media print {
   .nonPrinting {
     display: none;
@@ -96,20 +164,21 @@ Button a { text-decoration: none; font-size: 0.9rem; }
 `
 
 /**
- * Preview current Editor note to HTML window, covering:
+ * Preview a note to HTML window, covering:
  * - Mermaid diagrams
  * - MathJax fragments or lines
  * - other standard Markdown conversion (supplied by 'showdown' library)
  * - some non-standard Markdown conversion (e.g. tables) (also supplied by 'showdown' library)
+ * Command Bar with no args previews the open Editor note.
+ * From x-callback / other plugins, pass a filename, title, relative date, or TNote as arg0.
  * @author @jgclark
- * @param {string?} mermaidTheme name (optional)
+ * @param {string | TNote | null | void} noteSpec - optional filename/identifier or TNote; omit for Editor
+ * @param {string?} mermaidTheme - optional Mermaid theme override (otherwise default/dark from NP theme)
  */
-export async function previewNote(mermaidTheme?: string = "green"): Promise<void> {
+export async function previewNote(noteSpec?: string | TNote | null, mermaidTheme?: string): Promise<void> {
   try {
-    const { note, content } = Editor
-    if (!note || !content) {
-      throw new Error('No note or content found in Editor. Stopping.')
-    }
+    const { note, content } = resolveNoteAndContent(noteSpec)
+    logDebug(pluginJson, `previewNote: '${displayTitle(note)}' (${note.filename})`)
     let lines = content.split('\n')
     lines = lines.filter(l => l !== 'triggers: onEditorWillSave => np.Preview.updatePreview')
     // Update mermaid fenced code blocks to suitable <divs>
@@ -144,7 +213,7 @@ export async function previewNote(mermaidTheme?: string = "green"): Promise<void
 <meta name="date" content="${new Date().toISOString()}">`
 
     const windowOpts: HtmlWindowOptions = {
-      windowTitle: `${displayTitle(Editor)} Preview`,
+      windowTitle: `${displayTitle(note)} Preview`,
       headerTags: headerTags,
       generalCSSIn: '', // get general CSS set automatically
       bodyOptions: '',
@@ -172,8 +241,8 @@ export async function previewNote(mermaidTheme?: string = "green"): Promise<void
  */
 export async function openPreviewNoteInBrowser(): Promise<void> {
   try {
-    // Call preview note function with 'default' theme (best for printing)
-    await previewNote('default')
+    // Editor note with 'default' Mermaid theme (best for printing)
+    await previewNote(undefined, 'default')
     logDebug(pluginJson, `openPreviewNoteInBrowser: preview created; now will try to open in browser`)
     // FIXME: the following doesn't work -- something to do with imports and builtins
     // await open(savedFilename)