How to change image upload behavior?
The default SidePanel Component has Upload
tab to import local images into the project. By default polotno
just converting local file into base64 string. Resulted URL strings are using for image
elements. Using base64 string may produce projects with a large size, since images will be fully encoded inside JSON.
It is highly recommended to upload images to your server. This will make JSON much smaller and easier to read, and also significantly improve the performance of the editor.
If you want to upload local images to your server you can do this:
How to translate UI?
If you would like to translate the UI into a different language or change some labels, you can use this:
If you need to know full scheme of translation object you can use:
If you are working on a translation for any language or just changing default labels, please share your results with on discord community. It will help us make better defaults for UI and to make ready-to-use translations (thank you!).
Also you can use the same translation API to translate your custom components.
How to change available fonts?
There are three types of fonts in Polotno
:
Google fonts
User fonts defined in
store.fonts
Global fonts
1. Google fonts usage
In the default text toolbar, Polotno
is using a very large list of google fonts. If you don't want to enable the full list or if you want to disable it you can use this:
By default Polotno will load regular, italic, bold and bold italic styles from the font. If you want to customize this and change default styles you can use this:
2. User fonts
If you want to add/remove fonts specific for the user you can use Store Fonts API.
Fonts added into store
directly will be included into JSON export via store.toJSON()
.
A user can add/remove fonts from the default "Text" side-panel inside "fonts" tab.
3. Global fonts
If you want to add fonts that you want to enable for all users you can use global API. Fonts added via global API will be NOT added into JSON export.
Hot to get API endpoints to get a list of available google fonts?
Change default preset colors in color picker
By default color picker generates preset colors from (1) used colors in the design and (2) default colors. You can change your logic with your own presets