GrapesJS TUI Image Editor svgs are not loading

[BilalMustafa-cs]

@artf Hello, I have implemented Grapes TUI Image Editor in my angular application. it was working good before 5 March 2021. But now its svgs are not showing in application and also on live demo of Editor. I have also cloned the repository from gitHub, the same is not working also. Is there any issue with editor.? Here is my implemented screen snip.

here is live demo url and screen snip

url: https://grapesjs.com/demo.html

expected result should be like this:

[thoeby]

The links for svg graphics point to a site which seems to be not available: https://raw.githubusercontent.com/nhnent/tui.image-editor/production/dist/svg/

You can instead get those graphics from the original repo: https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor/src/svg

[BilalMustafa-cs]

The links for svg graphics point to a site which seems to be not available: https://raw.githubusercontent.com/nhnent/tui.image-editor/production/dist/svg/

You can instead get those graphics from the original repo: https://github.com/nhn/tui.image-editor/tree/master/apps/image-editor/src/svg

thanks for your response i have implemented the same

[taborskiy]

it works for me npm i tui-image-editor

import iconD from 'tui-image-editor/dist/svg/icon-d.svg'
import iconB from 'tui-image-editor/dist/svg/icon-b.svg'
import iconA from 'tui-image-editor/dist/svg/icon-a.svg'
import iconC from 'tui-image-editor/dist/svg/icon-c.svg'

{
      config: {
        includeUI: {
          initMenu: 'filter',
        },
      },
      icons: {
        'menu.normalIcon.path': iconD,
        'menu.activeIcon.path': iconB,
        'menu.disabledIcon.path': iconA,
        'menu.hoverIcon.path': iconC,
        'submenu.normalIcon.path': iconD,
        'submenu.activeIcon.path': iconC,
      },
    }

[deep-envertis]

I have followed the same concept as per @taborskiy as well as the docs and icons aren't showing up !! I am using laravel mix here as compiler.

import iconD from '../../public/images/editor/svg/icon-d.svg'; import iconB from '../../public/images/editor/svg/icon-b.svg'; import iconA from '../../public/images/editor/svg/icon-a.svg'; import iconC from '../../public/images/editor/svg/icon-c.svg';

let pluginOpts = {

    config: {
        includeUI: {
            initMenu: 'filter',
        },
    },
    height: '250px',
    icons: {
        'menu.normalIcon.path': iconD,
        'menu.activeIcon.path': iconB,
        'menu.disabledIcon.path': iconA,
        'menu.hoverIcon.path': iconC,
        'submenu.normalIcon.path': iconD,
        'submenu.activeIcon.path': iconC,
    },
}

}

[artf]

Updating the version of the Image Editor seems to fix the issue with icons. I'm using this config on the website preset demo and looks like it works:

'grapesjs-tui-image-editor': {
            script: [
              'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
            ],
            style: [
              'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
              'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
            ],
          },

[deep-envertis]

applied but the issue still persist

let pluginOpts = {
    [tUIImageEditor]: {
        config: {
            includeUI: {
                initMenu: 'filter',
            },
        },
        height: '250px',
        icons: {
            'menu.normalIcon.path': iconD,
            'menu.activeIcon.path': iconB,
            'menu.disabledIcon.path': iconA,
            'menu.hoverIcon.path': iconC,
            'submenu.normalIcon.path': iconD,
            'submenu.activeIcon.path': iconC,
        },
        script: [
            'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
            'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
            'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
        ],
        style: [
            'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
            'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
        ],
    }
}

Here's my console screenshot

[artf]

IDK @deep-envertis maybe you can start with the same configuration I've suggested... (it might be your icons option)

[deep-envertis]

Here's the updated code:

pluginOpts: {
        [tUIImageEditor]: {
            config: {
                includeUI: {
                    initMenu: 'filter'
                }
            },
            icons: {
                'menu.normalIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg`,
                'menu.activeIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg`,
                'menu.disabledIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg`,
                'menu.hoverIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg`,
                'submenu.normalIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg`,
                'submenu.activeIcon.path': `https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg`,
            },
            script: [
                'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
            ],
            style: [
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
            ],
        }
    }

I got the icon urls from tui editor's docs (https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md#4-menu-submenu-svg-icon-setting).

it still doesn't work !!

[artf]

man I told you to start with my suggestion... remove the config and icons, check, then you can add your stuff and see if they break

[deep-envertis]

pluginOpts: {
        [tUIImageEditor]: {
            script: [
                'https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js',
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.js',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.js'
            ],
            style: [
                'https://uicdn.toast.com/tui-color-picker/v2.2.7/tui-color-picker.min.css',
                'https://uicdn.toast.com/tui-image-editor/v3.15.2/tui-image-editor.min.css',
            ],
        }
    }

the still remains.