@micromag/editor 0.2.387 → 0.2.391

package/assets/css/styles.css

@@ -3,12 +3,12 @@
 .micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-menus-screens-item,.micromag-editor-menus-screens-items{margin:0;padding:0;list-style:none}.micromag-editor-menus-screens-container{position:relative}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-5px;padding:0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{display:block;position:relative;z-index:2;width:33.3%;padding:5px}@media screen and (min-width:540px){.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{width:20%}}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-button{display:block}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{background:rgba(0,0,0,.9)}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-settings{position:absolute;top:0;right:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items,.micromag-editor-menus-screens-container.micromag-editor-menus-screens-noWrap .micromag-editor-menus-screens-items{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-item{width:100%}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-item{width:auto;margin:5px;padding:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-button{width:100px}
 .micromag-editor-menus-screen-types-container{position:relative}.micromag-editor-menus-screen-types-row{margin-bottom:2rem}.micromag-editor-menus-screen-types-row .micromag-editor-menus-screen-types-title{padding-bottom:.25rem;border-bottom:1px solid #dedede;font-size:.85rem}.micromag-editor-menus-screen-types-row:last-child{margin-bottom:0}
 .micromag-editor-modals-screen-types-container .micromag-editor-modals-screen-types-selected{background-color:#a13dff}
-.micromag-editor-screens-container .micromag-editor-screens-navbar{background-color:#1c1c1c}
+.micromag-editor-screens-container .micromag-editor-screens-navbar{background-color:#1c1c1c;z-index:999}
 .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
 .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;width:40px;height:30px;padding:5px}
 .micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;padding:20px 0;text-align:center}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:block}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}@media only screen and (min-width:1398px){.micromag-editor-preview-container.micromag-editor-preview-withoutDevicesSizes .micromag-editor-preview-bottom{padding:200px 20px}}
 .micromag-editor-menus-breadcrumb-container li{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-menus-breadcrumb-container li:before{float:none}.micromag-editor-menus-breadcrumb-container li:last-child{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
 .micromag-editor-forms-screen-container{position:relative;padding:.5rem}.micromag-editor-forms-screen-container .micromag-editor-forms-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
 .micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-description{margin-bottom:10px}.micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
-.micromag-editor-form-panel.micromag-editor-form-leave{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-leave{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-leaveActiveLeft,.micromag-editor-form-panel.micromag-editor-form-leaveActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-leaveActiveBottom,.micromag-editor-form-panel.micromag-editor-form-leaveActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-leaveActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
+.micromag-editor-form-panel.micromag-editor-form-leave{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-leave{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-leaveActiveLeft,.micromag-editor-form-panel.micromag-editor-form-leaveActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-leaveActiveBottom,.micromag-editor-form-panel.micromag-editor-form-leaveActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-leaveActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-leaveActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
 .micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{scrollbar-width:none}.micromag-editor-container .micromag-editor-left::-webkit-scrollbar,.micromag-editor-container .micromag-editor-right::-webkit-scrollbar{display:none}.micromag-editor-container .micromag-editor-center,.micromag-editor-container.micromag-editor-fullscreen,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-preview,.micromag-editor-container .micromag-editor-right{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-editor-container>.micromag-editor-inner{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%}.micromag-editor-container .micromag-editor-center,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{display:none;z-index:1}.micromag-editor-container .micromag-editor-center.micromag-editor-visible,.micromag-editor-container .micromag-editor-left.micromag-editor-visible,.micromag-editor-container .micromag-editor-right.micromag-editor-visible{display:block}.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{overflow-y:auto;scroll-behavior:smooth}.micromag-editor-container .micromag-editor-left>.micromag-editor-inner,.micromag-editor-container .micromag-editor-right>.micromag-editor-inner{min-height:100%}.micromag-editor-container .micromag-editor-center{background-color:#2b2b2b}.micromag-editor-screen-medium>.micromag-editor-top{display:none}.micromag-editor-screen-medium>.micromag-editor-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:100%}.micromag-editor-screen-medium .micromag-editor-center,.micromag-editor-screen-medium .micromag-editor-left,.micromag-editor-screen-medium .micromag-editor-right{position:relative;height:100%}.micromag-editor-screen-medium .micromag-editor-left{width:140px}.micromag-editor-screen-medium .micromag-editor-center{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:auto}.micromag-editor-screen-medium .micromag-editor-right{width:320px}

package/es/index.js

@@ -2,7 +2,7 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useRouteMatch, useParams, Route, useHistory, MemoryRouter } from 'react-router';
+import { useRouteMatch, Route, useHistory, MemoryRouter } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useFieldsManager, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, useRoutes, useScreensManager, useRoutePush, useUrlGenerator, useScreenSize, useScreenDefinition, useFormsComponents, ScreenProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
@@ -639,9 +639,11 @@ var EditorScreens = function EditorScreens(_ref) {
   var push = useRoutePush();
   var url = useUrlGenerator();
 
-  var _useParams = useParams(),
-      _useParams$screen = _useParams.screen,
-      currentScreenId = _useParams$screen === void 0 ? null : _useParams$screen;
+  var _useRouteParams = useRouteParams({
+    screenOnly: true
+  }),
+      _useRouteParams$scree = _useRouteParams.screen,
+      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
 
   var createScreenFromDefinition = useCallback(function (definition) {
     var _ref3 = value || {},
@@ -662,13 +664,15 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen); // const currentScreenIndex = !isTheme
-    //     ? screens.findIndex(({ id }) => id === currentScreenId) || null
-    //     : null;
-    // console.log(currentScreenIndex); // eslint-disable-line
+    var newScreen = createScreen(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
+    });
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
 
     var newValue = _objectSpread(_objectSpread({}, value), {}, {
-      components: [].concat(_toConsumableArray(currentScreens || []), [newScreen])
+      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
     });
 
     if (onChange !== null) {
@@ -678,29 +682,29 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref6) {
-      var id = _ref6.id;
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
       return id;
     });
 
-    var _ref7 = value || {},
-        _ref7$components = _ref7.components,
-        currentScreens = _ref7$components === void 0 ? [] : _ref7$components;
+    var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
 
-    var currentIds = currentScreens.map(function (_ref8) {
-      var id = _ref8.id;
+    var currentIds = currentScreens.map(function (_ref9) {
+      var id = _ref9.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref9, index) {
-      var id = _ref9.id;
+    var sameOrder = listItems.reduce(function (same, _ref10, index) {
+      var id = _ref10.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder) {
       var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: _toConsumableArray(currentScreens).sort(function (_ref10, _ref11) {
-          var idA = _ref10.id;
-          var idB = _ref11.id;
+        components: _toConsumableArray(currentScreens).sort(function (_ref11, _ref12) {
+          var idA = _ref11.id;
+          var idB = _ref12.id;
           var indexA = ids.indexOf(idA);
           var indexB = ids.indexOf(idB);
 
@@ -719,8 +723,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref12) {
-      var type = _ref12.type;
+    var currentScreen = isTheme ? screens.find(function (_ref13) {
+      var type = _ref13.type;
       return type === definition.id;
     }) || null : null;
 
@@ -765,9 +769,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
-    render: function render(_ref13) {
-      var _ref13$match$params$s = _ref13.match.params.screen,
-          screenId = _ref13$match$params$s === void 0 ? null : _ref13$match$params$s;
+    render: function render(_ref14) {
+      var _ref14$match$params$s = _ref14.match.params.screen,
+          screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -799,8 +803,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref14) {
-      var type = _ref14.type;
+    selectedTypes: isTheme ? screens.map(function (_ref15) {
+      var type = _ref15.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,

package/lib/index.js

@@ -657,9 +657,11 @@ var EditorScreens = function EditorScreens(_ref) {
   var push = contexts.useRoutePush();
   var url = contexts.useUrlGenerator();
 
-  var _useParams = reactRouter.useParams(),
-      _useParams$screen = _useParams.screen,
-      currentScreenId = _useParams$screen === void 0 ? null : _useParams$screen;
+  var _useRouteParams = useRouteParams({
+    screenOnly: true
+  }),
+      _useRouteParams$scree = _useRouteParams.screen,
+      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
 
   var createScreenFromDefinition = React.useCallback(function (definition) {
     var _ref3 = value || {},
@@ -680,13 +682,15 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen); // const currentScreenIndex = !isTheme
-    //     ? screens.findIndex(({ id }) => id === currentScreenId) || null
-    //     : null;
-    // console.log(currentScreenIndex); // eslint-disable-line
+    var newScreen = createScreen(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
+    });
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
 
     var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-      components: [].concat(_toConsumableArray__default["default"](currentScreens || []), [newScreen])
+      components: [].concat(_toConsumableArray__default["default"](currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray__default["default"](currentScreens.slice(currentScreenIndex)))
     });
 
     if (onChange !== null) {
@@ -696,29 +700,29 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = React.useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref6) {
-      var id = _ref6.id;
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
       return id;
     });
 
-    var _ref7 = value || {},
-        _ref7$components = _ref7.components,
-        currentScreens = _ref7$components === void 0 ? [] : _ref7$components;
+    var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
 
-    var currentIds = currentScreens.map(function (_ref8) {
-      var id = _ref8.id;
+    var currentIds = currentScreens.map(function (_ref9) {
+      var id = _ref9.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref9, index) {
-      var id = _ref9.id;
+    var sameOrder = listItems.reduce(function (same, _ref10, index) {
+      var id = _ref10.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder) {
       var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-        components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref10, _ref11) {
-          var idA = _ref10.id;
-          var idB = _ref11.id;
+        components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref11, _ref12) {
+          var idA = _ref11.id;
+          var idB = _ref12.id;
           var indexA = ids.indexOf(idA);
           var indexB = ids.indexOf(idB);
 
@@ -737,8 +741,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = React.useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref12) {
-      var type = _ref12.type;
+    var currentScreen = isTheme ? screens.find(function (_ref13) {
+      var type = _ref13.type;
       return type === definition.id;
     }) || null : null;
 
@@ -783,9 +787,9 @@ var EditorScreens = function EditorScreens(_ref) {
     className: "flex-grow-1 d-flex w-100 p-2"
   }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
     path: [routes.screen, routes.home],
-    render: function render(_ref13) {
-      var _ref13$match$params$s = _ref13.match.params.screen,
-          screenId = _ref13$match$params$s === void 0 ? null : _ref13$match$params$s;
+    render: function render(_ref14) {
+      var _ref14$match$params$s = _ref14.match.params.screen,
+          screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -817,8 +821,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React__default["default"].createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref14) {
-      var type = _ref14.type;
+    selectedTypes: isTheme ? screens.map(function (_ref15) {
+      var type = _ref15.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.2.387",
+    "version": "0.2.391",
     "description": "",
     "keywords": [
         "javascript"
@@ -55,11 +55,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.386",
-        "@micromag/elements": "^0.2.386",
-        "@micromag/fields": "^0.2.386",
-        "@micromag/screens": "^0.2.386",
-        "@micromag/viewer": "^0.2.387",
+        "@micromag/core": "^0.2.391",
+        "@micromag/elements": "^0.2.391",
+        "@micromag/fields": "^0.2.391",
+        "@micromag/screens": "^0.2.391",
+        "@micromag/viewer": "^0.2.391",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -74,5 +74,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0b45b8b2b2c9e602a6845388281f6c2864f7cd84"
+    "gitHead": "8136754d570e4fc8c1bb9c89f8635279f252e89f"
 }