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 textEditor = $('<div></div>').addClass('kelmu-annotation-text-editor').addClass('kelmu-editor-pane');
        textEditor.appendTo(editor);
  
        textEditor.append($('<h4>Text</h4>').css('margin', '15px 0px'));
  
        idCounter += 1;
        var textAreaContainer = $('<div></div>').appendTo(textEditor);
  
        // Set the current values
        addComponent('Text:', textAreaContainer, 'kelmu-annotation-text', elemData.text, 'textarea', true);
        addComponent('HTML:', textEditor, 'kelmu-annotation-text-as-html', elemData.html === true, 'checkbox');
        addComponent('Font:', textEditor, 'kelmu-font', elemData.font, 'text');
        addComponent('Font size:', textEditor, 'kelmu-font-size', elemData.size, 'text');
        addComponent('Angle:', textEditor, 'kelmu-rotate', elemData.rotate, 'text');
        addComponent('Color:', textEditor, 'kelmu-annotation-text-color', elemData.color, 'text');
        addComponent('Background:', textEditor, 'kelmu-background-color', elemData.background, 'text');
        addComponent('With sound:', textEditor, 'kelmu-annotation-sound-option', elemData.soundOption, 'text');
  
        // Move cursor to end
        textEditor.find('.kelmu-annotation-text').focus();
        var val = textEditor.find('.kelmu-annotation-text').val();
        textEditor.find('.kelmu-annotation-text').val('').val(val);
  
        var buttonContainer = $('<div></div>').appendTo(textEditor);
  
        // Save the modified properties
        var saveText = function() {
          elemData.text = textEditor.find('.kelmu-annotation-text').val() || '?';
          elemData.html = textEditor.find('.kelmu-annotation-text-as-html').prop('checked') === true;
          elemData.font = textEditor.find('.kelmu-font').val() || window.kelmu.defaults.text.font;
          elemData.size = textEditor.find('.kelmu-font-size').val() || window.kelmu.defaults.text.size;
          elemData.rotate = textEditor.find('.kelmu-rotate').val() || window.kelmu.defaults.text.rotate;
          elemData.background = textEditor.find('.kelmu-background-color').val() || window.kelmu.defaults.text.background;
          elemData.color = textEditor.find('.kelmu-annotation-text-color').val() || window.kelmu.defaults.text.color;
          elemData.soundOption = textEditor.find('.kelmu-annotation-sound-option').val() || window.kelmu.defaults.text.soundOption;
          window.kelmu.data[id].actions.update();
          updateView(true, true);
          notifyModifications();
        };
  
        textEditor.find('input, textarea').keyup(saveText);
        textEditor.find('input').change(saveText);
  
        createRemoveButton().appendTo(buttonContainer);
  
        // Set current properties as default settings
        $('<button></button>').text('Make default').addClass('btn').appendTo(buttonContainer).click(function(e) {
          e.preventDefault();
          window.kelmu.defaults.text.html = textEditor.find('.kelmu-annotation-text-as-html').prop('checked') === true;
          window.kelmu.defaults.text.font = textEditor.find('.kelmu-font').val() || textDefaults.font;
          window.kelmu.defaults.text.size = textEditor.find('.kelmu-font-size').val() || textDefaults.size;
          window.kelmu.defaults.text.rotate = textEditor.find('.kelmu-rotate').val() || textDefaults.rotate;
          window.kelmu.defaults.text.background = textEditor.find('.kelmu-background-color').val() || textDefaults.background;
          window.kelmu.defaults.text.color = textEditor.find('.kelmu-annotation-text-color').val() || textDefaults.color;
          window.kelmu.defaults.text.soundOption = textEditor.find('.kelmu-annotation-sound-option').val() || textDefaults.soundOption;
        });
  
      }