feat: add markdown/preview toggle to task editor & fix code block highlighting

[Maxsky5]

Summary

• Add a markdown/preview toggle to the task description editor, allowing users to switch between raw markdown editing and WYSIWYG preview
• Fix code block syntax highlighting not being applied on initial load
• Fix code blocks having unnecessary empty lines at start/end

Changes

Markdown/Preview Toggle

Added a toggle in the task form dialog that allows switching between:

• Markdown mode: Raw textarea for direct markdown editing (default)
• Preview mode: WYSIWYG editor with rich text rendering
  This gives users flexibility to edit markdown directly or use the visual editor.

Code Block Fixes

Problem: Code blocks were not being syntax-highlighted when viewing task descriptions. The code appeared as plain monospace text without language-specific coloring.
Root cause: Lexical's registerCodeHighlighting registers node transforms that only trigger on future mutations. When markdown is parsed on initial load, CodeNodes are created but the transform doesn't run on them.
Solution: After registering code highlighting, explicitly mark existing CodeNodes as dirty to force the transform to run and apply syntax highlighting.
Additional fix: Trim empty lines from code block content to prevent unnecessary <br> elements at start/end.

Inline Code Styling

Updated inline code styling for better visibility with pink color and border.

How it looks in the task panel:

Files Changed

• frontend/src/components/dialogs/tasks/TaskFormDialog.tsx - Add markdown/preview toggle
• frontend/src/components/ui/toggle-group.tsx - Add active and size props
• frontend/src/components/ui/wysiwyg.tsx - Update inline code and code block styling
• frontend/src/components/ui/wysiwyg/plugins/code-highlight-plugin.tsx - Fix initial highlighting
• frontend/src/components/ui/wysiwyg/transformers/code-block-transformer.ts - Trim empty lines
• frontend/src/i18n/locales/en/tasks.json - Add translation keys

🤖 Generated with Opencode

Let me know if I need to change or add anything (like translations in other languages for the 2 new labels)

[vibe-kanban-cloud]

Review Complete

Your review story is ready!

View Story

Comment !reviewfast on this PR to re-generate the story.