GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome@latest Reproducible demo link https://no-link.com Describe the bug Code of Conduct [X] I agree to follow this project's Code of Conduct
artf
Thanks @Baghunts, good catch. Current workaround would be .addStyle({ 'border-left': '...' })
GJS Helper
The issue where a background-image style isn't applied correctly to a component in GrapesJS is typically due to one of two common reasons: incorrect CSS url() syntax or the component lacking sufficient dimensions to display the background....
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 112.0.5615.137 (Official Build) (arm64) Reproducible demo link https://grapesjs.com/demo.html Describe the bug Component definition: When dropped, saved, and reload there are two places that call the same script. One in th...
artf
As explained here you should not reimport the output HTML to edit the project, only the JSON.
GJS Helper
The issue you've encountered where a component's script function runs twice after saving and reloading the page is a known behavior (or a bug, depending on the perspective) in GrapesJS's script management system. It stems from how GrapesJS...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 112.0.5615.137 (Official Build) Reproducible demo link https://jsfiddle.net/SagarMaria/sunygp2f/3/ Describe the bug How to reproduce the bug?In the jsfiddle simply click on the "Hello World" component. Obser...
artf
The behaviour is correct as style:property:update triggers on any update of the Style Manager Property (not only its value). So for your specific case you would need to update the callback in this way
SagarMaria
Hi @artf, thanks for the quick reply, but actually, part of the problem is still that even after making a change e.g. click "center" align radio option with the if statement you suggested, subsequent selections of that component still log...
GJS Helper
The issue you're encountering with style:property:update and Property onChange firing excessively, even on component selection, is a common point of confusion. The style:property:update event is a low-level event that triggers whenever a s...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 112.0.2 (64-Bit) Reproducible demo link https://github.com/TO-JHummel/grapesjs-issue Describe the bug How to reproduce the bug?Start the minimal vue+vite page.Drop the capitalizedfor block into the editor.Drop the...
artf
This is similar to this one, you have to put the editor instance outside of the Vue instance in order to bypass its proxies
GJSBlock
Thanks for reporting this, @TO-JHummel. Great question about Crash when dragging into nested components with Vue+Vite.. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? FireFox 112.0 (64-bit) Reproducible demo link No demo link Describe the bug I recently upgraded from v0.20.1 to v0.21.1. A lot of types that existed in v0.20.1 are changed to any in v0.21.1. For example, Type of Components...
artf
Thanks @ngoc199 please let me know if there are others missing declarations from the previous versions
GJS Helper
This is a known issue related to the TypeScript declaration files (.d.ts) in GrapesJS v0.21.1. The problem arises because the type definitions for certain core functionalities, such as Components.addType and the model definition within cus...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link N/A Describe the bug I'm integrating the grape.js plugin with vue.js. I have a prebuild page with prebuild html and css. When I load the page vue.js component(s) into the editor, all my vue.js...
artf
@innothetechgeek for a proper bug issue you should always create a reproducible demo as commonly there are issues unrelated to the core itself. Anyway, from your description you might want to define your styles entry via canvas options
GJS Helper
The issue you're experiencing, where styles loaded through your Vue.js entry point are lost when GrapesJS initializes, is a common behavior and stems from how GrapesJS isolates its editor canvas. Root Cause GrapesJS, by default, renders it...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave last version Reproducible demo link https://jsfiddle.net/rp7oc96v/1/ Describe the bug Hi Arthur! I'm creating a new component, an image inside a link, like the mj-image component, but i'm stuck in one configuration o...
gustavohleal
Hi! I've tested your solution. It does change the image correctly with the image locked inside the main component and you can move it around. The src attribute is changed in the model, but when you move the component he goes back to the pl...
artf
@gustavohleal my bad, you have to update the src property directly instead of the attribute image.set({ src: asset.getSrc() });
artf
Use the data-gjs-locked="true" property to ignore the image and update properly your custom component
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NA Describe the bug How to reproduce the bug?...... What is the expected behavior? ... When I drag external content inside the editor it should be dropped at specific position What is the curr...
siddhi1397
Hi @artf , When I drag external content inside the editor it should be dropped at specific position but it is overlapping the existing content in the component. So is there any way where I can place text at the specific position without ge...
artf
@siddhi1397 please don't open bug issues as features/questions
siddhi1397
Okay sorry for that. @artf But can you please help with how can this be implemented?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v111 Reproducible demo link https://codesandbox.io/s/grapesjs-react-components-forked-h3j496?file=/src/index.js Describe the bug How to reproduce the bug?Start a project with grapesjs using ReactjsUse loadProjectDat...
julia-alberici
For the record, this wasn't really a bug, and i could achieve the expected behavior replacing editor.onReady(() => { editor.runCommand("preview"); }); with editor.on('update', () => { editor.runCommand('preview'); });
GJS Helper
The issue you're encountering where GrapesJS components retain edit mode behaviors (like hover/select styles) despite running the preview command after loadProjectData() is a timing problem related to asynchronous operations. Root Cause Wh...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 111 Reproducible demo link https://jsfiddle.net/9zf4kd6e/ - this is the demo of Designer Mode Describe the bug How to reproduce the bug?Add an image component with dragMode absoluteUpload a large enough SVG image. Y...
artf
@ngoc199 I'm addressing most of the issue about absolute mode here. I think the resize issue could be easily added here but the large embedded SVG image (by default, without an external asset storage, images are inlined) it's seems more li...
GJSBlock
Thanks for reporting this, @ngoc199. Great question about slow absolute drag on Chrome. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for...