|
@@ -101,14 +101,13 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
|
|
|
return '';
|
|
return '';
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- const code =
|
|
|
|
|
- children instanceof Array
|
|
|
|
|
- ? children
|
|
|
|
|
- .filter((elem) => typeof elem === 'string') // omit non-string elements (e.g. br element generated by line-breaks option)
|
|
|
|
|
- .join('')
|
|
|
|
|
- : children.toString();
|
|
|
|
|
-
|
|
|
|
|
- let mxgraphData;
|
|
|
|
|
|
|
+ const code = Array.isArray(children)
|
|
|
|
|
+ ? children
|
|
|
|
|
+ .filter((elem) => typeof elem === 'string') // omit non-string elements (e.g. br element generated by line-breaks option)
|
|
|
|
|
+ .join('')
|
|
|
|
|
+ : children.toString();
|
|
|
|
|
+
|
|
|
|
|
+ let mxgraphData: string | undefined;
|
|
|
try {
|
|
try {
|
|
|
mxgraphData = generateMxgraphData(code);
|
|
mxgraphData = generateMxgraphData(code);
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
@@ -137,7 +136,7 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
|
|
|
if (container == null) return;
|
|
if (container == null) return;
|
|
|
|
|
|
|
|
const observerCallback = (mutationRecords: MutationRecord[]) => {
|
|
const observerCallback = (mutationRecords: MutationRecord[]) => {
|
|
|
- mutationRecords.forEach((record: MutationRecord) => {
|
|
|
|
|
|
|
+ for (const record of mutationRecords) {
|
|
|
const target = record.target as HTMLElement;
|
|
const target = record.target as HTMLElement;
|
|
|
|
|
|
|
|
const mxgraphData = target.dataset.mxgraph;
|
|
const mxgraphData = target.dataset.mxgraph;
|
|
@@ -145,7 +144,7 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
|
|
|
const mxgraph = JSON.parse(mxgraphData);
|
|
const mxgraph = JSON.parse(mxgraphData);
|
|
|
onRenderingUpdated?.(mxgraph.xml);
|
|
onRenderingUpdated?.(mxgraph.xml);
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const observer = new MutationObserver(observerCallback);
|
|
const observer = new MutationObserver(observerCallback);
|
|
@@ -163,11 +162,11 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const observer = new ResizeObserver((entries) => {
|
|
const observer = new ResizeObserver((entries) => {
|
|
|
- entries.forEach(() => {
|
|
|
|
|
- // setElementWidth(el.contentRect.width);
|
|
|
|
|
|
|
+ for (const entry of entries) {
|
|
|
|
|
+ // setElementWidth(entry.contentRect.width);
|
|
|
onRenderingStart?.();
|
|
onRenderingStart?.();
|
|
|
renderDrawioWithDebounce();
|
|
renderDrawioWithDebounce();
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
observer.observe(drawioContainerRef.current);
|
|
observer.observe(drawioContainerRef.current);
|
|
|
return () => {
|
|
return () => {
|
|
@@ -194,7 +193,7 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
|
|
|
)}
|
|
)}
|
|
|
|
|
|
|
|
{error == null && (
|
|
{error == null && (
|
|
|
- // eslint-disable-next-line react/no-danger
|
|
|
|
|
|
|
+ // biome-ignore lint/security/noDangerouslySetInnerHtml: ignore
|
|
|
<div dangerouslySetInnerHTML={{ __html: mxgraphHtml }} />
|
|
<div dangerouslySetInnerHTML={{ __html: mxgraphHtml }} />
|
|
|
)}
|
|
)}
|
|
|
</div>
|
|
</div>
|