N°2950 - Fix syntax highlighting (CKEditor) not working on AttributeHTML

- Fix for not supported attributes (HTML)
- Migrate selectors for new backoffice markup

css/backoffice/vendors/_all.scss

@@ -17,4 +17,5 @@
  */
 
 @import "bulma-variables-overload";
-@import "../../../node_modules/bulma-scss/bulma";
+@import "../../../node_modules/bulma-scss/bulma";
+@import "ckeditor";

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;
+}

css/light-grey.scss

@@ -422,11 +422,11 @@
 		display: none;
 	}
 
-	.hljs {
+	//.hljs {
-		padding: 0.9em !important;
+	//	padding: 0.9em !important;
-		box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
+	//	box-shadow: 0 0px 3px 2px inset rgba(0, 0, 0, 0.4);
-		border-radius: 3px;
+	//	border-radius: 3px;
-	}
+	//}
 
 	td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited {
 		text-decoration: none;

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;
 		}

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
+		// Highlight code content for AttributeHTML and HTML AttributeText
-        $("[data-attribute-type='AttributeText'] .HTML pre").each(function(i, block) {
+        $('[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

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 }}