docs: function() {
  
        var data = window.kelmu.data[id];
        var elemData = data.definitions['step' + data.stepNumber][data.subStepNumber][data.selectedElementNumber];
  
        editor.find('.kelmu-editor-pane').remove();
  
        var arrowEditor = $('<div></div>').addClass('kelmu-arrow-editorr').addClass('kelmu-editor-pane');
        arrowEditor.appendTo(editor);
  
        arrowEditor.append($('<h4>Arrow</h4>').css('margin', '15px 0px'));
  
        idCounter += 1;
  
        // Set the current values
        addComponent('Size:', arrowEditor, 'kelmu-arrow-size', elemData.size, 'text', true);
        addComponent('Width:', arrowEditor, 'kelmu-arrow-width', elemData.width, 'text');
        addComponent('Color:', arrowEditor, 'kelmu-arrow-color', elemData.arrow, 'text');
        addComponent('With sound:', arrowEditor, 'kelmu-arrow-sound-option', elemData.soundOption, 'text');
  
        // Save the modified properties
        var saveArrow = function() {
          elemData.size = arrowEditor.find('.kelmu-arrow-size').val() || window.kelmu.defaults.arrow.size;
          elemData.width = arrowEditor.find('.kelmu-arrow-width').val() || window.kelmu.defaults.arrow.width;
          elemData.arrow = arrowEditor.find('.kelmu-arrow-color').val() || window.kelmu.defaults.arrow.arrow;
          elemData.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || window.kelmu.defaults.arrow.soundOption;
          window.kelmu.data[id].actions.update();
          updateView(true, true);
          notifyModifications();
        };
  
        arrowEditor.find('input').keyup(saveArrow);
  
        var buttonContainer = $('<div></div>').appendTo(arrowEditor);
  
        createRemoveButton().appendTo(buttonContainer);
  
        // Save the modified properties
        $('<button></button>').text('Make default').addClass('btn').appendTo(buttonContainer).click(function(e) {
          e.preventDefault();
          window.kelmu.defaults.arrow.width = arrowEditor.find('.kelmu-arrow-width').val() || arrowDefaults.width;
          window.kelmu.defaults.arrow.arrow = arrowEditor.find('.kelmu-arrow-color').val() || arrowDefaults.arrow;
          window.kelmu.defaults.arrow.size = arrowEditor.find('.kelmu-arrow-size').val() || arrowDefaults.size;
          window.kelmu.defaults.arrow.soundOption = arrowEditor.find('.kelmu-arrow-sound-option').val() || arrowDefaults.soundOption;
        });
  
      }