Transport controller and file model (#42)

* Transport controller and file model

* Use randomBytes intead of pseudoRandomBytes

* Cover all lines with tests

* Update code style

* Update code style

* View for image block

* Fix serving static files

* Mkdir -p for uploads dirs

* Add default secret param

* Add image Tool

* Update src/utils/objects.js

Co-Authored-By: talyguryn <vitalik7tv@yandex.ru>

* Use vars for image tool colors

* Revert var

* Remove --color-gray-border var

* Update src/controllers/transport.js

Co-Authored-By: talyguryn <vitalik7tv@yandex.ru>

* Add mp4 support for Image Tool

src/frontend/js/classes/codeStyler.js

@@ -2,8 +2,7 @@ import hljs from 'highlight.js/lib/highlight';
 import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import json from 'highlight.js/lib/languages/json';
-// eslint-disable-next-line
-import style from 'highlight.js/styles/atom-one-dark.css';
+import style from 'highlight.js/styles/github-gist.css'; // eslint-disable-line no-unused-vars
 
 /**
  * @class CodeStyles

src/frontend/js/classes/editor.js

@@ -10,6 +10,7 @@ import CodeTool from '@editorjs/code';
 import Delimiter from '@editorjs/delimiter';
 import InlineCode from '@editorjs/inline-code';
 import List from '@editorjs/list';
+import Image from '@editorjs/image';
 import RawTool from '@editorjs/raw';
 import Embed from '@editorjs/embed';
 
@@ -34,20 +35,6 @@ export default class Editor {
             placeholder: options.headerPlaceholder || ''
           }
         },
-        // image: {
-        //   class: ImageTool,
-        //   inlineToolbar: true,
-        //   config: {
-        //     endpoints: {
-        //       byFile: '/editor/transport',
-        //       byUrl: '/editor/transport'
-        //     }
-        //   }
-        // },
-        list: {
-          class: List,
-          inlineToolbar: true
-        },
         quote: {
           class: Quote,
           inlineToolbar: true
@@ -69,6 +56,28 @@ export default class Editor {
         marker: {
           class: Marker,
           shortcut: 'CMD+SHIFT+M'
+        },
+        list: {
+          class: List,
+          inlineToolbar: true
+        },
+        image: {
+          class: Image,
+          inlineToolbar: true,
+          config: {
+            types: 'image/*, video/mp4',
+            endpoints: {
+              byFile: '/api/transport/image',
+              byUrl: '/api/transport/fetch'
+            },
+            additionalRequestData: {
+              map: JSON.stringify({
+                path: 'file:url',
+                size: 'file:size',
+                mimetype: 'file:mime'
+              })
+            }
+          }
         }
       },
       data: {

src/frontend/styles/components/page.pcss

@@ -116,6 +116,54 @@
   }
 }
 
+/**
+ * Image
+ * ==================
+ */
+.block-image {
+ margin: 40px auto;
+ text-align: center;
+
+ &__content {
+   img {
+     vertical-align: bottom;
+     max-width: 100%;
+   }
+
+   &--stretched {
+     max-width: none !important;
+     width: calc(100% + 120px) !important;
+     margin-left: -60px;
+
+     img {
+       width: 100%;
+     }
+   }
+
+   &--bordered {
+     img {
+       border: 3px solid var(--color-line-gray);
+       box-sizing: border-box;
+     }
+   }
+
+   &--with-background {
+     padding: 15px;
+     background: var(--color-line-gray);
+
+     img {
+       max-width: 60%;
+       margin: 0 auto;
+     }
+   }
+ }
+
+ &__caption {
+   margin: 1em auto;
+   color: var(--color-text-second);
+ }
+}
+
 /**
  * Delimiter
  * ==================

src/frontend/styles/vars.pcss

@@ -4,7 +4,6 @@
   --color-line-gray: #E8E8EB;
   --color-link-active: #388AE5;
   --color-button-danger: #ff1629;
-  --color-gray-border: rgba(var(--color-line-gray), 0.48);
 
   /**
    * Site layout sizes