feat: Support mermaid flowchart and sequence diagrams to excalidraw diagrams 🥳 (#6920)
* feat: integrate mermaidToExcalidraw * create mermaid to excal dialog * allow mermaid syntax and export in preview * fix * fix webpack config * fix markdown error by using named export * center preview * set elements as selected when inserted onto canvas * persist mermaid data to storage * store canvas data in refs * load mermaid lazily * tweak design * compute width, height correctly for arrows * fix undefined vertex issue * add mermaid icon in dropdown * add a note in dialog * reset preview when error * show error in preview when error * show mermaid error messgae react way * design tweaks * add example and docs link * fix * tweak design to remove scroll bar * show a spinner unless mermaid loaded * regenerate ids when needed via programmatic api, this makes sure for mermaid diagrams ids are regenerated * tweak * add option to transform viewport to scene coords in transform api * make opts optional and use 100% zoom when inserting to canvas * fix arrow bindings in safari and firefox * fix elements insert position and viewport centering * fix: Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates. * defer rendering the preview * tweak text * fix tests * remove only * make design responsive * fix: show extra tools dropdown in mobile * fix mobile css * width auto * upgrade mermaid-to-excalidraw * don't pass appState in deps as its not used * upgrade mermaid-to-excalidraw to fix firefox issue * use types from mermaid-to-excalidraw * upgrade mermaid-to-excalidraw * use stable version of mermaid-to-excalidraw * upgrade mermaid-to-excalidraw * fix width of shapes toolbar for smaller screen size and also fix regression of mobile menu * use i18n * better api * enable test coverage in ui * Add tests * use common utils to update and get text editor * updgrade mermaid-to-excalidraw to support sequence diagrams * fix test * don't update arrow container height anytime in when redrawing text bounding box * increase size limit * increase size limit of vendor to 900kb * use openDialog for mermaid * upgrade mermaid-to-excalidraw * update frame id post generation * upgrade mermaid-to-excalidraw to add entity codes support * update size limit * upgrade mermaid-to-excalidraw package with frame api changes * upgrade mermaid-to-excalidraw to remove directive and use config * don't highlight mermaid tool and remove unused api setSelection * stop using loading state to update text area * move some styling to scss * review fixes * use modifiedTableIcon props and remove stale snap * css * dialog css * fix snap * use dialog border * change mermaidToExcalidrawLib to state * better styling of errors * make modal bigger * fix mobile * update snaps * fix icon color * fix dark mode insert button color * horizontally center spinner * render canvas conditionally on loaded state * rd tweaks * tweak class names * remove max height * typo in example * upgrade mermaid-to-excalidraw * simplify error state * fix height & overflow on vertical breakpoint * fix lint * show errors in overlay * set textarea font family * reduce opacity * update snap * upgrade to mermaid 0.1.2 --------- Co-authored-by: dwelle <luzar.david@gmail.com>pull/6995/head^2
Aakansha Doshi
1 year ago
committed by
GitHub
parent
a7db41c5ba
commit
e8def8da8d
@ -0,0 +1,221 @@
|
|||||||
|
@import "../css/variables.module";
|
||||||
|
|
||||||
|
$verticalBreakpoint: 860px;
|
||||||
|
|
||||||
|
.excalidraw {
|
||||||
|
.dialog-mermaid {
|
||||||
|
&-title {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
&-desc {
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Modal__content .Island {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .excalidraw:not(.excalidraw--mobile)#{&} {
|
||||||
|
padding: 1.25rem;
|
||||||
|
|
||||||
|
.Modal__content {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 750px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
height: auto;
|
||||||
|
// When vertical, we want the height to span whole viewport.
|
||||||
|
// This is also important for the children not to overflow the
|
||||||
|
// modal/viewport (for some reason).
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Island {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
|
.Dialog__content {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-mermaid-body {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr auto;
|
||||||
|
height: 100%;
|
||||||
|
column-gap: 4rem;
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-mermaid-panels {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 4rem;
|
||||||
|
|
||||||
|
grid-row: 1;
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
flex-direction: column;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
margin-left: 4px;
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
width: 20rem;
|
||||||
|
height: 100%;
|
||||||
|
resize: none;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
border: 1px solid var(--dialog-border-color);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
padding: 0.85rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
font-family: monospace;
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
width: auto;
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-preview-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.85rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
// acts as min-height
|
||||||
|
height: 200px;
|
||||||
|
flex-grow: 1;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
|
||||||
|
left center;
|
||||||
|
border-radius: var(--border-radius-lg);
|
||||||
|
border: 1px solid var(--dialog-border-color);
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
// acts as min-height
|
||||||
|
height: 400px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-preview-canvas-container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-preview {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mermaid-error {
|
||||||
|
color: red;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 30px;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: Cascadia;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-mermaid-buttons {
|
||||||
|
grid-column: 2;
|
||||||
|
|
||||||
|
.dialog-mermaid-insert {
|
||||||
|
&.excalidraw-button {
|
||||||
|
font-family: "Assistant";
|
||||||
|
font-weight: 600;
|
||||||
|
height: 2.5rem;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
width: 7.5rem;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $oc-white;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--color-primary-darker);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: var(--color-primary-darkest);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $verticalBreakpoint) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root .excalidraw.theme--dark#{&} {
|
||||||
|
color: var(--color-gray-100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,243 @@
|
|||||||
|
import { useState, useRef, useEffect, useDeferredValue } from "react";
|
||||||
|
import { BinaryFiles } from "../types";
|
||||||
|
import { useApp } from "./App";
|
||||||
|
import { Button } from "./Button";
|
||||||
|
import { Dialog } from "./Dialog";
|
||||||
|
import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE } from "../constants";
|
||||||
|
import {
|
||||||
|
convertToExcalidrawElements,
|
||||||
|
exportToCanvas,
|
||||||
|
} from "../packages/excalidraw/index";
|
||||||
|
import { NonDeletedExcalidrawElement } from "../element/types";
|
||||||
|
import { canvasToBlob } from "../data/blob";
|
||||||
|
import { ArrowRightIcon } from "./icons";
|
||||||
|
import Spinner from "./Spinner";
|
||||||
|
import "./MermaidToExcalidraw.scss";
|
||||||
|
|
||||||
|
import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
|
||||||
|
import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
|
||||||
|
import { t } from "../i18n";
|
||||||
|
import Trans from "./Trans";
|
||||||
|
|
||||||
|
const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
|
||||||
|
const MERMAID_EXAMPLE =
|
||||||
|
"flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
|
||||||
|
|
||||||
|
const saveMermaidDataToStorage = (data: string) => {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW, data);
|
||||||
|
} catch (error: any) {
|
||||||
|
// Unable to access window.localStorage
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const importMermaidDataFromStorage = () => {
|
||||||
|
try {
|
||||||
|
const data = localStorage.getItem(LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW);
|
||||||
|
if (data) {
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
// Unable to access localStorage
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ErrorComp = ({ error }: { error: string }) => {
|
||||||
|
return (
|
||||||
|
<div data-testid="mermaid-error" className="mermaid-error">
|
||||||
|
Error! <p>{error}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const MermaidToExcalidraw = () => {
|
||||||
|
const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] = useState<{
|
||||||
|
loaded: boolean;
|
||||||
|
api: {
|
||||||
|
parseMermaidToExcalidraw: (
|
||||||
|
defination: string,
|
||||||
|
options: MermaidOptions,
|
||||||
|
) => Promise<MermaidToExcalidrawResult>;
|
||||||
|
} | null;
|
||||||
|
}>({ loaded: false, api: null });
|
||||||
|
|
||||||
|
const [text, setText] = useState("");
|
||||||
|
const deferredText = useDeferredValue(text.trim());
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
const canvasRef = useRef<HTMLDivElement>(null);
|
||||||
|
const data = useRef<{
|
||||||
|
elements: readonly NonDeletedExcalidrawElement[];
|
||||||
|
files: BinaryFiles | null;
|
||||||
|
}>({ elements: [], files: null });
|
||||||
|
|
||||||
|
const app = useApp();
|
||||||
|
|
||||||
|
const resetPreview = () => {
|
||||||
|
const canvasNode = canvasRef.current;
|
||||||
|
|
||||||
|
if (!canvasNode) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const parent = canvasNode.parentElement;
|
||||||
|
if (!parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
parent.style.background = "";
|
||||||
|
setError(null);
|
||||||
|
canvasNode.replaceChildren();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadMermaidToExcalidrawLib = async () => {
|
||||||
|
const api = await import(
|
||||||
|
/* webpackChunkName:"mermaid-to-excalidraw" */ "@excalidraw/mermaid-to-excalidraw"
|
||||||
|
);
|
||||||
|
setMermaidToExcalidrawLib({ loaded: true, api });
|
||||||
|
};
|
||||||
|
loadMermaidToExcalidrawLib();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const data = importMermaidDataFromStorage() || MERMAID_EXAMPLE;
|
||||||
|
setText(data);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const renderExcalidrawPreview = async () => {
|
||||||
|
const canvasNode = canvasRef.current;
|
||||||
|
const parent = canvasNode?.parentElement;
|
||||||
|
if (
|
||||||
|
!mermaidToExcalidrawLib.loaded ||
|
||||||
|
!canvasNode ||
|
||||||
|
!parent ||
|
||||||
|
!mermaidToExcalidrawLib.api
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!deferredText) {
|
||||||
|
resetPreview();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const { elements, files } =
|
||||||
|
await mermaidToExcalidrawLib.api.parseMermaidToExcalidraw(
|
||||||
|
deferredText,
|
||||||
|
{
|
||||||
|
fontSize: DEFAULT_FONT_SIZE,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
data.current = {
|
||||||
|
elements: convertToExcalidrawElements(elements, {
|
||||||
|
regenerateIds: true,
|
||||||
|
}),
|
||||||
|
files,
|
||||||
|
};
|
||||||
|
|
||||||
|
const canvas = await exportToCanvas({
|
||||||
|
elements: data.current.elements,
|
||||||
|
files: data.current.files,
|
||||||
|
exportPadding: DEFAULT_EXPORT_PADDING,
|
||||||
|
maxWidthOrHeight:
|
||||||
|
Math.max(parent.offsetWidth, parent.offsetHeight) *
|
||||||
|
window.devicePixelRatio,
|
||||||
|
});
|
||||||
|
// if converting to blob fails, there's some problem that will
|
||||||
|
// likely prevent preview and export (e.g. canvas too big)
|
||||||
|
await canvasToBlob(canvas);
|
||||||
|
parent.style.background = "var(--default-bg-color)";
|
||||||
|
canvasNode.replaceChildren(canvas);
|
||||||
|
} catch (e: any) {
|
||||||
|
parent.style.background = "var(--default-bg-color)";
|
||||||
|
if (deferredText) {
|
||||||
|
setError(e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
renderExcalidrawPreview();
|
||||||
|
}, [deferredText, mermaidToExcalidrawLib]);
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
app.setOpenDialog(null);
|
||||||
|
saveMermaidDataToStorage(text);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelect = () => {
|
||||||
|
const { elements: newElements, files } = data.current;
|
||||||
|
app.addElementsFromPasteOrLibrary({
|
||||||
|
elements: newElements,
|
||||||
|
files,
|
||||||
|
position: "center",
|
||||||
|
fitToContent: true,
|
||||||
|
});
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
className="dialog-mermaid"
|
||||||
|
onCloseRequest={onClose}
|
||||||
|
size={1200}
|
||||||
|
title={
|
||||||
|
<>
|
||||||
|
<p className="dialog-mermaid-title">{t("mermaid.title")}</p>
|
||||||
|
<span className="dialog-mermaid-desc">
|
||||||
|
<Trans
|
||||||
|
i18nKey="mermaid.description"
|
||||||
|
flowchartLink={(el) => (
|
||||||
|
<a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
|
||||||
|
)}
|
||||||
|
sequenceLink={(el) => (
|
||||||
|
<a href="https://mermaid.js.org/syntax/sequenceDiagram.html">
|
||||||
|
{el}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="dialog-mermaid-body">
|
||||||
|
<div className="dialog-mermaid-panels">
|
||||||
|
<div className="dialog-mermaid-panels-text">
|
||||||
|
<label>{t("mermaid.syntax")}</label>
|
||||||
|
|
||||||
|
<textarea
|
||||||
|
onChange={(event) => setText(event.target.value)}
|
||||||
|
value={text}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="dialog-mermaid-panels-preview">
|
||||||
|
<label>{t("mermaid.preview")}</label>
|
||||||
|
<div className="dialog-mermaid-panels-preview-wrapper">
|
||||||
|
{error && <ErrorComp error={error} />}
|
||||||
|
{mermaidToExcalidrawLib.loaded ? (
|
||||||
|
<div
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{ opacity: error ? "0.15" : 1 }}
|
||||||
|
className="dialog-mermaid-panels-preview-canvas-container"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Spinner size="2rem" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="dialog-mermaid-buttons">
|
||||||
|
<Button className="dialog-mermaid-insert" onSelect={onSelect}>
|
||||||
|
{t("mermaid.button")}
|
||||||
|
<span>{ArrowRightIcon}</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default MermaidToExcalidraw;
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,167 @@
|
|||||||
|
import { act, fireEvent, render } from "./test-utils";
|
||||||
|
import { Excalidraw } from "../packages/excalidraw/index";
|
||||||
|
import React from "react";
|
||||||
|
import { expect, vi } from "vitest";
|
||||||
|
import * as MermaidToExcalidraw from "@excalidraw/mermaid-to-excalidraw";
|
||||||
|
import { getTextEditor, updateTextEditor } from "./queries/dom";
|
||||||
|
|
||||||
|
vi.mock("@excalidraw/mermaid-to-excalidraw", async (importActual) => {
|
||||||
|
const module = (await importActual()) as any;
|
||||||
|
|
||||||
|
return {
|
||||||
|
__esModule: true,
|
||||||
|
...module,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const parseMermaidToExcalidrawSpy = vi.spyOn(
|
||||||
|
MermaidToExcalidraw,
|
||||||
|
"parseMermaidToExcalidraw",
|
||||||
|
);
|
||||||
|
|
||||||
|
parseMermaidToExcalidrawSpy.mockImplementation(
|
||||||
|
async (
|
||||||
|
definition: string,
|
||||||
|
options?: MermaidToExcalidraw.MermaidOptions | undefined,
|
||||||
|
) => {
|
||||||
|
const firstLine = definition.split("\n")[0];
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
if (firstLine === "flowchart TD") {
|
||||||
|
resolve({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
id: "Start",
|
||||||
|
type: "rectangle",
|
||||||
|
groupIds: [],
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: 69.703125,
|
||||||
|
height: 44,
|
||||||
|
strokeWidth: 2,
|
||||||
|
label: {
|
||||||
|
groupIds: [],
|
||||||
|
text: "Start",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
link: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Stop",
|
||||||
|
type: "rectangle",
|
||||||
|
groupIds: [],
|
||||||
|
x: 2.7109375,
|
||||||
|
y: 94,
|
||||||
|
width: 64.28125,
|
||||||
|
height: 44,
|
||||||
|
strokeWidth: 2,
|
||||||
|
label: {
|
||||||
|
groupIds: [],
|
||||||
|
text: "Stop",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
link: null,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Start_Stop",
|
||||||
|
type: "arrow",
|
||||||
|
groupIds: [],
|
||||||
|
x: 34.852,
|
||||||
|
y: 44,
|
||||||
|
strokeWidth: 2,
|
||||||
|
points: [
|
||||||
|
[0, 0],
|
||||||
|
[0, 50],
|
||||||
|
],
|
||||||
|
roundness: {
|
||||||
|
type: 2,
|
||||||
|
},
|
||||||
|
start: {
|
||||||
|
id: "Start",
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
id: "Stop",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
reject(new Error("ERROR"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
vi.spyOn(React, "useRef").mockReturnValue({
|
||||||
|
current: {
|
||||||
|
parseMermaidToExcalidraw: parseMermaidToExcalidrawSpy,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Test <MermaidToExcalidraw/>", () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await render(
|
||||||
|
<Excalidraw
|
||||||
|
initialData={{
|
||||||
|
appState: {
|
||||||
|
openDialog: "mermaid",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should open mermaid popup when active tool is mermaid", async () => {
|
||||||
|
const dialog = document.querySelector(".dialog-mermaid")!;
|
||||||
|
|
||||||
|
expect(dialog.outerHTML).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should close the popup and set the tool to selection when close button clicked", () => {
|
||||||
|
const dialog = document.querySelector(".dialog-mermaid")!;
|
||||||
|
const closeBtn = dialog.querySelector(".Dialog__close")!;
|
||||||
|
fireEvent.click(closeBtn);
|
||||||
|
expect(document.querySelector(".dialog-mermaid")).toBe(null);
|
||||||
|
expect(window.h.state.activeTool).toStrictEqual({
|
||||||
|
customType: null,
|
||||||
|
lastActiveTool: null,
|
||||||
|
locked: false,
|
||||||
|
type: "selection",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should show error in preview when mermaid library throws error", async () => {
|
||||||
|
const dialog = document.querySelector(".dialog-mermaid")!;
|
||||||
|
const selector = ".dialog-mermaid-panels-text textarea";
|
||||||
|
let editor = await getTextEditor(selector, false);
|
||||||
|
|
||||||
|
expect(dialog.querySelector('[data-testid="mermaid-error"]')).toBeNull();
|
||||||
|
|
||||||
|
expect(editor.textContent).toMatchInlineSnapshot(`
|
||||||
|
"flowchart TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[Car]"
|
||||||
|
`);
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
updateTextEditor(editor, "flowchart TD1");
|
||||||
|
await new Promise((cb) => setTimeout(cb, 0));
|
||||||
|
});
|
||||||
|
editor = await getTextEditor(selector, false);
|
||||||
|
|
||||||
|
expect(editor.textContent).toBe("flowchart TD1");
|
||||||
|
expect(dialog.querySelector('[data-testid="mermaid-error"]'))
|
||||||
|
.toMatchInlineSnapshot(`
|
||||||
|
<div
|
||||||
|
class="mermaid-error"
|
||||||
|
data-testid="mermaid-error"
|
||||||
|
>
|
||||||
|
Error!
|
||||||
|
<p>
|
||||||
|
ERROR
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active tool is mermaid 1`] = `
|
||||||
|
"<div class=\\"Modal Dialog dialog-mermaid\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-labelledby=\\"dialog-title\\" data-prevent-outside-click=\\"true\\"><div class=\\"Modal__background\\"></div><div class=\\"Modal__content\\" style=\\"--max-width: 1200px;\\" tabindex=\\"0\\"><div class=\\"Island\\"><h2 id=\\"test-id-dialog-title\\" class=\\"Dialog__title\\"><span class=\\"Dialog__titleContent\\"><p class=\\"dialog-mermaid-title\\">Mermaid to Excalidraw</p><span class=\\"dialog-mermaid-desc\\">Currently only <a href=\\"https://mermaid.js.org/syntax/flowchart.html\\">Flowcharts</a> and <a href=\\"https://mermaid.js.org/syntax/sequenceDiagram.html\\">Sequence Diagrams</a> are supported. The other types will be rendered as image in Excalidraw.<br></span></span></h2><button class=\\"Dialog__close\\" title=\\"Close\\" aria-label=\\"Close\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"img\\" viewBox=\\"0 0 20 20\\" class=\\"\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><g clip-path=\\"url(#a)\\" stroke=\\"currentColor\\" stroke-width=\\"1.25\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><path d=\\"M15 5 5 15M5 5l10 10\\"></path></g><defs><clipPath id=\\"a\\"><path fill=\\"#fff\\" d=\\"M0 0h20v20H0z\\"></path></clipPath></defs></svg></button><div class=\\"Dialog__content\\"><div class=\\"dialog-mermaid-body\\"><div class=\\"dialog-mermaid-panels\\"><div class=\\"dialog-mermaid-panels-text\\"><label>Mermaid Syntax</label><textarea>flowchart TD
|
||||||
|
A[Christmas] -->|Get money| B(Go shopping)
|
||||||
|
B --> C{Let me think}
|
||||||
|
C -->|One| D[Laptop]
|
||||||
|
C -->|Two| E[iPhone]
|
||||||
|
C -->|Three| F[Car]</textarea></div><div class=\\"dialog-mermaid-panels-preview\\"><label>Preview</label><div class=\\"dialog-mermaid-panels-preview-wrapper\\"><div style=\\"opacity: 1;\\" class=\\"dialog-mermaid-panels-preview-canvas-container\\"></div></div></div></div><div class=\\"dialog-mermaid-buttons\\"><button type=\\"button\\" class=\\"excalidraw-button dialog-mermaid-insert\\">Insert<span><svg aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"img\\" viewBox=\\"0 0 20 20\\" class=\\"\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><g stroke-width=\\"1.25\\"><path d=\\"M4.16602 10H15.8327\\"></path><path d=\\"M12.5 13.3333L15.8333 10\\"></path><path d=\\"M12.5 6.66666L15.8333 9.99999\\"></path></g></svg></span></button></div></div></div></div></div></div>"
|
||||||
|
`;
|
||||||
@ -1,13 +1,19 @@
|
|||||||
import { waitFor } from "@testing-library/dom";
|
import { waitFor } from "@testing-library/dom";
|
||||||
|
import { fireEvent } from "@testing-library/react";
|
||||||
|
|
||||||
export const getTextEditor = async (waitForEditor = true) => {
|
export const getTextEditor = async (selector: string, waitForEditor = true) => {
|
||||||
const query = () =>
|
const query = () => document.querySelector(selector) as HTMLTextAreaElement;
|
||||||
document.querySelector(
|
|
||||||
".excalidraw-textEditorContainer > textarea",
|
|
||||||
) as HTMLTextAreaElement;
|
|
||||||
if (waitForEditor) {
|
if (waitForEditor) {
|
||||||
await waitFor(() => expect(query()).not.toBe(null));
|
await waitFor(() => expect(query()).not.toBe(null));
|
||||||
return query();
|
return query();
|
||||||
}
|
}
|
||||||
return query();
|
return query();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const updateTextEditor = (
|
||||||
|
editor: HTMLTextAreaElement,
|
||||||
|
value: string,
|
||||||
|
) => {
|
||||||
|
fireEvent.change(editor, { target: { value } });
|
||||||
|
editor.dispatchEvent(new Event("input"));
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue