Chore: release a new version v3.12.8🚀

scaleflex · Dec 17, 2020 · 04261ca · 04261ca
1 parent 94006b2
commit 04261ca
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,10 @@ Types of changes:
 - ...
 
 -------------
+## 3.12.8 - 2020-12-17
+### Fixed
+- showing the appropriate styles for the plugin while being showing inside page not as modal.
+
 ## 3.12.7 - 2020-11-23
 ### Fixed
 - Styling of adjust controls by having spaces between each control.

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 > Repository includes React version and Vanilla JS adapter for standalone usage
 
-[![Release](https://img.shields.io/badge/release-v3.12.7-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
+[![Release](https://img.shields.io/badge/release-v3.12.8-blue.svg)](https://github.com/scaleflex/filerobot-image-editor/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
@@ -140,7 +140,7 @@ or use your custom color scheme
 Use the latest CDNized plugin version:
 
 ```html
-<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.7/filerobot-image-editor.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.8/filerobot-image-editor.min.js"></script>
 ```
 
 ### <a name="quick_start"></a>Quick start

diff --git a/build/3.12.7/filerobot-image-editor.min.js → build/3.12.8/filerobot-image-editor.min.js b/build/3.12.7/filerobot-image-editor.min.js → build/3.12.8/filerobot-image-editor.min.js
diff --git a/build/3/filerobot-image-editor.min.js b/build/3/filerobot-image-editor.min.js
diff --git a/examples/js/src/index.html b/examples/js/src/index.html
@@ -297,7 +297,7 @@ <h2>Ready to get started?</h2>
           Include the following script into your project
         </p>
         <figure class="highlight">
-          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.7/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
+          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.8/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
         </figure>
       </div>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "filerobot-image-editor",
-  "version": "3.12.7",
+  "version": "3.12.8",
   "main": "dist/index.js",
   "description": "Edit, resize, and filter any image!",
   "author": "scaleflex",

diff --git a/projects/react/ImageEditorWrapper.js b/projects/react/ImageEditorWrapper.js
@@ -3,7 +3,7 @@ import ImageEditor from './ImageEditor';
 import { Container } from './styledComponents';
 import { ThemeProvider } from 'styled-components';
 import { Modal } from './components/Modal';
-import { CLOUDIMAGE_OPERATIONS, TOOLS, UPLOADER, ON_CLOSE_STATUSES, STANDARD_FONTS } from './config';
+import { CLOUDIMAGE_OPERATIONS, TOOLS, UPLOADER, ON_CLOSE_STATUSES, STANDARD_FONTS, CONTAINER_SELECTOR } from './config';
 import './assets/fonts/filerobot-font.css';
 import translations from './assets/i18n';
 import dark from './assets/theme/dark';
@@ -119,8 +119,8 @@ class ImageEditorWrapper extends Component {
 
     return (
       <ThemeProvider theme={{ ...theme }}>
-        {showInModal ?
-          <Modal
+        {showInModal
+        ? <Modal
             noBorder
             fullScreen={'lg'}
             isHideCloseBtn={true}
@@ -129,7 +129,15 @@ class ImageEditorWrapper extends Component {
             configModalId={config.elementId}
           >
             {Inner}
-          </Modal> : Inner}
+          </Modal>
+        : <div
+            className={CONTAINER_SELECTOR}
+            id={CONTAINER_SELECTOR}
+            style={{ width: '100%', height: '100%' }}
+          >
+            {Inner}
+          </div>
+        }
       </ThemeProvider>
     );
   }

diff --git a/projects/react/components/Modal.js b/projects/react/components/Modal.js
@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { CloseBtn } from './CloseBtn';
 import { variables } from '../styledComponents/styleUtils';
-import { MODAL_ID, ON_CLOSE_STATUSES } from '../config';
+import { CONTAINER_SELECTOR, MODAL_ID, ON_CLOSE_STATUSES } from '../config';
 
 
 const ModalOverlay = styled.div`
@@ -133,8 +133,8 @@ export class Modal extends Component {
     super(props);
 
     this.root = document.createElement('div');
-    this.root.classList.add('filerobot-image-editor-root');
-    this.root.id = 'filerobot-image-editor-root';
+    this.root.classList.add(CONTAINER_SELECTOR);
+    this.root.id = CONTAINER_SELECTOR;
 
     document.body.appendChild(this.root);
 

diff --git a/projects/react/config.js b/projects/react/config.js
@@ -1,3 +1,5 @@
+const CONTAINER_SELECTOR = 'filerobot-image-editor-root';
+
 // The library modal ID.
 const MODAL_ID = 'filerobot-image-editor-modal';
 
@@ -215,5 +217,6 @@ export {
   ON_CLOSE_STATUSES,
   CANVAS_ID,
   ORIGINAL_CANVAS_ID,
-  SAVE_MODES
+  SAVE_MODES,
+  CONTAINER_SELECTOR
 };