Changes for page EditSheet

Summary

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

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.coelho
	1	+XWiki.superadmin

Content

...	...	@@ -1,38 +1,0 @@
1		-{{include reference="CKEditor.VelocityMacros"/}}
2		-
3		-{{velocity}}
4		-#if ($doc.fullName == 'CKEditor.EditSheet')
5		- This is a sheet for editing the document content using [[CKEditor>>http://ckeditor.com/]].
6		-#else
7		- {{html clean="false"}}
8		- ## Include the auto-save styles.
9		- #set ($discard = $xwiki.ssfx.use('js/xwiki/editors/autosave.css', true))
10		- #if ("$!request.section" != '')
11		- <div class="hidden">
12		- <input type="hidden" name="section" value="$!escapetool.xml($request.section)"/>
13		- </div>
14		- #end
15		- <div class="row">
16		- <div class="cke-editMeta col-xs-12 col-md-7">
17		- ## Add support for editing the page title (which is not available by default in Inline Form edit mode).
18		- #set ($editor = 'wiki')
19		- #template('editmeta.vm')
20		- #set ($editor = 'inline')
21		- </div>
22		- </div>
23		- ## The xwikieditcontent id is needed for the auto-save feature.
24		- <div id="xwikieditcontent" data-autosave="true">
25		- #set ($parameters = {
26		- 'content': $tdoc.content,
27		- 'attributes': {
28		- 'id': 'content',
29		- 'name': 'content',
30		- 'rows': 25,
31		- 'cols': 80
32		- }
33		- })
34		- #ckeditor($parameters)
35		- </div>
36		- {{/html}}
37		-#end
38		-{{/velocity}}

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -54,9 +54,11 @@
54	54	}
55	55
56	56	var uploadDisabled = element.hasAttribute('data-upload-disabled');
	57	+ var startupFocus = element.hasAttribute('data-startup-focus');
