New tools added + code highlighting (#12)

src/frontend/js/app.js

@@ -13,6 +13,7 @@ import ModuleDispatcher from 'module-dispatcher';
  * Import modules
  */
 import Writing from './modules/writing';
+import Page from './modules/page';
 
 /**
  * Main app class
@@ -25,6 +26,7 @@ class Docs {
     console.log('CodeX Docs initialized');
 
     this.writing = new Writing();
+    this.page = new Page();
 
     document.addEventListener('DOMContentLoaded', (event) => {
       this.docReady();

src/frontend/js/classes/codeStyler.js

@@ -0,0 +1,46 @@
+import hljs from "highlight.js/lib/highlight";
+import javascript from 'highlight.js/lib/languages/javascript';
+import style from 'highlight.js/styles/github-gist.css';
+
+/**
+ * @class CodeStyles
+ * @classdesc Provides styling for code blocks
+ */
+export default class CodeStyler {
+  /**
+   * @param {string} selector - CSS selector for code blocks
+   * @param {string[]} languages - list of languages to highlight, see hljs.listLanguages()
+   */
+  constructor({selector, languages = [ 'javascript' ]}) {
+    this.codeBlocksSelector = selector;
+    this.languages = languages;
+    this.langsAvailable = {
+      javascript
+    };
+
+    this.init();
+  }
+
+  /**
+   * Start to highlight
+   */
+  init() {
+    const codeBlocks = document.querySelectorAll(this.codeBlocksSelector);
+
+    if (!codeBlocks.length) {
+      return;
+    }
+
+    this.languages.forEach(lang => {
+      hljs.registerLanguage(lang, this.langsAvailable[lang]);
+    });
+
+    hljs.configure({
+      languages: this.languages
+    });
+
+    Array.from(codeBlocks).forEach(block => {
+      hljs.highlightBlock(block);
+    });
+  }
+}

src/frontend/js/classes/editor.js

@@ -1,5 +1,9 @@
 import CodeXEditor from 'codex.editor';
 import Header from 'codex.editor.header';
+import CodeTool from 'codex.editor.code';
+import InlineCode from 'codex.editor.inline-code';
+import Marker from 'codex.editor.marker';
+import ListTool from 'codex.editor.list';
 
 /**
  * Class for working with Editor.js
@@ -17,6 +21,19 @@ export default class Editor {
           config: {
             placeholder: 'Enter a title'
           }
+        },
+        code: CodeTool,
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+I'
+        },
+        Marker: {
+          class: Marker,
+          shortcut: 'CMD+SHIFT+M'
+        },
+        list: {
+          class: ListTool,
+          inlineToolbar: true
         }
       },
       data: initialData || {

src/frontend/js/modules/page.js

@@ -0,0 +1,36 @@
+/**
+ * @typedef {object} pageModuleSettings
+ */
+
+/**
+ * @class Page
+ * @classdesc Class for page module
+ */
+export default class Writing {
+  /**
+   * Creates base properties
+   */
+  constructor() {
+    this.codeStyler = null;
+  }
+
+  /**
+   * Called by ModuleDispatcher to initialize module from DOM
+   * @param {pageModuleSettings} settings - module settings
+   * @param {HTMLElement} moduleEl - module element
+   */
+  init(settings = {}, moduleEl) {
+    this.codeStyler = this.createCodeStyling();
+  };
+
+  /**
+   * Init code highlighting
+   */
+  async createCodeStyling() {
+    const {default: CodeStyler} = await import(/* webpackChunkName: "code-styling" */ './../classes/codeStyler');
+
+    return new CodeStyler({
+      selector: '.block-code',
+    });
+  };
+}