Integrate CodeXEditor: dynamic import added (#5)

* Main elements created

* Add Editor to the writing page

src/frontend/js/app.js

@@ -2,11 +2,42 @@
 // eslint-disable-next-line no-unused-vars
 import css from '../styles/main.pcss';
 
-module.exports = class Docs {
+/**
+ * Module Dispatcher
+ * @see {@link https://github.com/codex-team/moduleDispatcher}
+ * @author CodeX
+ */
+import ModuleDispatcher from 'module-dispatcher';
+
+/**
+ * Import modules
+ */
+import Writing from './modules/writing';
+
+/**
+ * Main app class
+ */
+class Docs {
   /**
    * @constructor
    */
   constructor() {
     console.log('CodeX Docs initialized');
+    this.writing = new Writing();
+
+    document.addEventListener('DOMContentLoaded', (event) => {
+      this.docReady();
+    });
   }
-};
+
+  /**
+   * Document is ready
+   */
+  docReady() {
+    this.moduleDispatcher = new ModuleDispatcher({
+      Library: window.Docs
+    });
+  }
+}
+
+module.exports = new Docs();

src/frontend/js/modules/writing.js

@@ -0,0 +1,28 @@
+/**
+ * Module for pages create/edit
+ */
+module.exports = class Writing {
+  constructor(){
+  }
+
+  /**
+   * Called by ModuleDispatcher to initialize module from DOM
+   */
+  init(config, moduleEl) {
+    this.editorWrapper = document.createElement('div');
+    this.editorWrapper.id = 'codex-editor';
+
+    moduleEl.appendChild(this.editorWrapper);
+
+
+    this.loadEditor().then(() => {
+      console.log('Editor loaded');
+    })
+  };
+
+  loadEditor(){
+    return import(/* webpackChunkName: "codex-editor" */ 'codex.editor').then(({ default: CodexEditor }) => {
+       console.log('codex-editor', new CodexEditor());
+    }).catch(error => 'An error occurred while loading CodeX Editor');
+  }
+};