From 5e0698b7f3925a3046c72662ab7f692e3f892bce Mon Sep 17 00:00:00 2001
From: Molkobain <lajarige.guillaume@free.fr>
Date: Sat, 1 Oct 2022 16:16:25 +0200
Subject: [PATCH] Add support for "Ctrl + Enter" and "Meta (Cmd) + Enter"
 submit on multi-line fields

---
 application/cmdbabstract.class.inc.php        | 11 +++++-
 .../portal/public/js/portal_form_handler.js   | 12 ++++++
 .../portal/templates/layout.html.twig         |  4 +-
 js/ckeditor.on-init.js                        | 12 ++++++
 .../activity-panel/caselog-entry-form.js      | 38 ++++++++++++-------
 5 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/application/cmdbabstract.class.inc.php b/application/cmdbabstract.class.inc.php
index bff4791a6..f67c75426 100644
--- a/application/cmdbabstract.class.inc.php
+++ b/application/cmdbabstract.class.inc.php
@@ -2278,7 +2278,7 @@ JS
 {$sValidationSpan}{$sReloadSpan}
 HTML;
 					$oPage->add_ready_script(
-						<<<EOF
+						<<<JS
                         $('#$iId').closest('.field_input_text').find('.fullscreen_button').on('click', function(oEvent){
                             var oOriginField = $('#$iId').closest('.field_input_text');
                             var oClonedField = oOriginField.clone();
@@ -2291,7 +2291,14 @@ HTML;
                                 oOriginField.find('textarea').triggerHandler('change');
                             });
                         });
-EOF
+                        
+                        // Submit host form on "Ctrl + Enter" or "Meta (Cmd) + Enter" keyboard shortcut
+                        $('#$iId').on('keyup', function (oEvent) {
+                            if ((oEvent.ctrlKey || oEvent.metaKey) && oEvent.key === 'Enter') {
+                                $(this).closest('form').trigger('submit');
+                            }
+                        });
+JS
 					);
 				break;
 
diff --git a/datamodels/2.x/itop-portal-base/portal/public/js/portal_form_handler.js b/datamodels/2.x/itop-portal-base/portal/public/js/portal_form_handler.js
index 65977a056..b0729af1e 100644
--- a/datamodels/2.x/itop-portal-base/portal/public/js/portal_form_handler.js
+++ b/datamodels/2.x/itop-portal-base/portal/public/js/portal_form_handler.js
@@ -58,6 +58,8 @@ $(function()
 			if((this.options.cancel_url !== null) && (this.options.cancel_url !== ''))
 				this.options.cancel_rule.url = this.options.cancel_url;
 
+			this._bindEvents();
+
 			this._super();
 		},
    
@@ -79,6 +81,16 @@ $(function()
 		{
 			this._super( key, value );
 		},
+		_bindEvents: function() {
+			const me = this;
+
+			// Submit event from the form should be treated as a click on the submit button
+			// as it processes things before sending the request
+			this.element.on('submit', function(oEvent) {
+				me._onSubmitClick(oEvent);
+			});
+		},
+
 		// - Callback when some fields have been touched
 		_onFieldsTouched: function(oEvent)
 		{
diff --git a/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig b/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
index b6b269688..123c2ad74 100644
--- a/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig
@@ -125,8 +125,10 @@
         {# CKEditor files for HTML WYSIWYG #}
         <script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/ckeditor.js'|add_itop_version }}"></script>
         <script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/adapters/jquery.js'|add_itop_version }}"></script>
-        {# Hilighter for code snippets created with CKEditor #}
+        {# - Hilighter for code snippets created with CKEditor #}
         <script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js'|add_itop_version }}"></script>
+        {# - Custom settings #}
+        <script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor.on-init.js'|add_itop_version }}"></script>
         {# Date-time picker for Bootstrap #}
         <script type="text/javascript" src="{{ app['combodo.portal.base.absolute_url'] ~ 'lib/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js'|add_itop_version }}"></script>
         {# Typeahead files for autocomplete #}
diff --git a/js/ckeditor.on-init.js b/js/ckeditor.on-init.js
index 4e519d82f..71570aff9 100644
--- a/js/ckeditor.on-init.js
+++ b/js/ckeditor.on-init.js
@@ -6,6 +6,18 @@
 // WARNING: This code cannot be placed directly within the page as CKEditor could not be loaded yet.
 // As it can be loaded from an XHR call (several times), we need to ensure it will be called when necessary (see PHP WebResourcesHelper)
 
+CKEDITOR.on('instanceReady', function (oEvent) {
+	// Keyboard listener
+	oEvent.editor.on('key', function(oKeyEvent){
+		const oKeyboardEvent = oKeyEvent.data.domEvent.$;
+
+		// Submit value on "Ctrl + Enter" or "Meta (Cmd) + Enter" keyboard shortcut
+		if ((oKeyboardEvent.ctrlKey || oKeyboardEvent.metaKey) && oKeyboardEvent.key === 'Enter') {
+			$('#'+ oEvent.editor.name).closest('form').trigger('submit');
+		}
+	});
+});
+
 // For disabling the CKEditor at init time when the corresponding textarea is disabled !
 if ((CKEDITOR !== undefined) && (CKEDITOR.plugins.registered['disabler'] === undefined)) {
 	CKEDITOR.plugins.add( 'disabler',
diff --git a/js/layouts/activity-panel/caselog-entry-form.js b/js/layouts/activity-panel/caselog-entry-form.js
index dd524838d..3d87f5959 100644
--- a/js/layouts/activity-panel/caselog-entry-form.js
+++ b/js/layouts/activity-panel/caselog-entry-form.js
@@ -84,20 +84,32 @@ $(function() {
 				// Handlers for the CKEditor itself
 				CKEDITOR.on('instanceReady', function (oEvent) {
 					// Handle only the current CKEditor instance
-					if (oEvent.editor.name === me.options.text_input_id) {
-						// Update depending elements on change
-						// Note: That when images are uploaded, the "change" event is triggered before the image upload is complete, meaning that we don't have the <img> tag yet.
-						me._GetCKEditorInstance().on('change', function () {
-							const bWasDraftBefore = me.is_draft;
-							const bIsDraftNow = !me._IsInputEmpty();
-
-							if (bWasDraftBefore !== bIsDraftNow) {
-								me.is_draft = bIsDraftNow;
-								me._UpdateEditingVisualHint();
-								// Note: We must not call me._UpdateSubmitButtonState() as it will be updated by the disable_submission/enable_submission events
-							}
-						});
+					if (oEvent.editor.name !== me.options.text_input_id) {
+						return;
 					}
+
+					// Update depending elements on change
+					// Note: That when images are uploaded, the "change" event is triggered before the image upload is complete, meaning that we don't have the <img> tag yet.
+					me._GetCKEditorInstance().on('change', function () {
+						const bWasDraftBefore = me.is_draft;
+						const bIsDraftNow = !me._IsInputEmpty();
+
+						if (bWasDraftBefore !== bIsDraftNow) {
+							me.is_draft = bIsDraftNow;
+							me._UpdateEditingVisualHint();
+							// Note: We must not call me._UpdateSubmitButtonState() as it will be updated by the disable_submission/enable_submission events
+						}
+					});
+
+					// Dispatch submission to the right pipeline on submit
+					$(me.element).on('submit', function (oSubmitEvent) {
+						oSubmitEvent.preventDefault();
+						if (me._IsSubmitAutonomous()) {
+							me._RequestSubmission();
+						} else {
+							me._GetGeneralFormElement().trigger('submit');
+						}
+					});
 				});
 
 				if (false === this._IsSubmitAutonomous()) {