Customisation

src/config/langages.js

@@ -0,0 +1,25 @@
+module.exports = [
+    "python",
+    "c",
+    "c++",
+    "c#",
+    "javascript",
+    "java",
+    "haskell",
+    "smalltalk",
+    "coffescript",
+    "css",
+    "d",
+    "go",
+    "haskell",
+    "html",
+    "json",
+    "lua",
+    "php",
+    "r",
+    "ruby",
+    "scheme",
+    "shell",
+    "sql",
+    'oz',
+];

src/db/MongoDB.js

@@ -1,6 +1,7 @@
 const { MongoClient, ObjectID } = require("mongodb");
 var crypto = require('crypto');
 const { nanoid } = require('nanoid');
+const languages = require('../config/langages');
 const configs = require('../config/config');
 const utils = require('../utils');
 
@@ -12,7 +13,6 @@ const baseCode = [
     {uuid: utils.uuid(Math.random().toString(), 10), content: '    main(\'Hello World !\')'}
 ];
 
-
 class MongoDB {
     constructor (url) {
         this.client = new MongoClient(url, {
@@ -35,7 +35,7 @@ class MongoDB {
         }
     }
 
-    async createDocument (language) {
+    async createDocument (documentLanguage) {
         let doc = {
             content: baseCode,
             creationDate: Date.now(),
@@ -45,7 +45,7 @@ class MongoDB {
             editors: [],
             documentLink: '',
             linkView: '',
-            language: language,
+            language: documentLanguage,
             tab: 4
         };
         try {
@@ -173,7 +173,7 @@ class MongoDB {
     }
 
     async changeLanguage(documentLink, newLanguage) {
-        if (["python"].includes(newLanguage)) {
+        if (languages.includes(newLanguage)) {
             return this.changeParam(documentLink, 'language', newLanguage);
         }
     }

src/publics/css/base.less

@@ -2,7 +2,7 @@
 |      Generic      |
 \*******************/
 
-@background-color: #222;
+@background-color: #222222;
 @color: #fff;
 @font: sans-serif;
 @absolute-color: #d5e6ed;

src/publics/css/editor.less

@@ -1,3 +1,7 @@
+@background-color: #222222;
+@color: #fff;
+@header-height: 60px;
+
 /******************\
 |      Header      |
 \******************/
@@ -57,3 +61,56 @@ section#editor{
     background-color: red;
     border-radius: 10px;
 }
+
+/*******************\
+|  Navigation Bar   |
+\*******************/
+
+#customise{
+    position: fixed;
+    top: 1.1 * @header-height;
+    right: 0;
+    width: 20%;
+    height: 100%;
+    max-width: 300px;
+    min-width: 200px;
+    padding: 20px;
+    background-color: darken(@background-color, 2%);
+    border-left: 1px solid #111111;
+    z-index: 5;
+
+    ul{
+        list-style: none;
+
+        li{
+            padding-bottom: 20px;
+
+            h3{
+                padding: 5px 0;
+                color: darken(@color, 50%);
+                letter-spacing: 3px;
+                border-bottom: 1px solid lighten(@background-color, 10%);
+                display: inline;
+            }
+
+            > :not(h3){
+                padding: 7px;
+                margin-top: 20px;
+                border-radius: 10px;
+            }
+
+            select,
+            input{
+                color: @color;
+                background-color: lighten(@background-color, 5%);
+                border-color: @background-color;
+                width: 90%;
+            }
+
+            #qrcode{
+                background-color: white;
+                display: inline-block;
+            }
+        }
+    }
+}

src/publics/js/dev/component/custom.js

@@ -1,3 +1,62 @@
 /**
- * Tab customization (allow convert current file)
+ * Tab customization
  */
+
+import {editor, socket} from "/js/dev/page/editor.js";
+import {patterns} from "/js/dev/page/editor/prism/patterns.js";
+import PrismCustom from "/js/dev/page/editor/prism/prismCustom.js";
+
+export default class Customize{
+    /** Init the customize object
+     * @param {Editable} editable
+     */
+    constructor(editable) {
+        this.editable = editable;
+
+        document.getElementById('option-language').addEventListener('change', e => {
+            language = e.target.value.toLowerCase();
+            this.editable.updateAllHighlighting();
+            socket.send('language', {language});
+        });
+
+        document.addEventListener('socket.receive.language', e => {
+            if(Object.keys(patterns).includes(e.detail.language.toLowerCase())){
+                language = e.detail.language.toLowerCase();
+                document.getElementById('option-language').value = language;
+                this.editable.updateAllHighlighting();
+            }
+        });
+
+        for(const lang of Object.keys(patterns)){
+            const option = document.createElement('option');
+            option.innerText = lang;
+            if(lang === language) option.selected = true;
+            document.getElementById('option-language').appendChild(option);
+        }
+
+        document.getElementById('option-space-size').addEventListener('change', e => {
+            editor.tab.setSize(e.target.value);
+
+            for(const child of this.editable.editable.children){
+                child.innerText = editor.tab.updateText(child.innerText);
+                new PrismCustom(child, language).apply();
+            }
+
+            socket.send('changeTabSize', {size: e.target.value});
+        });
+
+        document.getElementById('option-space-size').value = this.editable.tab.size;
+
+        document.addEventListener('socket.receive.changeTabSize', e => {
+            if(e.detail.size && Number.isInteger(parseInt(e.detail.size))){
+                editor.tab.setSize(e.detail.size);
+                document.getElementById('option-space-size').value = e.detail.size;
+
+                for(const child of this.editable.editable.children){
+                    child.innerText = editor.tab.updateText(child.innerText);
+                    new PrismCustom(child, language).apply();
+                }
+            }
+        });
+    }
+}

src/publics/js/dev/page/editor.js

@@ -5,9 +5,11 @@
  * @date Last modification on 16/11/2020
  * @version 1.0.1
  */
+import Customize from "/js/dev/component/custom.js";
 import Cursor from "/js/dev/page/editor/cursor.js";
 import download from "/js/dev/page/editor/download.js";
 import Editable from "/js/dev/page/editor/editable.js";
+import {patterns} from "/js/dev/page/editor/prism/patterns.js";
 import PrismCustom from "/js/dev/page/editor/prism/prismCustom.js";
 import EditorSocket from "/js/dev/page/editor/socket.js";
 import _ from "/js/dev/utils/element.js";
@@ -16,8 +18,12 @@ export const socket = new EditorSocket(doc_id);
 export const editor = new Editable(_.id('editor'));
 export const cursor = new Cursor(_.id('editor'));
 
+download(_.id('download'), _.id('editor'));
+
+if(!Object.keys(patterns).includes(language)) language = 'generic';
+
 for(const child of _.id('editor').children){
-    new PrismCustom(child, 'python').ApplyWithCaret();
+    new PrismCustom(child, language).apply();
 }
 
-download(_.id('download'), _.id('editor'));
+export const customize = new Customize(editor);

src/publics/js/dev/page/editor/editable.js

@@ -19,9 +19,9 @@ import Random from "/js/dev/utils/random.js";
 import {insertInText} from "/js/dev/utils/string.js";
 
 export default class Editable{
-    constructor(element) {
+    constructor(element, tabSize=initial_size) {
         this.editable = element;
-        this.tab = new Tab(element, TabType.SPACES, 4);
+        this.tab = Number.isInteger(tabSize) ? new Tab(element, TabType.SPACES, tabSize) : 4;
         this.linesManager = new LinesManager(element);
         this.last_request = {};
 
@@ -79,7 +79,7 @@ export default class Editable{
                     }
                     break;
                 default:
-                    if(!e.ctrlKey && !e.altKey) PrismCustom.onCurrent('python').ApplyWithCaret();
+                    if(!e.ctrlKey && !e.altKey) PrismCustom.onCurrent(language).ApplyWithCaret();
             }
             this.linesManager.change = true;
         });
@@ -223,7 +223,7 @@ export default class Editable{
             )
         );
         document.getSelection().collapseToEnd();
-        PrismCustom.onCurrent('python').ApplyWithCaret();
+        PrismCustom.onCurrent(language).ApplyWithCaret();
     }
 
     /**
@@ -234,7 +234,7 @@ export default class Editable{
         const currentElement = getNodeFromAttribute('uuid');
         currentElement.innerHTML = insertInText(currentElement.innerText, lines[0], Caret.getBeginPosition(currentElement));
 
-        PrismCustom.onCurrent('python').apply();
+        PrismCustom.onCurrent(language).apply();
 
         let currentUuid = currentElement.getAttribute('uuid');
         for(let i=1;i<lines.length;i++){
@@ -244,7 +244,7 @@ export default class Editable{
                 currentUuid,
                 lines[i]
             )
-            new PrismCustom(this.editable.querySelector('div[uuid="' + nextUuid + '"]'), 'python').apply();
+            new PrismCustom(this.editable.querySelector('div[uuid="' + nextUuid + '"]'), language).apply();
             currentUuid = nextUuid;
         }
     }
@@ -260,7 +260,7 @@ export default class Editable{
         }
         if(previousSibling !== null){
             const len = previousSibling.innerText.length;
-            previousSibling.innerHTML += line.innerHTML;
+            previousSibling.innerHTML += (previousSibling.innerHTML + line.innerHTML).replace('<br><br>', '<br>');
             line.remove();
             Caret.setPosition(previousSibling, len);
         }
@@ -302,4 +302,16 @@ export default class Editable{
         }
         return requests;
     }
+
+    /**
+     * Update all syntax highlighting
+     */
+    updateAllHighlighting(){
+        const current = getNodeFromAttribute('uuid')
+        for(const child of this.editable.children){
+            if(current === child) new PrismCustom(child, language).ApplyWithCaret();
+            else new PrismCustom(child, language).apply();
+
+        }
+    }
 }

src/publics/js/dev/page/editor/linesManager.js

@@ -67,7 +67,7 @@ export default class LinesManager{
         let element = this.select(uuid);
         if(element){
             element.innerText = htmlEncode(content);
-            new PrismCustom(element, 'python').apply();
+            new PrismCustom(element, language).apply();
         }else{
             Debug.warn(`Error when trying to update element with uuid '${uuid}': No div has this uuid.`)
         }