Set the data structure

[kghandour]

So far the proposed data structure is parsing JSON in a similar format like this.

{
  {
    text: "Hi", 
    format:"#", 
    id:0, 
    child:{}

  }
}

[kghandour]

Suggested change to the structure

{
  {
    format:"h1", 
    id:0, 
    children:{
      "Hi"
    }
  },
}

Incase of nested elements:

{
  {
    format:"h1", 
    id:0, 
    children:{
      {
        format:"i", 
        id:0, 
        children:{
          "Hi"
        }
      }
    }
  }
}

[TheNavigat]

I think you meant a list of dictionaries?

Something like this:

[
  {
    format:"h1", 
    id:0, 
    children:{
      {
        format:"i", 
        id:0, 
        children:{
          "Hi"
        }
      }
    }
  }
]

[kghandour]

[
  {
    format:"h1", 
    id:0, 
    children:[
      {
        format:"i", 
        id:0, 
        children:[
          "Hi"
        ]
      }
    ]
  }
]

Yeah a list. Also changed children to list as well

[TheNavigat]

LGTM

[Hamahmi]

Why do we need the id ?

[TheNavigat]

After a bit of thought, I'd like to modify this a bit:

[
  {
    type:"h1", 
    children:[
      {
        type:"span",
        format:"italic",
        text:"Hi"
      }
    ]
  }
]

This can be modified later where format is replaced with an options dictionary that then includes different options like format.

[kghandour]

@Hamahmi

Why do we need the id ?

To be used in the loop. Vue loops require a unique key for each item.

@TheNavigat
So the user drags H1 block to the area, then drags a span inside the H1 in order to type. Agree?