fix(mind-map): show text in links between nodes on export

[lzinga]

This ended up being slightly larger than expected but I think it is an over all good change and enhanced the over all usage in my opinion.

I chose to go with https://github.com/zumerlab/snapdom over modern-screenshot due to its more active maintenance and richer feature set. You could technically use this to download any div/html from a page as an svg/png which may open the door for future exports. You can see some of the things it can capture here https://snapdom.dev/

Since I changed the download functions, I also had to update apps\client\src\widgets\type_widgets\helpers\SvgSplitEditor.tsx to use the new functions. I searched the rest of the project for any usages of downloadSvg or downloadSvgAsPng and the changes are all I found. I would have kept the original functions but since they don't seem to be used in many places, I figured it was worthwhile to do a slightly larger refactor.

This change also fixes these issues -
Fixes #7829 - here is an image directly exported from trilium using the new methods.

[gemini-code-assist]

Summary of Changes

Hello @lzinga, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request overhauls the SVG and PNG export mechanisms within the application by integrating the snapdom library. The primary goal is to resolve rendering inconsistencies, particularly for mind maps where link text was previously missing in exports, and to establish a more modern and capable foundation for future export features. The refactoring involved updating core utility functions and their consumers to utilize the new snapdom-based approach.

Highlights

• Enhanced Export Functionality: The pull request introduces the @zumer/snapdom library to significantly improve the export capabilities for mind maps and other SVG content, addressing issues with text rendering in exported images.
• Refactored Download Utilities: The existing downloadSvg and downloadSvgAsPng utility functions have been replaced with new downloadAsSvg and downloadAsPng functions, leveraging snapdom for more robust and accurate rendering and downloading.
• Mind Map Export Fix: This change specifically fixes an issue where text in links between nodes was not visible when exporting mind maps, as demonstrated by the provided screenshot and linked issue.
• Centralized Element Preparation: A new helper function, prepareElementForSnapdom, was added to handle the parsing of SVG/HTML strings and temporary DOM attachment, ensuring proper style computation before snapdom processes the element.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces snapdom to fix an issue with mind map exports, which is a great improvement that also simplifies the download logic. The refactoring of the download functions is well-executed. I've identified a couple of high-severity bugs in SvgSplitEditor.tsx where filenames for exported files will have double extensions. Additionally, I've provided some medium-severity suggestions to improve code maintainability by reducing code duplication and fixing a minor style issue. Overall, these are solid changes that enhance the application's export functionality.

[gemini-code-assist]

The options for snapdom are duplicated in downloadAsPng on line 725. To improve maintainability and ensure consistency, consider extracting these options into a shared constant defined above both functions. For example:

const SNAPDOM_OPTIONS = {
    backgroundColor: "transparent",
    scale: 2
};

[lzinga]

I don't think this is needed at this point, if we use it in more places then I would say lets put it into its own object.

[gemini-code-assist]

These snapdom options are also used in utils.ts. It might be beneficial to have a shared configuration for snapdom to ensure consistency across different usages. For example, you could export the options object from utils.ts and import it here.

[lzinga]

I don't think this is needed at this point, if we use it in more places then I would say lets put it into its own object.