Skip to Content

Changes for page EditSheet

Last modified by superadmin on 2025/02/27 10:46
From 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]
To version 7.1
edited by Thomas Coelho (local)
on 2023/07/26 11:23
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.5]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -58,6 +58,36 @@
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 + ],
61 61   // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
62 62   sourceDocument: sourceDocument,
63 63   // The syntax of the edited content is not always the same as the syntax of the source document (which applies to
... ... @@ -127,49 +127,5 @@
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 -
174 174   return $.Deferred().resolve(ckeditor).promise();
175 175  });
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: @border-radius-base;
239 + border-radius: 4px;
240 240   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
241 241   font: inherit;
242 242   padding: 5px 0;
... ... @@ -288,33 +288,13 @@
288 288   width: 14px;
289 289  }
290 290  .ckeditor-autocomplete-item-icon-wrapper img {
291 - border-radius: @border-radius-small;
291 + border-radius: 3px;
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 -}
315 315  /* The image still takes some space in IE11 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 -.ckeditor-autocomplete-item-preview-wrapper img[src=""],
318 318  .ckeditor-autocomplete-item-icon-wrapper img[src=""] {
319 319   display: none;
320 320  }
... ... @@ -448,20 +448,3 @@
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 -}