edlp_d8/core/modules/quickedit/js/editors/plainTextEditor.es6.js

/**
 * @file
 * ContentEditable-based in-place editor for plain text content.
 */

(function ($, _, Drupal) {
  Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.plain_text# */{

    /**
     * Stores the textual DOM element that is being in-place edited.
     */
    $textElement: null,

    /**
     * @constructs
     *
     * @augments Drupal.quickedit.EditorView
     *
     * @param {object} options
     *   Options for the plain text editor.
     */
    initialize(options) {
      Drupal.quickedit.EditorView.prototype.initialize.call(this, options);

      const editorModel = this.model;
      const fieldModel = this.fieldModel;

      // Store the original value of this field. Necessary for reverting
      // changes.
      const $fieldItems = this.$el.find('.quickedit-field');
      const $textElement = $fieldItems.length ? $fieldItems.eq(0) : this.$el;
      this.$textElement = $textElement;
      editorModel.set('originalValue', $.trim(this.$textElement.text()));

      // Sets the state to 'changed' whenever the value changes.
      let previousText = editorModel.get('originalValue');
      $textElement.on('keyup paste', (event) => {
        const currentText = $.trim($textElement.text());
        if (previousText !== currentText) {
          previousText = currentText;
          editorModel.set('currentValue', currentText);
          fieldModel.set('state', 'changed');
        }
      });
    },

    /**
     * @inheritdoc
     *
     * @return {jQuery}
     *   The text element for the plain text editor.
     */
    getEditedElement() {
      return this.$textElement;
    },

    /**
     * @inheritdoc
     *
     * @param {object} fieldModel
     *   The field model that holds the state.
     * @param {string} state
     *   The state to change to.
     * @param {object} options
     *   State options, if needed by the state change.
     */
    stateChange(fieldModel, state, options) {
      const from = fieldModel.previous('state');
      const to = state;
      switch (to) {
        case 'inactive':
          break;

        case 'candidate':
          if (from !== 'inactive') {
            this.$textElement.removeAttr('contenteditable');
          }
          if (from === 'invalid') {
            this.removeValidationErrors();
          }
          break;

        case 'highlighted':
          break;

        case 'activating':
          // Defer updating the field model until the current state change has
          // propagated, to not trigger a nested state change event.
          _.defer(() => {
            fieldModel.set('state', 'active');
          });
          break;

        case 'active':
          this.$textElement.attr('contenteditable', 'true');
          break;

        case 'changed':
          break;

        case 'saving':
          if (from === 'invalid') {
            this.removeValidationErrors();
          }
          this.save(options);
          break;

        case 'saved':
          break;

        case 'invalid':
          this.showValidationErrors();
          break;
      }
    },

    /**
     * @inheritdoc
     *
     * @return {object}
     *   A settings object for the quick edit UI.
     */
    getQuickEditUISettings() {
      return { padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false };
    },

    /**
     * @inheritdoc
     */
    revert() {
      this.$textElement.html(this.model.get('originalValue'));
    },

  });
}(jQuery, _, Drupal));