Changes for page InplaceEditing

Summary

• Page properties (2 modified, 0 added, 0 removed)
• Objects (2 modified, 0 added, 1 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.UIExtensionClass[0]
  • XWiki.UIExtensionClass[1]

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,27 +68,29 @@
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	};
76		- var thisXWikiDocument = this;
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		- );
82		- }).then(function(html) {
	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 => {
83	83	// Render succeeded.
84	84	var container = $('<div/>').html(html);
85		- return $.extend(thisXWikiDocument, {
	101	+ return $.extend(this, {
86	86	renderedTitle: container.find('#document-title h1').html(),
87	87	renderedContent: container.find('#xwikicontent').html()
88	88	});
89		- }, function() {
90		- // Render failed.
91		- return thisXWikiDocument;
	105	+ }).catch(() => {
	106	+ new XWiki.widgets.Notification(l10n['edit.inplace.page.renderFailed'], 'error');
	107	+ return Promise.reject(this);
92	92	});
93	93	},
94	94
...	...	@@ -98,20 +98,19 @@
98	98	* @return a promise that resolves to this document instance if the reload request succeeds
99	99	*/
100	100	reload: function() {
101		- var thisXWikiDocument = this;
102		- return $.getJSON(this.getRestURL(), {
	117	+ return Promise.resolve($.getJSON(this.getRestURL(), {
103	103	// Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
104	104	timestamp: new Date().getTime()
105		- }).then(function(newXWikiDocument) {
	120	+ })).then(newXWikiDocument => {
106	106	// Reload succeeded.
107	107	// Resolve the document reference.
108		- thisXWikiDocument.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
	123	+ this.documentReference = XWiki.Model.resolve(newXWikiDocument.id, XWiki.EntityType.DOCUMENT);
109	109	// We were able to load the document so it's not new.
110		- thisXWikiDocument.isNew = false;
111		- return $.extend(thisXWikiDocument, newXWikiDocument);
112		- }, function() {
	125	+ this.isNew = false;
	126	+ return $.extend(this, newXWikiDocument);
	127	+ }).catch(() => {
113	113	// Reload failed.
114		- return thisXWikiDocument;
	129	+ return Promise.reject(this);
115	115	});
116	116	},
117	117
...	...	@@ -122,9 +122,8 @@
122	122	* @return a promise that resolves to this document instance if the lock request succeeds
123	123	*/
124	124	lock: function(action, force) {
125		- var thisXWikiDocument = this;
126	126	action = action || 'edit';
127		- return $.getJSON(this.getURL('get'), {
	141	+ return Promise.resolve($.getJSON(this.getURL('get'), {
128	128	sheet: 'XWiki.InplaceEditing',
129	129	action: 'lock',
130	130	lockAction: action,
...	...	@@ -133,20 +133,20 @@
133	133	outputSyntax: 'plain',
134	134	// Make sure the response is not retrieved from cache (IE11 doesn't obey the caching HTTP headers).
135	135	timestamp: new Date().getTime()
136		- }).then(function() {
	150	+ })).then(() => {
137	137	// Lock succeeded.
138		- thisXWikiDocument.locked = action;
139		- return thisXWikiDocument;
140		- }, function(response) {
	152	+ this.locked = action;
	153	+ return this;
	154	+ }).catch(response => {
141	141	// Lock failed.
142		- delete thisXWikiDocument.locked;
	156	+ delete this.locked;
143	143	// Check if the user can force the lock.
144	144	var lockConfirmation = response.responseJSON;
145	145	if (response.status === 423 && lockConfirmation) {
146	146	// The user can force the lock, but needs confirmation.
147		- thisXWikiDocument.lockConfirmation = lockConfirmation;
	161	+ this.lockConfirmation = lockConfirmation;
148	148	}
149		- return thisXWikiDocument;
	163	+ return Promise.reject(this);
150	150	});
151	151	},
152	152
...	...	@@ -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	}
	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	+ }
172	172	}
173	173	};
174	174	});
...	...	@@ -185,15 +185,12 @@
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)));
	221	+ paths.css.forEach(loadCSS);
