Issue #3753πŸ’¬ AnsweredOpened September 7, 2021by migokcek0 reactions

When copying a text from anywhere the style manager is not working right.

Quick answerby artf

If you paste a text with its own inner style, you have to change it for each pasted component, as their style overrides the parent one.

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v92

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

When I take any text from Microsoft Office word or any websites it is coming with it’s own css and font-color, and the font-color attribute is not working for the text. Second bug is when I try to change font-size, it’s changing the β€˜text box’ size, not the font-size. I tried to add !Important in StyleManager, but did not work grapesjsBug This photo is from your demo

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

artfβ€’ January 24, 2022

If you paste a text with its own inner style, you have to change it for each pasted component, as their style overrides the parent one.

chirag0110β€’ January 25, 2022

@artf , Even We are not able to change any pasted component. I have added lorem ipsum text from the lorem ipsum site. When I paste the text grapesJs wrap text with the "P" tag with id="i835ol".

I am not able to change the styling of the "P" tag. I have tried in GrapesJs demo too. Please check the screenshot attached.

image

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @migokcek.

The issue with When copying a text from anywhere the style manager is not working right. 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:

  1. Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
  // your operation here
}, 0);
  1. Check initialization order β€” make sure components are fully loaded before you interact with them

  2. 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

Related Questions and Answers

Continue research with similar issue discussions.

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.