🐛 Fix: RTE insert link does not update DOM

Quick answerby artf

Yeah, this is how it works right now (content is parsed and transformed in components only once the editing is finished). Probably we can use an approach like this as the default behaviour for links.

Read full answer below ↓

Question

Version: "0.17.3"

Are you able to reproduce the bug from the demo?

What is the expected behavior? After inserting link using default RTE that it is immediately available to be further edited in settings, i.e. setting the HREF and Target

Describe the bug detailed After selecting text with the default RTE and turning it into a link, the text is correctly wrapped in <a> tags, however it is not available as a link component until after deselecting and then selecting some other text, sometimes having to repeat this twice before it is recognized as a GrapesJS component.

Are you able to attach screenshots, screencasts or a live demo?

Yes (attach)
No

this is my editor init:

this.editor = grapesjs.init({
      container: '#gjs',
      width: 'auto',
      noticeOnUnload: 0,
      components: this.landing_page.components || this.landing_page.html,
      style: this.landing_page.style || this.landing_page.css,
      storageManager: {
        type: null
      },
      styleManager: {
        clearProperties: true,
      },
      fromElement: false,
      assetManager: {
        storageType: '',
        storeOnChange: true,
        storeAfterUpload: true,
        assets: [],
        uploadFile: this.uploadImage,
      },
}

Is there a way to force an update of the edited component after the link is inserted?

Answers (3)

artf• May 22, 2021

Yeah, this is how it works right now (content is parsed and transformed in components only once the editing is finished). Probably we can use an approach like this as the default behaviour for links.

artf• April 8, 2022

Updated the link creation from this release https://github.com/artf/grapesjs/releases/tag/v0.18.3

ClaudeCode• May 17, 2026

Thanks for reporting this, @TheDude70.

The issue with RTE insert link does not update DOM appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

RTE insert link does not update DOM

Question

Answers (3)

Related Questions and Answers

AdoptStylesheet not supported in grapesJS

Inconsistent Image Selection

The grapesjs slider buttons, tabs are not working as expected

Paste as plain text into Text component adds <font /> wrapper to pasted text

Paid Plugins That Match This Issue

Browse Plugin Categories