Skip to content

feat: add Insert Diagram modal with previews and search filter #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ThisIs-Developer wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: add Insert Diagram modal with previews and search filter #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
850cd94
feat: add Insert Diagram modal with previews and search filter
ThisIs-Developer Jun 22, 2026
94de31e
feat: render actual live diagrams in card previews and split preview …
ThisIs-Developer Jun 23, 2026
cbc1940
feat: use high-fidelity static SVGs matching actual diagram outputs f…
ThisIs-Developer Jun 23, 2026
399124b
feat: add diverse and visually distinct diagram templates per engine …
ThisIs-Developer Jun 23, 2026
5d512f8
feat: complete all diagram types with distinct previews for all engines
ThisIs-Developer Jun 23, 2026
e91e5e7
feat: complete all diagram templates, sync desktop app, and bump sw c…
ThisIs-Developer Jun 23, 2026
bb3626d
feat: implement theme-aware diagram preview rendering pipeline with o…
ThisIs-Developer Jun 23, 2026
163c6bc
feat: complete phases 1, 2, and 3 of diagram previews (theme fallback…
ThisIs-Developer Jun 23, 2026
c3f7ef4
fix: add missing closing markdown code block backticks to all PlantUM…
ThisIs-Developer Jun 24, 2026
efc7d4e
fix: resolve squished diagram SVGs by changing flexbox centering to t…
ThisIs-Developer Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions desktop-app/neutralino.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"os.showMessageBox",
"os.open",
"os.setTray",
"os.execCommand",
"filesystem.readFile",
"filesystem.writeFile",
"storage.setData",
Expand Down
51 changes: 51 additions & 0 deletions desktop-app/resources/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,7 @@ <h2 class="h5 m-0">Menu</h2>
<button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Emoji shortcode"><i class="bi bi-emoji-smile"></i></button>
<button type="button" class="markdown-tool-btn" data-md-action="symbols" title="Symbols &amp; HTML entities" aria-label="Symbols &amp; HTML entities"><i class="bi bi-c-circle"></i></button>
<button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Markdown alert"><i class="bi bi-newspaper"></i></button>
<button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Insert Diagram" aria-label="Insert Diagram"><i class="bi bi-diagram-3"></i></button>
</div>
<div class="markdown-toolbar-group">
<button type="button" class="markdown-tool-btn" data-md-action="fullscreen" title="Fullscreen" aria-label="Fullscreen"><i class="bi bi-arrows-fullscreen"></i></button>
Expand Down Expand Up @@ -774,6 +775,56 @@ <h3 class="modal-section-title">Open-source credits</h3>
</div>
</div>

<!-- Diagram & Chart Modal -->
<div id="diagram-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="diagram-modal-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box reset-modal-box--wide reset-modal-box--xl diagram-modal-box">
<div class="modal-header">
<p id="diagram-modal-title" class="reset-modal-message">Insert Diagram</p>
<button class="modal-close-btn" id="diagram-modal-close" aria-label="Close modal">&times;</button>
</div>

<div class="diagram-modal-body">
<!-- Sidebar Navigation -->
<div class="diagram-modal-sidebar" role="tablist" aria-label="Diagram Categories">
<!-- Populated dynamically via JS -->
</div>

<!-- Content Area -->
<div class="diagram-modal-content">
<div class="diagram-modal-search-wrapper">
<input type="text" id="diagram-modal-search" class="rename-modal-input" placeholder="Search diagrams..." />
</div>

<!-- Diagram Cards Grid -->
<div id="diagram-modal-grid" class="diagram-grid" role="listbox" aria-label="Diagram templates">
<!-- Populated dynamically via JS -->
</div>
<p id="diagram-modal-empty" class="modal-empty" style="display:none;">No diagrams found.</p>

<!-- Preview Container -->
<div class="diagram-modal-preview-section">
<p class="diagram-modal-preview-title">Preview</p>
<div class="diagram-modal-preview-split">
<!-- Left: Code -->
<div class="diagram-preview-code-pane">
<textarea id="diagram-modal-preview-code" readonly class="rename-modal-input diagram-preview-textarea" placeholder="Diagram source code..."></textarea>
</div>
<!-- Right: Visual Preview -->
<div id="diagram-modal-preview" class="diagram-preview-container">
<!-- Populated dynamically with selected template preview -->
</div>
</div>
</div>
</div>
</div>

<div class="reset-modal-actions">
<button class="reset-modal-btn reset-modal-cancel" id="diagram-modal-cancel">Cancel</button>
<button class="reset-modal-btn" id="diagram-modal-insert" disabled>Insert</button>
</div>
</div>
</div>

<!-- GitHub Import Modal -->
<div id="github-import-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="github-import-title" aria-hidden="true" style="display:none;">
<div class="reset-modal-box">
Expand Down
7 changes: 7 additions & 0 deletions desktop-app/resources/js/preview-worker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ let topojsonIdCounter = 0;
let stlIdCounter = 0;
let plantumlIdCounter = 0;
let d2IdCounter = 0;
let graphvizIdCounter = 0;

const markedOptions = {
gfm: true,
Expand Down Expand Up @@ -348,6 +349,11 @@ function configureMarked() {
return `<div class="d2-container is-loading"><div class="d2-diagram" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
}

if (language === "graphviz" || language === "dot") {
const uniqueId = `graphviz-diagram-worker-${graphvizIdCounter++}`;
return `<div class="graphviz-container is-loading"><div class="graphviz-diagram" id="${uniqueId}" data-original-code="${encodeURIComponent(code)}">${escapeHtml(code)}</div></div>`;
}

if (language === "math") {
return `<div class="math-block">$$\n${code}\n$$</div>\n`;
}
Expand Down Expand Up @@ -530,6 +536,7 @@ self.onmessage = function(event) {
stlIdCounter = 0;
plantumlIdCounter = 0;
d2IdCounter = 0;
graphvizIdCounter = 0;
const result = renderSegmentedMarkdown(data.markdown || "", options);
self.postMessage({
type: "render-result",
Expand Down
Loading
Loading