phx-react
Version:
PHX REACT
49 lines • 2.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ExcalidrawImage;
const tslib_1 = require("tslib");
const excalidraw_1 = require("@excalidraw/excalidraw");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("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
*/
function ExcalidrawImage({ appState, elements, files, imageContainerRef, rootClassName = null, }) {
var _a;
const [Svg, setSvg] = (0, react_1.useState)(null);
(0, react_1.useEffect)(() => {
const setContent = async () => {
const svg = await (0, excalidraw_1.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