From d76e4255f2b81dc7a778ed75024579e7f99c7c51 Mon Sep 17 00:00:00 2001
From: Molkobain <lajarige.guillaume@free.fr>
Date: Wed, 4 Nov 2020 17:25:25 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B02950=20-=20Fix=20syntax=20highlighting?=
 =?UTF-8?q?=20(CKEditor)=20not=20working=20on=20AttributeHTML=20-=20Fix=20?=
 =?UTF-8?q?for=20not=20supported=20attributes=20(HTML)=20-=20Migrate=20sel?=
 =?UTF-8?q?ectors=20for=20new=20backoffice=20markup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/vendors/_all.scss              |  3 +-
 css/backoffice/vendors/_ckeditor.scss         | 11 +++++++
 css/light-grey.scss                           | 10 +++---
 .../FieldRenderer/BsSimpleFieldRenderer.php   | 31 +++++--------------
 sources/application/WebPage/iTopWebPage.php   |  6 ++--
 .../activity-entry/layout.html.twig           |  4 +--
 6 files changed, 30 insertions(+), 35 deletions(-)
 create mode 100644 css/backoffice/vendors/_ckeditor.scss

diff --git a/css/backoffice/vendors/_all.scss b/css/backoffice/vendors/_all.scss
index acb8fcbc3..bdd9d0859 100644
--- a/css/backoffice/vendors/_all.scss
+++ b/css/backoffice/vendors/_all.scss
@@ -17,4 +17,5 @@
  */
 
 @import "bulma-variables-overload";
-@import "../../../node_modules/bulma-scss/bulma";
\ No newline at end of file
+@import "../../../node_modules/bulma-scss/bulma";
+@import "ckeditor";
\ No newline at end of file
diff --git a/css/backoffice/vendors/_ckeditor.scss b/css/backoffice/vendors/_ckeditor.scss
new file mode 100644
index 000000000..5e4052ada
--- /dev/null
+++ b/css/backoffice/vendors/_ckeditor.scss
@@ -0,0 +1,11 @@
+/*!
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+.hljs {
+	padding: 0.9em !important;
+	box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
+	border-radius: $ibo-border-radius-300;
+	white-space: pre-wrap;
+}
\ No newline at end of file
diff --git a/css/light-grey.scss b/css/light-grey.scss
index 0669cdc17..9e9e37d34 100644
--- a/css/light-grey.scss
+++ b/css/light-grey.scss
@@ -422,11 +422,11 @@
 		display: none;
 	}
 
-	.hljs {
-		padding: 0.9em !important;
-		box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
-		border-radius: 3px;
-	}
+	//.hljs {
+	//	padding: 0.9em !important;
+	//	box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
+	//	border-radius: 3px;
+	//}
 
 	td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited {
 		text-decoration: none;
diff --git a/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php b/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
index 043d3cdd6..8edde1a19 100644
--- a/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
+++ b/sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
@@ -145,14 +145,6 @@ EOF
 					// Then the previous entries if necessary
 					if ($sFieldClass === 'Combodo\\iTop\\Form\\Field\\CaseLogField') {
 						$this->PreparingCaseLogEntries($oOutput);
-						// Trigger highlighter for all code blocks in this caselog
-						$oOutput->AddJs(
-							<<<JS
-   $("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}'] .caselog_field_entry_content > pre").each(function(i, block) {
-            hljs.highlightBlock(block);
-        });
-JS
-						);
 					}
 					$oOutput->AddHtml('</div>');
 
@@ -338,14 +330,6 @@ EOF
 							$oOutput->AddHtml('<div class="form_field_control">');
 							$oOutput->AddHtml('<div class="form-control-static">')->AddHtml($this->oField->GetDisplayValue(), false)->AddHtml('</div>');
 							$oOutput->AddHtml('</div>');
-							// Trigger highlighter for all code blocks in this html text field
-							$oOutput->AddJs(
-								<<<JS
-$("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}'] .HTML pre").each(function(i, block) {
-    hljs.highlightBlock(block);
-});
-JS
-							);
 						}
 
 						// Adding hidden input
@@ -374,14 +358,6 @@ JS
 
 						// Closing container
 						$oOutput->AddHtml('</div>');
-						// Trigger highlighter for all code blocks in this caselog
-						$oOutput->AddJs(
-							<<<JS
-   $("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}'] .caselog_field_entry_content pre").each(function(i, block) {
-            hljs.highlightBlock(block);
-        });
-JS
-						);
 						break;
 
 					case 'Combodo\\iTop\\Form\\Field\\BlobField':
@@ -522,6 +498,13 @@ EOF
 				if($bRichEditor) {
 					// MagnificPopup on images
 					$oOutput->AddJs(InlineImage::FixImagesWidth());
+					// Trigger highlighter for all code blocks in this caselog
+					$oOutput->AddJs(<<<JS
+$("[data-field-id='{$this->oField->GetId()}'][data-form-path='{$this->oField->GetFormPath()}'] pre").each(function(i, block) {
+    hljs.highlightBlock(block);
+});
+JS
+					);
 				}
 				break;
 		}
diff --git a/sources/application/WebPage/iTopWebPage.php b/sources/application/WebPage/iTopWebPage.php
index 84764bc64..03940ac20 100644
--- a/sources/application/WebPage/iTopWebPage.php
+++ b/sources/application/WebPage/iTopWebPage.php
@@ -324,12 +324,12 @@ JS
 		// Highlight code content created with CKEditor
 		$this->add_ready_script(
 			<<<JS
-		// Highlight code content for HTML AttributeText
-        $("[data-attribute-type='AttributeText'] .HTML pre").each(function(i, block) {
+		// Highlight code content for AttributeHTML and HTML AttributeText
+        $('[data-attribute-type="AttributeHTML"], [data-attribute-type="AttributeText"]').find('.HTML pre').each(function(i, block) {
             hljs.highlightBlock(block);
         });        
 		// Highlight code content for CaseLogs
-		$("[data-attribute-type='AttributeCaseLog'] .caselog_entry_html pre").each(function(i, block) {
+		$('[data-role="ibo-activity-entry--main-information-content"] pre').each(function(i, block) {
             hljs.highlightBlock(block);
         });
 JS
diff --git a/templates/layouts/activity-panel/activity-entry/layout.html.twig b/templates/layouts/activity-panel/activity-entry/layout.html.twig
index b165add6e..507ecb8f2 100644
--- a/templates/layouts/activity-panel/activity-entry/layout.html.twig
+++ b/templates/layouts/activity-panel/activity-entry/layout.html.twig
@@ -16,14 +16,14 @@
 	<div class="ibo-activity-entry--information" data-role="ibo-activity-entry--information">
 		{% block iboActivityEntryInformation %}
 			<div class="ibo-activity-entry--main-information" data-role="ibo-activity-entry--main-information">
-				<div class="ibo-activity-entry--main-information-icon">
+				<div class="ibo-activity-entry--main-information-icon" data-role="ibo-activity-entry--main-information-icon">
 					{% block iboActivityEntryMainInformationIcon %}
 						{% if oUIBlock.GetDecorationClasses() is not empty %}
 							<span class="{{ oUIBlock.GetDecorationClasses() }}"></span>
 						{% endif %}
 					{% endblock %}
 				</div>
-				<div class="ibo-activity-entry--main-information-content">
+				<div class="ibo-activity-entry--main-information-content" data-role="ibo-activity-entry--main-information-content">
 					{% block iboActivityEntryMainInformationContent %}
 						{# Content is printed as raw because it is stored as HTML in the database and should have been sanitized before storage, so we can assume it is safe #}
 						{{ oUIBlock.GetContent()|raw }}