192	192	return initActionButtons();
193	193	};
194	194
195	195	var loadCSS = function(url) {
196		- var link = $('<link>').attr({
	226	+ $('<link/>').attr({
197	197	type: 'text/css',
198	198	rel: 'stylesheet',
199	199	href: url
...	...	@@ -208,6 +208,12 @@
208	208	});
209	209	};
210	210
	241	+ var translatePage = function() {
	242	+ return editInPlace({
	243	+ afterEdit: createTranslation
	244	+ });
	245	+ };
	246	+
211	211	var editSection = function(sectionId) {
212	212	return editInPlace({
213	213	lockFailed: function() {
...	...	@@ -219,7 +219,7 @@
219	219	$('#xwikicontent').removeAttr('tabindex');
220	220	if (sectionId) {
221	221	// Select the heading of the specified section.
222		- $('#xwikicontent > #' + escapeSelector(sectionId)).each(function() {
	258	+ $('#xwikicontent > #' + $.escapeSelector(sectionId)).each(function() {
223	223	selectText(this);
224	224	});
225	225	}
...	...	@@ -227,22 +227,6 @@
227	227	});
228	228	};
229	229
230		- var escapeSelector = function(selector) {
231		- if (window.CSS && typeof CSS.escape === 'function') {
232		- // Not supported by Internet Explorer.
233		- return CSS.escape(selector);
234		- } else if (typeof $.escapeSelector === 'function') {
235		- // Added in jQuery 3.0
236		- return $.escapeSelector(selector);
237		- } else if (typeof selector === 'string') {
238		- // Simple implementation.
239		- // 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/
240		- return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
241		- } else {
242		- return selector;
243		- }
244		- };
245		-
246	246	// We preserve the document data between edits in order to be able to know which document translation should be edited
247	247	// (e.g. when the document translation is missing and we create it, the next edit session should target the created
248	248	// translation).
...	...	@@ -250,6 +250,11 @@
250	250	language: xcontext.locale
251	251	}, xwikiDocumentAPI);
252	252
	273	+ var setCurrentXWikiDocument = function(xwikiDocument) {
	274	+ currentXWikiDocument = xwikiDocument;
	275	+ return Promise.resolve(xwikiDocument);
	276	+ };
	277	+
253	253	var editInPlace = function(options) {
254	254	options = $.extend({
255	255	afterEdit: function() {},
...	...	@@ -257,11 +257,16 @@
257	257	}, options);
258	258	$('#xwikicontent').addClass('loading');
259	259	// Lock the document first.
260		- return lock(currentXWikiDocument).fail(options.lockFailed)
	285	+ return lock(currentXWikiDocument)
261	261	// Then load the document only if we managed to lock it.
262		- .then(load)
	287	+ .then(load, xwikiDocument => {
	288	+ options.lockFailed(xwikiDocument);
	289	+ return Promise.reject(xwikiDocument);
263	263	// Then load the editors only if we managed to load the document.
264		- .then(edit).done(options.afterEdit).always(function() {
	291	+ }).then(edit).then(xwikiDocument => {
	292	+ options.afterEdit(xwikiDocument);
	293	+ return xwikiDocument;
	294	+ }).finally(() => {
265	265	$('#xwikicontent').removeClass('loading');
266	266	// Then wait for an action (save, cancel, reload) only if the editors were loaded successfuly.
267	267	}).then(maybeSave)
...	...	@@ -268,31 +268,40 @@
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);
	301	+ .then(view, view)
	302	+ // Update the current document for the next edit session.
	303	+ .then(setCurrentXWikiDocument, setCurrentXWikiDocument);
272	272	};
273	273
274	274	var lock = function(xwikiDocument) {
275		- return xwikiDocument.lock().then(null, function(xwikiDocument) {
	307	+ return xwikiDocument.lock().catch(function(xwikiDocument) {
276	276	// If the document was already locked then we need to ask the user if they want to force the lock.
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));
	312	+ return maybeForceLock(confirmation).then(xwikiDocument.lock.bind(xwikiDocument, 'edit', true), function() {
	313	+ // Cancel the edit action.
	314	+ return Promise.reject(xwikiDocument);
	315	+ });
281	281	} else {
282		- new XWiki.widgets.Notification(
283		- $jsontool.serialize($services.localization.render('edit.inplace.page.lockFailed')),
284		- 'error'
285		- );
286		- return xwikiDocument;
	317	+ new XWiki.widgets.Notification(l10n['edit.inplace.page.lockFailed'], 'error');
	318	+ return Promise.reject(xwikiDocument);
287	287	}
288	288	});
289	289	};
290	290
291	291	var maybeForceLock = function(confirmation) {
292		- var deferred = $.Deferred();
	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	+ });
293	293	// Reuse the confirmation modal once it is created.
294	294	var modal = $('.force-edit-lock-modal');
295		- if (modal.length === 0) {
	334	+ if (!modal.length) {
296	296	modal = createForceLockModal();
297	297	}
298	298	// Update the deferred that needs to be resolved or rejected.
...	...	@@ -308,7 +308,7 @@
308	308	}
309	309	// Show the confirmation modal.
310	310	modal.modal('show');
311		- return deferred.promise();
	350	+ return promise;
312	312	};
313	313
314	314	var createForceLockModal = function() {
...	...	@@ -331,17 +331,17 @@
331	331	'</div>',
332	332	'</div>'
333	333	].join(''));
334		- modal.find('.close').attr('aria-label', $jsontool.serialize($services.localization.render('edit.inplace.close')));
335		- modal.find('.modal-footer .btn-warning').click(function() {
	373	+ modal.find('.close').attr('aria-label', l10n['edit.inplace.close']);
	374	+ modal.find('.modal-footer .btn-warning').on('click', function() {
336	336	// The user has confirmed they want to force the lock.
337	337	modal.data('deferred').resolve();
338	338	modal.modal('hide');
339	339	});
340	340	modal.on('hide.bs.modal', function() {
341		- // If the lock promise is not yet resolved when the modal is closing then it means the modal was canceled,
	380	+ // If the lock promise is not yet settled when the modal is closing then it means the modal was canceled,
342	342	// i.e. the user doesn't want to force the lock.
343	343	var deferred = modal.data('deferred');
344		- if (deferred.state() === 'pending') {
	383	+ if (!deferred.settled) {
345	345	deferred.reject();
346	346	}
347	347	});
...	...	@@ -349,18 +349,19 @@
349	349	};
350	350
351	351	var load = function(xwikiDocument) {
352		- return xwikiDocument.reload().done(function(xwikiDocument) {
	391	+ return xwikiDocument.reload().then(xwikiDocument => {
353	353	// Clone the current document version and keep a reference to it in order to be able to restore it on cancel.
354	354	xwikiDocument.originalDocument = $.extend(true, {
355	355	renderedTitle: $('#document-title h1').html(),
356	356	renderedContent: $('#xwikicontent').html()
357	357	}, xwikiDocument);
358		- }).fail(function() {
359		- new XWiki.widgets.Notification($jsontool.serialize($services.localization.render('edit.inplace.page.loadFailed')),
360		- 'error');
	397	+ return xwikiDocument;
	398	+ }).catch(xwikiDocument => {
	399	+ new XWiki.widgets.Notification(l10n['edit.inplace.page.loadFailed'], 'error');
	400	+ return Promise.reject(xwikiDocument);
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		- }).then($.proxy(render, null, false));
	403	+ }).then(render.bind(null, false));
364	364	};
365	365
366	366	/**
...	...	@@ -373,7 +373,7 @@
373	373	};
374	374
375	375	var maybeSave = function(xwikiDocument) {
376		- return waitForAction(xwikiDocument).then(function(action) {
	416	+ return waitForAction(xwikiDocument).then(action => {
377	377	switch(action.name) {
378	378	case 'save': return save({
379	379	document: action.document,
...	...	@@ -386,29 +386,29 @@
386	386	};
387	387
388	388	var waitForAction = function(xwikiDocument) {
389		- var deferred = $.Deferred();
390		- // We wait for the first save, reload or cancel event, whichever is triggered first. Note that the event listeners
391		- // that are not executed first will remain registered but that doesn't cause any problems because the state of a
392		- // deferred object (promise) cannot change once it was resolved. So the first event that fires will resolve the
393		- // promise and the remaining events won't be able to change that. The remaining event listeners could be called
394		- // later but they won't have any effect on the deferred object.
395		- $(document).one([
396		- 'xwiki:actions:save',
397		- 'xwiki:actions:reload',
398		- 'xwiki:actions:cancel',
399		- ].join(' '), function(event, data) {
400		- deferred.resolve({
401		- name: event.type.substring('xwiki:actions:'.length),
402		- document: xwikiDocument,
403		- data: data
	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	+ });
404	404	});
405	405	});
406		- return deferred.promise();
407	407	};
408	408
409	409	var save = function(data) {
410	410	// Push the changes to the server.
411		- return push(data.document).then(function(xwikiDocument) {
	451	+ return push(data.document).then(xwikiDocument => {
412	412	// Save succeeded.
413	413	return shouldReload(xwikiDocument).then(
414	414	// The document was saved with merge and thus if we want to continue eding we need to reload the editor (because
...	...	@@ -415,7 +415,7 @@
415	415	// its content doesn't match the saved content).
416	416	reload,
417	417	// No need to reload the editor because either the action was Save & View or there was no merge on save.
418		- $.proxy(maybeContinueEditing, null, data['continue'])
	458	+ maybeContinueEditing.bind(null, data['continue'])
419	419	);
420	420	// Save failed. Continue editing because we may have unsaved content.
421	421	}, maybeSave);
...	...	@@ -423,15 +423,15 @@
423	423
424	424	var push = function(xwikiDocument) {
425	425	// Let actionButtons.js do the push. We just catch the result.
426		- var deferred = $.Deferred();
427		- // We wait for the save request to either succeed or fail. Note that one of the event listeners will remain
428		- // registered but that doesn't cause any problems because the state of a deferred object (promise) cannot change
429		- // once it was resolved or rejected. So the first event that fires will resolve/reject the promise and the remaining
430		- // event won't be able to change that. The remaining event listener could be called later but it won't have any
431		- // effect.
432		- $(document).one('xwiki:document:saved', $.proxy(deferred, 'resolve', xwikiDocument));
433		- $(document).one('xwiki:document:saveFailed', $.proxy(deferred, 'reject', xwikiDocument));
434		- return deferred.promise();
	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	+ });
435	435	};
436	436
437	437	var maybeContinueEditing = function(continueEditing, xwikiDocument) {
...	...	@@ -452,9 +452,9 @@
452	452
453	453	// Reload the document JSON data (to have the new version) and render the document for view. We need the view HTML
454	454	// both if we stop editing now and if we continue but cancel the edit later.
455		- return xwikiDocument.reload().then($.proxy(render, null, true)).then(
456		- $.proxy(afterReloadAndRender, null, /* success: */ true),
457		- $.proxy(afterReloadAndRender, null, /* success: */ false)
	495	+ return xwikiDocument.reload().then(render.bind(null, true)).then(
	496	+ afterReloadAndRender.bind(null, /* success: */ true),
	497	+ afterReloadAndRender.bind(null, /* success: */ false)
458	458	);
459	459	};
460	460
...	...	@@ -473,25 +473,25 @@
473	473	};
474	474
475	475	// Make sure we unlock the document when the user navigates to another page.
476		- $(window).on('unload pagehide', $.proxy(unlock, null, currentXWikiDocument));
	516	+ $(window).on('unload pagehide', unlock.bind(null, currentXWikiDocument));
