[QUESTION] control table cell (add row, column..)

Hey, @cnaa97 No worries I have added the default commands in the toolbar. I got what I wanted. Thanks for helping.

Below is the code

        const blockManager = this._editor.BlockManager;
        blockManager.add('table-block', {
          id: 'table',
          label: 'Table',
          category: 'Basic',
          attributes: { class: 'fa fa-table' },
          content: `
              <table class="table  table-bordered table-resizable">
                  <tr><td></td><td></td><td></td></tr>
                  <tr><td></td><td></td><td></td></tr>
                  <tr><td></td><td></td><td></td></tr>
              </table>
            `,
        });
        const TOOLBAR_CELL = [
          {
            attributes: { class: "fa fa-arrows" },
            command: "tlb-move"
          },
          {
            attributes: { class: "fa fa-flag" },
            command: "table-insert-row-above"
          },
          
          {
            attributes: {class: 'fa fa-clone'},
            command: 'tlb-clone',
          },
          {
            attributes: {class: 'fa fa-trash-o'},
            command: 'tlb-delete',
          }
        ];
        const getCellToolbar = () => TOOLBAR_CELL;


        const components = this._editor.DomComponents;
        const text = components.getType('text');
        components.addType('cell', {
          model: text.model.extend({
            defaults: Object.assign({}, text.model.prototype.defaults, {
              type: 'cell',
              tagName: 'td',
              draggable: ['tr'],
              
            }),
          },

            {
              isComponent(el) {
                let result;
                const tag = el.tagName;
                if (tag == 'TD' || tag == 'TH') {
                  result = {
                    type: 'cell',
                    tagName: tag.toLowerCase()
                  };
                }
                return result;
              }
            }),
          view: text.view,
        });

        

        this._editor.on('component:selected', m => {
          const compType = m.get('type');
          switch (compType) {
            case 'cell':
              m.set('toolbar', getCellToolbar()); // set a toolbars
          }
        });



        this._editor.Commands.add('table-insert-row-above', editor => {
          const selected = editor.getSelected();

          if (selected.is('cell')) {
            const rowComponent = selected.parent();
            const rowIndex = rowComponent.collection.indexOf(rowComponent);
            const cells = rowComponent.components().length;
            const rowContainer = rowComponent.parent();

            rowContainer.components().add({
              type: 'row',
              components: [...Array(cells).keys()].map(i => ({
                type: 'cell',
                content: 'New Cell',
              }))
            }, { at: rowIndex });
          }
        });

1. The content inside the component definition is for static text (eg. the content is used for editing with Rich Text Editor) so you can't select its element once added, instead you should use components: '<tr data-gjs-type="row" ...'
2. You can always get the selected Component and use its API, so your table-insert-row-above could be:

editor.Commands.add('table-insert-row-above', editor => {
  const selected = editor.getSelected();

  if (selected.is('cell')) {
      const rowComponent = selected.parent();
      const rowIndex = rowComponent.collection.indexOf(rowComponent);
      const cells = rowComponent.components().length;
      const rowContainer = rowComponent.parent();

      rowContainer.components().add({
        type: 'row',
        components: [ ...Array(cells).keys() ].map(i => ({
          type: 'cell',
          content: 'New Cell',
        }))
      }, { at: rowIndex });
  }
});

Thanks for your kindness answer.