";
+// var curie = "test:Person";
+// namespaces.isUri(uri); // --> true
+// namespaces.isUri(curie); // --> false
+VIE.prototype.Namespaces.prototype.isUri = VIE.Util.isUri;
+})();
\ No newline at end of file
diff --git a/core/modules/edit/js/models/edit-app-model.js b/core/modules/edit/js/models/edit-app-model.js
new file mode 100644
index 0000000..464741b
--- /dev/null
+++ b/core/modules/edit/js/models/edit-app-model.js
@@ -0,0 +1,12 @@
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.models = Drupal.edit.models || {};
+Drupal.edit.models.EditAppModel = Backbone.Model.extend({
+ defaults: {
+ // We always begin in view mode.
+ isViewing: true,
+ highlightedEditor: null,
+ activeEditor: null,
+ // Reference to a ModalView-instance if a transition requires confirmation.
+ activeModal: null
+ }
+});
diff --git a/core/modules/edit/js/routers/edit-router.js b/core/modules/edit/js/routers/edit-router.js
new file mode 100644
index 0000000..19c885b
--- /dev/null
+++ b/core/modules/edit/js/routers/edit-router.js
@@ -0,0 +1,50 @@
+/**
+ * @file edit-router.js
+ *
+ * A Backbone Router enabling URLs to make the user enter edit mode directly.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.routers = {};
+Drupal.edit.routers.EditRouter = Backbone.Router.extend({
+
+ appModel: null,
+
+ routes: {
+ "quick-edit": "edit",
+ "view": "view",
+ "": "view"
+ },
+
+ initialize: function(options) {
+ this.appModel = options.appModel;
+ },
+
+ edit: function() {
+ this.appModel.set('isViewing', false);
+ },
+
+ view: function(query, page) {
+ var that = this;
+
+ // If there's an active editor, attempt to set its state to 'candidate', and
+ // then act according to the user's choice.
+ var activeEditor = this.appModel.get('activeEditor');
+ if (activeEditor) {
+ var editableEntity = activeEditor.options.widget;
+ var predicate = activeEditor.options.property;
+ editableEntity.setState('candidate', predicate, { reason: 'menu' }, function(accepted) {
+ if (accepted) {
+ that.appModel.set('isViewing', true);
+ }
+ else {
+ that.navigate('#quick-edit');
+ }
+ });
+ }
+ // Otherwise, we can switch to view mode directly.
+ else {
+ that.appModel.set('isViewing', true);
+ }
+ }
+});
diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js
new file mode 100644
index 0000000..9e5d14b
--- /dev/null
+++ b/core/modules/edit/js/theme.js
@@ -0,0 +1,150 @@
+(function($) {
+
+/**
+ * Theme function for the overlay of the Edit module.
+ *
+ * @param settings
+ * An object with the following keys:
+ * - None.
+ * @return
+ * The corresponding HTML.
+ */
+Drupal.theme.editOverlay = function(settings) {
+ var html = '';
+ html += '';
+ return html;
+};
+
+/**
+ * Theme function for a "backstage" for the Edit module.
+ *
+ * @param settings
+ * An object with the following keys:
+ * - id: the id to apply to the backstage.
+ * @return
+ * The corresponding HTML.
+ */
+Drupal.theme.editBackstage = function(settings) {
+ var html = '';
+ html += '';
+ return html;
+};
+
+/**
+ * Theme function for a modal of the Edit module.
+ *
+ * @param settings
+ * An object with the following keys:
+ * - None.
+ * @return
+ * The corresponding HTML.
+ */
+Drupal.theme.editModal = function(settings) {
+ var classes = 'edit-animate-slow edit-animate-invisible edit-animate-delay-veryfast';
+ var html = '';
+ html += '';
+ html += '
';
+ html += '
';
+ html += '
';
+ html += Drupal.theme('editButtons', { buttons: settings.buttons });
+ html += '
';
+ return html;
+};
+
+/**
+ * Theme function for buttons of the Edit module.
+ *
+ * Can be used for the buttons both in the toolbar toolgroups and in the modal.
+ *
+ * @param settings
+ * An object with the following keys:
+ * - buttons: an array of objects with the following keys:
+ * - url: the URL the button should point to.
+ * - classes: the classes of the button.
+ * - label: the label of the button.
+ * - hasButtonRole: whether this button should have its "role" attribute set
+ * to "button".
+ * - action: sets a data-edit-modal-action attribute.
+ * @return
+ * The corresponding HTML.
+ */
+Drupal.theme.editButtons = function(settings) {
+ var html = '';
+ for (var i = 0; i < settings.buttons.length; i++) {
+ var button = settings.buttons[i];
+ if (!button.hasOwnProperty('url')) {
+ button.url = '';
+ }
+ if (!button.hasOwnProperty('hasButtonRole')) {
+ button.hasButtonRole = true;
+ }
+
+ html += '';
+ html += ' ';
+ html += '';
+ return html;
+};
+
+})(jQuery);
diff --git a/core/modules/edit/js/util.js b/core/modules/edit/js/util.js
new file mode 100644
index 0000000..3d86a57
--- /dev/null
+++ b/core/modules/edit/js/util.js
@@ -0,0 +1,140 @@
+(function($) {
+
+/**
+ * @file util.js
+ *
+ * Utilities for Edit module.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.util = Drupal.edit.util || {};
+
+Drupal.edit.util.constants = {};
+Drupal.edit.util.constants.transitionEnd = "transitionEnd.edit webkitTransitionEnd.edit transitionend.edit msTransitionEnd.edit oTransitionEnd.edit";
+
+Drupal.edit.util.calcPropertyID = function(entity, predicate) {
+ return entity.getSubjectUri() + '/' + predicate;
+};
+
+Drupal.edit.util.buildUrl = function(id, urlFormat) {
+ var parts = id.split('/');
+ return Drupal.formatString(decodeURIComponent(urlFormat), {
+ '!entity_type': parts[0],
+ '!id' : parts[1],
+ '!field_name' : parts[2],
+ '!langcode' : parts[3],
+ '!view_mode' : parts[4]
+ });
+};
+
+/**
+ * Loads rerendered processed text for a given property.
+ *
+ * Leverages Drupal.ajax' ability to have scoped (per-instance) command
+ * implementations to be able to call a callback.
+ *
+ * @param options
+ * An object with the following keys:
+ * - $editorElement (required): the PredicateEditor DOM element.
+ * - propertyID (required): the property ID that uniquely identifies the
+ * property for which this form will be loaded.
+ * - callback (required: A callback function that will receive the rerendered
+ * processed text.
+ */
+Drupal.edit.util.loadRerenderedProcessedText = function(options) {
+ // Create a Drupal.ajax instance to load the form.
+ Drupal.ajax[options.propertyID] = new Drupal.ajax(options.propertyID, options.$editorElement, {
+ url: Drupal.edit.util.buildUrl(options.propertyID, Drupal.settings.edit.rerenderProcessedTextURL),
+ event: 'edit-internal.edit',
+ submit: { nocssjs : true },
+ progress: { type : null } // No progress indicator.
+ });
+ // Implement a scoped edit_field_form AJAX command: calls the callback.
+ Drupal.ajax[options.propertyID].commands.edit_field_rendered_without_transformation_filters = function(ajax, response, status) {
+ options.callback(response.data);
+ // Delete the Drupal.ajax instance that called this very function.
+ delete Drupal.ajax[options.propertyID];
+ options.$editorElement.unbind('edit-internal.edit');
+ };
+ // This will ensure our scoped edit_field_form AJAX command gets called.
+ options.$editorElement.trigger('edit-internal.edit');
+};
+
+Drupal.edit.util.form = {
+ /**
+ * Loads a form, calls a callback to inserts.
+ *
+ * Leverages Drupal.ajax' ability to have scoped (per-instance) command
+ * implementations to be able to call a callback.
+ *
+ * @param options
+ * An object with the following keys:
+ * - $editorElement (required): the PredicateEditor DOM element.
+ * - propertyID (required): the property ID that uniquely identifies the
+ * property for which this form will be loaded.
+ * - nocssjs (required): boolean indicating whether no CSS and JS should be
+ * returned (necessary when the form is invisible to the user).
+ * @param callback
+ * A callback function that will receive the form to be inserted, as well as
+ * the ajax object, necessary if the callback wants to perform other AJAX
+ * commands.
+ */
+ load: function(options, callback) {
+ // Create a Drupal.ajax instance to load the form.
+ Drupal.ajax[options.propertyID] = new Drupal.ajax(options.propertyID, options.$editorElement, {
+ url: Drupal.edit.util.buildUrl(options.propertyID, Drupal.settings.edit.fieldFormURL),
+ event: 'edit-internal.edit',
+ submit: { nocssjs : options.nocssjs },
+ progress: { type : null } // No progress indicator.
+ });
+ // Implement a scoped edit_field_form AJAX command: calls the callback.
+ Drupal.ajax[options.propertyID].commands.edit_field_form = function(ajax, response, status) {
+ callback(response.data, ajax);
+ // Delete the Drupal.ajax instance that called this very function.
+ delete Drupal.ajax[options.propertyID];
+ options.$editorElement.unbind('edit-internal.edit');
+ };
+ // This will ensure our scoped edit_field_form AJAX command gets called.
+ options.$editorElement.trigger('edit-internal.edit');
+ },
+
+ /**
+ * Creates a Drupal.ajax instance that is used to save a form.
+ *
+ * @param options
+ * An object with the following keys:
+ * - nocssjs (required): boolean indicating whether no CSS and JS should be
+ * returned (necessary when the form is invisible to the user).
+ *
+ * @return
+ * The key of the Drupal.ajax instance.
+ */
+ ajaxifySaving: function(options, $submit) {
+ // Re-wire the form to handle submit.
+ var element_settings = {
+ url: $submit.closest('form').attr('action'),
+ setClick: true,
+ event: 'click.edit',
+ progress: { type:'throbber' },
+ submit: { nocssjs : options.nocssjs }
+ };
+ var base = $submit.attr('id');
+
+ Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings);
+
+ return base;
+ },
+
+ /**
+ * Cleans up the Drupal.ajax instance that is used to save the form.
+ *
+ * @param $submit
+ * The jQuery-wrapped submit DOM element that should be unajaxified.
+ */
+ unajaxifySaving: function($submit) {
+ delete Drupal.ajax[$submit.attr('id')];
+ $submit.unbind('click.edit');
+ }
+};
+
+})(jQuery);
diff --git a/core/modules/edit/js/viejs/SparkEditService.js b/core/modules/edit/js/viejs/SparkEditService.js
new file mode 100644
index 0000000..fa492fd
--- /dev/null
+++ b/core/modules/edit/js/viejs/SparkEditService.js
@@ -0,0 +1,202 @@
+// VIE DOM parsing service for Spark Edit
+(function () {
+
+ VIE.prototype.SparkEditService = function (options) {
+ var defaults = {
+ name: 'edit',
+ subjectSelector: '.edit-field.edit-allowed'
+ };
+ this.options = _.extend({}, defaults, options);
+
+ this.views = [];
+ this.vie = null;
+ this.name = this.options.name;
+ };
+
+ VIE.prototype.SparkEditService.prototype = {
+ load: function (loadable) {
+ var correct = loadable instanceof this.vie.Loadable;
+ if (!correct) {
+ throw new Error('Invalid Loadable passed');
+ }
+
+ var element;
+ if (!loadable.options.element) {
+ if (typeof document === 'undefined') {
+ return loadable.resolve([]);
+ } else {
+ element = Drupal.settings.edit.context;
+ }
+ } else {
+ element = loadable.options.element;
+ }
+
+ var entities = this.readEntities(element);
+ loadable.resolve(entities);
+ },
+
+ // The edit-id data attribute contains the full identifier of
+ // each entity element in the format
+ // `::::`.
+ _getID: function (element) {
+ var id = jQuery(element).attr('data-edit-id');
+ if (!id) {
+ id = jQuery(element).closest('[data-edit-id]').attr('data-edit-id');
+ }
+ return id;
+ },
+
+ // Returns the "URI" of an entity of an element in format
+ // `/`.
+ getElementSubject: function (element) {
+ return this._getID(element).split(':').slice(0, 2).join('/');
+ },
+
+ // Returns the field name for an element in format
+ // `//`.
+ // (Slashes instead of colons because the field name is no namespace.)
+ getElementPredicate: function (element) {
+ if (!this._getID(element)) {
+ throw new Error('Could not find predicate for element');
+ }
+ return this._getID(element).split(':').slice(2, 5).join('/');
+ },
+
+ getElementType: function (element) {
+ return this._getID(element).split(':').slice(0, 1)[0];
+ },
+
+ // Reads all editable entities (currently each Drupal field is considered an
+ // entity, in the future Drupal entities should be mapped to VIE entities)
+ // from DOM and returns the VIE enties it found.
+ // @todo: check the above.
+ readEntities: function (element) {
+ var service = this;
+ var entities = [];
+ var entityElements = jQuery(this.options.subjectSelector, element);
+ entityElements = entityElements.add(jQuery(element).filter(this.options.subjectSelector));
+ entityElements.each(function () {
+ var entity = service._readEntity(jQuery(this));
+ if (entity) {
+ entities.push(entity);
+ }
+ });
+ return entities;
+ },
+
+ // Returns a filled VIE Entity instance for a DOM element. The Entity
+ // is also registered in the VIE entities collection.
+ _readEntity: function (element) {
+ var subject = this.getElementSubject(element);
+ var type = this.getElementType(element);
+ var entity = this._readEntityPredicates(subject, element, false);
+ if (jQuery.isEmptyObject(entity)) {
+ return null;
+ }
+ entity['@subject'] = subject;
+ if (type) {
+ entity['@type'] = this._registerType(type, element);
+ }
+
+ // Register with VIE
+ return this._registerEntity(entity);
+ },
+
+ _registerEntity: function (entityData) {
+ var entityInstance = new this.vie.Entity(entityData);
+ return this.vie.entities.addOrUpdate(entityInstance, {
+ updateOptions: {
+ silent: true
+ }
+ });
+ },
+
+ _registerType: function (typeId, element) {
+ typeId = '';
+ var type = this.vie.types.get(typeId);
+ if (!type) {
+ this.vie.types.add(typeId, []);
+ type = this.vie.types.get(typeId);
+ }
+
+ var predicate = this.getElementPredicate(element);
+ if (type.attributes.get(predicate)) {
+ return type;
+ }
+
+ var label = element.data('edit-field-label');
+ var range = 'Form';
+ if (element.hasClass('edit-type-direct')) {
+ range = 'Direct';
+ }
+ if (element.hasClass('edit-type-direct-with-wysiwyg')) {
+ range = 'Wysiwyg';
+ }
+ type.attributes.add(predicate, [range], 0, 1, {
+ label: element.data('edit-field-label')
+ });
+
+ return type;
+ },
+
+ _readEntityPredicates: function (subject, element, emptyValues) {
+ var entityPredicates = {};
+ var service = this;
+ this.findPredicateElements(subject, element, true).each(function () {
+ var predicateElement = jQuery(this);
+ var predicate = service.getElementPredicate(predicateElement);
+ if (!predicate) {
+ return;
+ }
+ var value = service._readElementValue(predicateElement);
+ if (value === null && !emptyValues) {
+ return;
+ }
+
+ entityPredicates[predicate] = value;
+ });
+ return entityPredicates;
+ },
+
+ _readElementValue: function (element) {
+ return jQuery.trim(element.html());
+ },
+
+ // Subject elements are the DOM elements containing a single or multiple
+ // editable fields. In Spark Edit these elements are called _Fields_,
+ // and the actual DOM elements which are edited are called _Editables_.
+ findSubjectElements: function (element) {
+ if (!element) {
+ element = Drupal.settings.edit.context;
+ }
+ return jQuery(this.options.subjectSelector, element);
+ },
+
+ // Predicate Elements are the actual DOM elements that users will be able
+ // to edit. In regular Spark Edit they are called _Editables_.
+ //
+ // They are contained within Entity elements, which in Spark Edit are called
+ // _Fields_.
+ // @todo: clarify and document what the Best Way to do this is? Should VIE's
+ // entities map to Drupal's entities etc? Also see higher comments.
+ findPredicateElements: function (subject, element, allowNestedPredicates, stop) {
+ var predicates = jQuery();
+
+ // Form-type predicates
+ predicates = predicates.add(element.filter('.edit-type-form'));
+
+ // Direct-type predicates
+ var direct = element.filter('.edit-type-direct');
+ predicates = predicates.add(direct.find('.field-item'));
+
+ if (!predicates.length && !stop) {
+ var parentElement = element.parent(this.options.subjectSelector);
+ if (parentElement.length) {
+ return this.findPredicateElements(subject, parentElement, allowNestedPredicates, true);
+ }
+ }
+
+ return predicates;
+ }
+ };
+})();
diff --git a/core/modules/edit/js/views/fielddecorator-view.js b/core/modules/edit/js/views/fielddecorator-view.js
new file mode 100644
index 0000000..491114c
--- /dev/null
+++ b/core/modules/edit/js/views/fielddecorator-view.js
@@ -0,0 +1,319 @@
+/**
+ * @file fielddecorator-view.js
+ *
+ * A Backbone View that decorates properties.
+ * It listens to state changes of the property editor.
+ *
+ * @todo rename to propertydecorator-view.js + PropertyDecorationView.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.views = Drupal.edit.views || {};
+Drupal.edit.views.FieldDecorationView = Backbone.View.extend({
+
+ editor: null,
+ entity: null,
+ predicate : null,
+ editorName: null,
+ toolbarId: null,
+
+ _widthAttributeIsEmpty: null,
+
+ events: {
+ 'mouseenter.edit' : 'onMouseEnter',
+ 'mouseleave.edit' : 'onMouseLeave'
+ },
+
+ /**
+ * Implements Backbone Views' initialize() function.
+ *
+ * @param options
+ * An object with the following keys:
+ * - editor: the editor object with an 'options' object that has these keys:
+ * * entity: the VIE entity for the property.
+ * * property: the predicate of the property.
+ * * editorName: the editor name: 'form', 'direct' or
+ * 'direct-with-wysiwyg'.
+ * * widget: the parent EditableeEntity widget.
+ * - toolbarId: the ID attribute of the toolbar as rendered in the DOM.
+ */
+ initialize: function(options) {
+ this.editor = options.editor;
+ this.toolbarId = options.toolbarId;
+
+ this.entity = this.editor.options.entity;
+ this.predicate = this.editor.options.property;
+ this.editorName = this.editor.options.editorName;
+
+ this.$el.css('background-color', this._getBgColor(this.$el));
+ },
+
+ /**
+ * Listens to editor state changes.
+ */
+ stateChange: function(from, to) {
+ switch (to) {
+ case 'inactive':
+ if (from !== null) {
+ this.undecorate();
+ }
+ break;
+ case 'candidate':
+ this.decorate();
+ if (from !== 'inactive') {
+ this.stopHighlight();
+ if (from !== 'highlighted') {
+ this.stopEdit(this.editorName);
+ }
+ }
+ break;
+ case 'highlighted':
+ this.startHighlight();
+ break;
+ case 'activating':
+ // NOTE: this step only exists for the 'form' editor! It is skipped by
+ // the 'direct' and 'direct-with-wysiwyg' editors, because no loading is
+ // necessary.
+ this.prepareEdit(this.editorName);
+ break;
+ case 'active':
+ if (this.editorName !== 'form') {
+ this.prepareEdit(this.editorName);
+ }
+ this.startEdit(this.editorName);
+ break;
+ case 'changed':
+ break;
+ case 'saving':
+ break;
+ case 'saved':
+ break;
+ case 'invalid':
+ break;
+ }
+ },
+
+ /**
+ * Starts hover: transition to 'highlight' state.
+ *
+ * @param event
+ */
+ onMouseEnter: function(event) {
+ var that = this;
+ this._ignoreHoveringVia(event, '#' + this.toolbarId, function () {
+ var editableEntity = that.editor.options.widget;
+ editableEntity.setState('highlighted', that.predicate);
+ event.stopPropagation();
+ });
+ },
+
+ /**
+ * Stops hover: back to 'candidate' state.
+ *
+ * @param event
+ */
+ onMouseLeave: function(event) {
+ var that = this;
+ this._ignoreHoveringVia(event, '#' + this.toolbarId, function () {
+ var editableEntity = that.editor.options.widget;
+ editableEntity.setState('candidate', that.predicate, { reason: 'mouseleave' });
+ event.stopPropagation();
+ });
+ },
+
+ decorate: function () {
+ this.$el.addClass('edit-animate-fast edit-candidate edit-editable');
+ },
+
+ undecorate: function () {
+ this.$el
+ .removeClass('edit-candidate edit-editable edit-highlighted edit-editing edit-belowoverlay');
+ },
+
+ startHighlight: function () {
+ // Animations.
+ var that = this;
+ setTimeout(function() {
+ that.$el.addClass('edit-highlighted');
+ }, 0);
+ },
+
+ stopHighlight: function() {
+ this.$el
+ .removeClass('edit-highlighted');
+ },
+
+ prepareEdit: function(editorName) {
+ this.$el.addClass('edit-editing');
+
+ // While editing, don't show *any* other editors.
+ // @todo: revisit this once https://github.com/bergie/create/issues/133 is solved.
+ jQuery('.edit-candidate').not('.edit-editing').removeClass('edit-editable');
+
+ if (editorName === 'form') {
+ this.$el.addClass('edit-belowoverlay');
+ }
+ },
+
+ startEdit: function(editorName) {
+ if (editorName !== 'form') {
+ this._pad();
+ }
+ },
+
+ stopEdit: function(editorName) {
+ this.$el.removeClass('edit-highlighted edit-editing');
+
+ // Make the other editors show up again.
+ // @todo: revisit this once https://github.com/bergie/create/issues/133 is solved.
+ jQuery('.edit-candidate').addClass('edit-editable');
+
+ if (editorName === 'form') {
+ this.$el.removeClass('edit-belowoverlay');
+ }
+ else {
+ this._unpad();
+ }
+ },
+
+ _pad: function () {
+ var self = this;
+
+ // Add 5px padding for readability. This means we'll freeze the current
+ // width and *then* add 5px padding, hence ensuring the padding is added "on
+ // the outside".
+ // 1) Freeze the width (if it's not already set); don't use animations.
+ if (this.$el[0].style.width === "") {
+ this._widthAttributeIsEmpty = true;
+ this.$el
+ .addClass('edit-animate-disable-width')
+ .css('width', this.$el.width());
+ }
+
+ // 2) Add padding; use animations.
+ var posProp = this._getPositionProperties(this.$el);
+ setTimeout(function() {
+ // Re-enable width animations (padding changes affect width too!).
+ self.$el.removeClass('edit-animate-disable-width');
+
+ // Pad the editable.
+ self.$el
+ .css({
+ 'position': 'relative',
+ 'top': posProp.top - 5 + 'px',
+ 'left': posProp.left - 5 + 'px',
+ 'padding-top' : posProp['padding-top'] + 5 + 'px',
+ 'padding-left' : posProp['padding-left'] + 5 + 'px',
+ 'padding-right' : posProp['padding-right'] + 5 + 'px',
+ 'padding-bottom': posProp['padding-bottom'] + 5 + 'px',
+ 'margin-bottom': posProp['margin-bottom'] - 10 + 'px'
+ });
+ }, 0);
+ },
+
+ _unpad: function () {
+ var self = this;
+
+ // 1) Set the empty width again.
+ if (this._widthAttributeIsEmpty) {
+ this.$el
+ .addClass('edit-animate-disable-width')
+ .css('width', '');
+ }
+
+ // 2) Remove padding; use animations (these will run simultaneously with)
+ // the fading out of the toolbar as its gets removed).
+ var posProp = this._getPositionProperties(this.$el);
+ setTimeout(function() {
+ // Re-enable width animations (padding changes affect width too!).
+ self.$el.removeClass('edit-animate-disable-width');
+
+ // Unpad the editable.
+ self.$el
+ .css({
+ 'position': 'relative',
+ 'top': posProp.top + 5 + 'px',
+ 'left': posProp.left + 5 + 'px',
+ 'padding-top' : posProp['padding-top'] - 5 + 'px',
+ 'padding-left' : posProp['padding-left'] - 5 + 'px',
+ 'padding-right' : posProp['padding-right'] - 5 + 'px',
+ 'padding-bottom': posProp['padding-bottom'] - 5 + 'px',
+ 'margin-bottom': posProp['margin-bottom'] + 10 + 'px'
+ });
+ }, 0);
+ },
+
+ /**
+ * Gets the background color of an element (or the inherited one).
+ *
+ * @param $e
+ * A DOM element.
+ */
+ _getBgColor: function($e) {
+ var c;
+
+ if ($e === null || $e[0].nodeName === 'HTML') {
+ // Fallback to white.
+ return 'rgb(255, 255, 255)';
+ }
+ c = $e.css('background-color');
+ // TRICKY: edge case for Firefox' "transparent" here; this is a
+ // browser bug: https://bugzilla.mozilla.org/show_bug.cgi?id=635724
+ if (c === 'rgba(0, 0, 0, 0)' || c === 'transparent') {
+ return this._getBgColor($e.parent());
+ }
+ return c;
+ },
+
+ /**
+ * Gets the top and left properties of an element and convert extraneous
+ * values and information into numbers ready for subtraction.
+ *
+ * @param $e
+ * A DOM element.
+ */
+ _getPositionProperties: function($e) {
+ var p,
+ r = {},
+ props = [
+ 'top', 'left', 'bottom', 'right',
+ 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
+ 'margin-bottom'
+ ];
+
+ var propCount = props.length;
+ for (var i = 0; i < propCount; i++) {
+ p = props[i];
+ r[p] = parseInt(this._replaceBlankPosition($e.css(p)), 10);
+ }
+ return r;
+ },
+
+ /**
+ * Replaces blank or 'auto' CSS "position: " values with "0px".
+ *
+ * @param pos
+ * The value for a CSS position declaration.
+ */
+ _replaceBlankPosition: function(pos) {
+ // @todo: this was pos == NaN (which always returns false, keeping this
+ // comment in case we find a regression.
+ if (pos === 'auto' || !pos) {
+ pos = '0px';
+ }
+ return pos;
+ },
+
+ /**
+ * Ignores hovering to/from the given closest element, but as soon as a hover
+ * occurs to/from *another* element, then call the given callback.
+ */
+ _ignoreHoveringVia: function(event, closest, callback) {
+ if (jQuery(event.relatedTarget).closest(closest).length > 0) {
+ event.stopPropagation();
+ }
+ else {
+ callback();
+ }
+ }
+});
diff --git a/core/modules/edit/js/views/menu-view.js b/core/modules/edit/js/views/menu-view.js
new file mode 100644
index 0000000..085e562
--- /dev/null
+++ b/core/modules/edit/js/views/menu-view.js
@@ -0,0 +1,38 @@
+/**
+ * @file menu-view.js
+ *
+ * A Backbone View that provides the app-level interactive menu.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.views = Drupal.edit.views || {};
+Drupal.edit.views.MenuView = Backbone.View.extend({
+
+ /**
+ * Implements Backbone Views' initialize() function.
+ */
+ initialize: function() {
+ _.bindAll(this, 'stateChange');
+ this.model.on('change:isViewing', this.stateChange);
+
+ // We have to call stateChange() here, because URL fragments are not passed
+ // the server, thus the wrong anchor may be marked as active.
+ this.stateChange();
+ },
+
+ /**
+ * Listens to app state changes.
+ */
+ stateChange: function() {
+ // Unmark whichever one is currently marked as active.
+ this.$('a.edit_view-edit-toggle')
+ .removeClass('active')
+ .parent().removeClass('active');
+
+ // Mark the correct one as active.
+ var activeAnchor = this.model.get('isViewing') ? 'view' : 'edit';
+ this.$('a.edit_view-edit-toggle.edit-' + activeAnchor)
+ .addClass('active')
+ .parent().addClass('active');
+ }
+});
diff --git a/core/modules/edit/js/views/modal-view.js b/core/modules/edit/js/views/modal-view.js
new file mode 100644
index 0000000..76d0085
--- /dev/null
+++ b/core/modules/edit/js/views/modal-view.js
@@ -0,0 +1,108 @@
+/**
+ * @file modal-view.js
+ *
+ * A Backbone View that provides an interactive modal.
+ */
+
+(function($) {
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.views = Drupal.edit.views || {};
+Drupal.edit.views.ModalView = Backbone.View.extend({
+
+ message: null,
+ buttons: null,
+ callback: null,
+ $elementsToHide: null,
+
+ events: {
+ 'click a[role=button]': 'onButtonClick'
+ },
+
+ /**
+ * Implements Backbone Views' initialize() function.
+ *
+ * @param options
+ * An object with the following keys:
+ * - message: a message to show in the modal.
+ * - buttons: a set of buttons with 'action's defined, ready to be passed to
+ * Drupal.theme.editButtons().
+ * - callback: a callback that will receive the 'action' of the clicked
+ * button.
+ *
+ * @see Drupal.theme.editModal()
+ * @see Drupal.theme.editButtons()
+ */
+ initialize: function(options) {
+ this.message = options.message;
+ this.buttons = options.buttons;
+ this.callback = options.callback;
+ },
+
+ /**
+ * Implements Backbone Views' render() function.
+ */
+ render: function() {
+ // Step 1: move certain UI elements below the overlay.
+ var editor = this.model.get('activeEditor');
+ this.$elementsToHide = $([])
+ .add((editor.element.hasClass('edit-belowoverlay')) ? null : editor.element)
+ .add(editor.toolbarView.$el)
+ .add((editor.options.editorName === 'form')
+ ? editor.$formContainer
+ : editor.element.next('.edit-validation-errors')
+ );
+ this.$elementsToHide.addClass('edit-belowoverlay');
+
+ // Step 2: the modal. When the user makes a choice, the UI elements that
+ // were moved below the overlay will be restored, and the callback will be
+ // called.
+ this.setElement(Drupal.theme('editModal', {}));
+ this.$el.appendTo('body');
+ // Template.
+ this.$('.main p').text(this.message);
+ var $actions = $(Drupal.theme('editButtons', { 'buttons' : this.buttons}));
+ this.$('.actions').append($actions);
+
+ // Step 3; show the modal with an animation.
+ var that = this;
+ setTimeout(function() {
+ that.$el.removeClass('edit-animate-invisible');
+ }, 0);
+ },
+
+ /**
+ * When the user clicks on any of the buttons, the modal should be removed
+ * and the result should be passed to the callback.
+ *
+ * @param event
+ */
+ onButtonClick: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+
+ // Remove after animation.
+ var that = this;
+ this.$el
+ .addClass('edit-animate-invisible')
+ .bind(Drupal.edit.util.constants.transitionEnd, function(e) {
+ that.remove();
+ });
+
+ var action = $(event.target).attr('data-edit-modal-action');
+ return this.callback(action);
+ },
+
+ /**
+ * Overrides Backbone Views' remove() function.
+ */
+ remove: function() {
+ // Move the moved UI elements on top of the overlay again.
+ this.$elementsToHide.removeClass('edit-belowoverlay');
+
+ // Remove the modal itself.
+ this.$el.remove();
+ }
+});
+
+})(jQuery);
diff --git a/core/modules/edit/js/views/overlay-view.js b/core/modules/edit/js/views/overlay-view.js
new file mode 100644
index 0000000..db8d150
--- /dev/null
+++ b/core/modules/edit/js/views/overlay-view.js
@@ -0,0 +1,80 @@
+/**
+ * @file overlay-view.js
+ *
+ * A Backbone View that provides the app-level overlay.
+ *
+ * The overlay sits on top of the existing content, the properties that are
+ * candidates for editing sit on top of the overlay.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.views = Drupal.edit.views || {};
+Drupal.edit.views.OverlayView = Backbone.View.extend({
+
+ events: {
+ 'click': 'onClick'
+ },
+
+ /**
+ * Implements Backbone Views' initialize() function.
+ */
+ initialize: function(options) {
+ _.bindAll(this, 'stateChange');
+ this.model.on('change:isViewing', this.stateChange);
+ },
+
+ /**
+ * Listens to app state changes.
+ */
+ stateChange: function() {
+ if (this.model.get('isViewing')) {
+ this.remove();
+ return;
+ }
+ this.render();
+ },
+
+ /**
+ * Equates clicks anywhere on the overlay to clicking the active editor's (if
+ * any) "close" button.
+ *
+ * @param event
+ */
+ onClick: function(event) {
+ event.preventDefault();
+ var activeEditor = this.model.get('activeEditor');
+ if (activeEditor) {
+ var editableEntity = activeEditor.options.widget;
+ var predicate = activeEditor.options.property;
+ editableEntity.setState('candidate', predicate, { reason: 'overlay' });
+ }
+ },
+
+ /**
+ * Inserts the overlay element and appends it to the body.
+ */
+ render: function() {
+ this.setElement(
+ jQuery(Drupal.theme('editOverlay', {}))
+ .appendTo('body')
+ .addClass('edit-animate-slow edit-animate-invisible')
+ );
+ // Animations
+ this.$el.css('top', jQuery('#navbar').outerHeight());
+ this.$el.removeClass('edit-animate-invisible');
+ },
+
+ /**
+ * Remove the overlay element.
+ */
+ remove: function() {
+ var that = this;
+ this.$el
+ .addClass('edit-animate-invisible')
+ .bind(Drupal.edit.util.constants.transitionEnd, function (event) {
+ that.$el.remove();
+ // @todo - should the overlay really do this?
+ jQuery('.edit-form-container, .edit-toolbar-container, #edit_modal, .edit-curtain, .edit-validation-errors').remove();
+ });
+ }
+});
diff --git a/core/modules/edit/js/views/toolbar-view.js b/core/modules/edit/js/views/toolbar-view.js
new file mode 100644
index 0000000..72bfef3
--- /dev/null
+++ b/core/modules/edit/js/views/toolbar-view.js
@@ -0,0 +1,443 @@
+/**
+ * @file toolbar-view.js
+ *
+ * A Backbone View that provides an interactive toolbar (1 per property editor).
+ * It listens to state changes of the property editor. It also triggers state
+ * changes in response to user interactions with the toolbar, including saving.
+ */
+
+Drupal.edit = Drupal.edit || {};
+Drupal.edit.views = Drupal.edit.views || {};
+Drupal.edit.views.ToolbarView = Backbone.View.extend({
+
+ editor: null,
+ $storageWidgetEl: null,
+
+ entity: null,
+ predicate : null,
+ editorName: null,
+
+ _id: null,
+
+ events: {
+ 'click.edit a.label': 'onClickInfoLabel',
+ 'mouseleave.edit': 'onMouseLeave',
+ 'click.edit a.field-save': 'onClickSave',
+ 'click.edit a.field-close': 'onClickClose'
+ },
+
+ /**
+ * Implements Backbone Views' initialize() function.
+ *
+ * @param options
+ * An object with the following keys:
+ * - editor: the editor object with an 'options' object that has these keys:
+ * * entity: the VIE entity for the property.
+ * * property: the predicate of the property.
+ * * editorName: the editor name: 'form', 'direct' or
+ * 'direct-with-wysiwyg'.
+ * * element: the jQuery-wrapped editor DOM element
+ * - $storageWidgetEl: the DOM element on which the Create Storage widget is
+ * initialized.
+ */
+ initialize: function(options) {
+ this.editor = options.editor;
+ this.$storageWidgetEl = options.$storageWidgetEl;
+
+ this.entity = this.editor.options.entity;
+ this.predicate = this.editor.options.property;
+ this.editorName = this.editor.options.editorName;
+
+ // Generate a DOM-compatible ID for the toolbar DOM element.
+ var propertyID = Drupal.edit.util.calcPropertyID(this.entity, this.predicate);
+ this._id = 'edit-toolbar-for-' + propertyID.replace(/\//g, '_');
+ },
+
+ /**
+ * Listens to editor state changes.
+ */
+ stateChange: function(from, to) {
+ switch (to) {
+ case 'inactive':
+ // Nothing happens in this stage.
+ break;
+ case 'candidate':
+ if (from !== 'inactive') {
+ if (from !== 'highlighted' && this.editorName !== 'form') {
+ this._unpad(this.editorName);
+ }
+ this.remove();
+ }
+ break;
+ case 'highlighted':
+ // As soon as we highlight, make sure we have a toolbar in the DOM (with at least a title).
+ this.render();
+ this.startHighlight();
+ break;
+ case 'activating':
+ this.setLoadingIndicator(true);
+ break;
+ case 'active':
+ this.startEdit(this.editorName);
+ this.setLoadingIndicator(false);
+ if (this.editorName !== 'form') {
+ this._pad(this.editorName);
+ }
+ if (this.editorName === 'direct-with-wysiwyg') {
+ this.insertWYSIWYGToolGroups();
+ }
+ break;
+ case 'changed':
+ this.$el
+ .find('a.save')
+ .addClass('blue-button')
+ .removeClass('gray-button');
+ break;
+ case 'saving':
+ this.setLoadingIndicator(true);
+ this.save();
+ break;
+ case 'saved':
+ this.setLoadingIndicator(false);
+ break;
+ case 'invalid':
+ this.setLoadingIndicator(false);
+ break;
+ }
+ },
+
+ /**
+ * Saves a property.
+ *
+ * This method deals with the complexity of the editor-dependent ways of
+ * inserting updated content and showing validation error messages.
+ *
+ * One might argue that this does not belong in a view. However, there is no
+ * actual "save" logic here, that lives in Backbone.sync. This is just some
+ * glue code, along with the logic for inserting updated content as well as
+ * showing validation error messages, the latter of which is certainly okay.
+ */
+ save: function() {
+ var that = this;
+ var editor = this.editor;
+ var editableEntity = editor.options.widget;
+ var entity = editor.options.entity;
+ var predicate = editor.options.property;
+
+ // Use Create.js' Storage widget to handle saving. (Uses Backbone.sync.)
+ this.$storageWidgetEl.createStorage('saveRemote', entity, {
+ editor: editor,
+
+ // Successfully saved without validation errors.
+ success: function (model) {
+ editableEntity.setState('saved', predicate);
+
+ // Replace the old content with the new content.
+ var updatedField = entity.get(predicate + '/rendered');
+ var $inner = jQuery(updatedField).html();
+ editor.element.html($inner);
+
+ // @todo: VIE doesn't seem to like this? :) It seems that if I delete/
+ // overwrite an existing field, that VIE refuses to find the same
+ // predicate again for the same entity?
+ // self.$el.replaceWith(updatedField);
+ // debugger;
+ // console.log(self.$el, self.el, Drupal.edit.domService.findSubjectElements(self.$el));
+ // Drupal.edit.domService.findSubjectElements(self.$el).each(Drupal.edit.prepareFieldView);
+
+ editableEntity.setState('candidate', predicate);
+ },
+
+ // Save attempted but failed due to validation errors.
+ error: function (validationErrorMessages) {
+ editableEntity.setState('invalid', predicate);
+
+ if (that.editorName === 'form') {
+ editor.$formContainer
+ .find('.edit-form')
+ .addClass('edit-validation-error')
+ .find('form')
+ .prepend(validationErrorMessages);
+ }
+ else {
+ var $errors = jQuery('')
+ .append(validationErrorMessages);
+ editor.element
+ .addClass('edit-validation-error')
+ .after($errors);
+ }
+ }
+ });
+ },
+
+ /**
+ * When the user clicks the info label, nothing should happen.
+ * @note currently redirects the click.edit-event to the editor DOM element.
+ *
+ * @param event
+ */
+ onClickInfoLabel: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ // Redirects the event to the editor DOM element.
+ this.editor.element.trigger('click.edit');
+ },
+
+ /**
+ * A mouseleave to the editor doesn't matter; a mouseleave to something else
+ * counts as a mouseleave on the editor itself.
+ *
+ * @param event
+ */
+ onMouseLeave: function(event) {
+ var el = this.editor.element[0];
+ if (event.relatedTarget != el && !jQuery.contains(el, event.relatedTarget)) {
+ this.editor.element.trigger('mouseleave.edit');
+ }
+ event.stopPropagation();
+ },
+
+ /**
+ * Upon clicking "Save", trigger a custom event to save this property.
+ *
+ * @param event
+ */
+ onClickSave: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ this.editor.options.widget.setState('saving', this.predicate);
+ },
+
+ /**
+ * Upon clicking "Close", trigger a custom event to stop editing.
+ *
+ * @param event
+ */
+ onClickClose: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ this.editor.options.widget.setState('candidate', this.predicate, { reason: 'cancel' });
+ },
+
+ /**
+ * Indicate in the 'info' toolgroup that we're waiting for a server reponse.
+ *
+ * @param bool enabled
+ * Whether the loading indicator should be displayed or not.
+ */
+ setLoadingIndicator: function(enabled) {
+ if (enabled) {
+ this.addClass('info', 'loading');
+ }
+ else {
+ // Only stop showing the loading indicator after half a second to prevent
+ // it from flashing, which is bad UX.
+ var that = this;
+ setTimeout(function() {
+ that.removeClass('info', 'loading');
+ }, 500);
+ }
+ },
+
+ startHighlight: function() {
+ // We get the label to show for this property from VIE's type system.
+ var label = this.predicate;
+ var attributeDef = this.entity.get('@type').attributes.get(this.predicate);
+ if (attributeDef && attributeDef.metadata) {
+ label = attributeDef.metadata.label;
+ }
+
+ this.$el
+ .find('.edit-toolbar')
+ // Append the "info" toolgroup into the toolbar.
+ .append(Drupal.theme('editToolgroup', {
+ classes: 'info',
+ buttons: [
+ { label: label, classes: 'blank-button label', hasButtonRole: false }
+ ]
+ }));
+
+ // Animations.
+ var that = this;
+ setTimeout(function () {
+ that.show('info');
+ }, 0);
+ },
+
+ startEdit: function() {
+ this.$el
+ .addClass('edit-editing')
+ .find('.edit-toolbar')
+ // Append the "ops" toolgroup into the toolbar.
+ .append(Drupal.theme('editToolgroup', {
+ classes: 'ops',
+ buttons: [
+ { label: Drupal.t('Save'), classes: 'field-save save gray-button' },
+ { label: '', classes: 'field-close close gray-button' }
+ ]
+ }));
+ this.show('ops');
+ },
+
+ /**
+ * Adjusts the toolbar to accomodate padding on the PropertyEditor widget.
+ *
+ * @see FieldDecorationView._pad().
+ */
+ _pad: function(editorName) {
+ // The whole toolbar must move to the top when the property's DOM element
+ // is displayed inline.
+ if (this.editor.element.css('display') === 'inline') {
+ this.$el.css('top', parseInt(this.$el.css('top'), 10) - 5 + 'px');
+ }
+
+ // The toolbar must move to the top and the left.
+ var $hf = this.$el.find('.edit-toolbar-heightfaker');
+ $hf.css({ bottom: '6px', left: '-5px' });
+ // When using a WYSIWYG editor, the width of the toolbar must match the
+ // width of the editable.
+ if (editorName === 'direct-with-wysiwyg') {
+ $hf.css({ width: this.editor.element.width() + 10 });
+ }
+ },
+
+ /**
+ * Undoes the changes made by _pad().
+ *
+ * @see FieldDecorationView._unpad().
+ */
+ _unpad: function(editorName) {
+ // Move the toolbar back to its original position.
+ var $hf = this.$el.find('.edit-toolbar-heightfaker');
+ $hf.css({ bottom: '1px', left: '' });
+ // When using a WYSIWYG editor, restore the width of the toolbar.
+ if (editorName === 'direct-with-wysiwyg') {
+ $hf.css({ width: '' });
+ }
+ },
+
+ insertWYSIWYGToolGroups: function() {
+ this.$el
+ .find('.edit-toolbar')
+ .append(Drupal.theme('editToolgroup', {
+ classes: 'wysiwyg-tabs',
+ buttons: []
+ }))
+ .append(Drupal.theme('editToolgroup', {
+ classes: 'wysiwyg',
+ buttons: []
+ }));
+
+ // Animate the toolgroups into visibility.
+ var that = this;
+ setTimeout(function () {
+ that.show('wysiwyg-tabs');
+ that.show('wysiwyg');
+ }, 0);
+ },
+
+ /**
+ * Renders the Toolbar's markup into the DOM.
+ *
+ * Note: depending on whether the 'display' property of the $el for which a
+ * toolbar is being inserted into the DOM, it will be inserted differently.
+ */
+ render: function () {
+ // Render toolbar.
+ this.setElement(jQuery(Drupal.theme('editToolbarContainer', {
+ id: this.getId()
+ })));
+
+ // Insert in DOM.
+ if (this.$el.css('display') === 'inline') {
+ this.$el.prependTo(this.editor.element.offsetParent());
+ var pos = this.editor.element.position();
+ this.$el.css('left', pos.left).css('top', pos.top);
+ }
+ else {
+ this.$el.insertBefore(this.editor.element);
+ }
+
+ var that = this;
+ // Animate the toolbar into visibility.
+ setTimeout(function () {
+ that.$el.removeClass('edit-animate-invisible');
+ }, 0);
+ },
+
+ remove: function () {
+ if (!this.$el) {
+ return;
+ }
+
+ // Remove after animation.
+ var that = this;
+ var $el = this.$el;
+ this.$el
+ .addClass('edit-animate-invisible')
+ // Prevent this toolbar from being detected *while* it is being removed.
+ .removeAttr('id')
+ .find('.edit-toolbar .edit-toolgroup')
+ .addClass('edit-animate-invisible')
+ .bind(Drupal.edit.util.constants.transitionEnd, function (e) {
+ $el.remove();
+ });
+ // @todo: verify/confirm that this really necessary. Messing with this.$el
+ // is not recommended - maybe temporarily unbind/undelegate events?
+ // Immediately set to null, so that if the user hovers over the property
+ // before the removal been completed, a new toolbar can be created.
+ // this.$el = null;
+ },
+
+ /**
+ * Calculates the ID for this toolbar container.
+ *
+ * Only used to make sane hovering behavior possible.
+ *
+ * @return string
+ * A string that can be used as the ID for this toolbar container.
+ */
+ getId: function() {
+ return this._id;
+ },
+
+ /**
+ * Shows a toolgroup.
+ *
+ * @param string toolgroup
+ * A toolgroup name.
+ */
+ show: function (toolgroup) {
+ this._find(toolgroup).removeClass('edit-animate-invisible');
+ },
+
+ /**
+ * Adds classes to a toolgroup.
+ *
+ * @param string toolgroup
+ * A toolgroup name.
+ */
+ addClass: function (toolgroup, classes) {
+ this._find(toolgroup).addClass(classes);
+ },
+
+ /**
+ * Removes classes from a toolgroup.
+ *
+ * @param string toolgroup
+ * A toolgroup name.
+ */
+ removeClass: function (toolgroup, classes) {
+ this._find(toolgroup).removeClass(classes);
+ },
+
+ /**
+ * Finds a toolgroup.
+ *
+ * @param string toolgroup
+ * A toolgroup name.
+ */
+ _find: function (toolgroup) {
+ return this.$el.find('.edit-toolbar .edit-toolgroup.' + toolgroup);
+ }
+});
diff --git a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextDefaultFormatter.php b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextDefaultFormatter.php
index 6b34ba9..85d2878 100644
--- a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextDefaultFormatter.php
+++ b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextDefaultFormatter.php
@@ -23,6 +23,9 @@
* "text",
* "text_long",
* "text_with_summary"
+ * },
+ * edit = {
+ * "editability" = "direct"
* }
* )
*/
diff --git a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextPlainFormatter.php b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextPlainFormatter.php
index 0f7b615..8dc4bf1 100644
--- a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextPlainFormatter.php
+++ b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextPlainFormatter.php
@@ -23,6 +23,9 @@
* "text",
* "text_long",
* "text_with_summary"
+ * },
+ * edit = {
+ * "editability" = "direct"
* }
* )
*/
diff --git a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextSummaryOrTrimmedFormatter.php b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextSummaryOrTrimmedFormatter.php
index 11f0c14..c69e5e0 100644
--- a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextSummaryOrTrimmedFormatter.php
+++ b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextSummaryOrTrimmedFormatter.php
@@ -22,6 +22,9 @@
* },
* settings = {
* "trim_length" = "600"
+ * },
+ * edit = {
+ * "editability" = "form"
* }
* )
*/
diff --git a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextTrimmedFormatter.php b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextTrimmedFormatter.php
index 349cf63..add5d55 100644
--- a/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextTrimmedFormatter.php
+++ b/core/modules/field/modules/text/lib/Drupal/text/Plugin/field/formatter/TextTrimmedFormatter.php
@@ -31,6 +31,9 @@
* },
* settings = {
* "trim_length" = "600"
+ * },
+ * edit = {
+ * "editability" = "form"
* }
* )
*/