Changes for page InplaceEditing

From 2.1 to 3.1

From version 3.1

edited by Nazzareno Pompei
on 22/12/2021 09:31

Change comment: Install extension [org.xwiki.platform:xwiki-platform-edit-ui/13.10.1]

To version 6.1

edited by Nazzareno Pompei
on 19/01/2024 08:57

Change comment: Install extension [org.xwiki.platform:xwiki-platform-edit-ui/15.10.5]

Raw
Rendered

Summary

Objects (3 modified, 0 added, 0 removed)

Details

XWiki.JavaScriptExtension[0]

Code

@@ -87,26 +87,24 @@
          timestamp: new Date().getTime()
        };
        if (!forView) {
--        // We need the annotated XHTML when editing in order to be able to protect the rendering transformations and to
++        // We need the annotated HTML when editing in order to be able to protect the rendering transformations and to
          // be able to recreate the wiki syntax.
--        queryString.outputSyntax = 'annotatedxhtml';
++        queryString.outputSyntax = 'annotatedhtml';
++        queryString.outputSyntaxVersion = '5.0'
          // Currently, only the macro transformations are protected and thus can be edited.
          // See XRENDERING-78: Add markers to modified XDOM by Transformations/Macros
          queryString.transformations = 'macro';
        }
--      var thisXWikiDocument = this;
--      return $.get(this.getURL('view'), queryString).fail(function() {
--        new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
--      }).then(function(html) {
++      return Promise.resolve($.get(this.getURL('view'), queryString)).then(html => {
          // Render succeeded.
          var container = $('<div/>').html(html);
--        return $.extend(thisXWikiDocument, {
++        return $.extend(this, {
            renderedTitle: container.find('#document-title h1').html(),
            renderedContent: container.find('#xwikicontent').html()
          });
--      }, function() {
--        // Render failed.
--        return thisXWikiDocument;
++      }).catch(() => {
++        new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
++        return Promise.reject(this);
        });
      },
@@ -116,20 +116,19 @@
       * @return a promise that resolves to this document instance if the reload request succeeds
       */
      reload: function() {
--      var thisXWikiDocument = this;
--      return $.getJSON(this.getRestURL(), {
++      return Promise.resolve($.getJSON(this.getRestURL(), {
          // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
          timestamp: new Date().getTime()
--      }).then(function(newXWikiDocument) {
++      })).then(newXWikiDocument => {
          // Reload succeeded.
          // Resolve the document reference.
--        thisXWikiDocument.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
++        this.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
          // We were able to load the document so it's not new.
--        thisXWikiDocument.isNew = false;
--        return $.extend(thisXWikiDocument, newXWikiDocument);
--      }, function() {
++        this.isNew = false;
++        return $.extend(this, newXWikiDocument);
++      }).catch(() => {
          // Reload failed.
--        return thisXWikiDocument;
++        return Promise.reject(this);
        });
      },
@@ -140,9 +140,8 @@
       * @return a promise that resolves to this document instance if the lock request succeeds
       */
      lock: function(action, force) {
--      var thisXWikiDocument = this;
        action = action || 'edit';
--      return $.getJSON(this.getURL('get'), {
++      return Promise.resolve($.getJSON(this.getURL('get'), {
          sheet: 'XWiki.InplaceEditing',
          action: 'lock',
          lockAction: action,
@@ -151,20 +151,20 @@
          outputSyntax: 'plain',
          // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
          timestamp: new Date().getTime()
--      }).then(function() {
++      })).then(() => {
          // Lock succeeded.
--        thisXWikiDocument.locked = action;
--        return thisXWikiDocument;
--      }, function(response) {
++        this.locked = action;
++        return this;
++      }).catch(response => {
          // Lock failed.
--        delete thisXWikiDocument.locked;
++        delete this.locked;
          // Check if the user can force the lock.
          var lockConfirmation = response.responseJSON;
          if (response.status === 423 && lockConfirmation) {
            // The user can force the lock, but needs confirmation.
--          thisXWikiDocument.lockConfirmation = lockConfirmation;
++          this.lockConfirmation = lockConfirmation;
          }
--        return thisXWikiDocument;
++        return Promise.reject(this);
        });
      },
@@ -227,7 +227,7 @@
    };
    var loadCSS = function(url) {
--    var link = $('<link>').attr({
++    $('<link/>').attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: url
@@ -259,7 +259,7 @@
          $('#xwikicontent').removeAttr('tabindex');
          if (sectionId) {
            // Select the heading of the specified section.
--          $('#xwikicontent > #' + escapeSelector(sectionId)).each(function() {
++          $('#xwikicontent > #' + $.escapeSelector(sectionId)).each(function() {
              selectText(this);
            });
          }
@@ -267,22 +267,6 @@
      });
    };
--  var escapeSelector = function(selector) {
--    if (window.CSS && typeof CSS.escape === 'function') {
--      // Not supported by Internet Explorer.
--      return CSS.escape(selector);
--    } else if (typeof $.escapeSelector === 'function') {
--      // Added in jQuery 3.0
--      return $.escapeSelector(selector);
--    } else if (typeof selector === 'string') {
--      // Simple implementation.
--      // See https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
--      return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
--    } else {
--      return selector;
--    }
--  };
--
    // We preserve the document data between edits in order to be able to know which document translation should be edited
    // (e.g. when the document translation is missing and we create it, the next edit session should target the created
    // translation).
@@ -290,6 +290,11 @@
      language: xcontext.locale
    }, xwikiDocumentAPI);
++  var setCurrentXWikiDocument = function(xwikiDocument) {
++    currentXWikiDocument = xwikiDocument;
++    return Promise.resolve(xwikiDocument);
++  };
++
    var editInPlace = function(options) {
      options = $.extend({
        afterEdit: function() {},
@@ -297,12 +297,18 @@
      }, options);
      $('#xwikicontent').addClass('loading');
      // Lock the document first.
--    return lock(currentXWikiDocument).fail(options.lockFailed)
++    return lock(currentXWikiDocument)
        // Then load the document only if we managed to lock it.
--      .then(load)
++      .then(load, xwikiDocument => {
++        options.lockFailed(xwikiDocument);
++        return Promise.reject(xwikiDocument);
        // Then load the editors only if we managed to load the document.
--      .then(edit).done(options.afterEdit).always(function() {
--        $('#xwikicontent').removeClass('loading');
++      }).then(edit).then(xwikiDocument => {
++        options.afterEdit(xwikiDocument);
++        return xwikiDocument;
++      }).finally(() => {
++        // Remove the aria-expanded attribute which is incorrect for role=textbox
++        $('#xwikicontent').removeClass('loading').removeAttr('aria-expanded');
        // Then wait for an action (save, cancel, reload) only if the editors were loaded successfuly.
        }).then(maybeSave)
        // Then unlock the document both when the edit ended with success and with a failure.
@@ -309,34 +309,39 @@
        .then(unlock, unlock)
        // Finally view the document both when the edit ended with success and with a failure.
        .then(view, view)
--      .always(function(xwikiDocument) {
--        // Update the current document for the next edit session.
--        currentXWikiDocument = xwikiDocument;
--      });
++      // Update the current document for the next edit session.
++      .then(setCurrentXWikiDocument, setCurrentXWikiDocument);
    };
    var lock = function(xwikiDocument) {
--    return xwikiDocument.lock().then(null, function(xwikiDocument) {
++    return xwikiDocument.lock().catch(function(xwikiDocument) {
        // If the document was already locked then we need to ask the user if they want to force the lock.
        if (xwikiDocument.lockConfirmation) {
          var confirmation = xwikiDocument.lockConfirmation;
          delete xwikiDocument.lockConfirmation;
--        return maybeForceLock(confirmation).then($.proxy(xwikiDocument, 'lock', 'edit', true), function() {
++        return maybeForceLock(confirmation).then(xwikiDocument.lock.bind(xwikiDocument, 'edit', true), function() {
            // Cancel the edit action.
--          return xwikiDocument;
++          return Promise.reject(xwikiDocument);
          });
        } else {
          new XWiki.widgets.Notification(l10n['edit.inplace.page.lockFailed'], 'error');
--        return xwikiDocument;
++        return Promise.reject(xwikiDocument);
        }
      });
    };
    var maybeForceLock = function(confirmation) {
--    var deferred = $.Deferred();
++    var deferred, promise = new Promise((resolve, reject) => {
++      deferred = {resolve, reject};
++    });
++    // We need the catch() to prevent the "Uncaught (in promise)" error log in the console.
++    promise.catch(() => {}).finally(() => {
++      // This flag is used by the Force Lock modal to know whether the promise is settled when the modal is closing.
++      deferred.settled = true;
++    });
      // Reuse the confirmation modal once it is created.
      var modal = $('.force-edit-lock-modal');
--    if (modal.length === 0) {
++    if (!modal.length) {
        modal = createForceLockModal();
      }
      // Update the deferred that needs to be resolved or rejected.
@@ -352,7 +352,7 @@
      }
      // Show the confirmation modal.
      modal.modal('show');
--    return deferred.promise();
++    return promise;
    };
    var createForceLockModal = function() {
@@ -376,16 +376,16 @@
        '</div>'
      ].join(''));
      modal.find('.close').attr('aria-label', l10n['edit.inplace.close']);
--    modal.find('.modal-footer .btn-warning').click(function() {
++    modal.find('.modal-footer .btn-warning').on('click', function() {
        // The user has confirmed they want to force the lock.
        modal.data('deferred').resolve();
        modal.modal('hide');
      });
      modal.on('hide.bs.modal', function() {
--      // If the lock promise is not yet resolved when the modal is closing then it means the modal was canceled,
++      // If the lock promise is not yet settled when the modal is closing then it means the modal was canceled,
        // i.e. the user doesn't want to force the lock.
        var deferred = modal.data('deferred');
--      if (deferred.state() === 'pending') {
++      if (!deferred.settled) {
          deferred.reject();
        }
      });
@@ -393,17 +393,19 @@
    };
    var load = function(xwikiDocument) {
--    return xwikiDocument.reload().done(function(xwikiDocument) {
++    return xwikiDocument.reload().then(xwikiDocument => {
        // Clone the current document version and keep a reference to it in order to be able to restore it on cancel.
        xwikiDocument.originalDocument = $.extend(true, {
          renderedTitle: $('#document-title h1').html(),
          renderedContent: $('#xwikicontent').html()
        }, xwikiDocument);
--    }).fail(function() {
++      return xwikiDocument;
++    }).catch(xwikiDocument => {
        new XWiki.widgets.Notification(l10n['edit.inplace.page.loadFailed'], 'error');
++      return Promise.reject(xwikiDocument);
      // Render the document for edit, in order to have the annotated content HTML. The annotations are used to protect
      // the rendering transformations (e.g. macros) when editing the content.
--    }).then($.proxy(render, null, false));
++    }).then(render.bind(null, false));
    };
    /**
@@ -416,7 +416,7 @@
    };
    var maybeSave = function(xwikiDocument) {
--    return waitForAction(xwikiDocument).then(function(action) {
++    return waitForAction(xwikiDocument).then(action => {
        switch(action.name) {
          case 'save': return save({
            document: action.document,
@@ -429,29 +429,29 @@
    };
    var waitForAction = function(xwikiDocument) {
--    var deferred = $.Deferred();
--    // We wait for the first save, reload or cancel event, whichever is triggered first. Note that the event listeners
--    // that are not executed first will remain registered but that doesn't cause any problems because the state of a
--    // deferred object (promise) cannot change once it was resolved. So the first event that fires will resolve the
--    // promise and the remaining events won't be able to change that. The remaining event listeners could be called
--    // later but they won't have any effect on the deferred object.
--    $(document).one([
--      'xwiki:actions:save',
--      'xwiki:actions:reload',
--      'xwiki:actions:cancel',
--    ].join(' '), '.xcontent.form', function(event, data) {
--      deferred.resolve({
--        name: event.type.substring('xwiki:actions:'.length),
--        document: xwikiDocument,
--        data: data
++    return new Promise((resolve, reject) => {
++      // We wait for the first save, reload or cancel event, whichever is triggered first. Note that the event listeners
++      // that are not executed first will remain registered but that doesn't cause any problems because the state of a
++      // deferred object (promise) cannot change once it was resolved. So the first event that fires will resolve the
++      // promise and the remaining events won't be able to change that. The remaining event listeners could be called
++      // later but they won't have any effect on the deferred object.
++      $(document).one([
++        'xwiki:actions:save',
++        'xwiki:actions:reload',
++        'xwiki:actions:cancel',
++      ].join(' '), '.xcontent.form', function(event, data) {
++        resolve({
++          name: event.type.substring('xwiki:actions:'.length),
++          document: xwikiDocument,
++          data: data
++        });
        });
      });
--    return deferred.promise();
    };
    var save = function(data) {
      // Push the changes to the server.
--    return push(data.document).then(function(xwikiDocument) {
++    return push(data.document).then(xwikiDocument => {
        // Save succeeded.
        return shouldReload(xwikiDocument).then(
          // The document was saved with merge and thus if we want to continue eding we need to reload the editor (because
@@ -458,7 +458,7 @@
          // its content doesn't match the saved content).
          reload,
          // No need to reload the editor because either the action was Save & View or there was no merge on save.
--        $.proxy(maybeContinueEditing, null, data['continue'])
++        maybeContinueEditing.bind(null, data['continue'])
        );
      // Save failed. Continue editing because we may have unsaved content.
      }, maybeSave);
@@ -466,15 +466,15 @@
    var push = function(xwikiDocument) {
      // Let actionButtons.js do the push. We just catch the result.
--    var deferred = $.Deferred();
--    // We wait for the save request to either succeed or fail. Note that one of the event listeners will remain
--    // registered but that doesn't cause any problems because the state of a deferred object (promise) cannot change
--    // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the remaining
--    // event won't be able to change that. The remaining event listener could be called later but it won't have any
--    // effect.
--    $(document).one('xwiki:document:saved', '.xcontent.form', $.proxy(deferred, 'resolve', xwikiDocument));
--    $(document).one('xwiki:document:saveFailed', '.xcontent.form', $.proxy(deferred, 'reject', xwikiDocument));
--    return deferred.promise();
++    return new Promise((resolve, reject) => {
++      // We wait for the save request to either succeed or fail. Note that one of the event listeners will remain
++      // registered but that doesn't cause any problems because the state of a deferred object (promise) cannot change
++      // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the
++      // remaining event won't be able to change that. The remaining event listener could be called later but it won't
++      // have any effect.
++      $(document).one('xwiki:document:saved', '.xcontent.form', resolve.bind(null, xwikiDocument));
++      $(document).one('xwiki:document:saveFailed', '.xcontent.form', reject.bind(null, xwikiDocument));
++    });
    };
    var maybeContinueEditing = function(continueEditing, xwikiDocument) {
@@ -495,9 +495,9 @@
      // Reload the document JSON data (to have the new version) and render the document for view. We need the view HTML
      // both if we stop editing now and if we continue but cancel the edit later.
--    return xwikiDocument.reload().then($.proxy(render, null, true)).then(
--      $.proxy(afterReloadAndRender, null, /* success: */ true),
--      $.proxy(afterReloadAndRender, null, /* success: */ false)
++    return xwikiDocument.reload().then(render.bind(null, true)).then(
++      afterReloadAndRender.bind(null, /* success: */ true),
++      afterReloadAndRender.bind(null, /* success: */ false)
      );
    };
@@ -516,7 +516,7 @@
    };
    // Make sure we unlock the document when the user navigates to another page.
--  $(window).on('unload pagehide', $.proxy(unlock, null, currentXWikiDocument));
++  $(window).on('unload pagehide', unlock.bind(null, currentXWikiDocument));
    var shouldReload = function(xwikiDocument) {
      var reloadEventFired = false;
@@ -523,18 +523,18 @@
      $(document).one('xwiki:actions:reload.maybe', '.xcontent.form', function() {
        reloadEventFired = true;
      });
--    var deferred = $.Deferred();
--    // Wait a bit to see if the reload event is fired.
--    setTimeout(function() {
--      // Remove the listener in case the reload event wasn't fired.
--      $(document).off('xwiki:actions:reload.maybe');
--      if (reloadEventFired) {
--        deferred.resolve(xwikiDocument);
--      } else {
--        deferred.reject(xwikiDocument);
--      }
--    }, 0);
--    return deferred.promise();
++    return new Promise((resolve, reject) => {
++      // Wait a bit to see if the reload event is fired.
++      setTimeout(function() {
++        // Remove the listener in case the reload event wasn't fired.
++        $(document).off('xwiki:actions:reload.maybe');
++        if (reloadEventFired) {
++          resolve(xwikiDocument);
++        } else {
++          reject(xwikiDocument);
++        }
++      }, 0);
++    });
    };
    var reload = function(xwikiDocument) {
@@ -561,7 +561,7 @@
      if (window.location.hash === '#edit' || window.location.hash === '#translate') {
        history.replaceState(null, null, '#');
      }
--    return $.Deferred().resolve(xwikiDocument).promise();
++    return Promise.resolve(xwikiDocument);
    };
    var edit = function(xwikiDocument) {
@@ -583,30 +583,43 @@
      // Thus we need to use the grid for the sticky buttons also otherwise the postion is badly computed when scrolling
      // (because of the float on the previous element). This wouldn't be needed if we were using position:sticky, which
      // we can't use yet because it's not implemented on IE11 which we still have to support.
--    var actionButtonsWrapper = editContent.nextAll('.sticky-buttons-wrapper');
--    if (actionButtonsWrapper.length === 0) {
--      actionButtonsWrapper = $('<div class="sticky-buttons-wrapper col-xs-12">' +
--        '<div class="inplace-editing-buttons sticky-buttons"/></div>').insertAfter(editContent).toggle(!!xwikiDocument);
--      var actionButtons = actionButtonsWrapper.children('.sticky-buttons')
--        .data('xwikiDocument', xwikiDocument)
--        // Expose the fake form if an extension needs to manipulate it.
--        .data('fakeForm', fakeForm);
++    let inplaceEditingForm = editContent.nextAll('form#inplace-editing');
++    if (!inplaceEditingForm.length) {
++      // The 'xwikieditcontent' id is needed for the auto-save feature (otherwise it doesn't find the form).
++      inplaceEditingForm = $(`
++        <form id="inplace-editing" class="col-xs-12">
++          <div hidden>
++            <input type="hidden" name="form_token" />
++            <input type="hidden" name="async" value="true" />
++            <input type="hidden" name="content" />
++            <input type="hidden" name="RequiresHTMLConversion" value="content" />
++            <input type="hidden" name="content_syntax" />
++            <input type="hidden" name="language" />
++          </div>
++          <fieldset id="xwikieditcontent" class="xform inplace-editing-buttons sticky-buttons"></fieldset>
++        </form>
++      `).attr('action', XWiki.currentDocument.getURL('save'))
++        .insertAfter(editContent).toggle(!!xwikiDocument);
++      inplaceEditingForm.find('input[name="form_token"]').val(xcontext.form_token);
++      var actionButtons = inplaceEditingForm.children('.sticky-buttons').data('xwikiDocument', xwikiDocument);
        return loadActionButtons(actionButtons);
      } else {
        // If we're editing a page..
        if (xwikiDocument) {
          // ..then make sure the action buttons are displayed right away (don't wait for the user to scroll).
--        actionButtonsWrapper.show().children('.sticky-buttons')
++        inplaceEditingForm.show().children('.sticky-buttons')
            .data('xwikiDocument', xwikiDocument)
--          // Expose the fake form if an extension needs to manipulate it.
--          .data('fakeForm', fakeForm)
--          // but make sure the position of the action buttons is updated.
--          .trigger('xwiki:dom:refresh');
--        // The action buttons are disabled on Save & View. We don't reload the page on Save & View and we reuse the
--        // action buttons so we need to re-enable them each time we enter the edit mode.
--        fakeForm.enable();
++          // Make sure the position of the action buttons is updated.
++          .trigger('xwiki:dom:refresh')
++          // The action buttons are disabled on Save & View. We don't reload the page on Save & View and we reuse the
++          // action buttons so we need to re-enable them each time we enter the edit mode.
++          .prop('disabled', false);
++        // Cleanup the extra hidden input fields that actionButtons.js might have appended to the form. We have to do
++        // this each time the form is (re)enabled (i.e. after a failed Save & View or before entering the edit mode)
++        // because they are designed to be used once.
++        inplaceEditingForm.children('fieldset').nextAll().remove();
        }
--      return $.Deferred().resolve(xwikiDocument).promise();
++      return Promise.resolve(xwikiDocument);
      }
    };
@@ -646,6 +646,17 @@
    };
    var loadActionButtons = function(actionButtons) {
++    // We want to update the form data as late as possible (but still before the form is validated), in order to allow
++    // the title and content editors to update their values and the 'xwikiDocument' instance. We do this by catching the
++    // event early (lower in the DOM, at the start of the event bubbling phase) and adding a one time event listener for
++    // the end of the event bubbling phase at the top level of the DOM document.
++    actionButtons.on('xwiki:actions:beforeSave', function() {
++      $(document).one('xwiki:actions:beforeSave', updateFormDataBeforeSave);
++    });
++    actionButtons.on('xwiki:actions:cancel', function(event) {
++      // We are already in view mode so there's no need to leave the page.
++      event.preventDefault();
++    });
      $(document).on('xwiki:actions:view', '.xcontent.form', function(event, data) {
        // Blur the action buttons first to re-enable the "disabled in inputs" shortcut keys (e.g. the page edit
        // shortcut), then disable the action buttons in order to disable their shortcut keys while we're not editing
@@ -652,7 +652,7 @@
        // in-place (e.g. prevent the Save shortcut while the user is only viewing the page). Finally hide the action
        // buttons to have them ready for the next editing session (the user can save or cancel and then edit again
        // without reloading the page).
--      actionButtons.find(':input').blur().prop('disabled', true).end().parent().hide();
++      actionButtons.find(':input').blur().end().prop('disabled', true).parent().hide();
        // Restore the Translate button if the locale of the viewed document doesn't match the current user interface
        // locale (because the viewed document doesn't have a translation in the current locale).
        var xwikiDocumentLocale = data.document.getRealLocale();
@@ -667,114 +667,52 @@
            .parent().removeClass('hidden');
        }
      });
--    return $.get(XWiki.currentDocument.getURL('get'), {
++    return Promise.resolve($.get(XWiki.currentDocument.getURL('get'), {
        xpage: 'editactions'
--    }).then(function(html) {
++    })).then(html => {
        actionButtons.html(html);
        // Fix the name of the Save & View action.
        actionButtons.find('.btn-primary').first().attr('name', 'action_save');
--      // Append the hidden input field that keeps the CSRF token.
--      $('<input type="hidden" name="form_token" />').val(xcontext.form_token).appendTo(actionButtons);
--      // We need a place where actionButtons.js can add more hidden inputs.
--      actionButtons.append('<div class="hidden extra"/>');
        // Let the others know that the DOM has been updated, in order to enhance it.
        $(document).trigger('xwiki:dom:updated', {'elements': actionButtons.toArray()});
--      var deferred = $.Deferred();
--      require(['xwiki-actionButtons', 'xwiki-diff', 'xwiki-autoSave'], function() {
--        overrideEditActions();
--        overrideAjaxSaveAndContinue();
--        // Activate the auto-save feature passing our fake edit form. Note that autosave.js also creates an instance of
--        // AutoSave but it doesn't do anything because it doesn't find a real edit form in the page. This is why we have
--        // to create our own instance of AutoSave passing the right (fake) form.
--        new XWiki.editors.AutoSave({form: fakeForm});
--        var xwikiDocument = actionButtons.data('xwikiDocument');
--        // Enable the action buttons (and their shortcut keys) only if we're editing a document.
--        actionButtons.find(':input').prop('disabled', !xwikiDocument);
--        deferred.resolve(xwikiDocument);
++      return new Promise((resolve, reject) => {
++        require(['xwiki-actionButtons', 'xwiki-diff', 'xwiki-autoSave'], function() {
++          overrideAjaxSaveAndContinue();
++          var xwikiDocument = actionButtons.data('xwikiDocument');
++          // Enable the action buttons (and their shortcut keys) only if we're editing a document.
++          actionButtons.prop('disabled', !xwikiDocument);
++          resolve(xwikiDocument);
++        });
        });
--      return deferred.promise();
--    }, function() {
++    }).catch(() => {
        new XWiki.widgets.Notification(l10n['edit.inplace.actionButtons.loadFailed'], 'error');
      });
    };
--  // actionButtons.js expects a form so we use a fake form. Refactoring actionButtons.js is too dangerous ATM.
--  var fakeForm = {
--    action: XWiki.currentDocument.getURL('save'),
--    async: true,
--    _getActionButtons: function() {
--      if (!this._actionButtons) {
--        this._actionButtons = $('#xwikicontent').nextAll('.sticky-buttons-wrapper').children('.sticky-buttons');
--      }
--      return this._actionButtons;
--    },
--    disable: function() {
--      this._getActionButtons().find(':input').prop('disabled', true);
--    },
--    enable: function() {
--      // Clear the extra hidden input fields, that actionButtons.js might have added, each time the form is (re)enabled
--      // (i.e. after a failed Save & View or before entering the edit mode) because they are designed to be used once.
--      this._getActionButtons().find('.hidden.extra').empty();
--      this._getActionButtons().find(':input').prop('disabled', false);
--    },
--    insert: function(element) {
--      this._getActionButtons().find('.hidden.extra').append(element);
--    },
--    // Note that this method only works with single argument.
--    append: function(element) {
--      this.insert(element);
--    },
--    down: function(selector) {
--      return this._getActionButtons().find(selector)[0];
--    },
--    serialize: function() {
--      var extra = this._getActionButtons().find(':input').serializeArray().reduce(function(extra, entry) {
--        var value = extra[entry.name] || [];
--        value.push(entry.value);
--        extra[entry.name] = value;
--        return extra;
--      }, {});
--      var xwikiDocument = this._getActionButtons().data('xwikiDocument');
--      var formData = {
--        title: xwikiDocument.rawTitle,
--        language: xwikiDocument.getRealLocale(),
--        isNew: xwikiDocument.isNew
--      };
--      if (xwikiDocument.content != xwikiDocument.originalDocument.content) {
--        // Submit the raw (source) content. No syntax conversion is needed in this case.
--        formData.content = xwikiDocument.content;
--      } else {
--        // Submit the rendered content (HTML), but make sure it is converted to the document syntax on the server.
--        $.extend(formData, {
--          content: xwikiDocument.renderedContent,
--          RequiresHTMLConversion: 'content',
--          content_syntax: xwikiDocument.syntax
--        });
--      }
--      // Check for merge conflicts only if the document is not new and we know the current version.
--      if (!xwikiDocument.isNew && xwikiDocument.version) {
--        formData.previousVersion = xwikiDocument.version;
--        formData.editingVersionDate = new Date(xwikiDocument.modified).getTime();
--      }
--      // Ensure that formData information has priority over extra information.
--      return $.extend({}, extra, formData);
++  var updateFormDataBeforeSave = function() {
++    const form = $('form#inplace-editing');
++    const xwikiDocument = form.children('.sticky-buttons').data('xwikiDocument');
++
++    form.find('input[name="language"]').val(xwikiDocument.getRealLocale());
++    form.find('input[name="isNew"]').val(xwikiDocument.isNew);
++
++    // Submit either the raw (source) content (no syntax conversion needed in this case) or the rendered content (HTML)
++    // in which case we have to force the conversion to the document syntax on the server.
++    const submitRawContent = xwikiDocument.content !== xwikiDocument.originalDocument.content;
++    form.find('input[name="content"]').val(submitRawContent ? xwikiDocument.content : xwikiDocument.renderedContent);
++    form.find('input[name="RequiresHTMLConversion"]').prop('disabled', submitRawContent);
++    form.find('input[name="content_syntax"]').val(xwikiDocument.syntax).prop('disabled', submitRawContent);
++
++    // Add the temporary uploaded files to the form.
++    $('#xwikicontent').nextAll('input[name="uploadedFiles"]').attr('form', 'inplace-editing');
++
++    // Check for merge conflicts only if the document is not new and we know the current version.
++    if (!xwikiDocument.isNew && xwikiDocument.version) {
++      form.find('input[name="previousVersion"]').val(xwikiDocument.version);
++      form.find('input[name="editingVersionDate"]').val(new Date(xwikiDocument.modified).getTime());
      }
    };
--  var overrideEditActions = function() {
--    // Override the EditActions.notify() function in order to pass a fake form in the event parameters.
--    var originalNotify = XWiki.actionButtons.EditActions.prototype.notify;
--    XWiki.actionButtons.EditActions.prototype.notify = function(originalEvent, action, params) {
--      if (params && $(originalEvent.element()).closest('.inplace-editing-buttons').length > 0) {
--        // actionButtons.js expects a form so we use a fake form. Refactoring actionButtons.js is too dangerous ATM.
--        // Note that we do this only when the event has parameters because we want to exclude the cancel event for which
--        // actionButtons.js changes the window location if a form is specified, and we want to prevent that.
--        params.form = fakeForm;
--      }
--      return originalNotify.apply(this, arguments);
--    };
--  };
--
    var overrideAjaxSaveAndContinue = function() {
      var originalAjaxSaveAndContinue = $.extend({}, XWiki.actionButtons.AjaxSaveAndContinue.prototype);
      $.extend(XWiki.actionButtons.AjaxSaveAndContinue.prototype, {
@@ -781,7 +781,13 @@
        reloadEditor: function() {
          var actionButtons = $('.inplace-editing-buttons');
          if (actionButtons.is(':visible')) {
--          actionButtons.trigger('xwiki:actions:reload');
++          // This function is called after the document save confirmation is received, if the save was done by merge. We
++          // register our reload listener from a document saved listener, but we're using promises which are
++          // asynchronous so the reload listener is actually registered with a delay. For this reason we trigger the
++          // reload event with a delay to ensure our reload listener is called.
++          setTimeout(function() {
++            actionButtons.trigger('xwiki:actions:reload');
++          }, 0);
          } else {
            return originalAjaxSaveAndContinue.reloadEditor.apply(this, arguments);
          }
@@ -803,12 +803,20 @@
    var initTitleEditor = function(xwikiDocument) {
      var label = $('<label for="document-title-input" class="sr-only"/>')
        .text(l10n['core.editors.content.titleField.label']);
--    var input = $('<input type="text" id="document-title-input"/>').val(xwikiDocument.rawTitle);
--    var placeholder = xwikiDocument.documentReference.name;
--    if (placeholder === 'WebHome') {
--      placeholder = xwikiDocument.documentReference.parent.name;
++    var input = $('<input type="text" id="document-title-input" name="title" form="inplace-editing" />')
++      .val(xwikiDocument.rawTitle);
++    if (config.titleIsMandatory) {
++      input.attr({
++        'required': '',
++        'data-validation-value-missing': l10n['core.validation.required.message']
++      });
++    } else {
++      var placeholder = xwikiDocument.documentReference.name;
++      if (placeholder === 'WebHome') {
++        placeholder = xwikiDocument.documentReference.parent.name;
++      }
++      input.attr('placeholder', placeholder);
      }
--    input.attr('placeholder', placeholder);
      $('#document-title h1').addClass('editable').empty().append([label, input]);
      $(document).on('xwiki:actions:beforeSave.titleEditor', '.xcontent.form', function(event) {
        xwikiDocument.rawTitle = input.val();
@@ -839,7 +839,7 @@
        deferred: $.Deferred()
      });
      editContent.trigger('xwiki:actions:edit', data);
--    return data.deferred.done(function() {
++    return data.deferred.promise().then(() => {
        editContent.show();
        viewContent.remove();
        if (withFocus) {
@@ -850,7 +850,8 @@
            editContent[0].focus({preventScroll: true});
          }, 0);
        }
--    }).promise();
++      return xwikiDocument;
++    });
    };
    var startRealTimeEditingSession = function(xwikiDocument) {
@@ -907,6 +907,10 @@
      }
      // Disable the edit buttons and hide the section edit links.
      editButton.add(translateButton).addClass('disabled');
++    editButton.attr('aria-disabled', 'true');
++    var reference = editButton.attr('href');
++    editButton.removeAttr('href');
++    editButton.attr('role', 'link');
      $('#xwikicontent').children(':header').children('.edit_section').addClass('hidden');
      event.preventDefault();
      const handler = event.data;
@@ -915,14 +915,17 @@
      require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
        // Re-enable the translate button because it can be used while editing to create the missing translation.
        translateButton.removeClass('disabled');
--      handler.edit(editInPlace, data).always(function() {
++      handler.edit(editInPlace, data).finally(function() {
          // Restore only the edit button at the end because:
          // * the translate button is restored (if needed) by the editInPlace module
          // * the section edit links are restored when the document is rendered for view
          editButton.removeClass('disabled');
++        editButton.removeAttr('aria-disabled');
++        editButton.removeAttr('role');
++        editButton.attr('href', reference);
        });
      // Fallback on the standalone edit mode if we fail to load the required modules.
--    }, $.proxy(disableInPlaceEditing, event.target));
++    }, disableInPlaceEditing.bind(event.target));
    };
    var disableInPlaceEditing = function() {

XWiki.StyleSheetExtension[0]

Code

@@ -9,10 +9,9 @@
  @document-title-input-padding-vertical: @line-height-computed / 4 - 1;
  input#document-title-input {
    /* Preserve the heading styles. */
--  border: 1px solid transparent;
--  box-shadow: none;
    color: inherit;
    font-size: inherit;
++  background-color: @body-bg;
    /* It seems it's not enough to set the line height for the text input. We also need to set its height. */
    height: @font-size-document-title * @headings-line-height + 2 * (1 + @document-title-input-padding-vertical);
    line-height: @headings-line-height;
@@ -19,12 +19,16 @@
    padding: @document-title-input-padding-vertical (ceil(@grid-gutter-width / 2) - 1);
    width: 100%;
  }
++input#document-title-input:valid {
++  border: 1px solid transparent;
++  box-shadow: none;
++}
--input#document-title-input:hover {
++input#document-title-input:valid:hover {
    border-color: @input-border;
  }
--input#document-title-input:focus,
++input#document-title-input:valid:focus,
  #xwikicontent[contenteditable]:focus,
  #xwikicontent[tabindex]:focus {
    .form-control-focus();
@@ -50,7 +50,7 @@
    padding-top: @line-height-computed * 0.75;
  }
--.sticky-buttons-wrapper {
++form#inplace-editing {
    /* Leave some space for the bottom box shadow of the editing area. */
    margin-top: 7px;
  }

XWiki.UIExtensionClass[0]

Executed Content

@@ -19,6 +19,7 @@
        'edit.inplace.page.loadFailed',
        'edit.inplace.actionButtons.loadFailed',
        'core.editors.content.titleField.label',
++      'core.validation.required.message',
        ['edit.inplace.page.translate.messageBefore', $doc.realLocale.getDisplayName($xcontext.locale),
          $xcontext.locale.getDisplayName($xcontext.locale)],
        ['edit.inplace.page.translate.messageAfter', $xcontext.locale.getDisplayName($xcontext.locale)]
@@ -48,7 +48,6 @@
        'editButtonSelector': '#tmEdit > a',
        'translateButtonSelector': '#tmTranslate > a',
        'enableSourceMode': true,
--      'enableOfficeImport': $services.officemanager.isConnected(),
        'paths': {
          'js': {
            'xwiki-actionButtons': "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.js' $jsParams)",
@@ -63,6 +63,7 @@
        },
        'l10n': $l10n
      })
++    #set ($inplaceEditingConfig.titleIsMandatory = $xwiki.getSpacePreference('xwiki.title.mandatory') == 1)
      <div class="hidden" data-inplace-editing-config="$escapetool.xml($jsontool.serialize($inplaceEditingConfig))"></div>
      ## We didn't move this to the file system because it uses LESS and we didn't want to include it in the skin.
      #set ($discard = $xwiki.ssx.use('XWiki.InplaceEditing'))