Implement task list rendering in preview mode

- Enabled GitHub Flavored Markdown (GFM) in marked.js for task list support
- Added custom CSS styling for task lists:
  - Hide bullet points, show only checkboxes
  - Increased checkbox size to 20px for better visibility
  - Green accent color for checked items
  - Flexbox layout for proper multi-line text alignment
- Task lists render as read-only checkboxes in preview mode
This commit is contained in:
drelich
2026-03-31 10:26:38 +02:00
parent 21cd9ced2f
commit f5b448808d
2 changed files with 32 additions and 0 deletions

View File

@@ -24,6 +24,12 @@ interface NoteEditorProps {
const imageCache = new Map<string, string>();
// Configure marked to support task lists
marked.use({
gfm: true,
breaks: true,
});
export function NoteEditor({ note, onUpdateNote, onToggleFavorite, onUnsavedChanges, categories, isFocusMode, onToggleFocusMode, editorFont = 'Source Code Pro', editorFontSize = 14, previewFont = 'Merriweather', previewFontSize = 16, api }: NoteEditorProps) {
const [localContent, setLocalContent] = useState('');