I am trying to create as custom block. But the form is not submitting when i use components inside content. I am able to get all the form data when i use content instead of component. But then it's not allowing me drag new inputs to form.
gixid192
The important part - the html is missing. If you can, you should share the code in codesandbox or similar online editors.
artf
Yeah, we need the complete code to understand the issue. Anyway, if you're using script please define a Custom Component instead of placing it directly in the Block, or you'll face issues on storing. I know that this is how is illustrated...
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...
Feature: The ability to create multiple pages in Grapesjs. Functional design Globally:[ ] Include a link to the right of 'Device [dropdown list]' in the top banner that says 'Current Page: <page-name>'[x] Include a new menu item to the right of 'Blocks' in the right column. The icon will be something like the FA pages...
artf
The Pages module is now merged https://github.com/artf/grapesjs/pull/3411 and the new version will be soon released. A simple demo using the Pages API: https://codepen.io/artf/pen/XWpJQoY
artf
Sounds great, I really like the idea of having this one as a plugin, so if you think we need something to add (eg. some event) to make it work better, let me know.
jrkd
Got the core of this functionality working this arvo. @artf Let me know if this is still desired and I'll spend some more time on it in Jan. Note to self, TODO: add/remove page actions, visual tweaks, integrate with the storage manager & r...
Hello, If I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto? I set dragMode to 'absolute' (design mode) so users can freely drop a block anywhere on pages with a background image for each page. The pages are dynamically added when the editor is...
artf
Sorry mate, but here I reply only to your main questionIf I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto? all other things seem too much confusing to me and hones...
inthismachine
@artf is there a way to wrap <mj-text>xxx</mj-text> inside a mj-section and mj-column if it is dropped illegally? Like if the user tried to drop it on the body. Reason is I would like to auto add a dropped text block in to a 1 column row i...
ClaudeCode
Thanks for reporting this, @sprklinginfo. Great question about Help needed: Get the component that a block being dropped onto?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS docum...
I would like to repurpose the color picker used in GrapesJS. I have to use a color picker for some project level settings. These settings are accessible from the GrapesJS editor. I would like to leverage the existing color picker that is used for traits like font colors, etc. I've seen this post about extending a trai...
artf
Currently, the only way is to use this, not public, API. I've started working on a new UI module, to handle similar situations (ability to add/replace GrapesJS UI elements) but unfortunately, I have no idea when it'll be released, as it's...
himedlooff
is there a way to keep the color picker but configure the spectrum options? for example if i wanted to force hex colors i could pass { preferredFormat: "hex" }?
ClaudeCode
Thanks for reporting this, @stljeff1. Great suggestion about How do I repurpose the Spectrum Color Picker?! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system:...
I am trying to make components not editable in the preview mode. The following code isn't working. Please help me to fix it. editor; ngOnInit(){ this.editor = this.initializeEditor(); this.editor.on('load', () => this.editor.runCommand('preview')); this.editor.on('run:preview', () => { this.editor.Panels.getPanels().r...
artf
Fix your function in this way
ClaudeCode
Thanks for reporting this, @niveth09. Great question about How to make components not editable in preview mode?. The recommended approach with Components 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:Open the consoleExecute editor.setComponents('', {avoidStore: true});Execute editor.setStyle('', {avoidStore: true});The "Stored ..." log still appears (see attached screenshot) What is the expected behavior? The option...
artf
Thanks @mcottret the fix is ready for the next release
artf
Unfortunately, due to the bad initial naming, avoidStore is intended to skip the UndoManager and not the Storage 😁 The good news, I had to introduce the new noCount option, in order to fix #3189, this will skip triggering the editor chang...
mcottret
Hello @artf ! I'm sorry to reopen this issue but the setStyle issue still seems to be present. Redoing the steps above, the "Stored ..." log still appears while calling setStyle with the noCount option. I'm seeing the fixed handleChanges h...
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...
Hello, I am trying to create a new common trait shared among all components by creating the following plugin on another plugin file I am also creating a new component type same way following the docs, called extendedText which uses the text type as it's basis. While the text type has the handleBgColorChange() as shown...
ThetripGr
nvm , I revisited the docs more carefully, I somehow missed this about extending parent functions
ClaudeCode
Thanks for reporting this, @ThetripGr. Great question about Creating a new component type does not inherit the functions of it's parent type. The recommended approach with Components is to use the event-driven API. Start here: Check the Gr...
Hi, @artf. I have a few questions regarding component lifecycle hooks. In my application, I want to track the updates to all the children of a component and their children, and so on. How should I do it?Updates on immediate children are tracked by the model.updated() hook but I need to track the updates to a component...
artf
I'd create a specific listener on the parent then I'd trigger that event from the child
ClaudeCode
Thanks for reporting this, @theSC0RP. Great question about How to track the updates of components down the tree?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for you...
*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...