Changes for page EditSheet

Summary

• Objects (2 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -58,36 +58,6 @@
58	58	var config = {
59	59	filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
60	60	height: $(element).height(),
61		- mentions: [
62		- {
63		- // We use the source document to compute the feed URL because we want the suggested link references to be
64		- // relative to the edited document (we want the editor to output relative references as much as possible).
65		- feed: sourceDocument.getURL('get', $.param({
66		- sheet: 'CKEditor.LinkSuggestions',
67		- outputSyntax: 'plain',
68		- language: XWiki.locale
69		- // Prevent the curly brackets from being URL encoded because they mark a placeholder that will be replaced
70		- // with the text typed by the user (and CKEditor takes care of URL encoding it).
71		- }) + '&input={encodedQuery}'),
72		- itemTemplate: [
73		- '<li data-id="{id}" class="ckeditor-autocomplete-item">',
74		- '<div>',
75		- '<span class="ckeditor-autocomplete-item-icon-wrapper">',
76		- // We have to output both icon types but normally only one is defined and the other is hidden.
77		- '<img src="{iconURL}"/>',
78		- '<span class="{iconClass}"></span>',
79		- '</span>',
80		- '<span class="ckeditor-autocomplete-item-label">{label}</span>',
81		- '</div>',
82		- '<div class="ckeditor-autocomplete-item-hint">{hint}</div>',
83		- '</li>'].join(''),
84		- outputTemplate: '<a href="{url}" data-reference="{typed}|-|{type}|-|{reference}">{label}</a>',
85		- followingSpace: true,
86		- marker: '[',
87		- minChars: 0,
88		- itemsLimit: 6
89		- }
90		- ],
91	91	// Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
92	92	sourceDocument: sourceDocument,
93	93	// The syntax of the edited content is not always the same as the syntax of the source document (which applies to
...	...	@@ -157,5 +157,49 @@
157	157	object[key] = newValue;
158	158	};
159	159
	130	+ // See XWIKI-21351: Macros using RequireJS are not properly displayed by the standalone WYSIWYG editor even when
	131	+ // JavaScript is enabled.
	132	+ //
	133	+ // For each CKEditor instance that uses a separate DOM document for the edited content (i.e. classical iframe-based
	134	+ // editor) we overwrite the appendChild and insertBefore functions of the initial HEAD element in order to make sure
	135	+ // that RequireJS appends the script tags to the current HEAD element (because the HEAD element is overwritten each
	136	+ // time the edited content is reloaded, like when inserting a macro or switching between Source and WYSIWYG modes).
	137	+ //
	138	+ // We have to overwrite both appendChild and insertBefore because depending on the presence of the BASE element
	139	+ // RequireJS uses one or the other.
	140	+ ckeditor.on('instanceReady', ({editor}) => {
	141	+ if (editor.document.$ !== document) {
	142	+ // This editor instance is using a separate DOM document for editing which means it's a standalone editor.
	143	+ const initialHead = editor.document.$.head;
	144	+ const originalAppendChild = initialHead.appendChild;
	145	+ initialHead.appendChild = function() {
	146	+ const currentHead = editor.document.$.head;
	147	+ if (currentHead !== initialHead) {
	148	+ // The edited content has been reloaded. Append to the current HEAD.
	149	+ return currentHead.appendChild.apply(currentHead, arguments);
	150	+ } else {
	151	+ // Still using the initial HEAD so preserve the default behavior.
	152	+ originalAppendChild.apply(initialHead, arguments);
	153	+ }
	154	+ };
	155	+ const originalInsertBefore = initialHead.insertBefore;
	156	+ initialHead.insertBefore = function(newChild, existingChild) {
	157	+ const currentHead = editor.document.$.head;
	158	+ if (currentHead !== initialHead) {
	159	+ // The edited content has been reloaded. Normally the given existingChild should be a child of the initial
	160	+ // HEAD element (not the current one), but better check to be sure.
	161	+ if (existingChild.parentNode === currentHead) {
	162	+ return currentHead.insertBefore(newChild, existingChild);
	163	+ } else {
	164	+ return currentHead.appendChild.apply(newChild);
	165	+ }
	166	+ } else {
	167	+ // Still using the initial HEAD so preserve the default behavior.
	168	+ return originalInsertBefore.apply(initialHead, arguments);
	169	+ }
	170	+ };
	171	+ }
	172	+ });
	173	+
160	160	return $.Deferred().resolve(ckeditor).promise();
161	161	});

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -236,7 +236,7 @@
236	236	*/
237	237	ul.cke_autocomplete_panel {
238	238	border: 1px solid rgba(0, 0, 0, 0.15);
239		- border-radius: 4px;
	239	+ border-radius: @border-radius-base;
240	240	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
241	241	font: inherit;
242	242	padding: 5px 0;
...	...	@@ -288,13 +288,33 @@
288	288	width: 14px;
289	289	}
290	290	.ckeditor-autocomplete-item-icon-wrapper img {
291		- border-radius: 3px;
	291	+ border-radius: @border-radius-small;
292	292	max-height: 14px;
293	293	max-width: 14px;
294	294	vertical-align: text-top;
295	295	}
	296	+.ckeditor-autocomplete-item-preview-wrapper {
	297	+ display: flex;
	298	+ align-items: center;
	299	+ justify-content: space-around;
	300	+ height: 64px;
	301	+ margin-right: .5em;
	302	+ text-align: center;
	303	+ vertical-align: middle;
	304	+ width: 64px;
	305	+}
	306	+.ckeditor-autocomplete-centered {
	307	+ justify-content: center;
	308	+}
	309	+.ckeditor-autocomplete-item-preview-wrapper img {
	310	+ border-radius: @border-radius-small;
	311	+ max-height: 64px;
	312	+ max-width: 64px;
	313	+ vertical-align: text-top;
	314	+}
296	296	/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
297	297	See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
	317	+.ckeditor-autocomplete-item-preview-wrapper img[src=""],
298	298	.ckeditor-autocomplete-item-icon-wrapper img[src=""] {
299	299	display: none;
300	300	}