477	477
478	478	var shouldReload = function(xwikiDocument) {
479	479	var reloadEventFired = false;
480		- $(document).one('xwiki:actions:reload.maybe', function() {
	520	+ $(document).one('xwiki:actions:reload.maybe', '.xcontent.form', function() {
481	481	reloadEventFired = true;
482	482	});
483		- var deferred = $.Deferred();
484		- // Wait a bit to see if the reload event is fired.
485		- setTimeout(function() {
486		- // Remove the listener in case the reload event wasn't fired.
487		- $(document).off('xwiki:actions:reload.maybe');
488		- if (reloadEventFired) {
489		- deferred.resolve(xwikiDocument);
490		- } else {
491		- deferred.reject(xwikiDocument);
492		- }
493		- }, 0);
494		- return deferred.promise();
	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	+ });
495	495	};
496	496
497	497	var reload = function(xwikiDocument) {
...	...	@@ -500,21 +500,33 @@
500	500	};
501	501
502	502	var view = function(xwikiDocument, reload) {
	543	+ var viewContent = $('#xwikicontent');
503	503	// Destroy the editors before returning to view.
504		- $(document).trigger('xwiki:actions:view', {document: xwikiDocument});
	545	+ viewContent.trigger('xwiki:actions:view', {document: xwikiDocument});
505	505	$('#document-title h1').html(xwikiDocument.renderedTitle);
506		- $('#xwikicontent').html(xwikiDocument.renderedContent);
	547	+ 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');
	551	+ 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()});
	553	+ $(document).trigger('xwiki:dom:updated', {'elements': viewContent.toArray()});
