Merge remote-tracking branch 'origin/master' into reactions

# Conflicts:
#	.codexdocsrc.sample
#	package.json
#	public/dist/code-styling.bundle.js
#	public/dist/editor.bundle.js
#	public/dist/main.bundle.js

.codexdocsrc.sample

@@ -1,5 +1,6 @@
 {
   "title": "CodeX Docs",
+  "description": "A block-styled editor with clean JSON output",
   "menu": [
     "Guides",
     "API",
@@ -13,4 +14,5 @@
     "title": "What do you think?",
     "reactions": ["👍", "👌", "👎"]
   }
+  "yandexMetrikaId": ""
 }

package.json

@@ -44,13 +44,13 @@
     "@babel/preset-env": "^7.1.0",
     "@codexteam/misprints": "^1.0.0",
     "@codexteam/reactions": "^1.0.2",
-    "@editorjs/code": "^2.4.0",
+    "@editorjs/code": "^2.4.1",
     "@editorjs/delimiter": "^1.1.0",
-    "@editorjs/editorjs": "^2.12.0",
-    "@editorjs/header": "^2.2.2",
-    "@editorjs/image": "^2.1.2",
+    "@editorjs/editorjs": "^2.12.4",
+    "@editorjs/header": "^2.2.3",
+    "@editorjs/image": "^2.2.0",
     "@editorjs/inline-code": "^1.3.0",
-    "@editorjs/list": "^1.3.2",
+    "@editorjs/list": "^1.3.3",
     "@editorjs/marker": "^1.2.0",
     "@editorjs/table": "^1.2.0",
     "@editorjs/warning": "^1.1.0",

public/dist/code-styling.css

@@ -1 +1,2 @@
 .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}
+.diff{display:inline-block;width:100%}.diff span{color:inherit!important}.diff--added{color:#277030;background-color:#e2fce7}.diff--added:before{content:"+";opacity:.4}.diff--removed{color:#ae363c;background-color:#ffe6e6}.diff--removed:before{content:"-";opacity:.4}

src/frontend/js/classes/codeStyler.js

@@ -4,6 +4,7 @@ import xml from 'highlight.js/lib/languages/xml';
 import json from 'highlight.js/lib/languages/json';
 import css from 'highlight.js/lib/languages/css';
 import style from 'highlight.js/styles/github-gist.css'; // eslint-disable-line no-unused-vars
+import diffStyles from '../../styles/diff.pcss'; // eslint-disable-line no-unused-vars
 
 /**
  * @class CodeStyles
@@ -47,6 +48,20 @@ export default class CodeStyler {
 
     Array.from(codeBlocks).forEach(block => {
       hljs.highlightBlock(block);
+      this.highlightDiffs(block);
     });
   }
+
+  /**
+   * Highlight lines started from + or -
+   * @param {Element} block
+   */
+  highlightDiffs(block){
+    let lines = block.innerHTML.split('\n').map((line, index) => {
+      return line.replace(/^\+(.*)$/ig, '<span class="diff diff--added">$1</span>')
+                 .replace(/^-(.*)$/ig, '<span class="diff diff--removed">$1</span>');
+    });
+
+    block.innerHTML = lines.join('\n');
+  }
 }

src/frontend/js/classes/editor.js

