N°1164 #1491 - Fix syntax code highlighting display in CaseLog/HTML fields

application/itopwebpage.class.inc.php

@@ -80,6 +80,7 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
 		$this->add_linked_stylesheet("../css/c3.min.css");
 		$this->add_linked_stylesheet("../css/font-awesome/css/all.min.css");
 		$this->add_linked_stylesheet("../css/font-awesome/css/v4-shims.min.css");
+		$this->add_linked_stylesheet("../js/ckeditor/plugins/codesnippet/lib/highlight/styles/obsidian.css");
 
 		$this->add_linked_script('../js/jquery.layout.min.js');
 		$this->add_linked_script('../js/jquery.ba-bbq.min.js');
@@ -93,6 +94,7 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
 		$this->add_linked_script("../js/swfobject.js");
 		$this->add_linked_script("../js/ckeditor/ckeditor.js");
 		$this->add_linked_script("../js/ckeditor/adapters/jquery.js");
+		$this->add_linked_script("../js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js");
 		$this->add_linked_script("../js/jquery.qtip-1.0.min.js");
 		$this->add_linked_script('../js/property_field.js');
 		$this->add_linked_script('../js/icon_select.js');
@@ -350,6 +352,20 @@ JS
 		.magnificPopup({type: 'image', closeOnContentClick: true });
 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) {
+            hljs.highlightBlock(block);
+        });        
+		// Highlight code content for CaseLogs
+		$("[data-attribute-type='AttributeCaseLog'] .caselog_entry_html pre").each(function(i, block) {
+            hljs.highlightBlock(block);
+        });
+JS
+		);
 
 		$this->add_init_script(
 			<<< JS

core/htmlsanitizer.class.inc.php

@@ -183,7 +183,7 @@ class HTMLDOMSanitizer extends HTMLSanitizer
 		'h4' => array('style'),
 		'nav' => array('style'),
 		'section' => array('style'),
-		'code' => array('style'),
+		'code' => array('style', 'class'),
 		'table' => array('style', 'width', 'summary', 'align', 'border', 'cellpadding', 'cellspacing'),
 		'thead' => array('style'),
 		'tbody' => array('style'),

datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig

@@ -49,6 +49,7 @@
 		<link href="{{ app['combodo.absolute_url'] ~ 'css/selectize.default.css'|add_itop_version }}" rel="stylesheet">
 		<link href="{{ app['combodo.absolute_url'] ~ 'css/magnific-popup.css'|add_itop_version }}" rel="stylesheet">
 		<link href="{{ app['combodo.absolute_url'] ~ 'css/c3.min.css'|add_itop_version }}" rel="stylesheet">
+		<link href="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/plugins/codesnippet/lib/highlight/styles/obsidian.css'|add_itop_version }}" rel="stylesheet">
 		{# - Bootstrap theme #}
 		<link href="{{ app['combodo.portal.instance.conf'].properties.themes.bootstrap|add_itop_version }}" rel="stylesheet" id="css_bootstrap_theme">
 		{# - Portal adjustments for BS theme #}
@@ -119,6 +120,8 @@
 		{# 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#}
+		<script type="text/javascript" src="{{ app['combodo.absolute_url'] ~ 'js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.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 #}

js/ckeditor/config.js

@@ -40,4 +40,7 @@ CKEDITOR.editorConfig = function( config ) {
 
 	// Enable the browser spell checking
 	config.disableNativeSpellChecker = false;
+	
+	// Set theme for codesnippet plugin - N°1164
+	config.codeSnippet_theme = 'obsidian';
 };

sources/renderer/bootstrap/fieldrenderer/bssimplefieldrenderer.class.inc.php

@@ -150,6 +150,14 @@ EOF
 					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>');
 
@@ -349,6 +357,14 @@ 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
@@ -378,6 +394,14 @@ EOF
 
                         // 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':