Component Groups

[skru]

Trying to implement a way for users to "group" blocks. Essentially creating a new component/block on the fly.
Using a Navbar as example, the flow would be :

1. User drags our Navbar into the canvas.
2. Makes changes to the links, text and traits to make their desired Navbar.
3. They could even drag other blocks into the Navbar (more Nav links etc..).
4. User clicks a toolbar button that opens up a prompt for the user to supply a name.
5. Upon submission of the name, the new Navbar (we'll call it MyNav) is then added to the block manager and can be dragged into the canvas. All of the user's changes are reflected in the new block.
6. If the user then subsequently updates (any) MyNav blocks in the canvas, all MyNav's take on the updates.

That's the basic premise and I have it mostly working fine except for the traits. for some reason I'm getting strange behaviour.

Here's a basic example of what I'm doing:

    `
            // called by clicking a blocks toolbar command
            createTemplateType(editor, name, selected) {
                // editor: grapesjs editor instance
                // name: user-defined string
                // selected: editor.getSelected()
            
                const recurse = (comp) => {
                    // recurse down through existing component to get all attrs of every nested component
                    let obj = {}
                    obj.attributes = comp.getAttributes()
                    obj.components = comp.get("components")
                    obj.content = comp.get("content")
                    obj.badgable = comp.get("badgable")
                    (..... all attrs)
                    obj.traits = comp.get("traits") // THIS IS FIRST PROBLEMATIC AREA
            
                    let childComps = []
                    if (obj.components.length) {         
                      obj.components.forEach( child => {
                        childComps.push(recurse(child))
                      })
                    }
                    obj.components = childComps
                    return obj
                }
                    
                // define component
            
                let definition = recurse(selected)
            
                // this goes to local storage for later retrieval
                let newComp = {
                title: name,
                model: {
                  defaults: definition
                },
                }
            
                editor.DomComponents.addType(name, {
                  extend: selected.get("type"), // NOT SURE ABOUT THIS
                  model: newComp.model,
                });
            
                // define block
            
                let newBlock = {
                  label: name,
                  category: 'custom',
                  content: {type: name}
                }
            
                editor.BlockManager.remove(name)
                editor.BlockManager.add(name, newBlock);
            
                
                // update existing block on canvas to new type
                let newBlock = selected.replaceWith({ type: name })
                editor.select(newBlock)
            }
    `

Now, this is mostly working fine (but please if you see anything questionable let me know!)
But there's issues with the traits, traits using changeProp: 0 seem to be fine but all with changeProp: 1 are problematic. I've tried adding them as above and this causes them to completely stop functioning. If I comment out that line, then the traits are copied over (due to extending the original???) and still work although they seem to lose "sync" with the component they are attached to.
For example, our Navbar has a trait that adds a class to the <nav/> element, simple stuff:

  `        
            model:
                {
                  init() {
                    this.on('change:theme', this.handleTheme)
                  },
                  
                  handleTheme() {
                    if (this.changed.theme) {
                      this.addClass("is-primary")
                    }
                    else {
                      this.removeClass("is-primary")
                    }
                  },
                  defaults:
                  {
                    traits: [
                      {
                        type: 'checkbox',
                        label: "Themed",
                        name: "theme",
                        value: false,
                        changeProp: 1
                      },
                    ],

`

Currently the result is:

1. User drags Navbar onto canvas.
2. Makes changes to traits
3. Clicks toolbar button and provides name. At this point the new block replaces the old but trait state is lost.
4. Change traits to desired state and update the block (not shown code but is the same as creating)
5. New blocks dragged into the canvas now have the correct trait state but it is not reflected correctly in the traits panel (trait value is true, but checkbox is not selected)
6. On any of the new blocks now in the canvas, changing traits works but when clicking off the block and then back, the values are not reflected in the traits panel (but the trait value is in fact correct).

Thrown together a basic gist: https://jsfiddle.net/20okd7tn/7/
It doesn't have the ability to update the blocks but I'm sure the problems I'm having are derived from the initial way i'm "cloning" the original block.
to use:

1. drag video block to canvas.
2. change the traits
3. Click the fifth toolbar icon
4. Drag block from newly created custom category
5. See both blocks have lost trait data

Q1: At a guess it seems that every way I've tried to copy the traits over from original to new results in the traits still referencing the original component?? Any tips on copying traits from a component and maintaining the values

Q2: Surely there's a better way of copying the original component instead of recursion down through its components?

Any tips/help would be very much appreciated.

[xQwexx]

Q1 I think you need to change the traits target to the new Component

[skru]

Thanks, yeh that was essentially it. Changed it to not replace the original block being cloned (removed the need to set target), instead just update it with it's new type. And then copy the traits over and force any changeProp traits to have the name of the trait as an attribute (so it will visually match the trait panel)

Cheers!

[badiuciprian]

Hi, is it possible to share the final outcome, if not a secret :) ? I tried to implement your solution but caught in the same problem. Thanks!