FORGE KUI / learn

Editing, preview and text safety

Trace Markdown input, conversion, preview and save feedback.

Version 3.61.7

Lesson 10
Before you start
A running Forge Notes app
What you will build
Understand editing, limited Markdown and safe preview
Download project ↓agent-studio.zip

Run it and find the editor

Reuse the desktop app project and start with --evergreen. The note list is mostly illustrative; this lesson examines editing and previewing the current note.

powershell
.\build\Release\agent_studio.exe --evergreen

Trace the current edited value

Find HTMLTextAreaElement and the input listener in main.cpp. Read value() before calling the preview function instead of reading initial HTML text. Editing and saving are separate actions.

The exact preview scope

This is the project conversion function. It escapes text and handles headings, paragraphs and unordered lists; it does not implement complete Markdown, link parsing or raw HTML passthrough.

cpp
#pragma once
#include <sstream>
#include <string>

// 演示使用的小型 Markdown 子集:标题、段落与无序条目。输入始终作为文本转义。
inline std::string renderMarkdown(const std::string& source) {
    std::istringstream stream(source);
    std::string line, result;
    while (std::getline(stream, line)) {
        if (!line.empty() && line.back() == '\r') line.pop_back();
        if (line.empty()) continue;
        std::string tag = "p", attributes;
        if (line.compare(0, 3, "## ") == 0) { tag = "h2"; line.erase(0, 3); }
        else if (line.compare(0, 2, "# ") == 0) { tag = "h1"; line.erase(0, 2); }
        else if (line.compare(0, 2, "- ") == 0) { attributes = " class=\"md-list\""; line = "• " + line.substr(2); }
        result += "<" + tag + attributes + ">";
        for (char ch : line) {
            if (ch == '&') result += "&amp;";
            else if (ch == '<') result += "&lt;";
            else if (ch == '>') result += "&gt;";
            else result += ch;
        }
        result += "</" + tag + ">";
    }
    return result;
}

Check preview with four inputs

Change one syntax feature at a time to isolate conversion issues.

  1. Enter # Title and inspect the heading.
  2. Enter a paragraph and - item and inspect paragraphs and lists.
  3. Enter text shaped like <script> or <img>; it must remain text, not executable nodes.
  4. Clear, create and save, then restart to check session-only state.

Run model tests and extend one feature

CTest markdown_preview checks conversion and escaping. To add syntax, define input and expected output before editing the converter; do not bypass escaping by allowing arbitrary HTML.

powershell
ctest --test-dir build -C Release --output-on-failure