[QUESTION] Grapes js not Recognize a link if i change a text into link .

[NoumanAhmad-Braqsol]

Hi @artf

i am new at grapes js i write a function to convert seleted text into link . it works fine.

  var selectedText = editor.getSelection().getNative();
 editor.insertHtml("<a href=\""+link+"\" title=\""+title+"\" target=\""+target+"\">" + selectedText + "</a>");

when i select the component type It say it is a text . After refresh the page it Recognize a link. but i dont want to refresh it . How to do this ?

you can see above "Advantage" is a link now but in console it show it is a text

[artf]

Are you talking about the CKEditor or the default RTE?

[NoumanAhmad-Braqsol]

I am using CKEditor .

[artf]

This is not the right repository then

[NoumanAhmad-Braqsol]

Thanks you @artf . But Simple i want to ask if i do a small change in dom or component. how to refresh or render the component . I dont want to refresh the whole dom. i am using

   editor.on('component:update:content', (componentView) => { 
        const model = componentView.model; 
        const innerHTML = componentView.$el[0].innerHTML; 
        const contentModel = model.get('content'); 
        if (contentModel !== innerHTML) { 
        model.set('content', innerHTML); 
        const html = editor.getHtml(); const css = editor.getCss(); 
        editor.DomComponents.getWrapper().set('content', ''); 
        editor.setComponents(html); editor.setStyle(css); 
        } 
        });

This code render all the dom and slow down the editor . Moreover script will not load again

[artf]

By design, if you're using a custom RTE the content is never parsed by the editor and used as it is, as it's the third-party RTE library job to understand how to handle its HTML. You're using something custom with CKEditor (editor.insertHtml...) so you'd need to rerender from the CKEditor side and not GrapesJS. Anyway, in GrapesJS you could simply trigger the parser of new content in this way componentModel.components('<div>new HTML...') but that will create more GrapesJS related HTML and might not work with the custom RTE.