After JSON.stringify Components have not all fields

Question

I'm not sure it's a bug or not, but for me, the behavior look strange I have a component List that includes, component ol and component li.

That code for block

{
      id: 'list',
      label: 'List',
      category: 'Typography',
      media: `<svg ....
              </svg>
              `,
      content: {
        type: 'list'
      }

That model for the component list

`grapes`.DomComponents.addType('list', {
        model: {
          defaults: {
            type: "list",
            tagName: 'div',
            editable: true,
            droppable: false,
            components: [
              {
                type: "ol",
                tagName: 'ol',
                droppable: false,
              }
            ]
          }
        }
      })

That model for the ol component

grapes.DomComponents.addType('ol', {
        model: {
          defaults: {
            type: "ol",
            tagName: 'ol',
            components: [
              {
                type: 'li',
            tagName: 'li',
              }
            ]
          }
        }
      })

And the model for the li component

grapes.DomComponents.addType('li', {
        model: {
          defaults: {
            type: 'li',
            tagName: 'li',
            droppable: true,
            attributes: {},
            toolbar: [
              // these are the default toolbar elements
              {
                attributes: {class: 'fas fa-list-ul'},
                command: 'change-style-list'
              },
              {
                attributes: {class: 'fa fa-arrow-up'},
                command: 'select-parent'
              },
              {
                attributes: {class: 'fas fa-arrows-alt'},
                command: 'tlb-move'
              },
              {
                attributes: {
                  class: 'far fa-clone',
                },
                command: 'tlb-clone',
              },
              {
                attributes: {class: 'fa fa-trash'},
                command: 'tlb-delete'
              }
            ],
            components: [
              {
                tagName: "span",
                droppable: false,
                type: "text",
                components: [
                  {
                    type: "textnode",
                    content: "Type your text"
                  }
                ]
              }
            ]
          }
        }
      })

As you can see all models include types and tag Names, and inside grapes it work correct, but if I try convert it to json, like JSON.stringify(this.grapesInstance.getComponents()) I have json where missed all field with tagName, and it will looks like that


[
  {
    "type": "list",
    "components": [
      {
        "type": "ol",
        "droppable": false,
        "components": [
          {
            "type": "li",
            "components": [
              {
                "tagName": "span",
                "type": "text",
                "components": [
                  {
                    "type": "textnode",
                    "content": "Type your text"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

I can't catch why it "tagName" lost. If I delete the custom type, the "tagName" serialized to json. I can't understand this rule.

Reproducible demo link https://jsfiddle.net/sdimitrenco/rn8u4pc0/7/

After JSON.stringify Components have not all fields

0 Answers0