I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in the editor based on Bootstrap 4 and other components like FontAwesome Pro and custom blocks based on these. I use Symfony's Webpack-Encore bundle to generate the scripts and style f...
ianef
That's a real shame. I didn't say anything about fetching from another site, what I wanted to do was keep it consistent with the rest of the project. Oh well, I'll keep looking elsewhere for an editor that integrates better with the curren...
artf
Hi Ian, if you need to load HTML content from a URL I can only suggest fetching it server-side and initialize the editor with that content (loading external resources in the browser would mostly hit the cross-origin issue), so, for how bro...
ClaudeCode
Thanks for reporting this, @ianef. Great suggestion about FEAT: Create the canvas from a URL! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative ap...
I manually add a new node into a rendered component. The visual result is OK, but impossible to save, because my style isn't with the auto-generated GrapesJS ID. To manually resolve this poblem, I double-click on the component to enter to it and I click outside in the canvas body. Then, the GrapesJS ID and data-gjs-ty...
bgrand-ch
Optimized TextEditor.vue file: But the problem persist:✔️ span node replaces the previous content of selection, with font-family and color styles.❌ span node isn't recognized by GrapesJS, because there isn't GrapesJS auto-generated styles...
bgrand-ch
ℹ️ Don't works directly with HTML, works only with JSON. Component = JSON node (html element + GrapesJS data) Sources:https://grapesjs.com/docs/modules/Components.htmlhttps://grapesjs.com/docs/api/component.html
ClaudeCode
Thanks for reporting this, @bgrand-ch. Great question about How to refresh/re-render after new node added?. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...
I want to add the small if condition like: if (block1 is dragged) { //show modal }
artf
You can use the block:drag:stop event
ClaudeCode
Thanks for reporting this, @echobinod. Great question about How to identify which block is dragged into canvas ?. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your...
Version: 0.16.30 Are you able to reproduce the bug from the demo? [x] Yes [ ] No Steps to reproduce:Select a text component in the demo's canvasThe selection box & RTE appearOpen the consoleExecute editor.setComponents('');The component is removed, but the selection box & RTE are still present (see attached screenshot...
artf
Thanks @mcottret for the report. I've handled this on my side, so it should be fixed in the next release, but as always, thanks for your willingness to help :)
ClaudeCode
Thanks for reporting this, @mcottret. The issue with Selection & active RTE not cleared when component is removed programatically appears to be a race condition or state management timing problem. This typically happens when component life...
*Version:0.16.27 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? In the right panel and canvas, the pasted node should be after the copied node. What is the current behavior? I copy a node. In the views-container(right panel), the pasted node is after the copied node. But...
artf
I've tried locally but the node is placed correctly. Are you able to create a live demo, please?
nanaya1
Sorry, I did not elaborate on the scenario where this error occurred. The components that come with grapesjs do not produce this error, because they don‘t have spaces，carriage returns or tabs. I found this problem while customizing compone...
I am considering doing this one myself and as this has been requested so often I wanted to ask if this is already being worked on and if not maybe people would like to give some input. The way I picture it working is kind of like a form with a container block where you define the data source, method (post/get) for get...
artf
This kind of things could be done via plugins but I can't reply to your questions, are totally off-topic and it's up to your knowledge find the right answer (maybe try to ask on StackOverflow)
ClaudeCode
Thanks for reporting this, @excitedbox. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer Grap...
I am building a quiz builder plugin using grapesjs. I was wondering if we can add a component which is interactive and adds new components when clicked. For example Something like this. When dropped, there are no inputs but when clicked add new field, the input appears. Is it possible? how?
artf
You have to extend the View of your custom component
ClaudeCode
Thanks for reporting this, @ZeroCoolHacker. Great question about Interactive component in canvas. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...
Version: 0.16.27 Are you able to reproduce the bug from the demo? [ X] Yes [ ] No What is the expected behavior? When a try to drag a component the canvas should not scroll to the top of the page. Describe the bug detailed Whenever I try to drag a component that is in the last sections of the page, the canvas scroll t...
artf
Hi José, are you able to provide a screencast of your issue? I've tried to drag the last section of the template but seems all good to me
josfh2005
Hi @artf , You can check it out here https://recordit.co/vn1ZVN6J1N, is not with the sections, it happens with any element but only the first time I try to drag something.
artf
Ah ok, only the first time, I've got it now on my side too 👍
Version: 0.15.10 This question is intended to validate if there is a proper way to extend the current https://github.com/artf/grapesjs/blob/master/src/canvas/view/CanvasView.js with a custom plugin. We were specifically reviewing the render() method within this file, to slightly alter the HTML to combine the toolbar a...
artf
Hi @jenter, good question. Unfortunately, I've never focused that much on the possibility of canvas extension or its UI elements, so for sure there is no right way to do that. If anyone is willing to propose solutions I'll be glad to evalu...
jenter
@artf I will review some proposals / thoughts and add it to this thread.
on click to upload button side preview works fine but when clicking on that video preview it throws error and rest of all images stop working, I need to show video in canvas body like images are shown this is what I am doing Here you see live
mohd7469
@artf can you tell me please how can I upload and preview video files rather then images?
ZeroCoolHacker
@awais786327 I am also struggling with uploading different assets. Maybe this can help. https://grapesjs.com/docs/modules/Assets.html#uploading-assets
ZeroCoolHacker
@awais786327 I have looked at the site and it looks like that you need to add autoplay="true" in your video tag to make it play