3 * ContentEditable-based in-place editor for plain text content.
6 (function ($, _, Drupal) {
10 Drupal.quickedit.editors.plain_text = Drupal.quickedit.EditorView.extend(/** @lends Drupal.quickedit.editors.plain_text# */{
13 * Stores the textual DOM element that is being in-place edited.
20 * @augments Drupal.quickedit.EditorView
22 * @param {object} options
23 * Options for the plain text editor.
25 initialize: function (options) {
26 Drupal.quickedit.EditorView.prototype.initialize.call(this, options);
28 var editorModel = this.model;
29 var fieldModel = this.fieldModel;
31 // Store the original value of this field. Necessary for reverting
34 var $fieldItems = this.$el.find('.quickedit-field');
35 if ($fieldItems.length) {
36 $textElement = this.$textElement = $fieldItems.eq(0);
39 $textElement = this.$textElement = this.$el;
41 editorModel.set('originalValue', $.trim(this.$textElement.text()));
43 // Sets the state to 'changed' whenever the value changes.
44 var previousText = editorModel.get('originalValue');
45 $textElement.on('keyup paste', function (event) {
46 var currentText = $.trim($textElement.text());
47 if (previousText !== currentText) {
48 previousText = currentText;
49 editorModel.set('currentValue', currentText);
50 fieldModel.set('state', 'changed');
59 * The text element for the plain text editor.
61 getEditedElement: function () {
62 return this.$textElement;
68 * @param {object} fieldModel
69 * The field model that holds the state.
70 * @param {string} state
71 * The state to change to.
72 * @param {object} options
73 * State options, if needed by the state change.
75 stateChange: function (fieldModel, state, options) {
76 var from = fieldModel.previous('state');
83 if (from !== 'inactive') {
84 this.$textElement.removeAttr('contenteditable');
86 if (from === 'invalid') {
87 this.removeValidationErrors();
95 // Defer updating the field model until the current state change has
96 // propagated, to not trigger a nested state change event.
98 fieldModel.set('state', 'active');
103 this.$textElement.attr('contenteditable', 'true');
110 if (from === 'invalid') {
111 this.removeValidationErrors();
120 this.showValidationErrors();
129 * A settings object for the quick edit UI.
131 getQuickEditUISettings: function () {
132 return {padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false};
138 revert: function () {
139 this.$textElement.html(this.model.get('originalValue'));
144 })(jQuery, _, Drupal);