Build a Markdown Editor with Live Preview — Kotlin Compose Desktop | Lesson 17 скачать в хорошем качестве

Build a Markdown Editor with Live Preview — Kotlin Compose Desktop | Lesson 17

Learn rich text rendering and markdown parsing in Kotlin Compose Desktop! We build a split-pane Markdown Editor from scratch — type markdown on the left, see styled live preview on the right. Uses commonmark-java for parsing, AnnotatedString with SpanStyle for rendering, TextFieldValue for cursor-aware editing, and MenuBar for file I/O. What You'll Learn: Setting up commonmark-java for markdown-to-AST parsing Visitor pattern: traversing AST nodes recursively to build styled text AnnotatedString.Builder with pushStyle/pop for bold, italic, headings, code, links SpanStyle for font sizes, weights, colors, and font families TextFieldValue for tracking cursor position and selection range Toolbar buttons that insert markdown syntax at the cursor position Keyboard shortcuts (Cmd+B, Cmd+I) via onPreviewKeyEvent MenuBar with File menu (New/Open/Save) using java.awt.FileDialog remember(key) for caching parsed results and recomputing on change SelectionContainer and verticalScroll for the preview pane Timestamps: 0:00 - Introduction 0:15 - Preview: Split-Pane Markdown Editor 0:45 - Project Setup (Gradle with commonmark) 2:19 - Markdown Parser (Visitor Pattern + AnnotatedString) 6:29 - Editor Pane (Toolbar + Keyboard Shortcuts) 9:46 - Preview + App Content (Split Layout) 12:57 - Main + MenuBar + Compile 15:58 - Live Demo: Markdown Editor 18:06 - Recap & Key Takeaways 19:06 - Thanks for Watching Key Takeaways: 1. Markdown Parsing — commonmark-java Parser.parse() builds an AST from markdown text 2. Visitor Pattern — Traverse AST nodes recursively, map each node type to styled text 3. AnnotatedString — SpanStyle for bold, italic, heading sizes, code font, link colors 4. TextFieldValue — Track cursor position and selection for toolbar text insertion 5. Live Preview — remember(markdown) caches parsed result, recomputes on every keystroke Previous Lesson: Lesson 16: Dependency Injection — Book Library with Koin    / .  . Next Lesson: Lesson 18: (coming soon) Tech Stack: Kotlin 2.1, Compose Multiplatform 1.7.3, Material3 commonmark-java 0.22.0 Gradle 8.10, JVM 17+ Source Code: https://github.com/GoCelesteAI/kotlin... Taught by CelesteAI If you found this helpful, please like and subscribe for more Kotlin Desktop tutorials! #kotlin #compose #desktop #material3 #markdown #richtext #annotatedstring #visitor #parser #tutorial #programming Tags kotlin, compose multiplatform, compose desktop, material3, markdown, rich text, annotated string, span style, commonmark, visitor pattern, text field value, menu bar, jetbrains compose, kotlin tutorial, desktop app, jvm, composable, markdown editor, live preview Category: Science & Technology Visibility: Public