docs: function(force, noDelay) {
  
        if (!window.kelmu.data[id].editorMode) {
          return;
        }
  
        buttonPickerEnabled = false;
  
        editor.css('height', '');
        editor.css('width', '');
  
        var step = window.kelmu.data[id].stepNumber + 1;
        var substep = window.kelmu.data[id].subStepNumber + 1;
        var substeps = (window.kelmu.data[id].definitions['step' + (step - 1)] || [null]).length;
        container.find('div.kelmu-editor-status').text('Step ' + step + ', substep ' + substep + ' of ' + substeps);
  
        if (window.kelmu.data[id].selectedElementNumber < 0) {
          // There is no selected element at the moment, remove the settings for the previous
          container.find('.kelmu-editor-pane').remove();
          force = true;
        }
  
        var data = window.kelmu.data[id];
  
        // Add components to the editor (action events and sounds)
        var componentPanel = container.find('.kelmu-editor-components');
        componentPanel.children().remove();
        if (data.definitions['step' + data.stepNumber]) {
          var componentList = $('<ul></ul>').appendTo(componentPanel);
          $.each(data.definitions['step' + data.stepNumber][data.subStepNumber], function(index) {
            var li, link;
            if (this.action !== undefined) {
              li = $('<li></li>').appendTo(componentList);
              link = $('<a href="#"></a>').appendTo(li).attr('data-annotation', index);
              link.text('Action (' + this.action + ' ' + this.parameter + ', ' + this.when + ')');
              link.addClass('kelmu-action-component');
              link.click(clickableFunction);
            } else if (this.sound !== undefined) {
              li = $('<li></li>').appendTo(componentList);
              link = $('<a href="#"></a>').appendTo(li).attr('data-annotation', index);
              link.text('Sound');
              link.addClass('kelmu-annotation-sound-component');
              link.click(clickableFunction);
            }
          });
        }
  
        // If the selected element has changed, update the editor
        if (window.kelmu.data[id].selectedElementNumber >= 0 && window.kelmu.data[id].selectedElementNumber !== window.kelmu.data[id].previousSelectedElementNumber) {
          var elemData = data.definitions['step' + data.stepNumber][data.subStepNumber][data.selectedElementNumber];
          if (elemData.text) {
            createTextEditor();
          } else if (elemData.button !== undefined) {
            createButtonEditor();
          } else if (elemData.arrow !== undefined) {
            createArrowEditor();
          } else if (elemData.line !== undefined) {
            createLineEditor();
          } else if (elemData.action !== undefined) {
            createActionEditor();
          } else if (elemData.sound !== undefined) {
            createSoundEditor();
          }
        }
  
        // Make elements interactive if needed
        if (force || window.kelmu.data[id].selectedElementNumber !== window.kelmu.data[id].previousSelectedElementNumber) {
          container.find('.kelmu-arrow-handle').remove();
  
          var updateFunction = function() {
            drawArrowHandles();
            makeMoveable();
            makeResizable();
            makeClickable();
          };
          if (!noDelay) {
            setTimeout(updateFunction, window.kelmu.data[id].settings.animationLength);
          } else {
            updateFunction();
          }
        }
  
        window.kelmu.data[id].previousSelectedElementNumber = window.kelmu.data[id].selectedElementNumber;
  
      }