@micromag/editor 0.3.158 → 0.3.161

package/es/index.js

@@ -7,7 +7,7 @@ import React, { useMemo, useRef, useCallback, useState, forwardRef, useEffect }
 import { useIntl, FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
-import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
+import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
 import { useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
 import { useRouteMatch, useHistory, Route, MemoryRouter } from 'react-router';
@@ -1583,9 +1583,9 @@ var EditorPreview = function EditorPreview(_ref) {
         previewScale = _getSizeWithinBounds.scale;
 
     return {
-      width: maxWidth,
-      height: maxHeight,
-      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
+      width: maxWidth * previewScale,
+      height: maxHeight * previewScale // transform: `scale(${previewScale}, ${previewScale})`,
+
     };
   }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
   var currentScreen = useMemo(function () {
@@ -1642,7 +1642,7 @@ var EditorPreview = function EditorPreview(_ref) {
     style: previewStyle
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$8.viewerContainer
-  }, /*#__PURE__*/React.createElement(Viewer, {
+  }, /*#__PURE__*/React.createElement(PlaybackProvider, null, /*#__PURE__*/React.createElement(Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
@@ -1652,7 +1652,7 @@ var EditorPreview = function EditorPreview(_ref) {
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
-  }))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
+  })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
     className: styles$8.deviceMenu
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {

package/lib/index.js

@@ -1603,9 +1603,9 @@ var EditorPreview = function EditorPreview(_ref) {
         previewScale = _getSizeWithinBounds.scale;
 
     return {
-      width: maxWidth,
-      height: maxHeight,
-      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
+      width: maxWidth * previewScale,
+      height: maxHeight * previewScale // transform: `scale(${previewScale}, ${previewScale})`,
+
     };
   }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
   var currentScreen = React.useMemo(function () {
@@ -1662,7 +1662,7 @@ var EditorPreview = function EditorPreview(_ref) {
     style: previewStyle
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$8.viewerContainer
-  }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
@@ -1672,7 +1672,7 @@ var EditorPreview = function EditorPreview(_ref) {
     interactions: null,
     renderContext: "edit",
     onScreenChange: onScreenChange
-  }))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$8.deviceMenu
   }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
     items: devices.map(function (it) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.158",
+    "version": "0.3.161",
     "description": "",
     "keywords": [
         "javascript"
@@ -62,11 +62,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.3.156",
-        "@micromag/elements": "^0.3.158",
-        "@micromag/fields": "^0.3.156",
-        "@micromag/screens": "^0.3.158",
-        "@micromag/viewer": "^0.3.158",
+        "@micromag/core": "^0.3.161",
+        "@micromag/elements": "^0.3.161",
+        "@micromag/fields": "^0.3.161",
+        "@micromag/screens": "^0.3.161",
+        "@micromag/viewer": "^0.3.161",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "edf7b21d97eeee8cc13826133a01ff12c0e9a6d9"
+    "gitHead": "badf4dd6125aa3169f3d01afc712be5b8181d898"
 }