Code tool updated (#45)

package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
     "body-parser": "latest",
-    "codex.editor": "^2.1.3",
+    "codex.editor": "^2.8.1",
     "codex.editor.delimiter": "^1.0.2",
     "codex.editor.embed": "^2.1.2",
     "codex.editor.header": "^2.0.5",
@@ -25,7 +25,7 @@
     "eslint-plugin-standard": "^4.0.0",
     "express": "~4.16.0",
     "http-errors": "~1.7.1",
-    "module-dispatcher": "^1.0.2",
+    "module-dispatcher": "^2.0.0",
     "morgan": "~1.9.0",
     "multer": "^1.3.1",
     "nedb": "^1.8.0",
@@ -44,7 +44,7 @@
     "babel-loader": "^8.0.2",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
-    "codex.editor.code": "^2.0.0",
+    "codex.editor.code": "^2.3.1",
     "codex.editor.inline-code": "^1.2.0",
     "codex.editor.list": "^1.2.3",
     "codex.editor.marker": "^1.0.1",

public/dist/code-styling.css

@@ -1 +1 @@
-.hljs{display:block;background:#fff;padding:.5em;color:#333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
+.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

src/frontend/js/classes/codeStyler.js

@@ -1,6 +1,7 @@
 import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
-import style from 'highlight.js/styles/github-gist.css';
+import xml from 'highlight.js/lib/languages/xml';
+import style from 'highlight.js/styles/atom-one-dark.css';
 
 /**
  * @class CodeStyles
@@ -11,11 +12,12 @@ 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' ]}) {
+  constructor({selector, languages = [ 'javascript', 'xml' ]}) {
     this.codeBlocksSelector = selector;
     this.languages = languages;
     this.langsAvailable = {
-      javascript
+      javascript,
+      xml
     };
 
     this.init();

src/frontend/js/classes/editor.js

@@ -57,20 +57,20 @@ export default class Editor {
           class: CodeTool,
           shortcut: 'CMD+SHIFT+D'
         },
-        inlineCode: {
-          class: InlineCode,
-          shortcut: 'CMD+SHIFT+C'
-        },
         rawTool: {
           class: RawTool,
           shortcut: 'CMD+SHIFT+R'
         },
+        delimiter: Delimiter,
+        embed: Embed,
+        inlineCode: {
+          class: InlineCode,
+          shortcut: 'CMD+SHIFT+C'
+        },
         marker: {
           class: Marker,
           shortcut: 'CMD+SHIFT+M'
-        },
+        }
-        delimiter: Delimiter,
-        embed: Embed
       },
       data: {
         blocks: [

src/frontend/styles/components/page.pcss

@@ -53,6 +53,11 @@
     letter-spacing: -0.04px;
     margin-bottom: -0.2em;
   }
+
+  .cdx-marker {
+    background: rgba(245,235,111,0.33);
+    padding: 3px 0;
+  }
 }
 
 /**
@@ -79,9 +84,9 @@
  */
 .block-code {
   padding: 20px !important;
-  border-radius: 3px;
+  border-radius: 5px;
   font-size: 13px;
-  border: 1px solid var(--color-line-gray);
+  //border: 1px solid var(--color-line-gray);
   font-family: Menlo,Monaco,Consolas,Courier New,monospace;
   line-height: 1.7em;
 }

src/views/pages/blocks/code.twig

@@ -1 +1,2 @@
-<pre class="block-code">{{ code }}</pre>
+<pre class="block-code">{{ code|escape }}</pre>
+

src/views/pages/form.twig

@@ -7,11 +7,11 @@
     }
   </style>
   <section data-module="writing">
-    <module-settings hidden>
+    <textarea name="module-settings" hidden>
       {
         "page": {{ page | json_encode }}
       }
-    </module-settings>
+    </textarea>
     <header class="writing-header">
       <span class="writing-header__left">
         <span>

yarn.lock

@@ -1393,9 +1393,9 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codex.editor.code@^2.0.0:
+codex.editor.code@^2.3.1:
-  version "2.3.0"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/codex.editor.code/-/codex.editor.code-2.3.0.tgz#e3090c2940b2a8c2185bd32d735ac8c60213345f"
+  resolved "https://registry.yarnpkg.com/codex.editor.code/-/codex.editor.code-2.3.1.tgz#9e304316b37d2464177b162d1b28650b104f3a01"
 
 codex.editor.delimiter@^1.0.2:
   version "1.0.2"
@@ -1433,9 +1433,9 @@ codex.editor.raw@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/codex.editor.raw/-/codex.editor.raw-2.0.2.tgz#3e5b01c9a2b5356c7709b13422f57c7852214b18"
 
-codex.editor@^2.1.3:
+codex.editor@^2.8.1:
-  version "2.7.28"
+  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/codex.editor/-/codex.editor-2.7.28.tgz#c3a89136da335483d2f752157c78a710c7d83504"
+  resolved "https://registry.yarnpkg.com/codex.editor/-/codex.editor-2.8.1.tgz#98abab33f3c084ba264b2f547ae56196ae577830"
 
 collection-visit@^1.0.0:
   version "1.0.0"
@@ -3828,9 +3828,9 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
-module-dispatcher@^1.0.2:
+module-dispatcher@^2.0.0:
-  version "1.0.2"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/module-dispatcher/-/module-dispatcher-1.0.2.tgz#791669395f33a04f335eda1b6211b79ab1a9a946"
+  resolved "https://registry.yarnpkg.com/module-dispatcher/-/module-dispatcher-2.0.0.tgz#67701ff90cca9b51d500be4782abb1014ccb2b10"
 
 morgan@~1.9.0:
   version "1.9.1"