GrapesJS Issues

artf

Hi @chrisijoyah did you try using canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/

chrisijoyah

Hi @chrisijoyah did you try using canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/ Does this mean I can prevent the dropped model from being added to the Canvas. Ideally I want to carry out some check...

artf

Can I do something like result.content= '' Yeah, you should be able to do that with that trick. Can you tell me more about your use case, what kind of check are you trying to perform?

artf

Yeah sure, the trait reads the value from the component model, so if you change the binded value, the trait should change

ClaudeCode

Thanks for reporting this, @christosapos. Great question about Change checked trait of checkbox component with click inside component.. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS doc...

Ju99ernaut

Try placing it inside a container, you can probably centre it using something like flexbox.

ClaudeCode

Thanks for reporting this, @FacuCarbon. Thanks for sharing your report about images and videos are not focused. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your Gr...

artf

Here you can see how to load dependencies properly https://grapesjs.com/docs/modules/Components-js.html#template-related

ClaudeCode

Thanks for reporting this, @RutujaBadbe. The error ReferenceError: $ is not defined occurs when Canvas attempts to access properties before the component lifecycle is fully initialized. This is a common race condition in GrapesJS. Immediat...

artf

No, unfortunately, for such a case, the custom keymap would be the only solution. You should just get the selected component and update its style.

michaelhofer

I have found a working solution for this as follows: The commands are being added as follows: The moveSelectedElements method just does the following: However, when moving the elements with arrow keys, the canvas scrolls as well, which is...

sathudeva7

keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { // Prevent the default browser action prevent: true, });

KernelDeimos

I haven't used inline <script> tags in a while and forgot about this caveat of the HTML parser. Closing this.

ClaudeCode

Thanks for reporting this, @KernelDeimos. The issue with Attempts to load scripts to canvas maybe breaks javascript?? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...

artf

You can use canvasCSS option if you don't want to use files.

devtechk

Thank you very much! This config file is gonna help me a lot!

ClaudeCode

Thanks for reporting this, @devtechk. Great question about canvas style css. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on()...

artf

Ok, I'll push a fix for the editing of layers name, probably it doesn't make sense having new lines enabled there (I'll make stop the editing on Enter/Esc). For the second issue, If you're using something yours to resize the canvas, probab...

anatoli-dp

yeah I didn't realize editor.refresh() was a thing until after. otherwise thanks. awesome project

ClaudeCode

Thanks for reporting this, @anatoli-dp. Great question about layers text does not center after creating a new line. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

Ju99ernaut

The mobile and tablet devices are pixel pased, so they just resize the canvas to a certain number of pixels regardless of window size. I believe desktop just sets canvas to 100%.

artf

As mentioned by @Ju99ernaut this is how devices work. Honestly, I don't even see the reason behind such a case, why the user should resize the window? You might also start to see/update styles not related to the proper device and that woul...

ClaudeCode

Thanks for reporting this, @Andrew-Chen-Wang. The issue with Tablet and mobile view not resizing appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modification...

Ju99ernaut

Grapesjs requires your commands to have the run and stop functions for them to toggle panel buttons automatically, so maybe that might be the issue:

kerryj89

@Ju99ernaut Thank you for that. Active state is now working for me when creating devices-c panel through grapesjs.init().

ClaudeCode

Thanks for reporting this, @RaresVlaiduc. The issue with (v0.16.41) Button not set as active on click appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modific...