513	513	}
514		- return $.Deferred().resolve(xwikiDocument).promise();
	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);
515	515	};
516	516
517	517	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');
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);
	576	+ 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,67 +531,90 @@
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);
	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);
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();
	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');
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		- return $.Deferred().resolve(xwikiDocument).promise();
	606	+ return Promise.resolve(xwikiDocument);
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		- }
	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	+ });
579	579	};
580	580
	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	+
581	581	var loadActionButtons = function(actionButtons) {
582		- $(document).on('xwiki:actions:view', function() {
	646	+ $(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');
	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	+ }
591	591	});
592		- return $.get(XWiki.currentDocument.getURL('get'), {
	667	+ return Promise.resolve($.get(XWiki.currentDocument.getURL('get'), {
593	593	xpage: 'editactions'
594		- }).then(function(html) {
	669	+ })).then(html => {
595	595	actionButtons.html(html);
596	596	// Fix the name of the Save & View action.
597	597	actionButtons.find('.btn-primary').first().attr('name', 'action_save');
...	...	@@ -599,28 +599,33 @@
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"/>');
602		- var deferred = $.Deferred();
603		- require(['actionButtons', 'xwiki-diff', 'autoSave'], function() {
604		- overrideEditActions();
605		- overrideAjaxSaveAndContinue();
606		- // Activate the auto-save feature passing our fake edit form. Note that autosave.js also creates an instance of
607		- // AutoSave but it doesn't do anything because it doesn't find a real edit form in the page. This is why we have
608		- // to create our own instance of AutoSave passing the right (fake) form.
609		- new XWiki.editors.AutoSave({form: fakeForm});
610		- var xwikiDocument = actionButtons.data('xwikiDocument');
611		- // Enable the action buttons (and their shortcut keys) only if we're editing a document.
612		- actionButtons.find(':input').prop('disabled', !xwikiDocument);
613		- deferred.resolve(xwikiDocument);
	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	+ });
614	614	});
615		- return deferred.promise();
616		- }, function() {
617		- new XWiki.widgets.Notification(
618		- $jsontool.serialize($services.localization.render('edit.inplace.actionButtons.loadFailed')),
619		- 'error'
620		- );
	693	+ }).catch(() => {
	694	+ new XWiki.widgets.Notification(l10n['edit.inplace.actionButtons.loadFailed'], 'error');
621	621	});
622	622	};
623	623
	698	+ function addToFormData(formData, inputs) {
	699	+ inputs.serializeArray().forEach(function(entry) {
	700	+ formData.append(entry.name, entry.value);
	701	+ });
	702	+ }
	703	+
