Changes for page InplaceEditing

From version 2.1
edited by N Pompei
on 16/09/2020 12:29
Change comment: Install extension [org.xwiki.platform:xwiki-platform-edit-ui/12.7.1]
To 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]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.NPompei
1 +XWiki.NazzarenoPompei
Content
... ... @@ -9,11 +9,15 @@
9 9   #jsonResponse($editConfirmation)
10 10   #else
11 11   ## Lock the document for editing.
12 - #set ($discard = $response.sendRedirect($tdoc.getURL('lock', $escapetool.url({
12 + #set ($lockParams = {
13 13   'ajax': 1,
14 14   'action': $request.lockAction,
15 15   'language': $tdoc.realLocale
16 - }))))
16 + })
17 + #if ($request.force == 'true')
18 + #set ($lockParams.force = 1)
19 + #end
20 + #set ($discard = $response.sendRedirect($tdoc.getURL('lock', $escapetool.url($lockParams))))
17 17   #end
18 18  #end
19 19  {{/velocity}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,10 +1,11 @@
1 +(function(config) {
2 + "use strict";
3 +
4 +const paths = config.paths;
5 +const l10n = config.l10n;
6 +
1 1  require.config({
2 - paths: {
3 - 'actionButtons': $jsontool.serialize($xwiki.getSkinFile('js/xwiki/actionbuttons/actionButtons.js', true)),
4 - 'autoSave': $jsontool.serialize($xwiki.getSkinFile('js/xwiki/editors/autosave.js', true)),
5 - // Required in case the user needs to resolve merge conflicts on save.
6 - 'xwiki-diff': $jsontool.serialize($xwiki.getSkinFile('uicomponents/viewers/diff.js'))
7 - }
8 + paths: paths.js
8 8  });
9 9  
10 10  define('xwiki-document-api', ['jquery'], function($) {
... ... @@ -15,23 +15,36 @@
15 15  
16 16   return {
17 17   /**
19 + * @return this document's plain title
20 + */
21 + getPlainTitle() {
22 + return $('<div/>').html(this.renderedTitle || this.title).text();
23 + },
24 +
25 + /**
18 18   * @return this document's real locale
19 19   */
20 20   getRealLocale: function() {
21 21   var realLocale = this.language;
22 - if (typeof realLocale === 'string' && realLocale !== '') {
23 - // This document is a translation.
24 - } else if (this.translations && typeof this.translations['default'] === 'string') {
25 - // This is the original document.
26 - realLocale = this.translations['default'];
27 - } else {
28 - // The document locale is not specified. Use the UI locale.
29 - realLocale = $('html').attr('lang');
30 + if (typeof realLocale !== 'string' || realLocale === '') {
31 + realLocale = this.getDefaultLocale();
30 30   }
31 31   return realLocale;
32 32   },
33 33  
34 34   /**
37 + * @return this document's default locale
38 + */
39 + getDefaultLocale: function() {
40 + if (this.translations && typeof this.translations['default'] === 'string') {
41 + return this.translations['default'];
42 + } else {
43 + // The default locale is not specified. Use the UI locale.
44 + return $('html').attr('lang');
45 + }
46 + },
47 +
48 + /**
35 35   * @return the URL that can be used to perform the specified action on this document
36 36   */
37 37   getURL: function(action, queryString, fragment) {
... ... @@ -68,17 +68,21 @@
68 68   var queryString = {
69 69   xpage: 'get',
70 70   outputTitle: true,
71 - outputSyntax: forView ? null : 'annotatedxhtml',
72 72   language: this.getRealLocale(),
73 73   // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
74 74   timestamp: new Date().getTime()
75 75   };
89 + if (!forView) {
90 + // We need the annotated XHTML when editing in order to be able to protect the rendering transformations and to
91 + // be able to recreate the wiki syntax.
92 + queryString.outputSyntax = 'annotatedxhtml';
93 + // Currently, only the macro transformations are protected and thus can be edited.
94 + // See XRENDERING-78: Add markers to modified XDOM by Transformations/Macros
95 + queryString.transformations = 'macro';
96 + }
76 76   var thisXWikiDocument = this;
77 77   return $.get(this.getURL('view'), queryString).fail(function() {
78 - new XWiki.widgets.Notification(
79 - $jsontool.serialize($services.localization.render('edit.inplace.page.renderFailed')),
80 - 'error'
81 - );
99 + new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
82 82   }).then(function(html) {
83 83   // Render succeeded.
84 84   var container = $('<div/>').html(html);
... ... @@ -169,6 +169,25 @@
169 169   // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
170 170   $.ajax({type: 'GET', url: url, async: false});
171 171   }
190 + },
191 +
192 + /**
193 + * Makes sure this document matches the current UI locale.
194 + */
195 + translate: function() {
196 + const realLocale = this.getRealLocale();
197 + const uiLocale = $('html').attr('lang');
198 + if (realLocale && realLocale !== uiLocale) {
199 + this.language = uiLocale;
200 + // Set the original document locale.
201 + this.translations = this.translations || {};
202 + this.translations['default'] = realLocale;
203 + // Update the document fields that are not 'shared' with the original document.
204 + this.isNew = true;
205 + delete this.version;
206 + delete this.majorVersion;
207 + delete this.minorVersion;
208 + }
172 172   }
173 173   };
174 174  });
... ... @@ -185,10 +185,7 @@
185 185   'xwiki-events-bridge'
186 186  ], function($, xcontext, xwikiDocumentAPI) {
187 187   var preload = function() {
188 - loadCSS($jsontool.serialize($xwiki.getSkinFile('js/xwiki/actionbuttons/actionButtons.css', true)));
189 - loadCSS($jsontool.serialize($xwiki.getSkinFile('js/xwiki/editors/autosave.css', true)));
190 - // Required in case the user needs to resolve merge conflicts on save.
191 - loadCSS($jsontool.serialize($xwiki.getSkinFile('uicomponents/viewers/diff.css', true)));
225 + paths.css.forEach(loadCSS);
192 192   return initActionButtons();
193 193   };
194 194  
... ... @@ -208,6 +208,12 @@
208 208   });
209 209   };
210 210  
245 + var translatePage = function() {
246 + return editInPlace({
247 + afterEdit: createTranslation
248 + });
249 + };
250 +
211 211   var editSection = function(sectionId) {
212 212   return editInPlace({
213 213   lockFailed: function() {
... ... @@ -268,7 +268,11 @@
268 268   // Then unlock the document both when the edit ended with success and with a failure.
269 269   .then(unlock, unlock)
270 270   // Finally view the document both when the edit ended with success and with a failure.
271 - .then(view, view);
311 + .then(view, view)
312 + .always(function(xwikiDocument) {
313 + // Update the current document for the next edit session.
314 + currentXWikiDocument = xwikiDocument;
315 + });
272 272   };
273 273  
274 274   var lock = function(xwikiDocument) {
... ... @@ -277,12 +277,12 @@
277 277   if (xwikiDocument.lockConfirmation) {
278 278   var confirmation = xwikiDocument.lockConfirmation;
279 279   delete xwikiDocument.lockConfirmation;
280 - return maybeForceLock(confirmation).then($.proxy(xwikiDocument, 'lock', 'edit', true));
324 + return maybeForceLock(confirmation).then($.proxy(xwikiDocument, 'lock', 'edit', true), function() {
325 + // Cancel the edit action.
326 + return xwikiDocument;
327 + });
281 281   } else {
282 - new XWiki.widgets.Notification(
283 - $jsontool.serialize($services.localization.render('edit.inplace.page.lockFailed')),
284 - 'error'
285 - );
329 + new XWiki.widgets.Notification(l10n['edit.inplace.page.lockFailed'], 'error');
286 286   return xwikiDocument;
287 287   }
288 288   });
... ... @@ -331,7 +331,7 @@
331 331   '</div>',
332 332   '</div>'
333 333   ].join(''));
334 - modal.find('.close').attr('aria-label', $jsontool.serialize($services.localization.render('edit.inplace.close')));
378 + modal.find('.close').attr('aria-label', l10n['edit.inplace.close']);
335 335   modal.find('.modal-footer .btn-warning').click(function() {
336 336   // The user has confirmed they want to force the lock.
337 337   modal.data('deferred').resolve();
... ... @@ -356,8 +356,7 @@
356 356   renderedContent: $('#xwikicontent').html()
357 357   }, xwikiDocument);
358 358   }).fail(function() {
359 - new XWiki.widgets.Notification($jsontool.serialize($services.localization.render('edit.inplace.page.loadFailed')),
360 - 'error');
403 + new XWiki.widgets.Notification(l10n['edit.inplace.page.loadFailed'], 'error');
361 361   // Render the document for edit, in order to have the annotated content HTML. The annotations are used to protect
362 362   // the rendering transformations (e.g. macros) when editing the content.
363 363   }).then($.proxy(render, null, false));
... ... @@ -396,7 +396,7 @@
396 396   'xwiki:actions:save',
397 397   'xwiki:actions:reload',
398 398   'xwiki:actions:cancel',
399 - ].join(' '), function(event, data) {
442 + ].join(' '), '.xcontent.form', function(event, data) {
400 400   deferred.resolve({
401 401   name: event.type.substring('xwiki:actions:'.length),
402 402   document: xwikiDocument,
... ... @@ -429,8 +429,8 @@
429 429   // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the remaining
430 430   // event won't be able to change that. The remaining event listener could be called later but it won't have any
431 431   // effect.
432 - $(document).one('xwiki:document:saved', $.proxy(deferred, 'resolve', xwikiDocument));
433 - $(document).one('xwiki:document:saveFailed', $.proxy(deferred, 'reject', xwikiDocument));
475 + $(document).one('xwiki:document:saved', '.xcontent.form', $.proxy(deferred, 'resolve', xwikiDocument));
476 + $(document).one('xwiki:document:saveFailed', '.xcontent.form', $.proxy(deferred, 'reject', xwikiDocument));
434 434   return deferred.promise();
435 435   };
436 436  
... ... @@ -477,7 +477,7 @@
477 477  
478 478   var shouldReload = function(xwikiDocument) {
479 479   var reloadEventFired = false;
480 - $(document).one('xwiki:actions:reload.maybe', function() {
523 + $(document).one('xwiki:actions:reload.maybe', '.xcontent.form', function() {
481 481   reloadEventFired = true;
482 482   });
483 483   var deferred = $.Deferred();
... ... @@ -500,21 +500,33 @@
500 500   };
501 501  
502 502   var view = function(xwikiDocument, reload) {
546 + var viewContent = $('#xwikicontent');
503 503   // Destroy the editors before returning to view.
504 - $(document).trigger('xwiki:actions:view', {document: xwikiDocument});
548 + viewContent.trigger('xwiki:actions:view', {document: xwikiDocument});
505 505   $('#document-title h1').html(xwikiDocument.renderedTitle);
506 - $('#xwikicontent').html(xwikiDocument.renderedContent);
550 + viewContent.html(xwikiDocument.renderedContent);
507 507   if (!reload) {
508 508   // If the user has canceled the edit then the restored page content may include the section edit links. Show them
509 509   // in case they were hidden.
510 - $('#xwikicontent').children(':header').children('.edit_section').removeClass('hidden');
554 + viewContent.children(':header').children('.edit_section').removeClass('hidden');
511 511   // Let others know that the DOM has been updated, in order to enhance it.
512 - $(document).trigger('xwiki:dom:updated', {'elements': $('#xwikicontent').toArray()});
556 + $(document).trigger('xwiki:dom:updated', {'elements': viewContent.toArray()});
513 513   }
558 + // Remove the action events scope.
559 + viewContent.closest('.form').removeClass('form');
560 + // Update the URL.
561 + if (window.location.hash === '#edit' || window.location.hash === '#translate') {
562 + history.replaceState(null, null, '#');
563 + }
514 514   return $.Deferred().resolve(xwikiDocument).promise();
515 515   };
516 516  
517 517   var edit = function(xwikiDocument) {
568 + // By adding the 'form' CSS class we set the scope of the action events (e.g. xwiki:actions:beforeSave or
569 + // xwiki:actions:cancel). We need this because in view mode we can have multiple forms active on the page (e.g. one
570 + // for editing the document content in place and one for editing the document syntax in-place) and we don't want
571 + // them to interfere (e.g. canceling one form shouldn't cancel the other forms).
572 + $('#xwikicontent').closest('.xcontent').addClass('form');
518 518   return initActionButtons(xwikiDocument).then(initTitleEditor).then(initContentEditor)
519 519   .then(startRealTimeEditingSession);
520 520   };
... ... @@ -521,7 +521,7 @@
521 521  
522 522   var initActionButtons = function(xwikiDocument) {
523 523   if (xwikiDocument) {
524 - maybeShowTranslateButton(xwikiDocument);
579 + initTranslateButton(xwikiDocument);
525 525   }
526 526   var editContent = $('#xwikicontent');
527 527   // We need the wrapper because #xwikicontent uses Bootstrap grid (col-xs-12) which is implemented with CSS float.
... ... @@ -531,63 +531,86 @@
531 531   var actionButtonsWrapper = editContent.nextAll('.sticky-buttons-wrapper');
532 532   if (actionButtonsWrapper.length === 0) {
533 533   actionButtonsWrapper = $('<div class="sticky-buttons-wrapper col-xs-12">' +
534 - '<div class="inplace-editing-buttons sticky-buttons"/></div>').insertAfter(editContent);
535 - var actionButtons = actionButtonsWrapper.children('.sticky-buttons').data('xwikiDocument', xwikiDocument)
536 - .toggle(!!xwikiDocument);
589 + '<div class="inplace-editing-buttons sticky-buttons"/></div>').insertAfter(editContent).toggle(!!xwikiDocument);
590 + var actionButtons = actionButtonsWrapper.children('.sticky-buttons')
591 + .data('xwikiDocument', xwikiDocument)
592 + // Expose the fake form if an extension needs to manipulate it.
593 + .data('fakeForm', fakeForm);
537 537   return loadActionButtons(actionButtons);
538 538   } else {
539 539   // If we're editing a page..
540 540   if (xwikiDocument) {
541 541   // ..then make sure the action buttons are displayed right away (don't wait for the user to scroll).
542 - actionButtonsWrapper.children('.sticky-buttons').data('xwikiDocument', xwikiDocument).show();
599 + actionButtonsWrapper.show().children('.sticky-buttons')
600 + .data('xwikiDocument', xwikiDocument)
601 + // Expose the fake form if an extension needs to manipulate it.
602 + .data('fakeForm', fakeForm)
603 + // but make sure the position of the action buttons is updated.
604 + .trigger('xwiki:dom:refresh');
543 543   // The action buttons are disabled on Save & View. We don't reload the page on Save & View and we reuse the
544 544   // action buttons so we need to re-enable them each time we enter the edit mode.
545 545   fakeForm.enable();
546 - $(document).trigger('xwiki:dom:refresh');
547 547   }
548 548   return $.Deferred().resolve(xwikiDocument).promise();
549 549   }
550 550   };
551 551  
552 - var maybeShowTranslateButton = function(xwikiDocument) {
553 - var xwikiDocumentLocale = xwikiDocument.getRealLocale();
554 - var uiLocale = $('html').attr('lang');
555 - if (xwikiDocumentLocale && xwikiDocumentLocale !== uiLocale) {
556 - $('#tmTranslate').off('click.translate').on('click.translate', function(event) {
557 - event.preventDefault();
558 - $(this).addClass('hidden');
559 - xwikiDocument.language = uiLocale;
560 - // Update the document translation fields that are not 'shared' with the original document.
561 - xwikiDocument.isNew = true;
562 - delete xwikiDocument.version;
563 - delete xwikiDocument.majorVersion;
564 - delete xwikiDocument.minorVersion;
565 - $('#document-title-input').focus().select();
566 - var message = $jsontool.serialize($services.localization.render('edit.inplace.page.translation',
567 - ['__locale__']));
568 - new XWiki.widgets.Notification(
569 - message.replace('__locale__', uiLocale),
570 - 'info'
571 - );
572 - }).removeClass('hidden');
573 - var message = $jsontool.serialize($services.localization.render('edit.inplace.page.original', ['__locale__']));
574 - new XWiki.widgets.Notification(
575 - message.replace('__locale__', xwikiDocumentLocale),
576 - 'info'
577 - );
578 - }
613 + var createTranslation = function(xwikiDocument) {
614 + xwikiDocument.translate();
615 + $('#document-title-input').focus().select();
616 + // Let the user know that they are now editing the translation of this page in the current locale.
617 + $('#document-title-input').popover({
618 + content: l10n['edit.inplace.page.translate.messageAfter'],
619 + placement: 'bottom',
620 + trigger: 'manual'
621 + }).popover('show').one('blur', function() {
622 + // Hide the popover when the title input loses the focus.
623 + $(this).popover('hide');
624 + });
579 579   };
580 580  
627 + var initTranslateButton = function(xwikiDocument) {
628 + // Initialize the translate button only if it's visible.
629 + const translateButton = $(config.translateButtonSelector).filter('[data-toggle="popover"]').filter(':visible');
630 + translateButton.off('click.translate').on('click.translate', function(event) {
631 + event.preventDefault();
632 + translateButton.parent().addClass('hidden');
633 + createTranslation(xwikiDocument);
634 + // Let the user know that they are editing the original version of the page and not the translation corresponding
635 + // to the current locale because there isn't one created yet.
636 + }).attr({
637 + // Backup the initial popover message to be able to restore it on view.
638 + 'data-content-view': translateButton.attr('data-content'),
639 + // Use a custom popover message dedicated to the edit action.
640 + 'data-content': l10n['edit.inplace.page.translate.messageBefore']
641 + }).popover('show')
642 + // Hide the popover on the next click. The user can still see the message by hovering the translate button.
643 + .closest('html').one('click', function() {
644 + translateButton.popover('hide');
645 + });
646 + };
647 +
581 581   var loadActionButtons = function(actionButtons) {
582 - $(document).on('xwiki:actions:view', function() {
649 + $(document).on('xwiki:actions:view', '.xcontent.form', function(event, data) {
583 583   // Blur the action buttons first to re-enable the "disabled in inputs" shortcut keys (e.g. the page edit
584 584   // shortcut), then disable the action buttons in order to disable their shortcut keys while we're not editing
585 585   // in-place (e.g. prevent the Save shortcut while the user is only viewing the page). Finally hide the action
586 586   // buttons to have them ready for the next editing session (the user can save or cancel and then edit again
587 587   // without reloading the page).
588 - actionButtons.find(':input').blur().prop('disabled', true).end().hide();
589 - // Hide the translate button because it can be used only in edit mode for the moment.
590 - $('#tmTranslate').addClass('hidden');
655 + actionButtons.find(':input').blur().prop('disabled', true).end().parent().hide();
656 + // Restore the Translate button if the locale of the viewed document doesn't match the current user interface
657 + // locale (because the viewed document doesn't have a translation in the current locale).
658 + var xwikiDocumentLocale = data.document.getRealLocale();
659 + var uiLocale = $('html').attr('lang');
660 + if (xwikiDocumentLocale && xwikiDocumentLocale !== uiLocale) {
661 + const translateButton = $(config.translateButtonSelector).filter('[data-toggle="popover"]');
662 + // Restore the translation button behavior for view action.
663 + translateButton.off('click.translate')
664 + // Restore the popover text for view action.
665 + .attr('data-content', translateButton.attr('data-content-view') || translateButton.attr('data-content'))
666 + // Restore the visibility.
667 + .parent().removeClass('hidden');
668 + }
591 591   });
592 592   return $.get(XWiki.currentDocument.getURL('get'), {
593 593   xpage: 'editactions'
... ... @@ -599,8 +599,10 @@
599 599   $('<input type="hidden" name="form_token" />').val(xcontext.form_token).appendTo(actionButtons);
600 600   // We need a place where actionButtons.js can add more hidden inputs.
601 601   actionButtons.append('<div class="hidden extra"/>');
680 + // Let the others know that the DOM has been updated, in order to enhance it.
681 + $(document).trigger('xwiki:dom:updated', {'elements': actionButtons.toArray()});
602 602   var deferred = $.Deferred();
603 - require(['actionButtons', 'xwiki-diff', 'autoSave'], function() {
683 + require(['xwiki-actionButtons', 'xwiki-diff', 'xwiki-autoSave'], function() {
604 604   overrideEditActions();
605 605   overrideAjaxSaveAndContinue();
606 606   // Activate the auto-save feature passing our fake edit form. Note that autosave.js also creates an instance of
... ... @@ -614,10 +614,7 @@
614 614   });
615 615   return deferred.promise();
616 616   }, function() {
617 - new XWiki.widgets.Notification(
618 - $jsontool.serialize($services.localization.render('edit.inplace.actionButtons.loadFailed')),
619 - 'error'
620 - );
697 + new XWiki.widgets.Notification(l10n['edit.inplace.actionButtons.loadFailed'], 'error');
621 621   });
622 622   };
623 623  
... ... @@ -643,6 +643,10 @@
643 643   insert: function(element) {
644 644   this._getActionButtons().find('.hidden.extra').append(element);
645 645   },
723 + // Note that this method only works with single argument.
724 + append: function(element) {
725 + this.insert(element);
726 + },
646 646   down: function(selector) {
647 647   return this._getActionButtons().find(selector)[0];
648 648   },
... ... @@ -673,10 +673,10 @@
673 673   // Check for merge conflicts only if the document is not new and we know the current version.
674 674   if (!xwikiDocument.isNew && xwikiDocument.version) {
675 675   formData.previousVersion = xwikiDocument.version;
676 - // It would have been easier to send the timestamp but that's what the Save action expects.
677 - formData.editingVersionDate = new Date(xwikiDocument.modified).toISOString();
757 + formData.editingVersionDate = new Date(xwikiDocument.modified).getTime();
678 678   }
679 - return $.extend(formData, extra);
759 + // Ensure that formData information has priority over extra information.
760 + return $.extend({}, extra, formData);
680 680   }
681 681   };
682 682  
... ... @@ -698,8 +698,9 @@
698 698   var originalAjaxSaveAndContinue = $.extend({}, XWiki.actionButtons.AjaxSaveAndContinue.prototype);
699 699   $.extend(XWiki.actionButtons.AjaxSaveAndContinue.prototype, {
700 700   reloadEditor: function() {
701 - if ($('.inplace-editing-buttons').is(':visible')) {
702 - $(document).trigger('xwiki:actions:reload');
782 + var actionButtons = $('.inplace-editing-buttons');
783 + if (actionButtons.is(':visible')) {
784 + actionButtons.trigger('xwiki:actions:reload');
703 703   } else {
704 704   return originalAjaxSaveAndContinue.reloadEditor.apply(this, arguments);
705 705   }
... ... @@ -720,7 +720,7 @@
720 720  
721 721   var initTitleEditor = function(xwikiDocument) {
722 722   var label = $('<label for="document-title-input" class="sr-only"/>')
723 - .text($jsontool.serialize($services.localization.render('core.editors.content.titleField.label')));
805 + .text(l10n['core.editors.content.titleField.label']);
724 724   var input = $('<input type="text" id="document-title-input"/>').val(xwikiDocument.rawTitle);
725 725   var placeholder = xwikiDocument.documentReference.name;
726 726   if (placeholder === 'WebHome') {
... ... @@ -728,10 +728,10 @@
728 728   }
729 729   input.attr('placeholder', placeholder);
730 730   $('#document-title h1').addClass('editable').empty().append([label, input]);
731 - $(document).on('xwiki:actions:beforeSave.titleEditor', function(event) {
813 + $(document).on('xwiki:actions:beforeSave.titleEditor', '.xcontent.form', function(event) {
732 732   xwikiDocument.rawTitle = input.val();
733 733   });
734 - $(document).one('xwiki:actions:view', function(event, data) {
816 + $(document).one('xwiki:actions:view', '.xcontent.form', function(event, data) {
735 735   // Destroy the title editor.
736 736   $(document).off('xwiki:actions:beforeSave.titleEditor');
737 737   $('#document-title h1').removeClass('editable').text(xwikiDocument.rawTitle);
... ... @@ -751,28 +751,24 @@
751 751   // Keep the focus while the edit content is being prepared.
752 752   viewContent.focus();
753 753   }
754 - var data = {
755 - contentType: 'org.xwiki.rendering.syntax.SyntaxContent',
756 - editMode: 'wysiwyg',
836 + var data = $.extend({}, config, {
757 757   document: xwikiDocument,
758 758   // The content editor is loaded on demand, asynchronously.
759 - deferred: $.Deferred(),
760 - // We have to explicitly enable the source mode for in-line edit because the latest version of the content editor
761 - // could be installed on an older version of XWiki where the in-place editor didn't support the source mode (so
762 - // the content editor cannot enable the source mode by default).
763 - enableSourceMode: true
764 - };
765 - var editContentPromise = data.deferred.promise();
766 - editContentPromise.done(function() {
839 + deferred: $.Deferred()
840 + });
841 + editContent.trigger('xwiki:actions:edit', data);
842 + return data.deferred.done(function() {
767 767   editContent.show();
768 768   viewContent.remove();
769 769   if (withFocus) {
770 - // Restore the focus when the edit content is ready but make sure we don't scroll the page.
771 - editContent[0].focus({preventScroll: true});
846 + // Restore the focus when the edit content is ready but make sure we don't scroll the page. We don't restore the
847 + // focus right away because we just made the content visible so it may not be editable yet (e.g. the WYSIWYG
848 + // editor can make the content editable only if it is visible).
849 + setTimeout(function() {
850 + editContent[0].focus({preventScroll: true});
851 + }, 0);
772 772   }
773 - });
774 - editContent.trigger('xwiki:actions:edit', data);
775 - return editContentPromise;
853 + }).promise();
776 776   };
777 777  
778 778   var startRealTimeEditingSession = function(xwikiDocument) {
... ... @@ -791,9 +791,10 @@
791 791   };
792 792  
793 793   return {
794 - preload: preload,
795 - editPage: editPage,
796 - editSection: editSection
872 + preload,
873 + editPage,
874 + editSection,
875 + translatePage
797 797   };
798 798  });
799 799  
... ... @@ -803,8 +803,7 @@
803 803   return;
804 804   }
805 805  
806 - var inplaceEditingConfig = $('div[data-inplace-editing-config]').data('inplaceEditingConfig') || {};
807 - var wysiwygEditorModule = 'xwiki-' + inplaceEditingConfig.wysiwygEditor + '-inline';
885 + var wysiwygEditorModule = 'xwiki-' + config.wysiwygEditor + '-inline';
808 808  
809 809   var preloadEditor = function() {
810 810   require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
... ... @@ -822,44 +822,186 @@
822 822   });
823 823   }
824 824  
825 - var editButton = $('#tmEdit > a');
826 - editButton.on('click.inPlaceEditing', function(event) {
827 - event.preventDefault();
903 + var onInPlaceEditing = function(event) {
828 828   // Make sure the user doesn't try to re-activate the edit mode while we are in edit mode.
829 - editButton.addClass('disabled');
830 - // Load the code needed to edit in place only when the edit button is clicked.
831 - require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
832 - editInPlace.editPage().always(function() {
833 - editButton.removeClass('disabled');
834 - });
835 - // Fallback on the standalone edit mode if we fail to load the required modules.
836 - }, $.proxy(disableInPlaceEditing, event.target));
837 - });
838 -
839 - // Section in-place editing.
840 - $('#xwikicontent').on('click.inPlaceEditing', '> :header > a.edit_section:not(.disabled)', function(event) {
905 + if (editButton.hasClass('disabled')) {
906 + return;
907 + }
908 + // Disable the edit buttons and hide the section edit links.
909 + editButton.add(translateButton).addClass('disabled');
910 + $('#xwikicontent').children(':header').children('.edit_section').addClass('hidden');
841 841   event.preventDefault();
842 - // Make sure the user doesn't try to re-activate the edit mode while we are in edit mode.
843 - editButton.addClass('disabled');
844 - // Hide the section editing links and focus the content right away. We could have replaced the section editing icon
845 - // with a loading animation / spinner but giving instant visual feedback about what is going to happen is perceived
846 - // better by the users (it feels faster).
847 - $('#xwikicontent').attr('tabindex', '0').focus().children(':header').children('.edit_section').addClass('hidden');
848 - var heading = $(event.target).closest(':header');
912 + const handler = event.data;
913 + const data = handler.beforeEdit?.(event);
849 849   // Load the code needed to edit in place only when the edit button is clicked.
850 850   require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
851 - editInPlace.editSection(heading.attr('id')).always(function() {
916 + // Re-enable the translate button because it can be used while editing to create the missing translation.
917 + translateButton.removeClass('disabled');
918 + handler.edit(editInPlace, data).always(function() {
919 + // Restore only the edit button at the end because:
920 + // * the translate button is restored (if needed) by the editInPlace module
921 + // * the section edit links are restored when the document is rendered for view
852 852   editButton.removeClass('disabled');
853 853   });
854 854   // Fallback on the standalone edit mode if we fail to load the required modules.
855 855   }, $.proxy(disableInPlaceEditing, event.target));
856 - });
926 + };
857 857  
858 858   var disableInPlaceEditing = function() {
859 - editButton.off('click.inPlaceEditing').removeClass('disabled');
929 + editButton.add(translateButton).off('click.inPlaceEditing').removeClass('disabled');
860 860   $('#xwikicontent').off('click.inPlaceEditing').removeAttr('tabindex').children(':header').children('.edit_section')
861 861   .removeClass('hidden');
862 862   // Fallback on the standalone edit mode.
863 863   $(this).click();
864 864   };
935 +
936 + var editButton = $(config.editButtonSelector);
937 + editButton.on('click.inPlaceEditing', {
938 + beforeEdit: function() {
939 + history.replaceState(null, null, '#edit');
940 + },
941 + edit: function(editInPlace) {
942 + return editInPlace.editPage();
943 + }
944 + }, onInPlaceEditing).attr('data-editor', 'inplace');
945 +
946 + var translateButton = $(config.translateButtonSelector);
947 + translateButton.on('click.inPlaceEditing', {
948 + beforeEdit: function() {
949 + history.replaceState(null, null, '#translate');
950 + translateButton.parent().addClass('hidden');
951 + },
952 + edit: function(editInPlace) {
953 + return editInPlace.translatePage();
954 + }
955 + }, onInPlaceEditing);
956 +
957 + // Section in-place editing.
958 + $('#xwikicontent').on('click.inPlaceEditing', '> :header > a.edit_section:not(.disabled)', {
959 + beforeEdit: function(event) {
960 + // Focus the content right away to give the user instant visual feedback about what is going to happen.
961 + $('#xwikicontent').attr('tabindex', '0').focus();
962 + // Return the id of the edited section.
963 + return $(event.target).closest(':header').attr('id');
964 + },
965 + edit: function(editInPlace, sectionId) {
966 + return editInPlace.editSection(sectionId);
967 + }
968 + }, onInPlaceEditing);
969 +
970 + if (window.location.hash === '#edit') {
971 + editButton.click();
972 + } else if (window.location.hash === '#translate') {
973 + translateButton.click();
974 + }
865 865  });
976 +
977 +require(['jquery'], function($) {
978 + // Backup the document title before each editing session in order to catch changes.
979 + var previousPlainTitle;
980 + $('#xwikicontent').on('xwiki:actions:edit', function(event, data) {
981 + previousPlainTitle = data.document.getPlainTitle();
982 + });
983 +
984 + // Update the UI after each editing session.
985 + $(document).on('xwiki:actions:view', function(event, data) {
986 + var xwikiDocument = data.document;
987 + updateDocAuthorAndDate(xwikiDocument);
988 + updateDocExtraTabs(xwikiDocument);
989 + updateDrawer(xwikiDocument);
990 + updateContentMenu(xwikiDocument);
991 + if (xwikiDocument.getPlainTitle() !== previousPlainTitle) {
992 + updateDocTrees(xwikiDocument);
993 + updateLinks(xwikiDocument);
994 + }
995 + });
996 +
997 + var updateDocAuthorAndDate = function(xwikiDocument) {
998 + var urlWithSelector = xwikiDocument.getURL('get', 'xpage=contentheader') + ' .xdocLastModification';
999 + $('.xdocLastModification').load(urlWithSelector, function() {
1000 + // load() replaces the content of the specified container but we want to replace the container itself. We can't do
1001 + // this from the selector, e.g. by using '.xdocLastModification > *' because we lose the text nodes.
1002 + $(this).children().unwrap();
1003 + });
1004 + };
1005 +
1006 + var updateDocExtraTabs = function(xwikiDocument) {
1007 + // Reload the selected tab and force the reload of the hidden tabs next time they are selected.
1008 + $('#docextrapanes').children().addClass('empty').empty();
1009 + var selectedTab = $('#docExtraTabs .active[data-template]');
1010 + if (selectedTab.length) {
1011 + var docExtraId = selectedTab.attr('id');
1012 + docExtraId = docExtraId.substring(0, docExtraId.length - 'tab'.length);
1013 + XWiki.displayDocExtra(docExtraId, selectedTab.data('template'), false);
1014 + }
1015 + };
1016 +
1017 + // Update the document trees (e.g. breadcrumb, navigation) if they have nodes that correspond to the edited document.
1018 + // Note that we want to update the internal tree data not just the link label. This is especially useful if we're
1019 + // going to implement refactoring operations (rename) in the document tree.
1020 + var updateDocTrees = function(xwikiDocument) {
1021 + var plainTitle = xwikiDocument.getPlainTitle();
1022 + $('.jstree-xwiki').each(function() {
1023 + $(this).jstree?.(true)?.set_text?.('document:' + xwikiDocument.id, plainTitle);
1024 + });
1025 + };
1026 +
1027 + // Update the links that target the edited document and whose label matches the document title. Note that this can
1028 + // update links whose label was not generated dynamically (e.g. with server side scripting) based on the document
1029 + // title. For instance there could be links with hard-coded labels or with labels generated using a translatin key
1030 + // (like in the Applications panel). For simplicity we assume that if the link matches the document URL and its
1031 + // previous title then it needs to be updated, but this happens only at the UI level.
1032 + var updateLinks = function(xwikiDocument) {
1033 + var docURL = xwikiDocument.getURL();
1034 + var newPlainTitle = xwikiDocument.getPlainTitle();
1035 + // Exclude the links from the document content.
1036 + // Update the links that contain only text (no child elements) otherwise we can lose UI elements (e.g. icons).
1037 + $('a').not('#xwikicontent a').not(':has(*)').filter(function() {
1038 + var linkURL = $(this).attr('href')?.split(/[?#]/, 1)[0];
1039 + return linkURL === docURL && $(this).text() === previousPlainTitle;
1040 + }).text(newPlainTitle);
1041 + };
1042 +
1043 + // Update the list of available document translations in the drawer menu. This is needed for instance when a new
1044 + // translation is created using the in-place editor.
1045 + var updateDrawer = function(xwikiDocument) {
1046 + var languageMenu = $('#tmLanguages_menu');
1047 + var locale = xwikiDocument.getRealLocale();
1048 + // Look for the language query string parameter, either inside or at the end.
1049 + var localeSelector = 'a[href*="language=' + locale + '&"], a[href$="language=' + locale + '"]';
1050 + // Check if the language menu is present (multilingual is on) and the document locale is not listed.
1051 + if (languageMenu.length && !languageMenu.find(localeSelector).length) {
1052 + // If we get here then it means a new document translation was created and it needs to be listed in the drawer.
1053 + $('<div/>').load(xwikiDocument.getURL('get', $.param({
1054 + 'xpage': 'xpart',
1055 + 'vm': 'drawer.vm',
1056 + 'useLayoutVars': true
1057 + // Pass the query string from the current URL so that it gets included in the translation URL.
1058 + // XWIKI-11314: Changing the current language from the UI does not preserve the query string of the current URL
1059 + })) + '&' + location.search.substring(1) + ' #tmLanguages_menu', function() {
1060 + $(this).find('a').each(function() {
1061 + // Clean the query string.
1062 + $(this).attr('href', $(this).attr('href').replace(/&?(xpage=xpart|vm=drawer\.vm|useLayoutVars=true)/g, '')
1063 + .replace('?&', '?'));
1064 + });
1065 + languageMenu.replaceWith($(this).children());
1066 + });
1067 + }
1068 + };
1069 +
1070 + // Update the links from the content menu to point to the real document locale. This is needed especially when a new
1071 + // document translation is created in-place.
1072 + var updateContentMenu = function(xwikiDocument) {
1073 + var realLocale = xwikiDocument.getRealLocale();
1074 + var defaultLocale = xwikiDocument.getDefaultLocale();
1075 + if (realLocale != defaultLocale) {
1076 + var defaultLocaleRegex = new RegExp('(\\blanguage=)' + defaultLocale + '($|&|#)');
1077 + $('#contentmenu a[href*="language=' + defaultLocale + '"]').each(function() {
1078 + $(this).attr('href', $(this).attr('href').replace(defaultLocaleRegex, '$1' + realLocale + '$2'));
1079 + });
1080 + }
1081 + };
1082 +});
1083 +
1084 +})(JSON.parse(document.querySelector('[data-inplace-editing-config]')?.getAttribute('data-inplace-editing-config')) ||
1085 + {});
Parse content
... ... @@ -1,1 +1,1 @@
1 -Yes
1 +No
XWiki.UIExtensionClass[0]
Executed Content
... ... @@ -1,3 +1,11 @@
1 +{{velocity output="false"}}
2 +## TODO: Remove this when XWIKI-18511 (Add support for passing a query string when calling getSkinFile) is implemented.
3 +#macro (getSkinFileWithParams $file $params)
4 +#set ($url = $xwiki.getSkinFile($file, true))
5 +$url#if ($url.contains('?'))&#else?#end$escapetool.url($params)
6 +#end
7 +{{/velocity}}
8 +
1 1  {{velocity}}
2 2  {{html clean="false"}}
3 3  #if ($services.edit.document.inPlaceEditingEnabled() && $hasEdit && $xcontext.action == 'view' && !$doc.isNew())
... ... @@ -4,9 +4,56 @@
4 4   ## We support in-place editing only for the WYSIWYG edit mode ATM.
5 5   #getDefaultDocumentEditor($defaultEditMode)
6 6   #if ($defaultEditMode == 'wysiwyg')
15 + #set ($l10nKeys = [
16 + 'edit.inplace.page.renderFailed',
17 + 'edit.inplace.page.lockFailed',
18 + 'edit.inplace.close',
19 + 'edit.inplace.page.loadFailed',
20 + 'edit.inplace.actionButtons.loadFailed',
21 + 'core.editors.content.titleField.label',
22 + ['edit.inplace.page.translate.messageBefore', $doc.realLocale.getDisplayName($xcontext.locale),
23 + $xcontext.locale.getDisplayName($xcontext.locale)],
24 + ['edit.inplace.page.translate.messageAfter', $xcontext.locale.getDisplayName($xcontext.locale)]
25 + ])
26 + #set ($l10n = {})
27 + #foreach ($key in $l10nKeys)
28 + #set ($params = $key.subList(1, $key.size()))
29 + #if ($params)
30 + #set ($discard = $l10n.put($key[0], $services.localization.render($key[0], $params)))
31 + #else
32 + #set ($discard = $l10n.put($key, $services.localization.render($key)))
33 + #end
34 + #end
35 + ## See stylesheets.vm
36 + #set ($cssParams = {
37 + 'skin': $xwiki.skin,
38 + 'colorTheme': $services.model.serialize($themeDoc.documentReference, 'default')
39 + })
40 + #set ($jsParams = {'language': $xcontext.locale})
41 + ## We have to explicitly enable the source mode for in-line edit because the latest version of the content editor
42 + ## could be installed on an older version of XWiki where the in-place editor didn't support the source mode (so the
43 + ## content editor cannot enable the source mode by default).
7 7   #set ($inplaceEditingConfig = {
45 + 'contentType': 'org.xwiki.rendering.syntax.SyntaxContent',
8 8   'editMode': $defaultEditMode,
9 - 'wysiwygEditor': $services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id
47 + 'wysiwygEditor': $services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id,
48 + 'editButtonSelector': '#tmEdit > a',
49 + 'translateButtonSelector': '#tmTranslate > a',
50 + 'enableSourceMode': true,
51 + 'enableOfficeImport': $services.officemanager.isConnected(),
52 + 'paths': {
53 + 'js': {
54 + 'xwiki-actionButtons': "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.js' $jsParams)",
55 + 'xwiki-autoSave': "#getSkinFileWithParams('js/xwiki/editors/autosave.js' $jsParams)",
56 + 'xwiki-diff': $xwiki.getSkinFile('uicomponents/viewers/diff.js')
57 + },
58 + 'css': [
59 + "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.css' $cssParams)",
60 + "#getSkinFileWithParams('js/xwiki/editors/autosave.css' $cssParams)",
61 + "#getSkinFileWithParams('uicomponents/viewers/diff.css' $cssParams)"
62 + ]
63 + },
64 + 'l10n': $l10n
10 10   })
11 11   <div class="hidden" data-inplace-editing-config="$escapetool.xml($jsontool.serialize($inplaceEditingConfig))"></div>
12 12   ## We didn't move this to the file system because it uses LESS and we didn't want to include it in the skin.
XWiki.UIExtensionClass[1]
Cached
... ... @@ -1,1 +1,0 @@
1 -No
Asynchronous rendering
... ... @@ -1,1 +1,0 @@
1 -No
Executed Content
... ... @@ -1,22 +1,0 @@
1 -{{velocity}}
2 -{{html clean="false"}}
3 -## Output the translation button if all the following conditions are met:
4 -## * multilingual is on
5 -## * we're loading the original document version
6 -## * the original document version has a locale specified (it doesn't make sense to translate technical documents)
7 -## * the current UI locale doesn't match the original document locale
8 -#if ($services.edit.document.inPlaceEditingEnabled() && $hasEdit && $xwiki.isMultiLingual()
9 - && $tdoc.realLocale == $doc.realLocale && "$!doc.realLocale" != '' && $doc.realLocale != $xcontext.locale)
10 - #set ($url = $doc.getURL('edit', $escapetool.url({'language': $xcontext.locale})))
11 - #set ($hint = $services.localization.render('edit.inplace.page.translate.hint',
12 - [$xcontext.locale.getDisplayName($xcontext.locale)]))
13 - ## We show the translate button only while editing in-place.
14 - <div class="btn-group hidden" id="tmTranslate">
15 - <a class="btn btn-default" href="$url" role="button" title="$escapetool.xml($hint)">
16 - $services.icon.renderHTML('translate')
17 - <span class="btn-label">$escapetool.xml($services.localization.render('edit.inplace.page.translate'))</span>
18 - </a>
19 - </div>
20 -#end
21 -{{/html}}
22 -{{/velocity}}
Extension Point ID
... ... @@ -1,1 +1,0 @@
1 -org.xwiki.plaftorm.menu.content
Extension ID
... ... @@ -1,1 +1,0 @@
1 -org.xwiki.plaftorm.menu.content.translate
Extension Parameters
... ... @@ -1,1 +1,0 @@
1 -order=5000
Extension Scope
... ... @@ -1,1 +1,0 @@
1 -wiki