Changes for page EditSheet

Summary

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

Details

Page properties

Author

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

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
...	...	@@ -386,6 +386,77 @@
386	386	}
387	387
388	388	/**
	415	+ * Custom styles to match XWiki's Look & Feel
	416	+ */
	417	+.cke_chrome,
	418	+.cke_chrome > .cke_inner {
	419	+ border-radius: @border-radius-base;
	420	+}
	421	+
	422	+.cke_chrome > .cke_inner > .cke_top {
	423	+ border-top-right-radius: @border-radius-base;
	424	+ border-top-left-radius: @border-radius-base;
	425	+}
	426	+
	427	+.cke_chrome > .cke_inner > .cke_bottom {
	428	+ border-bottom-right-radius: @border-radius-base;
	429	+ border-bottom-left-radius: @border-radius-base;
	430	+}
	431	+
	432	+/* The standalone WYSIWYG edit mode shows the form action toolbar right below the CKEditor instance used to edit the
	433	+ document content. We make the bottom border rounded on the form action toolbar instead. */
	434	+#xwikieditcontent > .cke_chrome,
	435	+#xwikieditcontent > .cke_chrome > .cke_inner,
	436	+#xwikieditcontent > .cke_chrome > .cke_inner > .cke_bottom {
	437	+ border-bottom-right-radius: 0;
	438	+ border-bottom-left-radius: 0;
	439	+}
	440	+
	441	+a.cke_button,
	442	+a.cke_combo_button {
	443	+ border-radius: @border-radius-small;
	444	+}
	445	+
	446	+.cke_panel,
	447	+.cke_dialog_body,
	448	+.cke_dialog a.cke_dialog_ui_button,
	449	+.cke_dialog input.cke_dialog_ui_input_text,
	450	+.cke_dialog select.cke_dialog_ui_input_select,
	451	+.cke_dialog fieldset.cke_dialog_ui_fieldset,
	452	+.cke_notification {
	453	+ border-radius: @border-radius-base;
	454	+}
	455	+
	456	+.cke_panel.cke_menu_panel,
	457	+.cke_panel.cke_combopanel {
	458	+ margin: 2px 0;
	459	+}
	460	+
	461	+.cke_dialog_title,
	462	+.cke_dialog a.cke_dialog_tab {
	463	+ border-top-right-radius: @border-radius-base;
	464	+ border-top-left-radius: @border-radius-base;
	465	+}
	466	+
	467	+.cke_dialog_contents,
	468	+.cke_dialog_footer {
	469	+ border-bottom-right-radius: @border-radius-base;
	470	+ border-bottom-left-radius: @border-radius-base;
	471	+}
	472	+
	473	+/**
	474	+ * Custom styles for the in-line editor
	475	+ */
	476	+.viewbody > .cke_float {
	477	+ /* Shift the floating toolbar in order to match the content padding. */
	478	+ margin-right: floor((@grid-gutter-width / 2));
	479	+ margin-left: ceil((@grid-gutter-width / 2));
	480	+}
	481	+.cke_float .cke_top {
	482	+ border-radius: @border-radius-base;
	483	+}
	484	+
	485	+/**
389	389	* Full-screen styles for the in-line editor
390	390	*/
391	391	body[data-maximized="true"] {
...	...	@@ -421,12 +421,6 @@
421	421	margin: 0 !important;
422	422	overflow-y: auto !important;
423	423	z-index: 9995;
424		-
425		- &:focus {
426		- /* Remove the focus border. */
427		- border-color: transparent !important;
428		- box-shadow: none !important;
429		- }
430	430	}
431	431	.cke_maximize_backdrop {
432	432	top: 0;
...	...	@@ -463,3 +463,20 @@
463	463	border-color: @table-border-color;
464	464	border-style: solid;
465	465	}
	557	+
	558	+/* CKEditor contains a CSS reset. It works with its own style sheets and does not use the ones in XWiki.
	559	+However, we want `.sr-only` from XWiki to still be usable in our CKEditor environment.
	560	+We need to redefine the XWiki styles of this class to have better priority than the CKEditor CSS reset.
	561	+Without this, the elements with this class are still shown which would be different from the behaviour
	562	+of `.sr-only` anywhere else in XWiki (as described in our doc).
	563	+This redefinition allows for a more consistent behaviour of the `.sr-only` class. */
	564	+.cke_reset_all .sr-only {
	565	+ position: absolute;
	566	+ width: 1px;
	567	+ height: 1px;
	568	+ padding: 0;
	569	+ margin: -1px;
	570	+ overflow: hidden;
	571	+ clip: rect(0, 0, 0, 0);
	572	+ border: 0;
	573	+}