Skip to Content

Changes for page EditSheet

Last modified by superadmin on 2025/02/27 10:46
From version 8.1
edited by Thomas Coelho (local)
on 2023/09/25 10:22
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.7]
To version 10.1
edited by Thomas Coelho (local)
on 2024/12/17 09:50
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/16.10.1]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -127,5 +127,49 @@
127 127   object[key] = newValue;
128 128   };
129 129  
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 +
130 130   return $.Deferred().resolve(ckeditor).promise();
131 131  });
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,7 +288,7 @@
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;
... ... @@ -307,7 +307,7 @@
307 307   justify-content: center;
308 308  }
309 309  .ckeditor-autocomplete-item-preview-wrapper img {
310 - border-radius: 3px;
310 + border-radius: @border-radius-small;
311 311   max-height: 64px;
312 312   max-width: 64px;
313 313   vertical-align: text-top;
... ... @@ -448,3 +448,20 @@
448 448   z-index: 9995;
449 449   }
450 450  }
451 +
452 +/*
453 + * Override the CKEditor reset for the table border color.
454 + * The default border color from CKEditor is quite lacking on contrast.
455 + */
456 +.cke_editable.cke_show_borders table.cke_show_border,
457 +.cke_editable.cke_show_borders table.cke_show_border > tr > th,
458 +.cke_editable.cke_show_borders table.cke_show_border > tr > td,
459 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > th,
460 +.cke_editable.cke_show_borders table.cke_show_border > thead > tr > td,
461 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > th,
462 +.cke_editable.cke_show_borders table.cke_show_border > tbody > tr > td,
463 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > th,
464 +.cke_editable.cke_show_borders table.cke_show_border > tfoot > tr > td {
465 + border-color: @table-border-color;
466 + border-style: solid;
467 +}