@@ -77,7 +77,7 @@ export default class Editor {
 
         warning: {
           class: Warning,
-          inlineToolbar: ['inlineCode', 'italic', 'bold']
+          inlineToolbar: true
         },
 
         /**

src/frontend/styles/components/aside.pcss

@@ -1,11 +1,6 @@
 .docs-aside {
-  position: sticky;
-  top: var(--layout-padding-vertical);
   font-size: 14px;
   letter-spacing: 0.01em;
-  overflow-y: scroll;
-  max-height: 100vh;
-  //padding-right: 50px;
 
   @media (--mobile) {
     position: static;
@@ -63,6 +58,10 @@
       }
     }
   }
+
+  &__current {
+    color: var(--color-page-active) !important;
+  }
 }
 
 .docs-aside-toggler {

src/frontend/styles/components/page.pcss

@@ -61,7 +61,8 @@
     padding: 3px 0;
   }
 
-  .inline-code {
+  .inline-code,
+  .block-header a .inline-code {
     display: inline-block;
     background: rgba(251,241,241,0.78);
     color: #C44545;
@@ -71,6 +72,11 @@
     font-family: Menlo, Monaco, Consolas, Courier New, monospace;
     font-size: 0.84em;
     line-height: 1.4em;
+    border-bottom: 0;
+
+    &:hover {
+      background: rgba(251,241,241,0.78);
+    }
   }
 
   &__content {
@@ -84,6 +90,18 @@
         color: var(--color-link-active);
         border-bottom-color: var(--color-link-active);
       }
+
+      .inline-code {
+        margin: 0;
+        padding: 0.15em .5em;
+        border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
+        color: #1f6fd8;
+        background-color: #daf1fe;
+
+        &:hover {
+          background-color: #c8edfe;
+        }
+      }
     }
   }
 
@@ -158,6 +176,10 @@
       transform: none;
     }
   }
+
+  .inline-code {
+    line-height: inherit;
+  }
 }
 
 /**
@@ -171,14 +193,24 @@
   font-family: var(--font-mono);
   line-height: 1.7em;
   font-size: 13px;
+  overflow-x: auto;
+  margin: 15px 0;
 
   &__content {
+    display: inline-block !important;
     white-space: pre;
     word-wrap: normal;
-    overflow-x: auto;
     background: transparent !important;
     padding: 15px !important;
     color: #41314e !important;
+    min-width: 100%;
+    box-sizing: border-box;
+
+    .diff {
+      margin: 0 -15px;
+      padding-left: 15px;
+      padding-right: 15px;
+    }
   }
 
   .hljs-name,

src/frontend/styles/diff.pcss

@@ -0,0 +1,28 @@
+.diff {
+  display: inline-block;
+  width: 100%;
+
+  span {
+    color: inherit !important;
+  }
+
+  &--added {
+    color: #277030;
+    background-color: #e2fce7;
+
+    &::before {
+      content: '+';
+      opacity: 0.4;
+    }
+  }
+
+  &--removed {
+    color: rgb(174, 54, 60);
+    background-color: rgba(255, 230, 230, 1);
+
+    &::before {
+      content: '-';
+      opacity: 0.4;
+    }
+  }
+}

src/frontend/styles/vars.pcss

@@ -5,6 +5,7 @@
   --color-link-active: #2071cc;
   --color-button-danger: #ff5159;
   --color-bg-light: #f8f7fa;
+  --color-page-active: #ff1767;
 
   /**
    * Site layout sizes

src/views/components/aside.twig

@@ -4,7 +4,12 @@
 <div class="docs-aside">
     {% for firstLevelPage in menu %}
       <section class="docs-aside__section">
-        <a class="docs-aside__section-title"
+        <a
+          {% if page is defined and page._id == firstLevelPage._id%}
+            class="docs-aside__section-title docs-aside__current"
+          {% else %}
+            class="docs-aside__section-title"
+          {% endif %}
           {% if firstLevelPage.uri %}
             href="/{{ firstLevelPage.uri }}"
           {% else %}
@@ -17,6 +22,9 @@
             {% for child in firstLevelPage.children %}
               <li>
                 <a
+                {% if page is defined and page._id == child._id %}
+                  class="docs-aside__current"
+                {% endif %}
                 {% if child.uri %}
                   href="/{{ child.uri }}"
                 {% else %}

src/views/layout.twig

@@ -7,6 +7,7 @@
     <meta property="og:title" content="{{ page.title | striptags }}" />
     <meta property="article:modified_time" content="{{ (page.body.time / 1000) | date("c") }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="icon" type="image/png" href="/favicon.png">
   </head>
     <script>
       window.config = {
@@ -31,5 +32,19 @@
       </div>
     </div>
     <script src="/dist/main.bundle.js"></script>
+    {% if config.yandexMetrikaId is not empty %}
+      <script type="text/javascript" >
+        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+          m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+        (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+        ym({{ config.yandexMetrikaId }}, "init", {
+          clickmap:true,
+          trackLinks:true,
+          accurateTrackBounce:true
+        });
+      </script>
+      <noscript><div><img src="https://mc.yandex.ru/watch/{{ config.yandexMetrikaId }}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+    {% endif %}
   </body>
 </html>

src/views/pages/blocks/warning.twig

@@ -2,9 +2,11 @@
   <div class="block-warning__icon">
     ☝️
   </div>
-  <div class="block-warning__title">
-    {{ title }}
-  </div>
+  {% if title is not empty %}
+    <div class="block-warning__title">
+      {{ title }}
+    </div>
+  {% endif %}
   <div class="block-warning__message">
     {{ message }}
   </div>

src/views/pages/form.twig

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

src/views/pages/index.twig

@@ -4,7 +4,11 @@
   <title>{{ config.title }}</title>
   <link rel="stylesheet" href="/dist/main.css" />
   <link rel="preload" href="{{ config.landingFrameSrc }}" as="document">
+  <link rel="icon" type="image/png" href="/favicon.png?v=2">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta property="og:title" content="{{ config.title }}" />
+  <meta property="og:site_name" content="{{ config.title }}" />
+  <meta name="description" property="og:description" content="{{ config.description }}">
 </head>
 <body class="landing-body">
   {% include "components/header.twig" %}
@@ -12,6 +16,21 @@
     {{ svg('loader') }}
   </div>
   <iframe class="landing-frame" src="{{ config.landingFrameSrc }}" seamless frameborder="0" onload="this.style.opacity = 1; setTimeout(document.getElementById('frame-loader').remove(), 500)"></iframe>
+
+  {% if config.yandexMetrikaId is not empty %}
+    <script type="text/javascript" >
+      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+        m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+      ym({{ config.yandexMetrikaId }}, "init", {
+        clickmap:true,
+        trackLinks:true,
+        accurateTrackBounce:true
+      });
+    </script>
+    <noscript><div><img src="https://mc.yandex.ru/watch/{{ config.yandexMetrikaId }}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+  {% endif %}
 </body>
 </html>
 

yarn.lock

@@ -546,40 +546,40 @@
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
 
-"@editorjs/code@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.4.0.tgz#91919f30d50fcde221b6f5192590fade938e2df1"
-  integrity sha512-S9MKHpQrDhXOK2CsU3dmbqfDHS7KlSLb5+gI2u9jYrDf5IcfMxSTsuV+ZM1tWaU9Jbd/Z/OOpt7iyNDZdOcNwA==
+"@editorjs/code@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@editorjs/code/-/code-2.4.1.tgz#a1851c781c9ead9a84bd921f04df172a2383f550"
+  integrity sha512-R4UUApkm6FLuxrQoqISg6GL73t0WWOdoPdAmAa36xarmtmBRkxu4AfxIwzW2CtUD1CqG1T7Be6jnv4ZeUoMNYQ==
 
 "@editorjs/delimiter@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@editorjs/delimiter/-/delimiter-1.1.0.tgz#f61808ea92e4e289607d54441964f1cb8605410a"
   integrity sha512-0G36vEvvb94g6nu/qs2rVjC/qjxLnY20OfOgxROKSOOXzS7xnkTij5raeIxRiYueeLL5fMrzrvtFH7wclfxF+g==
 
-"@editorjs/editorjs@^2.12.0":
-  version "2.12.0"
-  resolved "https://registry.yarnpkg.com/@editorjs/editorjs/-/editorjs-2.12.0.tgz#e16faf0c1277c5adbca15a7cf661e2783cccada0"
-  integrity sha512-2FFlf8igXojdWz5SfHIH9fvPZZDr46QXXQZY09gprRN25aqZ43w6eygZlSIntknEmrsqtJXVmvrUrMQYjuo/eA==
+"@editorjs/editorjs@^2.12.4":
+  version "2.12.4"
+  resolved "https://registry.yarnpkg.com/@editorjs/editorjs/-/editorjs-2.12.4.tgz#3a98c907c0c0ff96bd667e5dd45e109ceb4d6a1a"
+  integrity sha512-5xevUVL+OvrhnVjaQARW7FlTtJhYPaUbs3Bft6+2PQ7Fvx5SquyrPPJomCdQA7+5uPAWQ8MtjxTVvSDPhujkYw==
 
-"@editorjs/header@^2.2.2":
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.2.2.tgz#47ce654032f7a094c0b40daa4545c61893033002"
-  integrity sha512-r9lmDVdVSNjnSoYmEMOSLp7BARWEU2O79UJjWPkLWAwV7RIOYO+s9fF3IbTEaPaltANAZvIzOYNmryGOhL8biA==
+"@editorjs/header@^2.2.3":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@editorjs/header/-/header-2.2.3.tgz#801908f2aadda708aa09da544a5683448ca01be1"
+  integrity sha512-eFPgsT/OJA7HxCl4idrH1ccZEkmVZWfEmwo7DysOAb2DI+5/IcBIVZbPv6EapjL6MOEHKzON8lCI4jQOaBJlLw==
 
-"@editorjs/image@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@editorjs/image/-/image-2.1.2.tgz#65d1967f3508a46dd1a5b942cac0752fe7d7e044"
-  integrity sha512-Q+IN04pyJQBFqUtejEUvbJQW26pkIEq6j6ApRqgNbWUjzVLHoBkuiL0eSvEAs+6uW//qt8AhNnnTokomDT7tBA==
+"@editorjs/image@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@editorjs/image/-/image-2.2.0.tgz#ede7bb52544cb6fd06a3dae5ed975173bf4f2f25"
+  integrity sha512-dPtHGOo/0KXwT5PtCLweg1xF719weYorK1sIwmM9y5TYRyHbMBb1mOuh9knkzwc2SEjtRMAgVkzPI6hmRd7JEw==
 
 "@editorjs/inline-code@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@editorjs/inline-code/-/inline-code-1.3.0.tgz#66b915d2c128ba520ba4b245067d40851d78355a"
   integrity sha512-pKvBYvPyaNZKiRd+jK8X2HDgAq8kDaOPXxUTB33He2L53OqbAJ8Cmt+8F4EQ3i0EyQYOrtT2uXnDQkjvVg41tg==
 
-"@editorjs/list@^1.3.2":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@editorjs/list/-/list-1.3.2.tgz#2c1939715e91a74fdb8561ba9d7d9ad933497ec2"
-  integrity sha512-Bv59LHkDG+q9yUtvJKxUTmnlNS+bH6p2KLPxH2W2DD52XIIMdudezmXrUO4Rv8HwLW5GA5hZrEXZyKJ4McG5og==
+"@editorjs/list@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@editorjs/list/-/list-1.3.3.tgz#26aab3a23d1a022375b16a1ef2130b3615aa5850"
+  integrity sha512-2kZm0a3bFKbIUDPn8qcS02sIhVx+ipEEGd7g1PaOlSa8Z4XyzBhcDn48NipWx1WSix/0GS4Eu05rl3K/0/3rvg==
 
 "@editorjs/marker@^1.2.0":
   version "1.2.0"