Render series note as markdown via OverType parser
Series notes with bold, italic, and lists were displayed as plain
text. Using OverType.MarkdownParser.parse() renders them without
needing a full editor instance or fighting OverType's layout system.
Assisted-by: Claude Opus 4.6 via Claude Code
diff --git a/Rakefile b/Rakefile
index 5575125..835e82f 100644
--- a/Rakefile
+++ b/Rakefile
@@ -31,14 +31,14 @@ task :seed do
notes = [
"Call Mom",
- "Water the plants\n\nCheck soil moisture first",
+ "Water the plants\n\nCheck soil moisture *before* watering",
"Clean the kitchen",
- "Back up laptop\n\nTime Machine to external drive\nAlso sync cloud photos",
+ "Back up laptop\n\n- Time Machine to external drive\n- Sync cloud photos\n- Verify **offsite** backup",
"Review finances",
- "Dentist appointment\n\nDr. Chen, 10am\n555-0142 to reschedule",
+ "Dentist appointment\n\n**Dr. Chen**, 10am\n555-0142 to reschedule",
"Oil change",
"Haircut",
- "Replace HVAC filter\n\nSize: 20x25x1",
+ "Replace HVAC filter\n\nSize: **20x25x1**",
"Check smoke detectors",
]
diff --git a/lib/ketchup/views/home.rb b/lib/ketchup/views/home.rb
index 5a641a1..b3e4549 100644
--- a/lib/ketchup/views/home.rb
+++ b/lib/ketchup/views/home.rb
@@ -61,7 +61,7 @@ module Views
end
div(class: "task-detail", "x-show": "$store.sidebar.mode === 'task'") do
- p(class: "task-detail-note", "x-text": "$store.sidebar.taskNote")
+ div(id: "series-note-preview", class: "task-detail-note")
dl(class: "task-detail-fields") do
dt { "Interval" }
dd("x-text": "$store.sidebar.taskInterval")
diff --git a/public/css/app.css b/public/css/app.css
index 9352bf4..bbcc947 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -210,7 +210,6 @@ h2 { font-size: var(--step-0); font-weight: 600; }
.task-detail-note {
color: #444;
- white-space: pre-line;
margin-block-end: var(--space-s);
}
diff --git a/public/js/app.js b/public/js/app.js
index 5dc586e..4518a69 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -59,6 +59,12 @@ document.addEventListener("alpine:init", () => {
this.addingNoteId = null
this.mode = "task"
+ const noteEl = document.getElementById("series-note-preview")
+ if (noteEl) {
+ noteEl.innerHTML = ""
+ noteEl.innerHTML = OverType.MarkdownParser.parse(this.taskNote)
+ }
+
fetch(`/series/${el.dataset.seriesId}/completed`)
.then((r) => r.json())
.then((data) => (this.completedTasks = data))