GrapesJS Issues

kanaihyakumar

Earlier, I needed to be more clearer about the steps to reproduce the issue. Here is the refined steps to produce the issue. Steps to Reproduce the Issue:Click on the section directly.Observe the resizable options displayed.Click in an are...

kanaihyakumar

Trust me, I was lucky that I was able to find this tragic behavior of clicking different places inside section was behaving but different.

artf

I don't see it disappearing if not when you press the click but that is expected as it gets ready to be dragged

artf

@MdShadabAhamad please avoid opening issues from discussion, thanks

icoco

looks no studio source code , where you can find the studio?

GJS Helper

Yes, GrapesJS provides robust functionality to implement and embed custom JavaScript code within your web pages, both for dynamic content on the canvas and for the final exported output. There are several methods to achieve this, depending...

artf

UndoManager tracks component state changes, not its DOM. This should work in your case element.components('Hello Planet')

leo-budgetsimple

@artf Thanks!

GJS Helper

The issue you're encountering is due to directly manipulating the component's innerHTML property, which bypasses GrapesJS's internal change tracking mechanism. GrapesJS's undo/redo manager (part of the Editor instance) only registers chang...

artf

You can skip removing the components (instance.value.Components.clear()) as you're destroying the editor anyway This shouldn't generate any error

WilliamDASILVA

@jdkcoder By commenting the reRender function we don't have the issue anymore. The lastComponent error comes from the this.get('selected') in Editor being undefined at some point. And by checking the debugger, it indeed becomes undefined w...

GJS Helper

It looks like you're encountering two distinct issues in your GrapesJS Nuxt.js 3 project. Let's break them down and provide solutions. Issue 1: Cannot read properties of undefined (reading 'lastComponent') after clearAll() Root Cause This...

artf

Use the plugins when you want to extend something at the GrapesJS API level

MdShadabAhamad

i also added custom style setupStyleManager but its show blank ,https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

GJS Helper

The issue you're experiencing, where your custom component block isn't visible on the first render but appears after searching, is a common timing problem related to how GrapesJS initializes its UI components, specifically the Block Manage...

danstarns

Try using the .getEl method on the component then setting the element directly.

mannyyang

Problem with this is that when you export the HTML, it returns the old text.

artf

@mannyyang where did you find the usage of set('content', ...? It's more like private property and you should never use it. To update inner components programmatically use component.components('test')

danstarns

Hi, @sridharK64 thank you for your report, can you elaborate on your issue, please? As we only have: 'How to load grapesjs by default preview'Your stack blitz Could you tell us what you're trying to achieve?

artf

@sridharK64 I got what you mean but the next time try to elaborate a bit better. To trigger the preview on load, this would be enough but in your example, you're using @grapesjs/react with full custom UI, which means you have to implement...

GJS Helper

To load GrapesJS in preview mode by default, you need to initialize the editor and then execute the built-in core:preview command. This command toggles the editor's state between editing and preview, effectively hiding the editor UI and di...

artf

@SAJAD-CH please provide a reproducible live demo (eg. via stackblitz) when you open a bug issue

GJS Helper

It seems you're encountering a common issue when integrating GrapesJS plugins into modern JavaScript frameworks like Angular, where the CSS files don't appear as standalone files in nodemodules for direct linking. This is expected behavior...

GJS Helper

Keeping project dependencies up-to-date is crucial for security, performance, and compatibility. For a GrapesJS project, which typically uses Node.js and npm/yarn, this involves a two-pronged approach: initial manual updates and then autom...

GJS Helper

Upgrading and standardizing TypeScript across the GrapesJS codebase is a crucial step towards improving maintainability, catching errors early, and enhancing developer experience. This solution outlines the steps to achieve this, focusing...