| | |
| | | import { useEffect, useRef, useState } from 'react' |
| | | import { SVG } from '@svgdotjs/svg.js' |
| | | import ImagePreview from '@/app/components/base/image-uploader/image-preview' |
| | | import DOMPurify from 'dompurify' |
| | | |
| | | export const SVGRenderer = ({ content }: { content: string }) => { |
| | | const svgRef = useRef<HTMLDivElement>(null) |
| | |
| | | if (!(svgElement instanceof SVGElement)) |
| | | throw new Error('Invalid SVG content') |
| | | |
| | | const originalWidth = Number.parseInt(svgElement.getAttribute('width') || '400', 10) |
| | | const originalHeight = Number.parseInt(svgElement.getAttribute('height') || '600', 10) |
| | | const originalWidth = parseInt(svgElement.getAttribute('width') || '400', 10) |
| | | const originalHeight = parseInt(svgElement.getAttribute('height') || '600', 10) |
| | | draw.viewbox(0, 0, originalWidth, originalHeight) |
| | | |
| | | svgRef.current.style.width = `${Math.min(originalWidth, 298)}px` |
| | | |
| | | const rootElement = draw.svg(DOMPurify.sanitize(content)) |
| | | const rootElement = draw.svg(content) |
| | | |
| | | rootElement.click(() => { |
| | | setImagePreview(svgToDataURL(svgElement as Element)) |
| | | }) |
| | | } |
| | | catch { |
| | | catch (error) { |
| | | if (svgRef.current) |
| | | svgRef.current.innerHTML = '<span style="padding: 1rem;">Error rendering SVG. Wait for the image content to complete.</span>' |
| | | } |