Changes for page InplaceEditing

From version 5.1
edited by Nazzareno Pompei
on 30/01/2023 10:31
Change comment: Install extension [org.xwiki.platform:xwiki-platform-edit-ui/14.10.3]
To version 1.1
edited by N Pompei
on 08/06/2020 17:32
Change comment: Install extension [org.xwiki.platform:xwiki-platform-edit-ui/12.4]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.NazzarenoPompei
1 +XWiki.NPompei
Content
... ... @@ -9,15 +9,11 @@
9 9   #jsonResponse($editConfirmation)
10 10   #else
11 11   ## Lock the document for editing.
12 - #set ($lockParams = {
12 + #set ($discard = $response.sendRedirect($tdoc.getURL('lock', $escapetool.url({
13 13   'ajax': 1,
14 14   'action': $request.lockAction,
15 15   'language': $tdoc.realLocale
16 - })
17 - #if ($request.force == 'true')
18 - #set ($lockParams.force = 1)
19 - #end
20 - #set ($discard = $response.sendRedirect($tdoc.getURL('lock', $escapetool.url($lockParams))))
16 + }))))
21 21   #end
22 22  #end
23 23  {{/velocity}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,11 +7,9 @@
1 -(function(config) {
2 - "use strict";
3 -
4 -const paths = config.paths;
5 -const l10n = config.l10n;
6 -
7 7  require.config({
8 - paths: paths.js
2 + paths: {
3 + 'actionButtons': $jsontool.serialize($xwiki.getSkinFile('js/xwiki/actionbuttons/actionButtons.js', true)),
4 + // Required in case the user needs to resolve merge conflicts on save.
5 + 'diff': $jsontool.serialize($xwiki.getSkinFile('uicomponents/viewers/diff.js'))
6 + }
9 9  });
10 10  
11 11  define('xwiki-document-api', ['jquery'], function($) {
... ... @@ -16,36 +16,13 @@
16 16  
17 17   return {
18 18   /**
19 - * @return this document's plain title
20 - */
21 - getPlainTitle() {
22 - return $('<div/>').html(this.renderedTitle || this.title).text();
23 - },
24 -
25 - /**
26 26   * @return this document's real locale
27 27   */
28 28   getRealLocale: function() {
29 - var realLocale = this.language;
30 - if (typeof realLocale !== 'string' || realLocale === '') {
31 - realLocale = this.getDefaultLocale();
32 - }
33 - return realLocale;
20 + return this.language || (this.translations && this.translations['default']) || $('html').attr('lang');
34 34   },
35 35  
36 36   /**
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 - /**
49 49   * @return the URL that can be used to perform the specified action on this document
50 50   */
51 51   getURL: function(action, queryString, fragment) {
... ... @@ -80,31 +80,25 @@
80 80   */
81 81   render: function(forView) {
82 82   var queryString = {
83 - xpage: 'get',
58 + xpage: 'rendercontent',
84 84   outputTitle: true,
60 + outputSyntax: forView ? null : 'annotatedxhtml',
85 85   language: this.getRealLocale(),
86 86   // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
87 87   timestamp: new Date().getTime()
88 88   };
89 - if (!forView) {
90 - // We need the annotated HTML 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 = 'annotatedhtml';
93 - queryString.outputSyntaxVersion = '5.0'
94 - // Currently, only the macro transformations are protected and thus can be edited.
95 - // See XRENDERING-78: Add markers to modified XDOM by Transformations/Macros
96 - queryString.transformations = 'macro';
97 - }
98 - return Promise.resolve($.get(this.getURL('view'), queryString)).then(html => {
99 - // Render succeeded.
65 + var thisXWikiDocument = this;
66 + return $.get(this.getURL('view'), queryString).fail(function() {
67 + new XWiki.widgets.Notification(
68 + $jsontool.serialize($services.localization.render('edit.inplace.page.renderFailed')),
69 + 'error'
70 + );
71 + }).then(function(html) {
100 100   var container = $('<div/>').html(html);
101 - return $.extend(this, {
73 + return $.extend(thisXWikiDocument, {
102 102   renderedTitle: container.find('#document-title h1').html(),
103 103   renderedContent: container.find('#xwikicontent').html()
104 104   });
105 - }).catch(() => {
106 - new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
107 - return Promise.reject(this);
108 108   });
109 109   },
110 110  
... ... @@ -114,19 +114,16 @@
114 114   * @return a promise that resolves to this document instance if the reload request succeeds
115 115   */
116 116   reload: function() {
117 - return Promise.resolve($.getJSON(this.getRestURL(), {
86 + var thisXWikiDocument = this;
87 + return $.getJSON(this.getRestURL(), {
118 118   // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
119 119   timestamp: new Date().getTime()
120 - })).then(newXWikiDocument => {
121 - // Reload succeeded.
90 + }).then(function(newXWikiDocument) {
122 122   // Resolve the document reference.
123 - this.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
92 + thisXWikiDocument.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
124 124   // We were able to load the document so it's not new.
125 - this.isNew = false;
126 - return $.extend(this, newXWikiDocument);
127 - }).catch(() => {
128 - // Reload failed.
129 - return Promise.reject(this);
94 + thisXWikiDocument.isNew = false;
95 + return $.extend(thisXWikiDocument, newXWikiDocument);
130 130   });
131 131   },
132 132  
... ... @@ -137,8 +137,9 @@
137 137   * @return a promise that resolves to this document instance if the lock request succeeds
138 138   */
139 139   lock: function(action, force) {
106 + var thisXWikiDocument = this;
140 140   action = action || 'edit';
141 - return Promise.resolve($.getJSON(this.getURL('get'), {
108 + return $.getJSON(this.getURL('get'), {
142 142   sheet: 'XWiki.InplaceEditing',
143 143   action: 'lock',
144 144   lockAction: action,
... ... @@ -147,20 +147,9 @@
147 147   outputSyntax: 'plain',
148 148   // Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
149 149   timestamp: new Date().getTime()
150 - })).then(() => {
151 - // Lock succeeded.
152 - this.locked = action;
153 - return this;
154 - }).catch(response => {
155 - // Lock failed.
156 - delete this.locked;
157 - // Check if the user can force the lock.
158 - var lockConfirmation = response.responseJSON;
159 - if (response.status === 423 && lockConfirmation) {
160 - // The user can force the lock, but needs confirmation.
161 - this.lockConfirmation = lockConfirmation;
162 - }
163 - return Promise.reject(this);
117 + }).then(function() {
118 + thisXWikiDocument.locked = action;
119 + return thisXWikiDocument;
164 164   });
165 165   },
166 166  
... ... @@ -183,25 +183,6 @@
183 183   // See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests
184 184   $.ajax({type: 'GET', url: url, async: false});
185 185   }
186 - },
187 -
188 - /**
189 - * Makes sure this document matches the current UI locale.
190 - */
191 - translate: function() {
192 - const realLocale = this.getRealLocale();
193 - const uiLocale = $('html').attr('lang');
194 - if (realLocale && realLocale !== uiLocale) {
195 - this.language = uiLocale;
196 - // Set the original document locale.
197 - this.translations = this.translations || {};
198 - this.translations['default'] = realLocale;
199 - // Update the document fields that are not 'shared' with the original document.
200 - this.isNew = true;
201 - delete this.version;
202 - delete this.majorVersion;
203 - delete this.minorVersion;
204 - }
205 205   }
206 206   };
207 207  });
... ... @@ -218,12 +218,14 @@
218 218   'xwiki-events-bridge'
219 219  ], function($, xcontext, xwikiDocumentAPI) {
220 220   var preload = function() {
221 - paths.css.forEach(loadCSS);
158 + loadCSS($jsontool.serialize($xwiki.getSkinFile('js/xwiki/actionbuttons/actionButtons.css', true)));
159 + // Required in case the user needs to resolve merge conflicts on save.
160 + loadCSS($jsontool.serialize($xwiki.getSkinFile('uicomponents/viewers/diff.css', true)));
222 222   return initActionButtons();
223 223   };
224 224  
225 225   var loadCSS = function(url) {
226 - $('<link/>').attr({
165 + var link = $('<link>').attr({
227 227   type: 'text/css',
228 228   rel: 'stylesheet',
229 229   href: url
... ... @@ -238,12 +238,6 @@
238 238   });
239 239   };
240 240  
241 - var translatePage = function() {
242 - return editInPlace({
243 - afterEdit: createTranslation
244 - });
245 - };
246 -
247 247   var editSection = function(sectionId) {
248 248   return editInPlace({
249 249   lockFailed: function() {
... ... @@ -255,7 +255,7 @@
255 255   $('#xwikicontent').removeAttr('tabindex');
256 256   if (sectionId) {
257 257   // Select the heading of the specified section.
258 - $('#xwikicontent > #' + $.escapeSelector(sectionId)).each(function() {
191 + $('#xwikicontent > #' + escapeSelector(sectionId)).each(function() {
259 259   selectText(this);
260 260   });
261 261   }
... ... @@ -263,6 +263,22 @@
263 263   });
264 264   };
265 265  
199 + var escapeSelector = function(selector) {
200 + if (window.CSS && typeof CSS.escape === 'function') {
201 + // Not supported by Internet Explorer.
202 + return CSS.escape(selector);
203 + } else if (typeof $.escapeSelector === 'function') {
204 + // Added in jQuery 3.0
205 + return $.escapeSelector(selector);
206 + } else if (typeof selector === 'string') {
207 + // Simple implementation.
208 + // 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/
209 + return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
210 + } else {
211 + return selector;
212 + }
213 + };
214 +
266 266   // We preserve the document data between edits in order to be able to know which document translation should be edited
267 267   // (e.g. when the document translation is missing and we create it, the next edit session should target the created
268 268   // translation).
... ... @@ -270,11 +270,6 @@
270 270   language: xcontext.locale
271 271   }, xwikiDocumentAPI);
272 272  
273 - var setCurrentXWikiDocument = function(xwikiDocument) {
274 - currentXWikiDocument = xwikiDocument;
275 - return Promise.resolve(xwikiDocument);
276 - };
277 -
278 278   var editInPlace = function(options) {
279 279   options = $.extend({
280 280   afterEdit: function() {},
... ... @@ -281,57 +281,35 @@
281 281   lockFailed: function() {}
282 282   }, options);
283 283   $('#xwikicontent').addClass('loading');
284 - // Lock the document first.
285 - return lock(currentXWikiDocument)
286 - // Then load the document only if we managed to lock it.
287 - .then(load, xwikiDocument => {
288 - options.lockFailed(xwikiDocument);
289 - return Promise.reject(xwikiDocument);
290 - // Then load the editors only if we managed to load the document.
291 - }).then(edit).then(xwikiDocument => {
292 - options.afterEdit(xwikiDocument);
293 - return xwikiDocument;
294 - }).finally(() => {
228 + return lock(currentXWikiDocument).fail(options.lockFailed)
229 + .then(load)
230 + .then(edit).done(options.afterEdit).always(function() {
295 295   $('#xwikicontent').removeClass('loading');
296 - // Then wait for an action (save, cancel, reload) only if the editors were loaded successfuly.
297 297   }).then(maybeSave)
298 - // Then unlock the document both when the edit ended with success and with a failure.
299 - .then(unlock, unlock)
300 - // Finally view the document both when the edit ended with success and with a failure.
301 - .then(view, view)
302 - // Update the current document for the next edit session.
303 - .then(setCurrentXWikiDocument, setCurrentXWikiDocument);
233 + .then(unlock)
234 + .then(view);
304 304   };
305 305  
306 306   var lock = function(xwikiDocument) {
307 - return xwikiDocument.lock().catch(function(xwikiDocument) {
238 + return xwikiDocument.lock().then(null, function(response) {
239 + var confirmation = response.responseJSON;
308 308   // If the document was already locked then we need to ask the user if they want to force the lock.
309 - if (xwikiDocument.lockConfirmation) {
310 - var confirmation = xwikiDocument.lockConfirmation;
311 - delete xwikiDocument.lockConfirmation;
312 - return maybeForceLock(confirmation).then(xwikiDocument.lock.bind(xwikiDocument, 'edit', true), function() {
313 - // Cancel the edit action.
314 - return Promise.reject(xwikiDocument);
315 - });
241 + if (response.status === 423 && confirmation) {
242 + return maybeForceLock(confirmation).then($.proxy(xwikiDocument, 'lock', 'edit', true));
316 316   } else {
317 - new XWiki.widgets.Notification(l10n['edit.inplace.page.lockFailed'], 'error');
318 - return Promise.reject(xwikiDocument);
244 + new XWiki.widgets.Notification(
245 + $jsontool.serialize($services.localization.render('edit.inplace.page.lockFailed')),
246 + 'error'
247 + );
319 319   }
320 320   });
321 321   };
322 322  
323 323   var maybeForceLock = function(confirmation) {
324 - var deferred, promise = new Promise((resolve, reject) => {
325 - deferred = {resolve, reject};
326 - });
327 - // We need the catch() to prevent the "Uncaught (in promise)" error log in the console.
328 - promise.catch(() => {}).finally(() => {
329 - // This flag is used by the Force Lock modal to know whether the promise is settled when the modal is closing.
330 - deferred.settled = true;
331 - });
253 + var deferred = $.Deferred();
332 332   // Reuse the confirmation modal once it is created.
333 333   var modal = $('.force-edit-lock-modal');
334 - if (!modal.length) {
256 + if (modal.length === 0) {
335 335   modal = createForceLockModal();
336 336   }
337 337   // Update the deferred that needs to be resolved or rejected.
... ... @@ -347,7 +347,7 @@
347 347   }
348 348   // Show the confirmation modal.
349 349   modal.modal('show');
350 - return promise;
272 + return deferred.promise();
351 351   };
352 352  
353 353   var createForceLockModal = function() {
... ... @@ -370,17 +370,17 @@
370 370   '</div>',
371 371   '</div>'
372 372   ].join(''));
373 - modal.find('.close').attr('aria-label', l10n['edit.inplace.close']);
374 - modal.find('.modal-footer .btn-warning').on('click', function() {
295 + modal.find('.close').attr('aria-label', $jsontool.serialize($services.localization.render('edit.inplace.close')));
296 + modal.find('.modal-footer .btn-warning').click(function() {
375 375   // The user has confirmed they want to force the lock.
376 376   modal.data('deferred').resolve();
377 377   modal.modal('hide');
378 378   });
379 379   modal.on('hide.bs.modal', function() {
380 - // If the lock promise is not yet settled when the modal is closing then it means the modal was canceled,
302 + // If the lock promise is not yet resolved when the modal is closing then it means the modal was canceled,
381 381   // i.e. the user doesn't want to force the lock.
382 382   var deferred = modal.data('deferred');
383 - if (!deferred.settled) {
305 + if (deferred.state() === 'pending') {
384 384   deferred.reject();
385 385   }
386 386   });
... ... @@ -388,19 +388,18 @@
388 388   };
389 389  
390 390   var load = function(xwikiDocument) {
391 - return xwikiDocument.reload().then(xwikiDocument => {
313 + return xwikiDocument.reload().done(function(xwikiDocument) {
392 392   // Clone the current document version and keep a reference to it in order to be able to restore it on cancel.
393 393   xwikiDocument.originalDocument = $.extend(true, {
394 394   renderedTitle: $('#document-title h1').html(),
395 395   renderedContent: $('#xwikicontent').html()
396 396   }, xwikiDocument);
397 - return xwikiDocument;
398 - }).catch(xwikiDocument => {
399 - new XWiki.widgets.Notification(l10n['edit.inplace.page.loadFailed'], 'error');
400 - return Promise.reject(xwikiDocument);
319 + }).fail(function() {
320 + new XWiki.widgets.Notification($jsontool.serialize($services.localization.render('edit.inplace.page.loadFailed')),
321 + 'error');
401 401   // Render the document for edit, in order to have the annotated content HTML. The annotations are used to protect
402 402   // the rendering transformations (e.g. macros) when editing the content.
403 - }).then(render.bind(null, false));
324 + }).then($.proxy(render, null, false));
404 404   };
405 405  
406 406   /**
... ... @@ -413,7 +413,7 @@
413 413   };
414 414  
415 415   var maybeSave = function(xwikiDocument) {
416 - return waitForAction(xwikiDocument).then(action => {
337 + return waitForAction(xwikiDocument).then(function(action) {
417 417   switch(action.name) {
418 418   case 'save': return save({
419 419   document: action.document,
... ... @@ -426,76 +426,58 @@
426 426   };
427 427  
428 428   var waitForAction = function(xwikiDocument) {
429 - return new Promise((resolve, reject) => {
430 - // We wait for the first save, reload or cancel event, whichever is triggered first. Note that the event listeners
431 - // that are not executed first will remain registered but that doesn't cause any problems because the state of a
432 - // deferred object (promise) cannot change once it was resolved. So the first event that fires will resolve the
433 - // promise and the remaining events won't be able to change that. The remaining event listeners could be called
434 - // later but they won't have any effect on the deferred object.
435 - $(document).one([
436 - 'xwiki:actions:save',
437 - 'xwiki:actions:reload',
438 - 'xwiki:actions:cancel',
439 - ].join(' '), '.xcontent.form', function(event, data) {
440 - resolve({
441 - name: event.type.substring('xwiki:actions:'.length),
442 - document: xwikiDocument,
443 - data: data
444 - });
350 + var deferred = $.Deferred();
351 + // We wait for the first save, reload or cancel event, whichever is triggered first. Note that the event listeners
352 + // that are not executed first will remain registered but that doesn't cause any problems because the state of a
353 + // deferred object (promise) cannot change once it was resolved. So the first event that fires will resolve the
354 + // promise and the remaining events won't be able to change that. The remaining event listeners could be called
355 + // later but they won't have any effect on the deferred object.
356 + $(document).one([
357 + 'xwiki:actions:save',
358 + 'xwiki:actions:reload',
359 + 'xwiki:actions:cancel',
360 + ].join(' '), function(event, data) {
361 + deferred.resolve({
362 + name: event.type.substring('xwiki:actions:'.length),
363 + document: xwikiDocument,
364 + data: data
445 445   });
446 446   });
367 + return deferred.promise();
447 447   };
448 448  
449 449   var save = function(data) {
450 - // Push the changes to the server.
451 - return push(data.document).then(xwikiDocument => {
371 + // Push the changes to the server then render the document for view. We need the view HTML both if we stop editing
372 + // now and if we continue but cancel the edit later.
373 + return push(data.document).then($.proxy(render, null, true)).then(function(xwikiDocument) {
452 452   // Save succeeded.
453 - return shouldReload(xwikiDocument).then(
454 - // The document was saved with merge and thus if we want to continue eding we need to reload the editor (because
455 - // its content doesn't match the saved content).
456 - reload,
457 - // No need to reload the editor because either the action was Save & View or there was no merge on save.
458 - maybeContinueEditing.bind(null, data['continue'])
459 - );
460 - // Save failed. Continue editing because we may have unsaved content.
461 - }, maybeSave);
462 - };
463 -
464 - var push = function(xwikiDocument) {
465 - // Let actionButtons.js do the push. We just catch the result.
466 - return new Promise((resolve, reject) => {
467 - // We wait for the save request to either succeed or fail. Note that one of the event listeners will remain
468 - // registered but that doesn't cause any problems because the state of a deferred object (promise) cannot change
469 - // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the
470 - // remaining event won't be able to change that. The remaining event listener could be called later but it won't
471 - // have any effect.
472 - $(document).one('xwiki:document:saved', '.xcontent.form', resolve.bind(null, xwikiDocument));
473 - $(document).one('xwiki:document:saveFailed', '.xcontent.form', reject.bind(null, xwikiDocument));
474 - });
475 - };
476 -
477 - var maybeContinueEditing = function(continueEditing, xwikiDocument) {
478 - var afterReloadAndRender = function(success, xwikiDocument) {
479 - if (continueEditing) {
480 - if (success) {
481 - // Update the original version in order to be able to restore it on cancel.
482 - delete xwikiDocument.originalDocument;
483 - xwikiDocument.originalDocument = $.extend(true, {}, xwikiDocument);
484 - }
375 + if (data['continue']) {
376 + // Update the original version in order to be able to restore it on cancel.
377 + delete xwikiDocument.originalDocument;
378 + xwikiDocument.originalDocument = $.extend(true, {}, xwikiDocument);
485 485   // Continue editing.
486 486   return maybeSave(xwikiDocument);
487 487   } else {
488 - // This is the final version. We stop editing even if the reload / render failed.
382 + // This is the final version.
489 489   return xwikiDocument;
490 490   }
491 - };
385 + }, function(xwikiDocument) {
386 + // Save failed. Continue editing.
387 + return maybeSave(xwikiDocument);
388 + });
389 + };
492 492  
493 - // Reload the document JSON data (to have the new version) and render the document for view. We need the view HTML
494 - // both if we stop editing now and if we continue but cancel the edit later.
495 - return xwikiDocument.reload().then(render.bind(null, true)).then(
496 - afterReloadAndRender.bind(null, /* success: */ true),
497 - afterReloadAndRender.bind(null, /* success: */ false)
498 - );
391 + var push = function(xwikiDocument) {
392 + // Let actionButtons.js do the push. We just catch the result.
393 + var deferred = $.Deferred();
394 + // We wait for the save request to either succeed or fail. Note that one of the event listeners will remain
395 + // registered but that doesn't cause any problems because the state of a deferred object (promise) cannot change
396 + // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the remaining
397 + // event won't be able to change that. The remaining event listener could be called later but it won't have any
398 + // effect.
399 + $(document).one('xwiki:document:saved', $.proxy(deferred, 'resolve', xwikiDocument));
400 + $(document).one('xwiki:document:saveFailed', $.proxy(deferred, 'reject', xwikiDocument));
401 + return deferred.promise().then($.proxy(xwikiDocument, 'reload'));
499 499   };
500 500  
501 501   var cancel = function(xwikiDocument) {
... ... @@ -513,27 +513,8 @@
513 513   };
514 514  
515 515   // Make sure we unlock the document when the user navigates to another page.
516 - $(window).on('unload pagehide', unlock.bind(null, currentXWikiDocument));
419 + $(window).on('unload pagehide', $.proxy(unlock, null, currentXWikiDocument));
517 517  
518 - var shouldReload = function(xwikiDocument) {
519 - var reloadEventFired = false;
520 - $(document).one('xwiki:actions:reload.maybe', '.xcontent.form', function() {
521 - reloadEventFired = true;
522 - });
523 - return new Promise((resolve, reject) => {
524 - // Wait a bit to see if the reload event is fired.
525 - setTimeout(function() {
526 - // Remove the listener in case the reload event wasn't fired.
527 - $(document).off('xwiki:actions:reload.maybe');
528 - if (reloadEventFired) {
529 - resolve(xwikiDocument);
530 - } else {
531 - reject(xwikiDocument);
532 - }
533 - }, 0);
534 - });
535 - };
536 -
537 537   var reload = function(xwikiDocument) {
538 538   // Leave the edit mode and then re-enter.
539 539   return view(xwikiDocument, true).then(editInPlace);
... ... @@ -540,33 +540,21 @@
540 540   };
541 541  
542 542   var view = function(xwikiDocument, reload) {
543 - var viewContent = $('#xwikicontent');
544 544   // Destroy the editors before returning to view.
545 - viewContent.trigger('xwiki:actions:view', {document: xwikiDocument});
428 + $(document).trigger('xwiki:actions:view', {document: xwikiDocument});
546 546   $('#document-title h1').html(xwikiDocument.renderedTitle);
547 - viewContent.html(xwikiDocument.renderedContent);
430 + $('#xwikicontent').html(xwikiDocument.renderedContent);
548 548   if (!reload) {
549 549   // If the user has canceled the edit then the restored page content may include the section edit links. Show them
550 550   // in case they were hidden.
551 - viewContent.children(':header').children('.edit_section').removeClass('hidden');
434 + $('#xwikicontent').children(':header').children('.edit_section').removeClass('hidden');
552 552   // Let others know that the DOM has been updated, in order to enhance it.
553 - $(document).trigger('xwiki:dom:updated', {'elements': viewContent.toArray()});
436 + $(document).trigger('xwiki:dom:updated', {'elements': $('#xwikicontent').toArray()});
554 554   }
555 - // Remove the action events scope.
556 - viewContent.closest('.form').removeClass('form');
557 - // Update the URL.
558 - if (window.location.hash === '#edit' || window.location.hash === '#translate') {
559 - history.replaceState(null, null, '#');
560 - }
561 - return Promise.resolve(xwikiDocument);
438 + return $.Deferred().resolve(xwikiDocument).promise();
562 562   };
563 563  
564 564   var edit = function(xwikiDocument) {
565 - // By adding the 'form' CSS class we set the scope of the action events (e.g. xwiki:actions:beforeSave or
566 - // xwiki:actions:cancel). We need this because in view mode we can have multiple forms active on the page (e.g. one
567 - // for editing the document content in place and one for editing the document syntax in-place) and we don't want
568 - // them to interfere (e.g. canceling one form shouldn't cancel the other forms).
569 - $('#xwikicontent').closest('.xcontent').addClass('form');
570 570   return initActionButtons(xwikiDocument).then(initTitleEditor).then(initContentEditor)
571 571   .then(startRealTimeEditingSession);
572 572   };
... ... @@ -573,7 +573,7 @@
573 573  
574 574   var initActionButtons = function(xwikiDocument) {
575 575   if (xwikiDocument) {
576 - initTranslateButton(xwikiDocument);
448 + maybeShowTranslateButton(xwikiDocument);
577 577   }
578 578   var editContent = $('#xwikicontent');
579 579   // We need the wrapper because #xwikicontent uses Bootstrap grid (col-xs-12) which is implemented with CSS float.
... ... @@ -583,90 +583,63 @@
583 583   var actionButtonsWrapper = editContent.nextAll('.sticky-buttons-wrapper');
584 584   if (actionButtonsWrapper.length === 0) {
585 585   actionButtonsWrapper = $('<div class="sticky-buttons-wrapper col-xs-12">' +
586 - '<div class="inplace-editing-buttons sticky-buttons"/></div>').insertAfter(editContent).toggle(!!xwikiDocument);
587 - var actionButtons = actionButtonsWrapper.children('.sticky-buttons')
588 - .data('xwikiDocument', xwikiDocument)
589 - // Expose the fake form if an extension needs to manipulate it.
590 - .data('fakeForm', fakeForm);
458 + '<div class="inplace-editing-buttons sticky-buttons"/></div>').insertAfter(editContent);
459 + var actionButtons = actionButtonsWrapper.children('.sticky-buttons').data('xwikiDocument', xwikiDocument)
460 + .toggle(!!xwikiDocument);
591 591   return loadActionButtons(actionButtons);
592 592   } else {
593 593   // If we're editing a page..
594 594   if (xwikiDocument) {
595 595   // ..then make sure the action buttons are displayed right away (don't wait for the user to scroll).
596 - actionButtonsWrapper.show().children('.sticky-buttons')
597 - .data('xwikiDocument', xwikiDocument)
598 - // Expose the fake form if an extension needs to manipulate it.
599 - .data('fakeForm', fakeForm)
600 - // but make sure the position of the action buttons is updated.
601 - .trigger('xwiki:dom:refresh');
466 + actionButtonsWrapper.children('.sticky-buttons').data('xwikiDocument', xwikiDocument).show();
602 602   // The action buttons are disabled on Save & View. We don't reload the page on Save & View and we reuse the
603 603   // action buttons so we need to re-enable them each time we enter the edit mode.
604 604   fakeForm.enable();
470 + $(document).trigger('xwiki:dom:refresh');
605 605   }
606 - return Promise.resolve(xwikiDocument);
472 + return $.Deferred().resolve(xwikiDocument).promise();
607 607   }
608 608   };
609 609  
610 - var createTranslation = function(xwikiDocument) {
611 - xwikiDocument.translate();
612 - $('#document-title-input').focus().select();
613 - // Let the user know that they are now editing the translation of this page in the current locale.
614 - $('#document-title-input').popover({
615 - content: l10n['edit.inplace.page.translate.messageAfter'],
616 - placement: 'bottom',
617 - trigger: 'manual'
618 - }).popover('show').one('blur', function() {
619 - // Hide the popover when the title input loses the focus.
620 - $(this).popover('hide');
621 - });
476 + var maybeShowTranslateButton = function(xwikiDocument) {
477 + var xwikiDocumentLocale = xwikiDocument.getRealLocale();
478 + var uiLocale = $('html').attr('lang');
479 + if (xwikiDocumentLocale && xwikiDocumentLocale !== uiLocale) {
480 + $('#tmTranslate').off('click.translate').on('click.translate', function(event) {
481 + event.preventDefault();
482 + $(this).addClass('hidden');
483 + xwikiDocument.language = uiLocale;
484 + // Update the document translation fields that are not 'shared' with the original document.
485 + xwikiDocument.isNew = true;
486 + delete xwikiDocument.version;
487 + delete xwikiDocument.majorVersion;
488 + delete xwikiDocument.minorVersion;
489 + $('#document-title-input').focus().select();
490 + var message = $jsontool.serialize($services.localization.render('edit.inplace.page.translation',
491 + ['__locale__']));
492 + new XWiki.widgets.Notification(
493 + message.replace('__locale__', uiLocale),
494 + 'info'
495 + );
496 + }).removeClass('hidden');
497 + var message = $jsontool.serialize($services.localization.render('edit.inplace.page.original', ['__locale__']));
498 + new XWiki.widgets.Notification(
499 + message.replace('__locale__', xwikiDocumentLocale),
500 + 'info'
501 + );
502 + }
622 622   };
623 623  
624 - var initTranslateButton = function(xwikiDocument) {
625 - // Initialize the translate button only if it's visible.
626 - const translateButton = $(config.translateButtonSelector).filter('[data-toggle="popover"]').filter(':visible');
627 - translateButton.off('click.translate').on('click.translate', function(event) {
628 - event.preventDefault();
629 - translateButton.parent().addClass('hidden');
630 - createTranslation(xwikiDocument);
631 - // Let the user know that they are editing the original version of the page and not the translation corresponding
632 - // to the current locale because there isn't one created yet.
633 - }).attr({
634 - // Backup the initial popover message to be able to restore it on view.
635 - 'data-content-view': translateButton.attr('data-content'),
636 - // Use a custom popover message dedicated to the edit action.
637 - 'data-content': l10n['edit.inplace.page.translate.messageBefore']
638 - }).popover('show')
639 - // Hide the popover on the next click. The user can still see the message by hovering the translate button.
640 - .closest('html').one('click', function() {
641 - translateButton.popover('hide');
642 - });
643 - };
644 -
645 645   var loadActionButtons = function(actionButtons) {
646 - $(document).on('xwiki:actions:view', '.xcontent.form', function(event, data) {
647 - // Blur the action buttons first to re-enable the "disabled in inputs" shortcut keys (e.g. the page edit
648 - // shortcut), then disable the action buttons in order to disable their shortcut keys while we're not editing
649 - // in-place (e.g. prevent the Save shortcut while the user is only viewing the page). Finally hide the action
650 - // buttons to have them ready for the next editing session (the user can save or cancel and then edit again
651 - // without reloading the page).
652 - actionButtons.find(':input').blur().prop('disabled', true).end().parent().hide();
653 - // Restore the Translate button if the locale of the viewed document doesn't match the current user interface
654 - // locale (because the viewed document doesn't have a translation in the current locale).
655 - var xwikiDocumentLocale = data.document.getRealLocale();
656 - var uiLocale = $('html').attr('lang');
657 - if (xwikiDocumentLocale && xwikiDocumentLocale !== uiLocale) {
658 - const translateButton = $(config.translateButtonSelector).filter('[data-toggle="popover"]');
659 - // Restore the translation button behavior for view action.
660 - translateButton.off('click.translate')
661 - // Restore the popover text for view action.
662 - .attr('data-content', translateButton.attr('data-content-view') || translateButton.attr('data-content'))
663 - // Restore the visibility.
664 - .parent().removeClass('hidden');
665 - }
506 + $(document).on('xwiki:actions:view', function() {
507 + // Hide the action buttons and disable the shortcut keys (by disabling the buttons).
508 + actionButtons.hide().find(':input').prop('disabled', true);
509 + // Hide the translate button because it can be used only in edit mode for the moment.
510 + $('#tmTranslate').addClass('hidden');
666 666   });
667 - return Promise.resolve($.get(XWiki.currentDocument.getURL('get'), {
512 + return $.get(XWiki.currentDocument.getURL('get'), {
668 668   xpage: 'editactions'
669 - })).then(html => {
514 + }).then(function(html) {
670 670   actionButtons.html(html);
671 671   // Fix the name of the Save & View action.
672 672   actionButtons.find('.btn-primary').first().attr('name', 'action_save');
... ... @@ -674,33 +674,24 @@
674 674   $('<input type="hidden" name="form_token" />').val(xcontext.form_token).appendTo(actionButtons);
675 675   // We need a place where actionButtons.js can add more hidden inputs.
676 676   actionButtons.append('<div class="hidden extra"/>');
677 - // Let the others know that the DOM has been updated, in order to enhance it.
678 - $(document).trigger('xwiki:dom:updated', {'elements': actionButtons.toArray()});
679 - return new Promise((resolve, reject) => {
680 - require(['xwiki-actionButtons', 'xwiki-diff', 'xwiki-autoSave'], function() {
681 - overrideEditActions();
682 - overrideAjaxSaveAndContinue();
683 - // Activate the auto-save feature passing our fake edit form. Note that autosave.js also creates an instance of
684 - // AutoSave but it doesn't do anything because it doesn't find a real edit form in the page. This is why we have
685 - // to create our own instance of AutoSave passing the right (fake) form.
686 - new XWiki.editors.AutoSave({form: fakeForm});
687 - var xwikiDocument = actionButtons.data('xwikiDocument');
688 - // Enable the action buttons (and their shortcut keys) only if we're editing a document.
689 - actionButtons.find(':input').prop('disabled', !xwikiDocument);
690 - resolve(xwikiDocument);
691 - });
522 + var deferred = $.Deferred();
523 + require(['actionButtons'], function() {
524 + overrideEditActions();
525 + overrideAjaxSaveAndContinue();
526 + var xwikiDocument = actionButtons.data('xwikiDocument');
527 + // Enable the action buttons (and their shortcut keys) only if we're editing a document.
528 + actionButtons.find(':input').prop('disabled', !xwikiDocument);
529 + deferred.resolve(xwikiDocument);
692 692   });
693 - }).catch(() => {
694 - new XWiki.widgets.Notification(l10n['edit.inplace.actionButtons.loadFailed'], 'error');
531 + return deferred.promise();
532 + }, function() {
533 + new XWiki.widgets.Notification(
534 + $jsontool.serialize($services.localization.render('edit.inplace.actionButtons.loadFailed')),
535 + 'error'
536 + );
695 695   });
696 696   };
697 697  
698 - function addToFormData(formData, inputs) {
699 - inputs.serializeArray().forEach(function(entry) {
700 - formData.append(entry.name, entry.value);
701 - });
702 - }
703 -
704 704   // actionButtons.js expects a form so we use a fake form. Refactoring actionButtons.js is too dangerous ATM.
705 705   var fakeForm = {
706 706   action: XWiki.currentDocument.getURL('save'),
... ... @@ -723,41 +723,29 @@
723 723   insert: function(element) {
724 724   this._getActionButtons().find('.hidden.extra').append(element);
725 725   },
726 - // Note that this method only works with single argument.
727 - append: function(element) {
728 - this.insert(element);
729 - },
730 - down: function(selector) {
731 - return this._getActionButtons().find(selector)[0];
732 - },
733 733   serialize: function() {
734 - var formData = new FormData();
735 - addToFormData(formData, this._getActionButtons().find(':input'));
736 - // retrieve all input fields listing the temporary uploaded files.
563 + var extra = this._getActionButtons().find(':input').serializeArray().reduce(function(extra, entry) {
564 + var value = extra[entry.name] || [];
565 + value.push(entry.value);
566 + extra[entry.name] = value;
567 + return extra;
568 + }, {});
737 737   var xwikiDocument = this._getActionButtons().data('xwikiDocument');
738 - formData.set('title', xwikiDocument.rawTitle);
739 - formData.set('language', xwikiDocument.getRealLocale());
740 - formData.set('isNew', xwikiDocument.isNew);
741 -
742 - if (xwikiDocument.content !== xwikiDocument.originalDocument.content) {
743 - // Submit the raw (source) content. No syntax conversion is needed in this case.
744 - formData.set('content', xwikiDocument.content);
745 - } else {
746 - // Submit the rendered content (HTML), but make sure it is converted to the document syntax on the server.
747 - formData.set('content', xwikiDocument.renderedContent);
748 - formData.set('RequiresHTMLConversion', 'content');
749 - formData.set('content_syntax', xwikiDocument.syntax);
750 - }
751 - // Add the temporary uploaded files to the form.
752 - addToFormData(formData, $('#xwikicontent').nextAll('input[name="uploadedFiles"]'));
753 -
570 + var formData = {
571 + title: xwikiDocument.title,
572 + content: xwikiDocument.renderedContent,
573 + RequiresHTMLConversion: 'content',
574 + content_syntax: xwikiDocument.syntax,
575 + language: xwikiDocument.getRealLocale(),
576 + isNew: xwikiDocument.isNew
577 + };
754 754   // Check for merge conflicts only if the document is not new and we know the current version.
755 755   if (!xwikiDocument.isNew && xwikiDocument.version) {
756 - formData.set('previousVersion', xwikiDocument.version);
757 - formData.set('editingVersionDate', new Date(xwikiDocument.modified).getTime());
580 + formData.previousVersion = xwikiDocument.version;
581 + // It would have been easier to send the timestamp but that's what the Save action expects.
582 + formData.editingVersionDate = new Date(xwikiDocument.modified).toISOString();
758 758   }
759 - // Note: if you refactor, please make sure that actionsButtons inputs have the lowest priority.
760 - return formData;
584 + return $.extend(formData, extra);
761 761   }
762 762   };
763 763  
... ... @@ -779,21 +779,17 @@
779 779   var originalAjaxSaveAndContinue = $.extend({}, XWiki.actionButtons.AjaxSaveAndContinue.prototype);
780 780   $.extend(XWiki.actionButtons.AjaxSaveAndContinue.prototype, {
781 781   reloadEditor: function() {
782 - var actionButtons = $('.inplace-editing-buttons');
783 - if (actionButtons.is(':visible')) {
784 - actionButtons.trigger('xwiki:actions:reload');
606 + if ($('.inplace-editing-buttons').is(':visible')) {
607 + $(document).trigger('xwiki:actions:reload');
785 785   } else {
786 786   return originalAjaxSaveAndContinue.reloadEditor.apply(this, arguments);
787 787   }
788 788   },
789 - maybeRedirect: function(continueEditing) {
612 + maybeRedirect: function() {
790 790   if ($('.inplace-editing-buttons').is(':visible')) {
791 - // Overwrite the default behavior so that we don't redirect when leaving the edit mode because we're already
792 - // in view mode. We still need to report a redirect (return true) if we don't continue editing, so that
793 - // actionButtons.js behaves as if a redirect was done.
794 - return !continueEditing;
614 + // Never redirect when leaving the edit mode because we're already in view mode.
615 + return false;
795 795   } else {
796 - // Fallback on the default behavior if the in-place editing buttons are hidden.
797 797   return originalAjaxSaveAndContinue.maybeRedirect.apply(this, arguments);
798 798   }
799 799   }
... ... @@ -802,8 +802,8 @@
802 802  
803 803   var initTitleEditor = function(xwikiDocument) {
804 804   var label = $('<label for="document-title-input" class="sr-only"/>')
805 - .text(l10n['core.editors.content.titleField.label']);
806 - var input = $('<input type="text" id="document-title-input"/>').val(xwikiDocument.rawTitle);
625 + .text($jsontool.serialize($services.localization.render('core.editors.content.titleField.label')));
626 + var input = $('<input type="text" id="document-title-input"/>').val(xwikiDocument.title);
807 807   var placeholder = xwikiDocument.documentReference.name;
808 808   if (placeholder === 'WebHome') {
809 809   placeholder = xwikiDocument.documentReference.parent.name;
... ... @@ -810,13 +810,13 @@
810 810   }
811 811   input.attr('placeholder', placeholder);
812 812   $('#document-title h1').addClass('editable').empty().append([label, input]);
813 - $(document).on('xwiki:actions:beforeSave.titleEditor', '.xcontent.form', function(event) {
814 - xwikiDocument.rawTitle = input.val();
633 + $(document).on('xwiki:actions:beforeSave.titleEditor', function(event) {
634 + xwikiDocument.title = input.val();
815 815   });
816 - $(document).one('xwiki:actions:view', '.xcontent.form', function(event, data) {
636 + $(document).one('xwiki:actions:view', function(event, data) {
817 817   // Destroy the title editor.
818 818   $(document).off('xwiki:actions:beforeSave.titleEditor');
819 - $('#document-title h1').removeClass('editable').text(xwikiDocument.rawTitle);
639 + $('#document-title h1').removeClass('editable').text(xwikiDocument.title);
820 820   });
821 821   return xwikiDocument;
822 822   };
... ... @@ -833,25 +833,24 @@
833 833   // Keep the focus while the edit content is being prepared.
834 834   viewContent.focus();
835 835   }
836 - var data = $.extend({}, config, {
656 + var data = {
657 + contentType: 'org.xwiki.rendering.syntax.SyntaxContent',
658 + editMode: 'wysiwyg',
837 837   document: xwikiDocument,
838 838   // The content editor is loaded on demand, asynchronously.
839 839   deferred: $.Deferred()
840 - });
841 - editContent.trigger('xwiki:actions:edit', data);
842 - return data.deferred.promise().then(() => {
662 + };
663 + var editContentPromise = data.deferred.promise();
664 + editContentPromise.done(function() {
843 843   editContent.show();
844 844   viewContent.remove();
845 845   if (withFocus) {
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);
668 + // Restore the focus when the edit content is ready but make sure we don't scroll the page.
669 + editContent[0].focus({preventScroll: true});
852 852   }
853 - return xwikiDocument;
854 854   });
672 + editContent.trigger('xwiki:actions:edit', data);
673 + return editContentPromise;
855 855   };
856 856  
857 857   var startRealTimeEditingSession = function(xwikiDocument) {
... ... @@ -870,21 +870,16 @@
870 870   };
871 871  
872 872   return {
873 - preload,
874 - editPage,
875 - editSection,
876 - translatePage
692 + preload: preload,
693 + editPage: editPage,
694 + editSection: editSection
877 877   };
878 878  });
879 879  
880 880  require(['jquery'], function($) {
881 - // We can edit in-place only if the #xwikicontent element is present.
882 - if (!$('#xwikicontent').length) {
883 - return;
884 - }
699 + var inplaceEditingConfig = $('div[data-inplace-editing-config]').data('inplaceEditingConfig') || {};
700 + var wysiwygEditorModule = 'xwiki-' + inplaceEditingConfig.wysiwygEditor + '-inline';
885 885  
886 - var wysiwygEditorModule = 'xwiki-' + config.wysiwygEditor + '-inline';
887 -
888 888   var preloadEditor = function() {
889 889   require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
890 890   editInPlace.preload();
... ... @@ -901,186 +901,44 @@
901 901   });
902 902   }
903 903  
904 - var onInPlaceEditing = function(event) {
718 + var editButton = $('#tmEdit > a');
719 + editButton.on('click.inPlaceEditing', function(event) {
720 + event.preventDefault();
905 905   // Make sure the user doesn't try to re-activate the edit mode while we are in edit mode.
906 - if (editButton.hasClass('disabled')) {
907 - return;
908 - }
909 - // Disable the edit buttons and hide the section edit links.
910 - editButton.add(translateButton).addClass('disabled');
911 - $('#xwikicontent').children(':header').children('.edit_section').addClass('hidden');
722 + editButton.addClass('disabled');
723 + // Load the code needed to edit in place only when the edit button is clicked.
724 + require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
725 + editInPlace.editPage().always(function() {
726 + editButton.removeClass('disabled');
727 + });
728 + // Fallback on the standalone edit mode if we fail to load the required modules.
729 + }, $.proxy(disableInPlaceEditing, event.target));
730 + });
731 +
732 + // Section in-place editing.
733 + $('#xwikicontent').on('click.inPlaceEditing', '> :header > a.edit_section:not(.disabled)', function(event) {
912 912   event.preventDefault();
913 - const handler = event.data;
914 - const data = handler.beforeEdit?.(event);
735 + // Make sure the user doesn't try to re-activate the edit mode while we are in edit mode.
736 + editButton.addClass('disabled');
737 + // Hide the section editing links and focus the content right away. We could have replaced the section editing icon
738 + // with a loading animation / spinner but giving instant visual feedback about what is going to happen is perceived
739 + // better by the users (it feels faster).
740 + $('#xwikicontent').attr('tabindex', '0').focus().children(':header').children('.edit_section').addClass('hidden');
741 + var heading = $(event.target).closest(':header');
915 915   // Load the code needed to edit in place only when the edit button is clicked.
916 916   require(['editInPlace', wysiwygEditorModule], function(editInPlace) {
917 - // Re-enable the translate button because it can be used while editing to create the missing translation.
918 - translateButton.removeClass('disabled');
919 - handler.edit(editInPlace, data).finally(function() {
920 - // Restore only the edit button at the end because:
921 - // * the translate button is restored (if needed) by the editInPlace module
922 - // * the section edit links are restored when the document is rendered for view
744 + editInPlace.editSection(heading.attr('id')).always(function() {
923 923   editButton.removeClass('disabled');
924 924   });
925 925   // Fallback on the standalone edit mode if we fail to load the required modules.
926 - }, disableInPlaceEditing.bind(event.target));
927 - };
748 + }, $.proxy(disableInPlaceEditing, event.target));
749 + });
928 928  
929 929   var disableInPlaceEditing = function() {
930 - editButton.add(translateButton).off('click.inPlaceEditing').removeClass('disabled');
752 + editButton.off('click.inPlaceEditing').removeClass('disabled');
931 931   $('#xwikicontent').off('click.inPlaceEditing').removeAttr('tabindex').children(':header').children('.edit_section')
932 932   .removeClass('hidden');
933 933   // Fallback on the standalone edit mode.
934 934   $(this).click();
935 935   };
936 -
937 - var editButton = $(config.editButtonSelector);
938 - editButton.on('click.inPlaceEditing', {
939 - beforeEdit: function() {
940 - history.replaceState(null, null, '#edit');
941 - },
942 - edit: function(editInPlace) {
943 - return editInPlace.editPage();
944 - }
945 - }, onInPlaceEditing).attr('data-editor', 'inplace');
946 -
947 - var translateButton = $(config.translateButtonSelector);
948 - translateButton.on('click.inPlaceEditing', {
949 - beforeEdit: function() {
950 - history.replaceState(null, null, '#translate');
951 - translateButton.parent().addClass('hidden');
952 - },
953 - edit: function(editInPlace) {
954 - return editInPlace.translatePage();
955 - }
956 - }, onInPlaceEditing);
957 -
958 - // Section in-place editing.
959 - $('#xwikicontent').on('click.inPlaceEditing', '> :header > a.edit_section:not(.disabled)', {
960 - beforeEdit: function(event) {
961 - // Focus the content right away to give the user instant visual feedback about what is going to happen.
962 - $('#xwikicontent').attr('tabindex', '0').focus();
963 - // Return the id of the edited section.
964 - return $(event.target).closest(':header').attr('id');
965 - },
966 - edit: function(editInPlace, sectionId) {
967 - return editInPlace.editSection(sectionId);
968 - }
969 - }, onInPlaceEditing);
970 -
971 - if (window.location.hash === '#edit') {
972 - editButton.click();
973 - } else if (window.location.hash === '#translate') {
974 - translateButton.click();
975 - }
976 976  });
977 -
978 -require(['jquery'], function($) {
979 - // Backup the document title before each editing session in order to catch changes.
980 - var previousPlainTitle;
981 - $('#xwikicontent').on('xwiki:actions:edit', function(event, data) {
982 - previousPlainTitle = data.document.getPlainTitle();
983 - });
984 -
985 - // Update the UI after each editing session.
986 - $(document).on('xwiki:actions:view', function(event, data) {
987 - var xwikiDocument = data.document;
988 - updateDocAuthorAndDate(xwikiDocument);
989 - updateDocExtraTabs(xwikiDocument);
990 - updateDrawer(xwikiDocument);
991 - updateContentMenu(xwikiDocument);
992 - if (xwikiDocument.getPlainTitle() !== previousPlainTitle) {
993 - updateDocTrees(xwikiDocument);
994 - updateLinks(xwikiDocument);
995 - }
996 - });
997 -
998 - var updateDocAuthorAndDate = function(xwikiDocument) {
999 - var urlWithSelector = xwikiDocument.getURL('get', 'xpage=contentheader') + ' .xdocLastModification';
1000 - $('.xdocLastModification').load(urlWithSelector, function() {
1001 - // load() replaces the content of the specified container but we want to replace the container itself. We can't do
1002 - // this from the selector, e.g. by using '.xdocLastModification > *' because we lose the text nodes.
1003 - $(this).children().unwrap();
1004 - });
1005 - };
1006 -
1007 - var updateDocExtraTabs = function(xwikiDocument) {
1008 - // Reload the selected tab and force the reload of the hidden tabs next time they are selected.
1009 - $('#docextrapanes').children().addClass('empty').empty();
1010 - var selectedTab = $('#docExtraTabs .active[data-template]');
1011 - if (selectedTab.length) {
1012 - var docExtraId = selectedTab.attr('id');
1013 - docExtraId = docExtraId.substring(0, docExtraId.length - 'tab'.length);
1014 - XWiki.displayDocExtra(docExtraId, selectedTab.data('template'), false);
1015 - }
1016 - };
1017 -
1018 - // Update the document trees (e.g. breadcrumb, navigation) if they have nodes that correspond to the edited document.
1019 - // Note that we want to update the internal tree data not just the link label. This is especially useful if we're
1020 - // going to implement refactoring operations (rename) in the document tree.
1021 - var updateDocTrees = function(xwikiDocument) {
1022 - var plainTitle = xwikiDocument.getPlainTitle();
1023 - $('.jstree-xwiki').each(function() {
1024 - $(this).jstree?.(true)?.set_text?.('document:' + xwikiDocument.id, plainTitle);
1025 - });
1026 - };
1027 -
1028 - // Update the links that target the edited document and whose label matches the document title. Note that this can
1029 - // update links whose label was not generated dynamically (e.g. with server side scripting) based on the document
1030 - // title. For instance there could be links with hard-coded labels or with labels generated using a translatin key
1031 - // (like in the Applications panel). For simplicity we assume that if the link matches the document URL and its
1032 - // previous title then it needs to be updated, but this happens only at the UI level.
1033 - var updateLinks = function(xwikiDocument) {
1034 - var docURL = xwikiDocument.getURL();
1035 - var newPlainTitle = xwikiDocument.getPlainTitle();
1036 - // Exclude the links from the document content.
1037 - // Update the links that contain only text (no child elements) otherwise we can lose UI elements (e.g. icons).
1038 - $('a').not('#xwikicontent a').not(':has(*)').filter(function() {
1039 - var linkURL = $(this).attr('href')?.split(/[?#]/, 1)[0];
1040 - return linkURL === docURL && $(this).text() === previousPlainTitle;
1041 - }).text(newPlainTitle);
1042 - };
1043 -
1044 - // Update the list of available document translations in the drawer menu. This is needed for instance when a new
1045 - // translation is created using the in-place editor.
1046 - var updateDrawer = function(xwikiDocument) {
1047 - var languageMenu = $('#tmLanguages_menu');
1048 - var locale = xwikiDocument.getRealLocale();
1049 - // Look for the language query string parameter, either inside or at the end.
1050 - var localeSelector = 'a[href*="language=' + locale + '&"], a[href$="language=' + locale + '"]';
1051 - // Check if the language menu is present (multilingual is on) and the document locale is not listed.
1052 - if (languageMenu.length && !languageMenu.find(localeSelector).length) {
1053 - // If we get here then it means a new document translation was created and it needs to be listed in the drawer.
1054 - $('<div/>').load(xwikiDocument.getURL('get', $.param({
1055 - 'xpage': 'xpart',
1056 - 'vm': 'drawer.vm',
1057 - 'useLayoutVars': true
1058 - // Pass the query string from the current URL so that it gets included in the translation URL.
1059 - // XWIKI-11314: Changing the current language from the UI does not preserve the query string of the current URL
1060 - })) + '&' + location.search.substring(1) + ' #tmLanguages_menu', function() {
1061 - $(this).find('a').each(function() {
1062 - // Clean the query string.
1063 - $(this).attr('href', $(this).attr('href').replace(/&?(xpage=xpart|vm=drawer\.vm|useLayoutVars=true)/g, '')
1064 - .replace('?&', '?'));
1065 - });
1066 - languageMenu.replaceWith($(this).children());
1067 - });
1068 - }
1069 - };
1070 -
1071 - // Update the links from the content menu to point to the real document locale. This is needed especially when a new
1072 - // document translation is created in-place.
1073 - var updateContentMenu = function(xwikiDocument) {
1074 - var realLocale = xwikiDocument.getRealLocale();
1075 - var defaultLocale = xwikiDocument.getDefaultLocale();
1076 - if (realLocale != defaultLocale) {
1077 - var defaultLocaleRegex = new RegExp('(\\blanguage=)' + defaultLocale + '($|&|#)');
1078 - $('#contentmenu a[href*="language=' + defaultLocale + '"]').each(function() {
1079 - $(this).attr('href', $(this).attr('href').replace(defaultLocaleRegex, '$1' + realLocale + '$2'));
1080 - });
1081 - }
1082 - };
1083 -});
1084 -
1085 -})(JSON.parse(document.querySelector('[data-inplace-editing-config]')?.getAttribute('data-inplace-editing-config')) ||
1086 - {});
Parse content
... ... @@ -1,1 +1,1 @@
1 -No
1 +Yes
XWiki.StyleSheetExtension[0]
Code
... ... @@ -6,7 +6,6 @@
6 6   margin-bottom: @line-height-computed / 4;
7 7  }
8 8  
9 -@document-title-input-padding-vertical: @line-height-computed / 4 - 1;
10 10  input#document-title-input {
11 11   /* Preserve the heading styles. */
12 12   border: 1px solid transparent;
... ... @@ -13,10 +13,9 @@
13 13   box-shadow: none;
14 14   color: inherit;
15 15   font-size: inherit;
16 - /* It seems it's not enough to set the line height for the text input. We also need to set its height. */
17 - height: @font-size-document-title * @headings-line-height + 2 * (1 + @document-title-input-padding-vertical);
15 + height: auto;
18 18   line-height: @headings-line-height;
19 - padding: @document-title-input-padding-vertical (ceil(@grid-gutter-width / 2) - 1);
17 + padding: (@line-height-computed / 4 - 1) (ceil(@grid-gutter-width / 2) - 1);
20 20   width: 100%;
21 21  }
22 22  
... ... @@ -49,8 +49,3 @@
49 49  #xwikicontent {
50 50   padding-top: @line-height-computed * 0.75;
51 51  }
52 -
53 -.sticky-buttons-wrapper {
54 - /* Leave some space for the bottom box shadow of the editing area. */
55 - margin-top: 7px;
56 -}
XWiki.UIExtensionClass[0]
Executed Content
... ... @@ -1,66 +9,12 @@
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 -
9 9  {{velocity}}
10 10  {{html clean="false"}}
11 -#if ($services.edit.document.inPlaceEditingEnabled() && $hasEdit && $xcontext.action == 'view' && !$doc.isNew())
3 +#if ($xcontext.action == 'view' && !$doc.isNew())
12 12   ## We support in-place editing only for the WYSIWYG edit mode ATM.
13 13   #getDefaultDocumentEditor($defaultEditMode)
14 14   #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).
44 44   #set ($inplaceEditingConfig = {
45 - 'contentType': 'org.xwiki.rendering.syntax.SyntaxContent',
46 46   'editMode': $defaultEditMode,
47 - 'wysiwygEditor': $services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id,
48 - 'editButtonSelector': '#tmEdit > a',
49 - 'translateButtonSelector': '#tmTranslate > a',
50 - 'enableSourceMode': true,
51 - 'paths': {
52 - 'js': {
53 - 'xwiki-actionButtons': "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.js' $jsParams)",
54 - 'xwiki-autoSave': "#getSkinFileWithParams('js/xwiki/editors/autosave.js' $jsParams)",
55 - 'xwiki-diff': $xwiki.getSkinFile('uicomponents/viewers/diff.js')
56 - },
57 - 'css': [
58 - "#getSkinFileWithParams('js/xwiki/actionbuttons/actionButtons.css' $cssParams)",
59 - "#getSkinFileWithParams('js/xwiki/editors/autosave.css' $cssParams)",
60 - "#getSkinFileWithParams('uicomponents/viewers/diff.css' $cssParams)"
61 - ]
62 - },
63 - 'l10n': $l10n
9 + 'wysiwygEditor': $services.edit.syntaxContent.defaultWysiwygEditor.descriptor.id
64 64   })
65 65   <div class="hidden" data-inplace-editing-config="$escapetool.xml($jsontool.serialize($inplaceEditingConfig))"></div>
66 66   ## 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,0 +1,1 @@
1 +No
Asynchronous rendering
... ... @@ -1,0 +1,1 @@
1 +No
Executed Content
... ... @@ -1,0 +1,22 @@
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 ($xwiki.isMultiLingual() && $tdoc.realLocale == $doc.realLocale && "$!doc.realLocale" != ''
9 + && $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,0 +1,1 @@
1 +org.xwiki.plaftorm.menu.content
Extension ID
... ... @@ -1,0 +1,1 @@
1 +org.xwiki.plaftorm.menu.content.translate
Extension Parameters
... ... @@ -1,0 +1,1 @@
1 +order=5000
Extension Scope
... ... @@ -1,0 +1,1 @@
1 +wiki