Changes for page InplaceEditing

From 4.1 to 3.1

From 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]

To version 4.1

edited by Nazzareno Pompei
on 28/10/2022 08:43

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

Raw
Rendered

Summary

Objects (3 modified, 0 added, 0 removed)

Details

XWiki.JavaScriptExtension[0]

Code

@@ -223,7 +223,7 @@
    };
    var loadCSS = function(url) {
--    $('<link/>').attr({
++    var link = $('<link>').attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: url
@@ -292,8 +292,7 @@
          options.afterEdit(xwikiDocument);
          return xwikiDocument;
        }).finally(() => {
--        // Remove the aria-expanded attribute which is incorrect for role=textbox
--        $('#xwikicontent').removeClass('loading').removeAttr('aria-expanded');
++        $('#xwikicontent').removeClass('loading');
        // 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.
@@ -581,41 +581,28 @@
      // 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.
--    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);
++    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);
        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).
--        inplaceEditingForm.show().children('.sticky-buttons')
++        actionButtonsWrapper.show().children('.sticky-buttons')
            .data('xwikiDocument', xwikiDocument)
--          // 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();
++          // 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();
        }
        return Promise.resolve(xwikiDocument);
      }
@@ -657,17 +657,6 @@
    };
    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
@@ -674,7 +674,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().end().prop('disabled', true).parent().hide();
++      actionButtons.find(':input').blur().prop('disabled', true).end().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();
@@ -695,14 +695,23 @@
        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()});
        return new Promise((resolve, reject) => {
          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.prop('disabled', !xwikiDocument);
++          actionButtons.find(':input').prop('disabled', !xwikiDocument);
            resolve(xwikiDocument);
          });
        });
@@ -711,30 +711,92 @@
      });
    };
--  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());
++  // 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;
++      }, {});
++      // retrieve all input fields listing the temporary uploaded files.
++      var uploadedFiles = $('#xwikicontent').nextAll('input[name="uploadedFiles"]').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
++        });
++      }
++      // Add the temporary uploaded files to the form.
++      $.extend(formData, uploadedFiles);
++      // 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 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, {
@@ -741,13 +741,7 @@
        reloadEditor: function() {
          var actionButtons = $('.inplace-editing-buttons');
          if (actionButtons.is(':visible')) {
--          // 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);
++          actionButtons.trigger('xwiki:actions:reload');
          } else {
            return originalAjaxSaveAndContinue.reloadEditor.apply(this, arguments);
          }
@@ -769,20 +769,12 @@
    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" 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);
++    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;
      }
++    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();
@@ -882,10 +882,6 @@
      }
      // 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;
@@ -899,9 +899,6 @@
          // * 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.
      }, disableInPlaceEditing.bind(event.target));

XWiki.StyleSheetExtension[0]

Code

@@ -9,9 +9,10 @@
  @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;
@@ -18,16 +18,12 @@
    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:valid:hover {
++input#document-title-input:hover {
    border-color: @input-border;
  }
--input#document-title-input:valid:focus,
++input#document-title-input:focus,
  #xwikicontent[contenteditable]:focus,
  #xwikicontent[tabindex]:focus {
    .form-control-focus();
@@ -53,7 +53,7 @@
    padding-top: @line-height-computed * 0.75;
  }
--form#inplace-editing {
++.sticky-buttons-wrapper {
    /* Leave some space for the bottom box shadow of the editing area. */
    margin-top: 7px;
  }

XWiki.UIExtensionClass[0]

Executed Content

@@ -19,7 +19,6 @@
        '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)]
@@ -63,7 +63,6 @@
        },
        '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'))