Pascal
c1304d7b28
* ui: add source toggle to mermaid and svg blocks Add a toggle button next to copy and preview that switches a rendered mermaid or svg block to its source code and back. The button is shared by both block types and the rendered view stays the default. The source view reuses the code block scroll container and the highlighted code element captured at transform time, so it matches the app code blocks without highlighting again. Make tall diagrams scroll like text code blocks: safe centering keeps the diagram centered when it fits and falls back to start alignment when it overflows, so the top stays reachable instead of clipping above. Keep the block header opaque and layered above the scrolled diagram, and ignore header clicks in the zoom handler, so a button click never falls through to the zoom dialog. * ui: transparent diagram block header, address review from @allozaur
10 lines
491 B
TypeScript
10 lines
491 B
TypeScript
// Shared constants for diagram blocks (mermaid and svg) that toggle between a
|
|
// rendered view and a source view. The wrapper carries the active mode, css
|
|
// drives the visibility, the click handler only flips the attribute.
|
|
|
|
export const DIAGRAM_VIEW_MODE_ATTR = 'data-view-mode';
|
|
export const DIAGRAM_VIEW_RENDERED = 'rendered';
|
|
export const DIAGRAM_VIEW_SOURCE = 'source';
|
|
export const DIAGRAM_SOURCE_CLASS = 'diagram-source';
|
|
export const TOGGLE_SOURCE_BTN_CLASS = 'toggle-source-btn';
|