Changes for page InplaceEditing

Last modified by SuperNico Laub on 2025/09/18 17:55

From version 2.1

edited by SuperNico Laub
on 2025/09/18 17:55

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

To version 1.1

edited by superadmin
on 2025/05/22 17:45

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

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (3 modified, 0 added, 0 removed)

Details

Page properties

Author

@@ -1,1 +1,1 @@
--xwiki:XWiki.supernico
++XWiki.superadmin

XWiki.JavaScriptExtension[0]

Code

@@ -92,12 +92,12 @@
      /**
       * Render the title and the content of this document.
       *
--     * @param {object} params - optional rendering parameters, that may include the output syntax and the rendering
--     *          transformations to execute
++     * @param forView whether to render the document for view (without the rendering annotations) or for edit (with the
++     *          rendering annotations); when rendering for edit some transformations might not be executed
       * @return a promise that resolves to this document instance if the render request succeeds
       */
--    render({outputSyntax, transformations} = {}) {
--      const queryString = {
++    render(forView) {
++      var queryString = {
          xpage: 'get',
          outputTitle: true,
          // Render the default translation if this is a new document:
@@ -108,21 +108,21 @@
          // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
          timestamp: new Date().getTime()
        };
--      if (outputSyntax) {
--        queryString.outputSyntax = outputSyntax.type;
--        queryString.outputSyntaxVersion = outputSyntax.version;
++      if (!forView) {
++        // 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 = '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';
        }
--      if (transformations) {
--        queryString.transformations = transformations;
--      }
--      return Promise.resolve($.get(this.getURL('view'), $.param(queryString, true))).then(html => {
++      return Promise.resolve($.get(this.getURL('view'), queryString)).then(html => {
          // Render succeeded.
--        const container = $('<div/>').html(html);
--        const contentWrapper = container.find('#xwikicontent');
--        const isContentRenderedToHTML = !outputSyntax || outputSyntax.type.includes('html');
++        var container = $('<div/>').html(html);
          return $.extend(this, {
            renderedTitle: container.find('#document-title h1').html(),
--          renderedContent: isContentRenderedToHTML ? contentWrapper.html() : contentWrapper.text()
++          renderedContent: container.find('#xwikicontent').html()
          });
        }).catch(() => {
          new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
@@ -195,6 +195,7 @@
          lockAction: action,
          force: force,
          language: this.getRealLocale(),
++        outputSyntax: 'plain',
          // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
          timestamp: new Date().getTime()
        })).then(() => {
@@ -484,18 +484,18 @@
      }).catch(xwikiDocument => {
        new XWiki.widgets.Notification(l10n['edit.inplace.page.loadFailed'], 'error');
        return Promise.reject(xwikiDocument);
--    // Render the document for edit, using the provided rendering configuration, which may depend on the editor used to
--    // edit the content.
--    }).then(render.bind(null, module.contentEditor.getRenderingConfig()));
++    // 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(render.bind(null, false));
    };
    /**
--   * @param {object} params - optional rendering parameters, that may include the output syntax and the rendering
--   *          transformations to execute
++   * @param forView whether to render the document for view (without the rendering annotations) or for edit (with the
++   *          rendering annotations); when rendering for edit some transformations might not be executed
     * @param xwikiDocument the document to render
     */
--  var render = function(params, xwikiDocument) {
--    return xwikiDocument.render(params);
++  var render = function(forView, xwikiDocument) {
++    return xwikiDocument.render(forView);
    };
    var maybeSave = function(xwikiDocument) {
@@ -584,7 +584,7 @@
      // 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(render.bind(null, {})).then(
++    return xwikiDocument.reload().then(render.bind(null, true)).then(
        afterReloadAndRender.bind(null, /* success: */ true),
        afterReloadAndRender.bind(null, /* success: */ false)
      );
@@ -633,7 +633,7 @@
      return view(xwikiDocument, true).then(editInPlace);
    };
--  async function view(xwikiDocument, reload) {
++  var view = function(xwikiDocument, reload) {
      if (xwikiDocument.isNew && xwikiDocument.language && xwikiDocument.defaultTranslation) {
        // The user tried to translate the current document in the UI locale and either canceled the edit without saving
        // or there was an error. Display the default translation to the user.
@@ -640,51 +640,29 @@
        xwikiDocument = xwikiDocument.defaultTranslation;
      }
--    const viewContent = $('#xwikicontent');
--    // Destroy the editors and restore the view mode.
--    const promises = [];
--    viewContent.trigger('xwiki:actions:view', {document: xwikiDocument, promises});
--    // Some listeners may need to perform asynchronous operations. We wait for them, but we restore the view mode even
--    // if they fail.
--    logRejectedPromises(
--      'We encountered some errors while restoring the view mode: ',
--      await Promise.allSettled(promises)
--    );
++    var viewContent = $('#xwikicontent');
++    // Destroy the editors before returning to view.
++    viewContent.trigger('xwiki:actions:view', {document: xwikiDocument});
      $('#document-title h1').html(xwikiDocument.renderedTitle);
      viewContent.html(xwikiDocument.renderedContent);
--
      // Reset the editor to let others know that we're not editing anymore.
      XWiki.editor = '';
--
      if (!reload) {
        // If the user has canceled the edit then the restored page content may include the section edit links. Show them
        // in case they were hidden.
        viewContent.children(':header').children('.edit_section').removeClass('hidden');
--
        // Let others know that the DOM has been updated, in order to enhance it.
        $(document).trigger('xwiki:dom:updated', {'elements': viewContent.toArray()});
      }
--
      // Remove the action events scope.
      viewContent.closest('.form').removeClass('form');
--
      // Update the URL.
      if (window.location.hash === '#edit' || window.location.hash === '#translate') {
        history.replaceState(null, null, '#');
      }
++    return Promise.resolve(xwikiDocument);
++  };
--    return xwikiDocument;
--  }
--
--  function logRejectedPromises(message, results) {
--    const errors = results
--      .filter(result => result.status === 'rejected')
--      .map(result => result.reason);
--    if (errors.length) {
--      console.warn(message, errors);
--    }
--  }
--
    var edit = function(xwikiDocument) {
      // By adding the 'form' CSS class we set the scope of the action events (e.g. xwiki:actions:beforeSave or
      // xwiki:actions:cancel). We need this because in view mode we can have multiple forms active on the page (e.g. one
@@ -713,6 +713,9 @@
            <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>
@@ -833,6 +833,16 @@
      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 = typeof xwikiDocument.renderedContent !== 'string';
++    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);
@@ -844,13 +844,14 @@
      var originalAjaxSaveAndContinue = $.extend({}, XWiki.actionButtons.AjaxSaveAndContinue.prototype);
      $.extend(XWiki.actionButtons.AjaxSaveAndContinue.prototype, {
        reloadEditor: function() {
--        if (XWiki.editor === config.editMode) {
++        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() {
--            $('.inplace-editing-buttons').trigger('xwiki:actions:reload');
++            actionButtons.trigger('xwiki:actions:reload');
            }, 0);
          } else {
            return originalAjaxSaveAndContinue.reloadEditor.apply(this, arguments);
@@ -857,13 +857,13 @@
          }
        },
        maybeRedirect: function(continueEditing) {
--        if (XWiki.editor === config.editMode) {
++        if ($('.inplace-editing-buttons').is(':visible')) {
            // Overwrite the default behavior so that we don't redirect when leaving the edit mode because we're already
            // in view mode. We still need to report a redirect (return true) if we don't continue editing, so that
            // actionButtons.js behaves as if a redirect was done.
            return !continueEditing;
          } else {
--          // Fallback on the default behavior if we're not editing in-place.
++          // Fallback on the default behavior if the in-place editing buttons are hidden.
            return originalAjaxSaveAndContinue.maybeRedirect.apply(this, arguments);
          }
        }
@@ -906,7 +906,9 @@
      var withFocus = document.activeElement && document.activeElement === editContent[0];
      // Keep showing the view content until the edit content is ready in order to avoid UI flicker.
      var viewContent = editContent.clone().insertAfter(editContent);
--    editContent.hide().empty();
++    // Note that we don't trigger the xwiki:dom:updated event here because we want to let the editor trigger the event
++    // only for the content areas that are safe to be updated from JavaScript (i.e. the macro output).
++    editContent.hide().html(xwikiDocument.renderedContent);
      if (withFocus) {
        // Keep the focus while the edit content is being prepared.
        viewContent.focus();
@@ -915,8 +915,6 @@
        // Use the same name as for the standalone editor, in order to be consistent.
        editorName: 'content',
        document: xwikiDocument,
--      startupFocus: withFocus,
--      formId: 'inplace-editing',
        // The content editor is loaded on demand, asynchronously.
        deferred: $.Deferred()
      });
@@ -924,6 +924,14 @@
      return data.deferred.promise().then(() => {
        editContent.show();
        viewContent.remove();
++      if (withFocus) {
++        // Restore the focus when the edit content is ready but make sure we don't scroll the page. We don't restore the
++        // focus right away because we just made the content visible so it may not be editable yet (e.g. the WYSIWYG
++        // editor can make the content editable only if it is visible).
++        setTimeout(function() {
++          editContent[0].focus({preventScroll: true});
++        }, 0);
++      }
        return xwikiDocument;
      });
    };
@@ -938,15 +938,12 @@
      }
    };
--  let module = {
--    contentEditor: undefined,
++  return {
      preload,
      editPage,
      editSection,
      translatePage
    };
--
--  return module;
  });
  require(['jquery'], function($) {
@@ -955,15 +955,16 @@
      return;
    }
++  var wysiwygEditorModule = 'xwiki-' + config.wysiwygEditor + '-inline';
++
    var preloadEditor = function() {
--    require(['editInPlace', config.contentEditor], function(editInPlace, contentEditor) {
--      editInPlace.contentEditor = contentEditor;
++    require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
        editInPlace.preload();
      // Fallback on the standalone edit mode if we fail to load the required modules.
      }, disableInPlaceEditing);
    };
--  // Preload the content editor code without slowing down the page view.
++  // Preload the WYSIWYG editor code without slowing down the page view.
    if (document.readyState === 'complete') {
      setTimeout(preloadEditor, 0);
    } else {
@@ -1017,8 +1017,7 @@
      const data = handler.beforeEdit?.(event);
      // Load the code needed to edit in place only when the edit button is clicked.
      currentlyEditing = new Promise((resolve, reject) => {
--      require(['editInPlace', config.contentEditor], (editInPlace, contentEditor) => {
--        editInPlace.contentEditor = contentEditor;
++      require(['editInPlace', wysiwygEditorModule], (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).finally(() => {

XWiki.StyleSheetExtension[0]

Code

@@ -1,3 +1,29 @@
++#document-title h1.editable {
++  /* Move the title heading a bit to the top and to the left in order to accomodate the input border and padding. */
++  margin-top: -@line-height-computed / 4;
++  margin-left: -(ceil(@grid-gutter-width / 2));
++  /* Reduce the bottom margin in order to accomodate the input border and bottom padding. */
++  margin-bottom: @line-height-computed / 4;
++}
++
++@document-title-input-padding-vertical: @line-height-computed / 4 - 1;
++.document-header input#document-title-input {
++  /* Preserve the heading styles. */
++  color: inherit;
++  font-size: inherit;
++  background-color: transparent;
++  /* It seems it's not enough to set the line height for the text input. We also need to set its height. */
++  height: ~"calc(@{font-size-document-title} * @{headings-line-height} - -2 * (1px - -@{document-title-input-padding-vertical}))";
++  line-height: @headings-line-height;
++  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:focus,
  #xwikicontent[contenteditable]:focus,
  #xwikicontent[tabindex]:focus {
    outline: 0;

XWiki.UIExtensionClass[0]

Executed Content

@@ -39,12 +39,16 @@
        'colorTheme': $services.model.serialize($themeDoc.documentReference, 'default')
      })
      #set ($jsParams = {'language': $xcontext.locale})
++    ## We have to explicitly enable the source mode for in-line edit because the latest version of the content editor
++    ## could be installed on an older version of XWiki where the in-place editor didn't support the source mode (so the
++    ## content editor cannot enable the source mode by default).
      #set ($inplaceEditingConfig = {
        'contentType': 'org.xwiki.rendering.syntax.SyntaxContent',
        'editMode': $defaultEditMode,
--      'contentEditor': "xwiki-${services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id}-inline",
++      'wysiwygEditor': $services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id,
        'editButtonSelector': '#tmEdit > a',
        'translateButtonSelector': '#tmTranslate > a',
++      'enableSourceMode': true,
        'paths': {
          'js': {
            'xwiki-actionButtons': "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.js' $jsParams)",