I am using the Creative Editor of IMG.LY and want to serve the fonts from my application instead of the IMG.LY CDN. My default asset sources configurations looks like this:
instance.addDefaultAssetSources({
baseURL: '/public/cesdk/assets/',
});
Expected Behavior
I expect the font to be applied directly from the URL specified in addDefaultAssetSources when selected.
Actual Behavior
The font loads from a URL that is appended to the base URL defined in the CreativeEditorSDK configuration.
Steps to Reproduce
If I change the typeface of a text element, all the fonts shown in the selector are loaded from the expected URL:
http://localhost:9000/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_abril_fatface_regular.ttf
However, when I click on a font to apply it to the text element, the font is loaded from:
http://localhost:9000/public/cesdk/engine/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_bungee_inline.ttf
It appears that the base URL of the default asset sources is being appended to the base URL specified in the CreativeEditorSDK config.
An example to reproduce the issue is available here: https://github.com/rtm-celum/imgly-hosted-fonts
Details
I followed these guides
IMG.LY Setup:
import CreativeEditorSDK from '../node_modules/@cesdk/cesdk-js/index.js';
const config = {
license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
userId: 'guides-user',
// Serve assets from IMG.LY cdn or locally
// baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.35.1/assets',
baseURL: '/public/cesdk/engine',
locale: 'en',
};
CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
await instance.addDefaultAssetSources({
baseURL: '/public/cesdk/assets/',
excludeAssetSourceIds: [
'ly.img.vectorpath',
'ly.img.filter.duotone',
'ly.img.filter.lut',
'ly.img.sticker',
'ly.img.image',
'ly.img.colors.defaultPalette',
'ly.img.effect',
'ly.img.blur',
],
});
const engine = instance.engine;
const scene = engine.scene.create();
const page = engine.block.create('page');
engine.block.appendChild(scene, page);
});
Screenshots
Font Selector
Font Selector – Network Trace
Applying the Font
Applying the Font – Network Trace