bvandeusen
749a60b9fd
- renderMarkdown() accepts interactiveCheckboxes option: removes disabled="" and stamps data-task-index on each checkbox in the marked HTML output - NoteViewerView detects list notes by body content (- [ ] / - [x] pattern) and passes interactiveCheckboxes: true when rendering - onBodyChange() handles checkbox change events: toggles the matching line in the body, optimistically updates the store, then PATCHes the note - prose.css adds .prose--checklist rules for marked output: no bullet, flex row, accent-color, line-through on checked items via :has() Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
236 lines
4.3 KiB
CSS
236 lines
4.3 KiB
CSS
.prose {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.prose h1 {
|
|
margin: 1.25rem 0 0.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.prose h2 {
|
|
margin: 1rem 0 0.4rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.prose h3 {
|
|
margin: 0.75rem 0 0.3rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.prose h4,
|
|
.prose h5,
|
|
.prose h6 {
|
|
margin: 0.5rem 0 0.25rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0 0 0.6rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose pre {
|
|
background: var(--color-code-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
overflow-x: auto;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose code {
|
|
background: var(--color-code-inline-bg);
|
|
border-radius: 3px;
|
|
padding: 0.15rem 0.35rem;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose th,
|
|
.prose td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.prose thead th {
|
|
background: var(--color-bg-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose tbody tr:nth-child(even) {
|
|
background: var(--color-table-stripe);
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 3px solid var(--color-border);
|
|
margin: 0 0 0.6rem;
|
|
padding: 0.25rem 0 0.25rem 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.prose blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose .inline-tag {
|
|
color: var(--color-tag-text);
|
|
background: var(--color-tag-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose .inline-tag:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose .wikilink {
|
|
color: var(--color-wikilink);
|
|
background: var(--color-wikilink-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prose .wikilink:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Task list */
|
|
.prose ul[data-type="taskList"] {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label {
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
|
|
cursor: pointer;
|
|
accent-color: var(--color-primary);
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li[data-checked="true"] > div {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Interactive checkboxes — marked output in the list-note viewer */
|
|
.prose--checklist ul {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
.prose--checklist li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.prose--checklist li input[type="checkbox"] {
|
|
flex-shrink: 0;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) > p,
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
|
|
text-decoration: none; /* don't strike through the checkbox itself */
|
|
}
|
|
|
|
/* Tiptap editor */
|
|
.tiptap-editor .ProseMirror {
|
|
outline: none;
|
|
min-height: 200px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
|
|
color: var(--color-text-muted, var(--color-text-secondary));
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tiptap-wrapper {
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tiptap-wrapper:focus-within {
|
|
box-shadow: var(--focus-ring, 0 0 0 2px var(--color-primary));
|
|
}
|