How we can remove default text content from text component 'Insert your text here' ?

Hey @Asifislam110, I don't know if this is the best solution but this was one that I could come up with.

const textBlock = editor.BlockManager.get("text"); // get the text block
textBlock.attributes.content.content = "";

@theSC0RP it will remove the text from all the text component when editor get loaded.

When inserting a text box into Editor the text "Insert your text here" should automatically disappear when user goes to start typing. Currently, you have to remove the text yourself.

Ohh my bad! I thought you didn't want the text component to have any content when dropped in the canvas. For your doubt, I guess you can do something like when a component is selected check if it's a text component and in the view, you will find the el in which you can change the innerText to '' if it is 'Insert your text here'

editor.on('component:selected', (comp) => {
    if(comp.attributes.type === "text") {
        if(comp.view.el.innerText === 'Insert your text here') {
            comp.view.el.innerText = "";
        }
    }
})

Thanks for reporting this, @Asifislam110.

Great question about How we can remove default text content from text component 'Insert your text here' ?. The recommended approach with Components is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!