Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non foreignObject SVG export added, fixed bug in png export, added a file for creating a devcontainer and made the project compile #1568

Open
wants to merge 31 commits into
base: main
Choose a base branch
from

Conversation

TomTom2028
Copy link

When exporting an SVG with Carbon, embedding it in software like PowerPoint doesn't work. This is because dom-to-image uses a tag called foreignObject to embed HTML into the SVG, but this feature seems to only be supported in browsers. This issue was resolved by creating the SVG ourselves. Custom font support was added by directly drawing the glyphs onto the SVG.

The PNG export had a bug where text unnecessarily wrapped to the next line. This was fixed by generating an SVG and rendering it onto a canvas.

Importing react-codemirror2 caused server-side errors due to inadequate internal checks in the library to determine if it was running in a browser environment. This was resolved by adding a wrapper that checks if document is defined before requiring the module.

Windows development was not possible before (something to do with the webpack plugin that removes the default codemirror CSS). A devcointainer file was added to mitigate this.

Note: I couldn’t test Twitter export functionality because I lack API keys. If anyone can test this, please let me know if there are issues!

TomTom2028 and others added 30 commits January 8, 2025 22:29
the next thing will be uploaded fonts that are already in b64
tldr: we colone the rect/div with the box shadow, apply a filter on it as before but with a feComposite with operator to out. (this doesn't fill the shape itself, only the shadow outside of it)

Rect fill doesn't mater now, so we just use the shadow colour. Insert the clone before the real rect.
added decently working svg rendering
removed the unneeded composite on the shadows
The dom-to-image png renderer had problems with text wrapping, that could lead to unreadable code.
This is now solved by rendering the custom svg solution to a canvas and returning that
Copy link

vercel bot commented Jan 28, 2025

@TomTom2028 is attempting to deploy a commit to the Carbon Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant