title: How to add custom items with default items in Context Menu of handsontable
body: <p>I tried to use handsontable and want to add custom items to context menu.</p>
  
  <p>There are many tutorials to implement custom menus, but it ignores the default items.</p>
  
  <p>So I added keys of all items, but some of them don't work.</p>
  
  <p>My setting is like follows.</p>
  
  <pre><code>var basicSettings = {
      minRows: 1,
      minCols: 1,
      rowHeaders: false,
      colHeaders: false,
      hiddenColumns: true,
      contextMenu: {
          items: {
              row_above: {},
              row_below: {},
              "hsep1": "---------",
              col_left: {},
              col_right: {},
              "hsep2": "---------",
              remove_row: {},
              remove_col: {},
              "hsep3": "---------",
              undo: {},
              redo: {},
              "hsep4": "---------",
              make_read_only: {},
              "hsep5": "---------",
              alignment: {},
              "hsep6": "---------",
              copy: {},
              cut: {},
              "paste": {
                  name: 'Paste',
                  callback: function (key, option) {
                      this.copyPaste.triggerPaste();
                  }
              },
              "hsep7": "---------",
              mergeCells: {
                  name: "Merge"
              },
              "hsep8": "---------",
              // Custom menu item to set color of cells
              set_color: {
                  key: "color",
                  name: "Color",
                  "submenu": {
                      "items": [
                          {
                              key: "color:1",
                              "name": "Black",
                              callback: function(key, options) {
                                  for (var i = options[0].start.row; i &lt;= options[0].end.row; i ++){
                                      for (var j = options[0].start.col; j &lt;= options[0].end.col; j ++){
                                          this.getCell(i, j).className = "color-black";
                                      }
                                  }
                              }
                          }, {
                              key: "color:2",
                              "name": "White",
                              callback: function(key, options) {
                                  for (var i = options[0].start.row; i &lt;= options[0].end.row; i ++){
                                      for (var j = options[0].start.col; j &lt;= options[0].end.col; j ++){
                                          $(this.getCell(i, j)).removeClass("color-*").addClass("color-white");
                                      }
                                  }
                                  this.render();
                              }
                          }, {
                              key: "color:3",
                              "name": "Red",
                              callback: function(key, options) {
                                  for (var i = options[0].start.row; i &lt;= options[0].end.row; i ++){
                                      for (var j = options[0].start.col; j &lt;= options[0].end.col; j ++){
                                          this.getCell(i, j).style.backgroundColor = "red";
                                      }
                                  }
                                  this.render();
                              }
                          }
                      ]
                  }
              }
          }
      },
      manualRowResize: true,
      manualColumnResize: true,
      contextMenuCopyPaste: {
          swfPath: '/bower_components/zeroclipboard/dist/ZeroClipboard.swf'
      },
      copyPaste: true,
      mergeCells: true,
      search: true,
      stretchH: 'all',
      autoColumnSize: {useHeaders: true},
      autoRowSize: {syncLimit: 300},
      width: 1000,
      height: window.innerHeight - 100,
      licenseKey: "xxxxx-xxxxx-xxxxx-xxxxx-xxxxx"
  };
  </code></pre>
  
  <p>Menu looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/n8ffr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n8ffr.png" alt="Current Menu"></a></p>
  
  <h1>Question 1:</h1>
  
  <p>Is there any way to add custom item with all the default menu items? If so, I don't need answers to Question 3 and Question 4.</p>
  
  <h1>Question 2:</h1>
  
  <p>The most important part that let me ask this question is custom menu, that is "set_color".
  After clicking "Black" or "Red", it turns into that color, but after I change value of a cell, it turns back.
  How can I prevent the cells from turning their background color back?</p>
  
  <h1>Questions 3:</h1>
  
  <p>I want additional custom item besides all feature enabled. But I can't find proper key for "Merge" item. The current "Merge" function works so strangely.
  How to make the function works correctly?</p>
  
  <h1>Question 4:</h1>
  
  <p>I tried <a href="https://github.com/handsontable/handsontable/issues/2853" rel="nofollow noreferrer">https://github.com/handsontable/handsontable/issues/2853</a> to implement paste functionality, but I see this error.</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'triggerPaste' of undefined</code></p>
  
  <p>Please help me with those handsontable usage. Thanks in advance.</p>