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

This commit is contained in:
Stephen Abello
2020-02-25 09:54:18 +01:00
parent ea59f7bc23
commit ccfd3848fb
5 changed files with 47 additions and 1 deletions

View File

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

View File

@@ -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'),

View File

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

View File

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

View File

@@ -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':