GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

545 issues found

๐Ÿ” typescript
#6171Sep 24, 2024by rhoenerSBS2 answers
0 reactions

Track custom storable with UndoManager

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v129 Reproducible demo link not applicable Describe the bug HI @artf, I am currently implementing an editor with grapesjs in which it is possible to add chapters alongside the already existing pages. I implemented a...

artf

Hey @rhoenerSBS please avoid opening bug issues for questions.

GJS Helper

The GrapesJS UndoManager primarily tracks changes to the editor's core models (components, styles, pages, assets) by listening to specific events, notably change:state. To make it track changes to your custom ChapterStorage module, which i...

#6152Sep 18, 2024by stpp24 answers
1 reactions

CSS added via custom code persists after custom code component is removed

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug?Add custom code component with HTML + CSSDelete custom code component. What is the expected behavior? All code should be remove...

artf

This is not related to the core and should be addressed at the plugin level. Please create the issue there and we'll try to figure out the right approach.

mosh-tudor

@stpp2 This is not really a bug; it's more of a feature. :) Try using clearStyles: https://github.com/GrapesJS/grapesjs/blob/d48e1e34a9fa363dcb83fdcca53a89563db17063/packages/core/src/editor/config/config.ts#L260-L272

stpp2

Yeah clearStyles is already enabled in my case, but that doesn't seem to work well in many cases. Either way I'd expect the Custom Code component to be somewhat "containerized" so it's not leaving anything in the doc when removed.

#6122Sep 4, 2024by mohamedsalem4013 answers
3 reactions

Fix and refactor Sorter.ts

[x] Fix the Sorter usage in StyleManager (regression with sorting property layers) [x] Refactor Sorter with the usage of Components.canMove [x] Update canMove with the check of dropping main Symbol inside its own instance.

mohamedsalem401

This's done.

mohamedsalem401

The idea is to refactor the sorter for improved maintainability and readability. We can implement the following changes:Make Sorter class depend on an abstract tree structure rather than relying on specific implementations like Component o...

GJS Helper

This fix and refactoring addresses several key areas within GrapesJS's Sorter.ts and component movement logic, resolving a regression in the Style Manager and enhancing the overall drag-and-drop experience, especially concerning reusable c...

#6081Aug 23, 2024by MdShadabAhamad3 answers
0 reactions

Custom Component not able to visible in grapsJs/studio at first rendering

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chromeReproducible demo link https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsxDescribe the bug I am not able to see my custom component at the first time of my react application rendering , when i try to sear...

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

#6063Aug 16, 2024by sridharK643 answers
1 reactions

How to load grapesjs by default preview

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui-nrqcgn?file=src%2FApp.tsx Describe the bug How to reproduce the bug?...... What is the expected behavior? ... What is the current behavior?...

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

#6051Aug 9, 2024by SAJAD-CH2 answers
0 reactions

Issue in plugin

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link asdasd Describe the bug I am having an issue while installing NPM plugin packages like preset-webpage, preset-newsletter , the css file is missing while installing in both when i check node mo...

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

#6048Aug 7, 2024by danstarns1 answer
0 reactions

Typescript

The codebase currently uses outdated versions of TypeScript. This ticket aims to: Upgrade to the latest version of TypeScript. Ensure consistent TypeScript configurations across all projects. Integrate TypeScript into the development and CI pipelines for automated type checking. Updating and standardizing TypeScript w...

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

#6047Aug 7, 2024by danstarns1 answer
0 reactions

Release Process

The process for publishing the build artifacts of the GrapesJS repository has had the following issues: Artifacts are expected to come directly from developers' machines. - https://github.com/GrapesJS/grapesjs/pull/6041 The process is undocumented We have multiple packages to release, and proper documentation is also...

GJS Helper

The issues regarding the GrapesJS release process โ€“ specifically, the reliance on developer machines for artifacts and the lack of documentation โ€“ highlight a need for a standardized, automated, and transparent workflow. Adopting an indust...

#6046Aug 7, 2024by danstarns2 answers
0 reactions

Commit Hooks

The current codebase relies on commit hooks to enforce certain rules and checks. This ticket aims to: Remove existing commit hooks. Configure CI runners to perform these checks and report issues on the development branch or pull requests. Shifting these responsibilities to the CI runners will streamline the developmen...

danstarns

Related: https://github.com/GrapesJS/grapesjs/issues/6045

GJS Helper

The request to remove client-side commit hooks and shift their responsibilities to CI runners is a sound strategy for improving development workflow consistency and reliability. While this is a general software development practice and not...

#6045Aug 7, 2024by danstarns1 answer
0 reactions

Linting, Formatting

The codebase currently uses outdated linting tools and formatting libraries. This ticket aims to: Upgrade to the latest versions of linting tools and formatting libraries. Ensure consistent linting and formatting rules across all projects. Integrate these tools into the development and CI pipelines for automated enfor...

GJS Helper

Standardizing linting and formatting is crucial for maintaining code quality and a cohesive development environment within the GrapesJS codebase. This initiative will significantly improve developer experience and reduce potential errors....

Browse all topics