57	57
58	58	var config = {
59	59	filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
	61	+ startupFocus,
60	60	height: $(element).height(),
61	61	// Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
62	62	sourceDocument: sourceDocument,

XWiki.JavaScriptExtension[2]

Code

...	...	@@ -10,7 +10,9 @@
10	10	container.find('.ckeditor-textarea').each(function() {
11	11	// Wrap in try/catch so that a failure to load one editor doesn't affect the other editors.
12	12	try {
13		- createEditor(ckeditor, this);
	13	+ createEditor(ckeditor, this).then(() => {
	14	+ this.classList.remove('loading');
	15	+ });
14	14	} catch(e) {
15	15	console.log(e);
16	16	}

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -12,6 +12,13 @@
12	12	resize: none;
13	13	}
14	14
	15	+/* Hide the form action bar while the editor is loading in order to avoid UI flickering (because the editor may enhance
	16	+ or replace the form action bar). */
	17	+main > div:has(.ckeditor-textarea.loading) ~ .bottom-editor,
	18	+#xwikicontent.loading ~ form#inplace-editing {
	19	+ visibility: hidden;
	20	+}
	21	+
15	15	/* Show the modal above the CKEditor dialogs */
16	16	body > .modal-backdrop {
17	17	z-index: 10040;
...	...	@@ -172,6 +172,25 @@
172	172	}
173	173
174	174	/**
	182	+ * Handle the layout and display of the warning message for headerless tables.
	183	+ * This message is added by the xwiki-table plugin.
	184	+ * Some of the default styles are just overridden by the CKEditor reset.
	185	+ */
	186	+.cke_dialog_container span.box.warningmessage {
	187	+ .alert-warning;
	188	+ /* Default warning boxes are not meant to be used in a strict layout like the one of this table dialog.
	189	+ * We need an extra customization to avoid breaking this layout. */
	190	+ white-space: break-spaces;
	191	+ /* By default, the warning is not shown. */
	192	+ display: none;
	193	+}
	194	+
	195	+/* When the value of the previous field is the one we want to avoid, we show the warning. */
	196	+.cke_dialog_container tr:has(select [value=""]:checked) + tr span.box.warningmessage {
	197	+ display: unset;
	198	+}
	199	+
	200	+/**
175	175	* Link Options Toggle
176	176	*/
177	177
...	...	@@ -204,8 +204,6 @@
204	204	a.cke_button.cke_button__xwiki-macro-edit > span.cke_button_icon.cke_button__xwiki-macro-edit_icon,
205	205	a.cke_button.cke_button__xwiki-link-open > span.cke_button_icon.cke_button__xwiki-link-open_icon,
206	206	a.cke_button.cke_button__insert > span.cke_button_icon.cke_button__insert_icon {
207		- /* This is needed for XWiki versions older than 7.1M1 where we overwrite the icons path (see above). */
208		- background-image: none !important;
209	209	font-family: 'Glyphicons Halflings';
210	210	position: relative;
211	211	top: 1px;
...	...	@@ -312,7 +312,7 @@
312	312	max-width: 64px;
313	313	vertical-align: text-top;
314	314	}
315		-/* The image still takes some space in IE11 even if there's no source specified. Let's make sure it's hidden.
	339	+/* The image still takes some space in all browsers even if there's no source specified. Let's make sure it's hidden.
316	316	See CKEDITOR-389: Missing space in the suggestions that appear while using the autocomplete function on IE 11 */
317	317	.ckeditor-autocomplete-item-preview-wrapper img[src=""],
318	318	.ckeditor-autocomplete-item-icon-wrapper img[src=""] {
...	...	@@ -365,29 +365,89 @@
365	365	}
366	366
367	367	.cke_contents > textarea.cke_source.cke_editable_inline {
368		- border: 1px solid transparent;
369		- border-radius: 0;
370	370	box-shadow: none;
371		- margin-top: -1px;
372		- margin-left: -1px;
373		-
374		- .form-control-focus();
375	375	}
376	376
377		-.cke_contents.fake {
378		- /* We need this to have the box shadow visible when the source area is focused. */
379		- overflow: visible;
380		-}
381		-
382	382	#xwikicontent + .cke_contents > textarea.cke_source.cke_editable_inline {
383	383	/* Don't take the padding and the margin into account when computing the 100% width. */
384	384	box-sizing: content-box;
385	385	/* Make sure the Source area has the same width as the WYSIWYG area. */
386		- margin-left: -@grid-gutter-width / 2 - 1px;
387		- margin-right: -@grid-gutter-width / 2 - 1px;
	399	+ margin-left: -@grid-gutter-width / 2;
	400	+ margin-right: -@grid-gutter-width / 2;
388	388	}
389	389
390	390	/**
	404	+ * Custom styles to match XWiki's Look & Feel
	405	+ */
	406	+.cke_chrome,
	407	+.cke_chrome > .cke_inner {
	408	+ border-radius: @border-radius-base;
	409	+}
	410	+
	411	+.cke_chrome > .cke_inner > .cke_top {
	412	+ border-top-right-radius: @border-radius-base;
	413	+ border-top-left-radius: @border-radius-base;
	414	+}
	415	+
	416	+.cke_chrome > .cke_inner > .cke_bottom {
	417	+ border-bottom-right-radius: @border-radius-base;
	418	+ border-bottom-left-radius: @border-radius-base;
	419	+}
	420	+
	421	+/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
	422	+ document content. We make the bottom border rounded on the form action toolbar instead. */
	423	+#xwikieditcontent > .cke_chrome,
	424	+#xwikieditcontent > .cke_chrome > .cke_inner,
	425	+#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
	426	+ border-bottom-right-radius: 0;
	427	+ border-bottom-left-radius: 0;
	428	+}
	429	+
	430	+a.cke_button,
	431	+a.cke_combo_button {
	432	+ border-radius: @border-radius-small;
	433	+}
	434	+
	435	+.cke_panel,
	436	+.cke_dialog_body,
	437	+.cke_dialog a.cke_dialog_ui_button,
	438	+.cke_dialog input.cke_dialog_ui_input_text,
	439	+.cke_dialog select.cke_dialog_ui_input_select,
	440	+.cke_dialog fieldset.cke_dialog_ui_fieldset,
	441	+.cke_notification {
	442	+ border-radius: @border-radius-base;
	443	+}
	444	+
	445	+.cke_panel.cke_menu_panel,
	446	+.cke_panel.cke_combopanel {
	447	+ margin: 2px 0;
	448	+}
	449	+
	450	+.cke_dialog_title,
	451	+.cke_dialog a.cke_dialog_tab {
	452	+ border-top-right-radius: @border-radius-base;
	453	+ border-top-left-radius: @border-radius-base;
	454	+}
	455	+
	456	+.cke_dialog_contents,
	457	+.cke_dialog_footer {
	458	+ border-bottom-right-radius: @border-radius-base;
	459	+ border-bottom-left-radius: @border-radius-base;
	460	+}
	461	+
	462	+/**
	463	+ * Custom styles for the in-line editor
	464	+ */
	465	+.viewbody > .cke_float {
	466	+ /* Shift the floating toolbar in order to match the content padding. */
	467	+ margin-right: floor((@grid-gutter-width / 2));
	468	+ margin-left: ceil((@grid-gutter-width / 2));
	469	+}
	470	+.cke_float .cke_top {
	471	+ border-radius: @border-radius-base;
	472	+}
	473	+
	474	+/**
391	391	* Full-screen styles for the in-line editor
392	392	*/
393	393	body[data-maximized="true"] {
...	...	@@ -423,12 +423,6 @@
423	423	margin: 0 !important;
424	424	overflow-y: auto !important;
425	425	z-index: 9995;
426		-
427		- &:focus {
428		- /* Remove the focus border. */
429		- border-color: transparent !important;
430		- box-shadow: none !important;
431		- }
432	432	}
433	433	.cke_maximize_backdrop {
434	434	top: 0;
...	...	@@ -465,3 +465,20 @@
465	465	border-color: @table-border-color;
466	466	border-style: solid;
467	467	}
	546	+
	547	+/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
	548	+However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
	549	+We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
	550	+Without this, the elements with this class are still shown which would be different from the behaviour
	551	+of `.sr-only` anywhere else in XWiki (as described in our doc).
	552	+This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
	553	+.cke_reset_all .sr-only {
	554	+ position: absolute;
	555	+ width: 1px;
	556	+ height: 1px;
	557	+ padding: 0;
	558	+ margin: -1px;
	559	+ overflow: hidden;
	560	+ clip: rect(0, 0, 0, 0);
	561	+ border: 0;
	562	+}