624	624	// actionButtons.js expects a form so we use a fake form. Refactoring actionButtons.js is too dangerous ATM.
625	625	var fakeForm = {
626	626	action: XWiki.currentDocument.getURL('save'),
...	...	@@ -643,40 +643,41 @@
643	643	insert: function(element) {
644	644	this._getActionButtons().find('.hidden.extra').append(element);
645	645	},
	726	+ // Note that this method only works with single argument.
	727	+ append: function(element) {
	728	+ this.insert(element);
	729	+ },
646	646	down: function(selector) {
647	647	return this._getActionButtons().find(selector)[0];
648	648	},
649	649	serialize: function() {
650		- var extra = this._getActionButtons().find(':input').serializeArray().reduce(function(extra, entry) {
651		- var value = extra[entry.name] || [];
652		- value.push(entry.value);
653		- extra[entry.name] = value;
654		- return extra;
655		- }, {});
	734	+ var formData = new FormData();
	735	+ addToFormData(formData, this._getActionButtons().find(':input'));
	736	+ // retrieve all input fields listing the temporary uploaded files.
656	656	var xwikiDocument = this._getActionButtons().data('xwikiDocument');
657		- var formData = {
658		- title: xwikiDocument.rawTitle,
659		- language: xwikiDocument.getRealLocale(),
660		- isNew: xwikiDocument.isNew
661		- };
662		- if (xwikiDocument.content != xwikiDocument.originalDocument.content) {
	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) {
663	663	// Submit the raw (source) content. No syntax conversion is needed in this case.
664		- formData.content = xwikiDocument.content;
	744	+ formData.set('content', xwikiDocument.content);
665	665	} else {
666	666	// Submit the rendered content (HTML), but make sure it is converted to the document syntax on the server.
667		- $.extend(formData, {
668		- content: xwikiDocument.renderedContent,
669		- RequiresHTMLConversion: 'content',
670		- content_syntax: xwikiDocument.syntax
671		- });
	747	+ formData.set('content', xwikiDocument.renderedContent);
	748	+ formData.set('RequiresHTMLConversion', 'content');
	749	+ formData.set('content_syntax', xwikiDocument.syntax);
672	672	}
	751	+ // Add the temporary uploaded files to the form.
	752	+ addToFormData(formData, $('#xwikicontent').nextAll('input[name="uploadedFiles"]'));
	753	+
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		- 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();
	756	+ formData.set('previousVersion', xwikiDocument.version);
	757	+ formData.set('editingVersionDate', new Date(xwikiDocument.modified).getTime());
678	678	}
679		- return $.extend(formData, extra);
	759	+ // Note: if you refactor, please make sure that actionsButtons inputs have the lowest priority.
	760	+ return 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,25 @@
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.promise().then(() => {
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	}
	853	+ return xwikiDocument;
773	773	});
774		- editContent.trigger('xwiki:actions:edit', data);
775		- return editContentPromise;
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
	873	+ preload,
	874	+ editPage,
	875	+ editSection,
	876	+ 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';
	886	+ 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();
	904	+ 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) {
	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');
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');
	913	+ const handler = event.data;
	914	+ 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() {
	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
852	852	editButton.removeClass('disabled');
853	853	});
854	854	// Fallback on the standalone edit mode if we fail to load the required modules.
855		- }, $.proxy(disableInPlaceEditing, event.target));
856		- });
	926	+ }, disableInPlaceEditing.bind(event.target));
	927	+ };
857	857
858	858	var disableInPlaceEditing = function() {
859		- editButton.off('click.inPlaceEditing').removeClass('disabled');
	930	+ 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	};
	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	+ }
865	865	});
	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		-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,55 @@
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	+ '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
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