Introduction
In the pursuit of understanding the intricate workings of Markdown editors, Markflow was developed as a minimalist tool to experiment with document complexity, particularly in areas like code blocks, mathematical notation, and diagrams. This article delves into the core implementation decisions that shaped Markflow, offering insights for those interested in similar projects.
Core Objectives
The foundational goals for Markflow were straightforward:
- Maintain Markdown as the primary format.
- Support common extensions like code, math, and diagrams.
- Avoid creating an alternative document format.
These objectives guided the development process, with a significant focus on the editing experience over rendering.
Leveraging Monaco as the Editor Layer
Markflow is built upon Monaco, a robust text editing framework offering:
- A mature text editing model.
- High-performance characteristics.
- Predictable behaviors for selections, undo/redo, and more.
However, since Monaco operates on plain text, integrating Markdown’s implicit structure presented a central challenge.
Structuring Markdown
Rather than treating Markdown as mere text, Markflow parses it into an Abstract Syntax Tree (AST), enabling structural comprehension:
- Blocks like paragraphs, headings, and lists.
- Fenced regions for code, math, and diagrams.
- Document hierarchy awareness.
Even a partial understanding of the structure helps mitigate issues when editing mixed content.
Synchronizing Text and Structure
A critical component of Markflow is the synchronization between:
- The text in Monaco.
- The parsed Markdown structure.
This synchronization allows:
- Identifying the cursor’s current block.
- Applying transformations without disrupting surrounding content.
- Ensuring rendering consistency with the editor state.
This evolving synchronization defines much of the internal complexity of the project.
Rendering Pipeline
Markflow utilizes standard tools within the Markdown ecosystem for rendering:
- Syntax highlighting via highlight.js.
- Math rendering through KaTeX.
- Diagrams using Mermaid.
These tools are applied atop the parsed Markdown, maintaining a clear separation of responsibilities:
- Parsing for structure.
- Rendering for visual output.
Mobile Adaptability
Designed for browser use, Markflow adapts seamlessly to mobile environments without a separate version. Key adjustments include:
- Layouts that adjust to smaller screens.
- Smooth scrolling and input functionality.
- Full document editing capabilities on mobile devices.
Sharing Capabilities Without a Backend
Markflow operates without a backend, allowing document sharing by encoding state into a URL. This method:
- Eliminates the need for storage.
- Avoids server-side data persistence.
- Supports quick sharing or example use cases.
While limited by URL size, this approach is intentionally simple for lightweight applications.
Conclusion
Markflow serves as a technical exploration into structuring Markdown editing internally while utilizing a standard text editor foundation. Feedback and discussions are welcome for those undertaking similar endeavors.