chore(mermaid): add a bottom section for switching between samples

This commit is contained in:
Elian Doran 2026-03-14 09:18:38 +02:00
parent 25cf23f507
commit ce71068f6d
No known key found for this signature in database
3 changed files with 25 additions and 5 deletions

View File

@ -0,0 +1,9 @@
import { ComponentChildren } from "preact";
interface NoteContentSwitcherProps {
children: ComponentChildren;
}
export default function NoteContentSwitcher({ children }: NoteContentSwitcherProps) {
return <p>{children}</p>;
}

View File

@ -1,7 +1,9 @@
import { useCallback } from "preact/hooks";
import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
import NoteContentSwitcher from "../layout/NoteContentSwitcher";
import SvgSplitEditor from "./helpers/SvgSplitEditor";
import { TypeWidgetProps } from "./type_widget";
import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";
let idCounter = 1;
let registeredErrorReporter = false;
@ -30,6 +32,11 @@ export default function Mermaid(props: TypeWidgetProps) {
attachmentName="mermaid-export"
renderSvg={renderSvg}
noteType="mermaid"
extraContent={(
<NoteContentSwitcher>
Foo
</NoteContentSwitcher>
)}
{...props}
/>
);

View File

@ -19,6 +19,7 @@ export interface SplitEditorProps extends EditableCodeProps {
previewButtons?: ComponentChildren;
editorBefore?: ComponentChildren;
forceOrientation?: "horizontal" | "vertical";
extraContent?: ComponentChildren;
}
/**
@ -41,7 +42,7 @@ export default function SplitEditor(props: SplitEditorProps) {
}
function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, extraContent, ...editorProps }: SplitEditorProps) {
const containerRef = useRef<HTMLDivElement>(null);
const splitEditorOrientation = useSplitOrientation(forceOrientation);
@ -57,9 +58,12 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut
{...editorProps}
/>
</div>
{error && <Admonition type="caution" className="note-detail-error-container">
{error}
</Admonition>}
{error && (
<Admonition type="caution" className="note-detail-error-container">
{error}
</Admonition>
)}
{extraContent}
</div>
);