Can't use tui-chart event if I'm not using it to render Markdown content

[jack9603301]

Version

2.17.1

Development Environment

wordpress,web

Help seeking problem

Hello, I'm working on a wordpress plugin which base on tui-editor, to prevent doing repeat rendering(which is unnecessary if the markdown content didn't change), I cached the render results from tui-editor.But this cause an issue, I can't use the tui-chart's javascript event if I don't use it to render Markdown content, how can I work out this issue?

[jung-han]

Hi @jack9603301.
If you add problem code and screenshot this issue, I'll help you.

[jack9603301]

The code below will render markdown content to html at the first time that the page loaded, then I save the render result to localStorage:

    var viewer = new Viewer({
        el: ele[0],
        viewer: true,
        initialValue: ptext,
        exts: [
            {
                name: 'chart',
                minWidth: 100,
                maxWidth: 600,
                minHeight: 100,
                maxHeight: 300
            },
            'colorSyntax',
            'uml',
            'mark',
            'table',
            'mathsupport'
        ]
    });

Because this is the first time loading the page, so the chart will popup tips when mouse cursor move on the column:

This is the gif demo:

But when I reload the page(not first time load anymore), the code above will not run anymore, because I have cache the result, I will get the render result from localStorage cache and write to the page directly, tui doesn't need to do the same work(this is not necessary).

But the issue appear here, because I didn't call the rendering code above, so the Chart won't popup the tips anymore when I move mouse cursor on to the Chart column, so this is the issue I encountered, how can I bind the onmousemove event to the chart so I can fixed this? Thank you so much!

[jack9603301]

Hi @jack9603301.
If you add problem code and screenshot this issue, I'll help you.

Specific questions I have sent, please read the reply

[jung-han]

@jack9603301
Is it a problem to behave differently when rendered using cached results?
If not, do you want to use different options with cached results?
If you want to run as different options, we recommend re-rendering the charts and editors.

[jack9603301]

Yes, there is a problem when render using cache, as you can see below, when I move the mouse cursor to the chart column, there is no popup anymore.

I don't think I can re-render the charts alone, because all markdown content had convert into html and I store this html to localStorage, when you reload the page, I'm doing something like this:

var cachedResults = window.localStorage.getItem('cached_results');
if(cachedResults==null){
    var ele = $('.container').get(0);
    var viewer = new Viewer({
        el: ele,
        viewer: true,
        initialValue: ptext,
        exts: [
            {
                name: 'chart',
                minWidth: 100,
                maxWidth: 600,
                minHeight: 100,
                maxHeight: 300
            },
            'colorSyntax',
            'uml',
            'mark',
            'table',
            'mathsupport'
        ]
    });
}else{
    $('.container').html(cachedResults);
}

So, should I re-render all content by tui? Is that I can't use cache?

[jack9603301]

@jung-han Specific questions I have sent, please read the reply

[jung-han]

@jack9603301
If you use the html value, it seems that the event handler disappears and is affected.
How about copying the markdown value using the editor api getValue and setValueon the Viewer?

[jack9603301]

@jung-han Yes, the event handler disappears when I using the cached html directly, but I don't catch this sentence "copying the markdown value using the editor api getValue and setValue on the Viewer?", are you saying that I can't use the cache? I should re-render the markdown, right?

[jung-han]

@jack9603301
The Editor API I said are here.

• https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#getValue
• https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#setValue
  We do not provide other options to use through the cache.

[jack9603301]

Ok, I was thinking using cache to avoid the unnecessary render, seems I have to give up.