XWIKI-17664: When adding an annotation the focus should be inside WYS…

…IWYG by default (#3694) * Added a comment to explain a line of code that doesn't work with CKEditor anymore * Added a CKE config change so that it gets focus when loaded. * Implemented a solution that does not assume there's CKEditor * Fixed codestyle --------- Co-authored-by: Marius Dumitru Florea <[email protected]> (cherry picked from commit 957d0e5)
xwiki · Jan 15, 2025 · c4728a2 · c4728a2
1 parent cfa892e
commit c4728a2
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/...form-annotation/xwiki-platform-annotation-ui/src/main/resources/AnnotationCode/Macros.xml b/...form-annotation/xwiki-platform-annotation-ui/src/main/resources/AnnotationCode/Macros.xml
@@ -356,6 +356,10 @@
 
 #macro(displayAnnotationProperty $annotatedDocument $annotationObject $annotationProperty $mode)
   #if ($mode == 'edit' || $mode == 'create')
+    ## This startupFocus parameter is used by the CKEditor WYSIWYG editor.
+    #set ($wysiwygEditorConfig = {
+      'startupFocus': true
+    })
     ## We use displayEdit and not display('edit') because we want the input field name to be just the property name
     ## (without the "DocumentReference_objectNumber_" prefix).
     $annotatedDocument.displayEdit($annotationProperty, '', $annotationObject)

diff --git a/...form-annotation/xwiki-platform-annotation-ui/src/main/resources/AnnotationCode/Script.xml b/...form-annotation/xwiki-platform-annotation-ui/src/main/resources/AnnotationCode/Script.xml
@@ -1710,7 +1710,7 @@ XWiki.Annotation = Class.create({
     if (!this.safeUpdate(this.createPanel, panelContent)) {
       return;
     }
-    // set the focus in the first element of type input
+    // Set the focus in the first element of type input, useful when not using the WYSIWYG editor CKEditor.
     this.createPanel.select('form').first().focusFirstElement();
     // and add the button observers
     this.createPanel.down('input[type=submit]').observe('click', this.onAnnotationAdd.bindAsEventListener(this));

diff --git a/...ki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml b/...ki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml
@@ -218,9 +218,11 @@ define('xwiki-ckeditor', [
     }
 
     var uploadDisabled = element.hasAttribute('data-upload-disabled');
+    var startupFocus = element.hasAttribute('data-startup-focus');
 
     var config = {
       filebrowserUploadUrl: uploadDisabled ? '' : getUploadURL(sourceDocument, 'filebrowser'),
+      startupFocus,
       height: $(element).height(),
       // Used to resolve and serialize relative references. Also used to make HTTP requests with the right context.
       sourceDocument: sourceDocument,

diff --git a/...atform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/VelocityMacros.xml b/...atform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/VelocityMacros.xml
@@ -206,6 +206,12 @@
   #if ($source.restricted == 'true' &amp;&amp; !$services.security.authorization.hasAccess('edit', $source.documentReference))
     #set ($parameters.attributes.data-upload-disabled = 'true')
   #end
+  ## We use the velocity template context to convey the startupFocus parameter to CKEditor.
+  #if ($wysiwygEditorConfig.startupFocus)
+    #set ($parameters.attributes.data-startup-focus = 'true')
+    ## We make sure to clear this context so that it doesn't interfere with CKEditors opened later.
+    #set ($wysiwygEditorConfig.startupFocus = false)
+  #end
   ##
   &lt;textarea
     #foreach ($entry in $parameters.attributes.entrySet())

diff --git a/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/commentfield.vm b/...o-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/commentfield.vm
@@ -72,6 +72,10 @@
 
 <label for="$name">$services.localization.render('core.viewers.comments.add.comment.label')</label>
 #initRequiredSkinExtensions()
+## This startupFocus parameter is used by the CKEditor WYSIWYG editor.
+#set ($wysiwygEditorConfig = {
+  'startupFocus': true
+})
 ## display of the comment field
 $doc.displayEdit($fieldToDisplay, '', $commentObj)
 

diff --git a/...orm-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/viewers/comments.js b/...orm-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/viewers/comments.js
@@ -599,9 +599,6 @@ viewers.Comments = Class.create({
 
     require(['jquery', 'xwiki-events-bridge'], function ($) {
       if ($(".commenteditor").length) {
-        if(typeof CKEDITOR !== 'undefined') {
-          CKEDITOR.config.startupFocus = true;
-        }
         $.post(new XWiki.Document().getURL("get") + '?' + $.param({
           xpage: 'xpart',
           vm: 'commentfield.vm',