phx-react
Version:
PHX REACT
45 lines • 1.98 kB
JavaScript
import { exportToSvg } from '@excalidraw/excalidraw';
import * as React from 'react';
import { useEffect, useState } from 'react';
// exportToSvg has fonts from excalidraw.com
// We don't want them to be used in open source
const removeStyleFromSvg_HACK = (svg) => {
var _a;
const styleTag = (_a = svg === null || svg === void 0 ? void 0 : svg.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
// Generated SVG is getting double-sized by height and width attributes
// We want to match the real size of the SVG element
const viewBox = svg.getAttribute('viewBox');
if (viewBox != null) {
const viewBoxDimensions = viewBox.split(' ');
svg.setAttribute('width', viewBoxDimensions[2]);
svg.setAttribute('height', viewBoxDimensions[3]);
}
if (styleTag && styleTag.tagName === 'style') {
styleTag.remove();
}
};
/**
* @explorer-desc
* A component for rendering Excalidraw elements as a static image
*/
export default function ExcalidrawImage({ appState, elements, files, imageContainerRef, rootClassName = null, }) {
var _a;
const [Svg, setSvg] = useState(null);
useEffect(() => {
const setContent = async () => {
const svg = await exportToSvg({
appState,
elements,
files,
});
removeStyleFromSvg_HACK(svg);
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.setAttribute('display', 'block');
setSvg(svg);
};
setContent();
}, [elements, files, appState]);
return (React.createElement("div", { ref: imageContainerRef, className: rootClassName !== null && rootClassName !== void 0 ? rootClassName : '', dangerouslySetInnerHTML: { __html: (_a = Svg === null || Svg === void 0 ? void 0 : Svg.outerHTML) !== null && _a !== void 0 ? _a : '' } }));
}
//# sourceMappingURL=ExcalidrawImage.js.map