Some new styles, used by Image Tool (#479)

* Some new styles, used by Image Tool

* update example

* Update submodule

* increase version

* remove Simple

* update some packages

.babelrc

@@ -1,3 +1,12 @@
 {
-  "plugins": ["transform-runtime"]
+  "presets": [
+    ["@babel/preset-env", {
+      "modules": "umd"
+    }]
+  ],
+  "plugins": [
+    "babel-plugin-add-module-exports",
+    "babel-plugin-class-display-name",
+    "@babel/plugin-transform-runtime"
+  ]
 }

.gitmodules

@@ -25,3 +25,6 @@
 [submodule "example/tools/code"]
 	path = example/tools/code
 	url = https://github.com/codex-editor/code
+[submodule "example/tools/image"]
+	path = example/tools/image
+	url = git@github.com:codex-editor/image.git

example/example.html

@@ -42,7 +42,7 @@
    https://github.com/codex-editor/header#installation
    -->
   <script src="./tools/header/dist/bundle.js"></script><!-- Header -->
-  <script src="./tools/simple-image/dist/bundle.js"></script><!-- Simple Image -->
+  <script src="./tools/image/dist/bundle.js"></script><!-- Image -->
   <script src="./tools/delimiter/dist/bundle.js"></script><!-- Delimiter -->
   <script src="./tools/list/dist/bundle.js"></script><!-- List -->
   <script src="./tools/quote/dist/bundle.js"></script><!-- Quote -->
@@ -89,7 +89,13 @@
         /**
          * Or pass class directly without any configuration
          */
-        image: SimpleImage,
+        image: {
+          class: ImageTool,
+          config: {
+            url: 'http://localhost:8008',
+          },
+          inlineToolbar: ['link'],
+        },
 
         list: {
           class: List,
@@ -202,16 +208,6 @@
               text : 'Помимо этого, данные о Блоках удобно очищать, фильтровать и обрабатывать на бэкенде.'
             }
           },
-          {
-            type: 'image',
-            data: {
-              url : 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
-              caption: '',
-              stretched: false,
-              withBorder: true,
-              withBackground: false,
-            }
-          },
           {
             type : 'delimiter',
             data : {}
@@ -222,6 +218,18 @@
               text : 'Мы работали над этим редактором более двух лет. В отладке принимали участие известные медиа-проекты: vc.ru, TJ, DTF — с их помощью удалось найти и исправить много ошибок, стабилизировать ядро. Вместе с этим мы развивали API, который позволяет создавать плагины под любые задачи. Надеемся, вам понравится 😏'
             }
           },
+          {
+            type: 'image',
+            data: {
+              file: {
+                url : 'https://ifmo.su/upload/redactor_images/o_e48549d1855c7fc1807308dd14990126.jpg',
+              },
+              caption: '',
+              stretched: false,
+              withBorder: true,
+              withBackground: false,
+            }
+          },
         ]
       },
       onReady: function(){

example/tools/image

@@ -0,0 +1 @@
+Subproject commit 24a5fe205d55ab481233e60a8263f1433c316852

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "scripts": {
@@ -15,16 +15,16 @@
     "url": "git+https://github.com/codex-team/codex.editor.git"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.1.2",
     "@codexteam/shortcuts": "^1.0.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-add-module-exports": "^1.0.0",
     "babel-plugin-class-display-name": "^2.1.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-runtime": "^6.26.0",
     "css-loader": "^0.28.11",
     "eslint": "^4.19.1",
     "eslint-loader": "^2.1.0",

src/codex.js

@@ -3,8 +3,8 @@
 /**
  * Apply polyfills
  */
-import 'babel-core/register';
-if (!window || !window._babelPolyfill) require('babel-polyfill');
+import '@babel/register';
+if (!window || !window._babelPolyfill) require('@babel/polyfill');
 import 'components/polyfills';
 import Core from './components/core';
 

src/components/interfaces/api.ts

@@ -190,6 +190,8 @@ export interface IStylesAPI {
 
   loader: string;
 
+  button: string;
+
   settingsButton: string;
 
   settingsButtonActive: string;

src/components/modules/api-styles.ts

@@ -34,6 +34,7 @@ export default class StylesAPI extends Module {
        */
       input: 'cdx-input',
       loader: 'cdx-loader',
+      button: 'cdx-button',
 
       /**
        * Settings styles

src/styles/animations.css

@@ -47,26 +47,14 @@
   }
 
   0% {
-    transform: scale3d(0.86, 0.86, 0.86);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
     transform: scale3d(0.9, 0.9, 0.9);
   }
 
-  60% {
+  20% {
     transform: scale3d(1.03, 1.03, 1.03);
   }
 
-  80% {
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  to {
+  60% {
     transform: scale3d(1, 1, 1);
   }
 }

src/styles/export.css

@@ -59,3 +59,29 @@
     transform: rotate(360deg);
   }
 }
+
+/**
+ * Button
+ */
+.cdx-button {
+  padding: 13px;
+  border-radius: 3px;
+  border: 1px solid var(--color-gray-border);
+  font-size: 14.9px;
+  background: #fff;
+  box-shadow: 0 2px 2px 0 rgba(18,30,57,0.04);
+  color: var(--grayText);
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #FBFCFE;
+    box-shadow: 0 1px 3px 0 rgba(18,30,57,0.08);
+  }
+
+  svg {
+    height: 20px;
+    margin-right: 0.2em;
+    margin-top: -2px;
+  }
+}

src/styles/settings.css

@@ -13,6 +13,8 @@
 
   &--opened {
     display: block;
+    animation-duration: 0.5s;
+    animation-name: bounceIn;
   }
 
   &__plugin-zone {

src/styles/variables.css

@@ -97,7 +97,7 @@
    * Styles for Settings Button in Toolbar
    */
   --toolbar-button: {
-    display: inline-block;
+    display: inline-flex;
     width: 34px;
     height: 34px;
     line-height: 34px;
@@ -118,6 +118,11 @@
       background-color: var(--bg-light);
     }
 
+    & > svg,
+    .icon {
+      margin: auto;
+    }
+
     &--active {
       color: var(--color-active-icon);
     }

webpack.config.js

@@ -46,15 +46,12 @@ var babelLoader = {
   loader: 'babel-loader',
   options: {
     cacheDirectory: true,
-    presets: [
-      "env"
-    ],
     plugins: [
       /**
        * Dont need to use «.default» after «export default Class Ui {}»
        * @see  {@link https://github.com/59naga/babel-plugin-add-module-exports}
        */
-      'add-module-exports',
+      // 'add-module-exports',
       /**
        * Babel transforms some awesome ES6 features to ES5 with extra code, such as Class, JSX.
        * This plugin makes all generated extra codes to one module which significantly reduces the bundle code size.
@@ -65,7 +62,7 @@ var babelLoader = {
       // ['babel-plugin-transform-helper', {
       //   helperFilename:'build/__tmp_babel_helpers.js'
       // }],
-      'class-display-name',
+      // 'class-display-name',
     ]
   }
 };