Merge pull request #5044 from artoscinote/ma_SCI_7974

Replace highlight.js with prism.js [SCI-7974]

app/assets/javascripts/application.js.erb

@@ -9,7 +9,6 @@
 //= require bootstrap-checkbox.min
 //= require typeahead.bundle.min
 //= require nested_form_fields
-//= require highlight.pack
 //= require jsPlumb-2.0.4-min
 //= require jsnetworkx
 //= require bootstrap-select
@@ -223,11 +222,6 @@ var HelperModule = (function(){
 
 (function() {
   $(document).on('turbolinks:load', function() {
-    // initialize code markup in rich text fields
-    $('[class^=language]').each(function(i, block) {
-      hljs.highlightBlock(block);
-    });
-
     // fix dropdown-menu style throughout the app
     $('.dropdown-header').parent('ul').addClass('custom-dropdown-menu');
   });

app/assets/javascripts/my_modules/protocols.js

@@ -1,4 +1,4 @@
-/* global TinyMCE I18n animateSpinner importProtocolFromFile */
+/* global TinyMCE Prism I18n animateSpinner importProtocolFromFile */
 /* global HelperModule GLOBAL_CONSTANTS */
 /* eslint-disable no-use-before-define, no-alert, no-restricted-globals, no-underscore-dangle */
 
@@ -13,7 +13,14 @@ function initEditMyModuleDescription() {
   var viewObject = $('#my_module_description_view');
   viewObject.on('click', function(e) {
     if ($(e.target).hasClass('record-info-link')) return;
-    TinyMCE.init('#my_module_description_textarea');
+    TinyMCE.init(
+      '#my_module_description_textarea',
+      {
+        onSaveCallback: () => {
+          Prism.highlightAllUnder(viewObject.get(0));
+        }
+      }
+    );
   }).on('click', 'a', function(e) {
     if ($(this).hasClass('record-info-link')) return;
     e.stopPropagation();

app/assets/javascripts/protocols/steps.js.erb

@@ -43,10 +43,6 @@
 
   initHandsOnTable($(document));
 
-  $('[class*=language]').each((i, block) => {
-    hljs.highlightBlock(block);
-  });
-
   SmartAnnotation.preventPropagation('.atwho-user-popover');
 
   $(function () {

app/assets/stylesheets/application.scss

@@ -1,5 +1,4 @@
 /*
- *= require highlightjs-github-theme
  *= require_self
  *= require jquery-ui/draggable
  *= require rails_bootstrap_forms

app/javascript/packs/prism.js

@@ -0,0 +1,2 @@
+import './prism/prism.js';
+import './prism/prism.css';

app/javascript/packs/prism/prism.css

@@ -0,0 +1,143 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+c+csharp+cpp+java+json+markup-templating+matlab+php+python+r+ruby */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+

app/javascript/packs/tiny_mce.js

@@ -1,4 +1,4 @@
-/* global I18n hljs GLOBAL_CONSTANTS HelperModule SmartAnnotation TinyMCE */
+/* global I18n GLOBAL_CONSTANTS HelperModule SmartAnnotation TinyMCE */
 
 import tinyMCE from 'tinymce/tinymce';
 import 'tinymce/models/dom';
@@ -49,18 +49,6 @@ if (typeof(window.preTinyMceInit) === 'function') {
 }
 
 window.TinyMCE = (() => {
-  function initHighlightjs() {
-    $('[class*=language]').each((i, block) => {
-      hljs.highlightBlock(block);
-    });
-  }
-
-  function initHighlightjsIframe(iframe) {
-    $('[class*=language]', iframe).each((i, block) => {
-      hljs.highlightBlock(block);
-    });
-  }
-
   function makeItDirty(editor) {
     const editorForm = $(editor.getContainer()).closest('form');
     editorForm.find('.tinymce-status-badge').addClass('hidden');
@@ -232,6 +220,7 @@ window.TinyMCE = (() => {
           placeholder: options.placeholder,
           toolbar_sticky: true,
           toolbar_sticky_offset: editorToolbaroffset,
+          codesample_global_prismjs: true,
           codesample_languages: [
             { text: 'R', value: 'r' },
             { text: 'MATLAB', value: 'matlab' },
@@ -381,7 +370,6 @@ window.TinyMCE = (() => {
 
             SmartAnnotation.init($(editor.contentDocument.activeElement));
             SmartAnnotation.preventPropagation('.atwho-user-popover');
-            initHighlightjsIframe($(editor.iframeElement).contents());
 
             if (options.afterInitCallback) { options.afterInitCallback(); }
           },
@@ -395,15 +383,6 @@ window.TinyMCE = (() => {
               return true;
             });
 
-            editor.on('NodeChange', (e) => {
-              const node = e.element;
-              setTimeout(() => {
-                if ($(node).is('pre') && !editor.isHidden()) {
-                  initHighlightjsIframe($(editor.iframeElement).contents());
-                }
-              }, 200);
-            });
-
             editor.on('Dirty', () => {
               makeItDirty(editor);
             });
@@ -441,7 +420,6 @@ window.TinyMCE = (() => {
               restoreDraftNotification(selector, editor);
             });
           },
-          codesample_content_css: $(selector).data('highlightjs-path'),
           save_onsavecallback: (editor) => { saveAction(editor); }
         });
       }
@@ -451,7 +429,6 @@ window.TinyMCE = (() => {
     destroyAll: () => {
       if (tinyMCE.activeEditor) {
         tinyMCE.activeEditor.remove();
-        initHighlightjs();
       }
     },
     refresh: () => {
@@ -468,7 +445,6 @@ window.TinyMCE = (() => {
     makeItDirty: (editor) => {
       makeItDirty(editor);
     },
-    highlight: initHighlightjs,
     wrapTables: (container) => {
       container.find('table').toArray().forEach((table) => {
         if ($(table).parent().hasClass('table-wrapper')) return;

app/javascript/vue/shared/tinymce.vue

@@ -34,7 +34,6 @@
                     :data-tinymce-object="`tinymce-${objectType}-description-${objectId}`"
                     :data-object-type="objectType"
                     :data-object-id="objectId"
-                    :data-highlightjs-path="this.getStaticUrl('highlightjs-url')"
                     :data-last-updated="lastUpdated * 1000"
                     :data-tinymce-asset-path="this.getStaticUrl('tiny-mce-assets-url')"
                     :placeholder="placeholder"
@@ -89,6 +88,8 @@
         } else {
           this.wrapTables();
         }
+
+        this.initCodeHighlight();
       },
       characterCount() {
         if (this.editorInstance()) {
@@ -119,6 +120,8 @@
       } else {
         this.wrapTables();
       }
+
+      this.initCodeHighlight();
     },
     methods: {
       initTinymce(e) {
@@ -137,6 +140,7 @@
               }
               this.$emit('editingDisabled');
               this.wrapTables();
+              this.initCodeHighlight();
             },
             afterInitCallback: () => {
               this.active = true;
@@ -172,6 +176,11 @@
       },
       editorInstance() {
         return tinyMCE.activeEditor;
+      },
+      initCodeHighlight() {
+        this.$nextTick(() => {
+          Prism.highlightAllUnder(this.$el);
+        });
       }
     }
   }

app/views/my_modules/_description_form.html.erb

@@ -19,6 +19,5 @@
                           tinymce_object: "tinymce-my-module-description-#{@my_module.id}",
                           object_type: 'my_module',
                           object_id: @my_module.id,
-                          highlightjs_path: asset_path('highlightjs-github-theme.css'),
                           last_updated: @my_module.updated_at.to_i * 1000 } ) %>
 <% end %>

app/views/my_modules/protocols/_protocol_description_form.html.erb

@@ -19,6 +19,5 @@
                           tinymce_object: "tinymce-protocol-description-#{protocol.id}",
                           object_type: 'protocol',
                           object_id: protocol.id,
-                          highlightjs_path: asset_path('highlightjs-github-theme.css'),
                           last_updated: protocol.updated_at.to_i * 1000 } ) %>
 <% end %>

app/views/result_texts/_edit.html.erb

@@ -10,7 +10,6 @@
                              autocomplete: 'off',
                              data: { object_type: 'result_text',
                                      object_id: @result.result_text.id,
-                                     highlightjs_path: asset_path('highlightjs-github-theme.css'),
                                      last_updated: @result.updated_at.to_i * 1000 }) %>
     <% end %><br />
     <div class="align-right">

app/views/result_texts/_new.html.erb

@@ -9,7 +9,6 @@
                              autocomplete: 'off',
                              data: { object_type: 'result_text',
                                      object_id: @result.result_text.id,
-                                     highlightjs_path: asset_path('highlightjs-github-theme.css'),
                                      last_updated: @result.updated_at.to_i * 1000 }) %>
     <% end %><br />
     <div class="align-right">

app/views/shared/_tiny_mce_editor.html.erb

@@ -14,6 +14,5 @@
                         data: {
                           object_type: object.class.to_s.underscore,
                           object_id: object.id,
-                          highlightjs_path: asset_path('highlightjs-github-theme.css'),
                           last_updated: object.updated_at.to_i * 1000 } ) %>
 <% end %>

vendor/assets/stylesheets/highlightjs-github-theme.css

@@ -1,99 +0,0 @@
-/*
-
-github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #333;
-  background: #f8f8f8;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #998;
-  font-style: italic;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: bold;
-}
-
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
-}
-
-.hljs-string,
-.hljs-doctag {
-  color: #d14;
-}
-
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: bold;
-}
-
-.hljs-subst {
-  font-weight: normal;
-}
-
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: bold;
-}
-
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #000080;
-  font-weight: normal;
-}
-
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
-}
-
-.hljs-symbol,
-.hljs-bullet {
-  color: #990073;
-}
-
-.hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #999;
-  font-weight: bold;
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}