@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/lib/translated/fi/modules/rce/plugins/instructure_documents/components/Link.js

@@ -30,7 +30,10 @@ import dragHtml from '../../../../sidebar/dragHtml';
 import { getIconFromType } from '../../shared/fileTypeUtils';
 import { isPreviewable } from '../../shared/Previewable';
 import { applyTimezoneOffsetToDate } from '../../shared/dateUtils';
+import RCEGlobals from '../../../RCEGlobals';
 export default function Link(props) {
+  var _RCEGlobals$getConfig;
+
   const [isHovering, setIsHovering] = useState(false);
   const {
     filename,
@@ -45,7 +48,8 @@ export default function Link(props) {
   const Icon = getIconFromType(content_type);
   const color = published ? 'success' : 'primary'; // Uses user locale and timezone
 
-  const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+  const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+  const dateString = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
   const publishedMsg = published ? "julkaistu" : "julkaisematon";
 
   function linkAttrsFromDoc() {
@@ -107,7 +111,7 @@ export default function Link(props) {
     return callback;
   }
 
-  function dateOrMessage(dateString) {
+  function dateOrMessage(str) {
     if (disabled && disabledMessage) {
       return /*#__PURE__*/React.createElement(View, {
         display: "block"
@@ -118,10 +122,10 @@ export default function Link(props) {
       }, disabledMessage)));
     }
 
-    if (dateString) {
+    if (str) {
       return /*#__PURE__*/React.createElement(View, {
         as: "div"
-      }, dateString);
+      }, str);
     }
   }
 
@@ -175,8 +179,8 @@ export default function Link(props) {
     size: "x-small",
     inline: false
   }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0"
   }, /*#__PURE__*/React.createElement(Text, {
@@ -185,8 +189,8 @@ export default function Link(props) {
     size: "x-small"
   }))), /*#__PURE__*/React.createElement(Flex.Item, {
     padding: "0 x-small 0 0",
-    grow: true,
-    shrink: true,
+    shouldGrow: true,
+    shouldShrink: true,
     textAlign: "start"
   }, /*#__PURE__*/React.createElement(View, {
     as: "div",

package/lib/translated/fi/modules/rce/plugins/instructure_documents/components/__tests__/Link.test.js

@@ -18,6 +18,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Link from '../Link';
+import RCEGlobals from '../../../../RCEGlobals';
 
 function renderComponent(props) {
   return render( /*#__PURE__*/React.createElement(Link, Object.assign({
@@ -42,10 +43,13 @@ function queryIconByName(elem, name) {
 
 describe('RCE "Documents" Plugin > Document', () => {
   beforeAll(() => {
-    ENV = {
-      // 	UTC/GMT -7 hours
-      TIMEZONE: 'America/Denver'
-    };
+    // UTC/GMT -7 hours
+    RCEGlobals.getConfig = jest.fn().mockReturnValue({
+      timezone: 'America/Denver'
+    });
+  });
+  afterAll(() => {
+    jest.resetAllMocks();
   });
   describe('renders', () => {
     it('the date', () => {

package/lib/translated/fi/modules/rce/plugins/instructure_equation/EquationEditorModal/__tests__/index.test.js

@@ -20,6 +20,7 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import EquationEditorModal from '../index';
 import mathml from '../mathml';
 import advancedPreference from '../advancedPreference';
+import RCEGlobals from '../../../../RCEGlobals';
 jest.useFakeTimers();
 
 const defaultProps = () => {
@@ -76,11 +77,9 @@ jest.mock('../advancedPreference', () => {
 describe('EquationEditorModal', () => {
   let editor, mockFn;
   beforeAll(() => {
-    ENV = {
-      FEATURES: {
-        new_equation_editor: true
-      }
-    };
+    RCEGlobals.setFeatures({
+      new_equation_editor: true
+    });
     MathfieldElement.prototype.getValue = jest.fn().mockImplementation(function () {
       if (this.tagName === 'MATH-FIELD') {
         return this.innerHTML;
@@ -94,6 +93,9 @@ describe('EquationEditorModal', () => {
       }
     });
   });
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
   beforeEach(() => {
     mockFn = jest.fn();
     editor = {

package/lib/translated/fi/modules/rce/plugins/instructure_equation/EquationEditorModal/index.js

@@ -79,7 +79,11 @@ export default class EquationEditorModal extends Component {
         return;
       }
 
-      ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      if (this.usedInCanvas()) {
+        // restore the original value
+        ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      }
+
       (_this$props$onModalDi = (_this$props = this.props).onModalDismiss) === null || _this$props$onModalDi === void 0 ? void 0 : _this$props$onModalDi.call(_this$props);
     };
 
@@ -94,7 +98,11 @@ export default class EquationEditorModal extends Component {
         onEquationSubmit(output);
       }
 
-      ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      if (this.usedInCanvas()) {
+        // restore the original value
+        ENV.disable_keyboard_shortcuts = this.hostPageDisablesShortcuts;
+      }
+
       onModalDismiss();
     };
 
@@ -145,8 +153,14 @@ export default class EquationEditorModal extends Component {
 
     this.handleOpen = () => {
       this.originalFormula = null;
-      this.hostPageDisablesShortcuts = ENV.disable_keyboard_shortcuts;
-      ENV.disable_keyboard_shortcuts = true;
+
+      if (this.usedInCanvas()) {
+        // store the original value (so it can be restored later)
+        this.hostPageDisablesShortcuts = ENV.disable_keyboard_shortcuts; // And disable keyboard shortcuts while we
+        // are inside the equation editor
+
+        ENV.disable_keyboard_shortcuts = true;
+      }
     };
 
     this.handleFieldRef = node => {
@@ -209,9 +223,10 @@ export default class EquationEditorModal extends Component {
         "data-testid": "equation-editor-modal-close",
         placement: "end",
         offset: "medium",
-        variant: "icon",
-        onClick: this.handleModalCancel
-      }, "Sulje"), /*#__PURE__*/React.createElement(Heading, null, title || label)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+        color: "primary",
+        onClick: this.handleModalCancel,
+        screenReaderLabel: "Sulje"
+      }), /*#__PURE__*/React.createElement(Heading, null, title || label)), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
         ref: node => {
           this.modalContent = node;
         },
@@ -362,6 +377,10 @@ export default class EquationEditorModal extends Component {
   selectionToLatex(selection) {
     const sansDelimiters = selection.substr(2, selection.length - 4);
     return sansDelimiters.replace(/ /g, '').trim();
+  }
+
+  usedInCanvas() {
+    return ENV && ENV.hasOwnProperty('disable_keyboard_shortcuts');
   } // ********* //
   // Callbacks //
   // ********* //

package/lib/translated/fi/modules/rce/plugins/instructure_equation/EquationEditorModal/mathml.js

@@ -15,7 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import $ from 'jquery'; // configure MathJax to use 'color' extension fo LaTeX coding
+import $ from 'jquery';
+import RCEGlobals from '../../../RCEGlobals'; // configure MathJax to use 'color' extension fo LaTeX coding
 
 const localConfig = {
   TeX: {
@@ -53,7 +54,9 @@ const mathml = {
     }
 
     if (!this.isMathJaxLoaded()) {
-      const locale = ENV.LOCALE || 'en'; // signal local config to mathjax as it loads
+      var _RCEGlobals$getConfig;
+
+      const locale = ((_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.locale) || 'en'; // signal local config to mathjax as it loads
 
       window.MathJax = localConfig;
       if (window.MathJaxIsLoading) return;
@@ -62,7 +65,7 @@ const mathml = {
         url: `//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=${configFile}&locale=${locale}`,
         cache: true,
         success: () => {
-          var _ENV, _ENV$FEATURES;
+          var _RCEGlobals$getFeatur;
 
           window.MathJax.Hub.Register.StartupHook('MathMenu Ready', function () {
             // get the mathjax context menu above the rce's equation editor
@@ -73,7 +76,7 @@ const mathml = {
             cb === null || cb === void 0 ? void 0 : cb();
           });
 
-          if ((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.new_math_equation_handling) {
+          if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.new_math_equation_handling) {
             window.MathJax.Hub.Register.MessageHook('Begin PreProcess', function (message) {
               mathImageHelper.catchEquationImages(message[1]);
             });
@@ -146,9 +149,9 @@ const mathml = {
   },
 
   isMathInElement(elem) {
-    var _ENV2, _ENV2$FEATURES, _ENV3, _ENV3$FEATURES;
+    var _RCEGlobals$getFeatur2, _RCEGlobals$getFeatur3;
 
-    if ((_ENV2 = ENV) !== null && _ENV2 !== void 0 && (_ENV2$FEATURES = _ENV2.FEATURES) !== null && _ENV2$FEATURES !== void 0 && _ENV2$FEATURES.new_math_equation_handling) {
+    if ((_RCEGlobals$getFeatur2 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur2 !== void 0 && _RCEGlobals$getFeatur2.new_math_equation_handling) {
       // handle the change from image + hidden mathml to mathjax formatted latex
       if (elem.querySelector('.math_equation_latex,.math_equation_mml')) {
         return true;
@@ -165,7 +168,7 @@ const mathml = {
       }
     }
 
-    if ((_ENV3 = ENV) !== null && _ENV3 !== void 0 && (_ENV3$FEATURES = _ENV3.FEATURES) !== null && _ENV3$FEATURES !== void 0 && _ENV3$FEATURES.new_equation_editor) {
+    if ((_RCEGlobals$getFeatur3 = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur3 !== void 0 && _RCEGlobals$getFeatur3.new_equation_editor) {
       return (elem === null || elem === void 0 ? void 0 : elem.getAttribute('data-testid')) === 'mathml-preview-element';
     }
 

package/lib/translated/fi/modules/rce/plugins/instructure_equation/EquationEditorToolbar/index.js

@@ -18,8 +18,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tabs } from '@instructure/ui-tabs';
-import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import buttons from './buttons';
 import MathIcon from '../MathIcon';
 const buttonContainerStyle = {
@@ -62,15 +61,15 @@ function EquationEditorToolbar(props) {
     return /*#__PURE__*/React.createElement("div", {
       style: buttonContainerStyle,
       key: name
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(IconButton, {
       onClick: () => props.executeCommand(command, advancedCommand),
-      icon: icon
-    }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, label, ", LaTeX: ", name)));
+      renderIcon: icon,
+      screenReaderLabel: `${label}, LaTeX: ${name}`
+    }));
   }));
 
   return /*#__PURE__*/React.createElement(Tabs, {
     variant: "secondary",
-    size: "medium",
     onRequestTabChange: handleTabChange,
     minHeight: "10rem",
     maxHeight: "10rem",

package/lib/translated/fi/modules/rce/plugins/instructure_equation/plugin.js

@@ -1,5 +1,3 @@
-var _ENV, _ENV$FEATURES;
-
 /*
  * Copyright (C) 2018 - present Instructure, Inc.
  *
@@ -21,97 +19,59 @@ import htmlEscape from 'escape-html';
 import formatMessage from '../../../format-message';
 import clickCallback, { oldClickCallback } from './clickCallback';
 import { IconEquationLine } from '@instructure/ui-icons/es/svg';
+import RCEGlobals from '../../RCEGlobals';
 
 function isEquationImage(node) {
   return node.tagName === 'IMG' && node.classList.contains('equation_image') || node.classList.contains('math_equation_latex');
 }
 
-if ((_ENV = ENV) !== null && _ENV !== void 0 && (_ENV$FEATURES = _ENV.FEATURES) !== null && _ENV$FEATURES !== void 0 && _ENV$FEATURES.new_equation_editor) {
-  tinymce.create('tinymce.plugins.InstructureEquation', {
-    init(ed) {
-      ed.ui.registry.addIcon('equation', IconEquationLine.src);
-      ed.addCommand('instructureEquation', clickCallback.bind(this, ed, document));
-      ed.ui.registry.addMenuItem('instructure_equation', {
-        text: "Yht\xE4l\xF6",
-        icon: 'equation',
-        onAction: () => ed.execCommand('instructureEquation')
-      });
-      ed.ui.registry.addToggleButton('instructure_equation', {
-        tooltip: htmlEscape("Lis\xE4\xE4 matemaattinen kaava"),
-        onAction: () => ed.execCommand('instructureEquation'),
-        icon: 'equation',
-
-        onSetup(buttonApi) {
-          const toggleActive = eventApi => {
-            buttonApi.setActive(isEquationImage(eventApi.element));
-          };
+tinymce.create('tinymce.plugins.InstructureEquation', {
+  init(ed) {
+    var _RCEGlobals$getFeatur;
 
-          ed.on('NodeChange', toggleActive);
-          return () => ed.off('NodeChange', toggleActive);
-        }
+    ed.ui.registry.addIcon('equation', IconEquationLine.src);
 
-      });
-      ed.ui.registry.addButton('instructure-equation-options', {
-        onAction() {
-          ed.execCommand('instructureEquation');
-        },
-
-        text: "Muokkaa kaavaa"
-      });
-      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
-        items: 'instructure-equation-options',
-        position: 'node',
-        predicate: isEquationImage,
-        scope: 'node'
-      });
+    if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.new_equation_editor) {
+      ed.addCommand('instructureEquation', clickCallback.bind(this, ed, document));
+    } else {
+      ed.addCommand('instructureEquation', oldClickCallback.bind(this, ed, document));
     }
 
-  }); // Register plugin
-
-  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
-} else {
-  tinymce.create('tinymce.plugins.InstructureEquation', {
-    init(ed) {
-      ed.ui.registry.addIcon('equation', IconEquationLine.src);
-      ed.addCommand('instructureEquation', oldClickCallback.bind(this, ed, document));
-      ed.ui.registry.addMenuItem('instructure_equation', {
-        text: "Yht\xE4l\xF6",
-        icon: 'equation',
-        onAction: () => ed.execCommand('instructureEquation')
-      });
-      ed.ui.registry.addToggleButton('instructure_equation', {
-        tooltip: htmlEscape("Lis\xE4\xE4 matemaattinen kaava"),
-        onAction: () => ed.execCommand('instructureEquation'),
-        icon: 'equation',
+    ed.ui.registry.addMenuItem('instructure_equation', {
+      text: "Yht\xE4l\xF6",
+      icon: 'equation',
+      onAction: () => ed.execCommand('instructureEquation')
+    });
+    ed.ui.registry.addToggleButton('instructure_equation', {
+      tooltip: htmlEscape("Lis\xE4\xE4 matemaattinen kaava"),
+      onAction: () => ed.execCommand('instructureEquation'),
+      icon: 'equation',
 
-        onSetup(buttonApi) {
-          const toggleActive = eventApi => {
-            buttonApi.setActive(isEquationImage(eventApi.element));
-          };
+      onSetup(buttonApi) {
+        const toggleActive = eventApi => {
+          buttonApi.setActive(isEquationImage(eventApi.element));
+        };
 
-          ed.on('NodeChange', toggleActive);
-          return () => ed.off('NodeChange', toggleActive);
-        }
+        ed.on('NodeChange', toggleActive);
+        return () => ed.off('NodeChange', toggleActive);
+      }
 
-      });
-      ed.ui.registry.addButton('instructure-equation-options', {
-        onAction
-        /* buttonApi */
-        () {
-          ed.execCommand('instructureEquation');
-        },
+    });
+    ed.ui.registry.addButton('instructure-equation-options', {
+      onAction() {
+        ed.execCommand('instructureEquation');
+      },
 
-        text: "Muokkaa kaavaa"
-      });
-      ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
-        items: 'instructure-equation-options',
-        position: 'node',
-        predicate: isEquationImage,
-        scope: 'node'
-      });
-    }
+      text: "Muokkaa kaavaa"
+    });
+    ed.ui.registry.addContextToolbar('instructure-equation-toolbar', {
+      items: 'instructure-equation-options',
+      position: 'node',
+      predicate: isEquationImage,
+      scope: 'node'
+    });
+  }
 
-  }); // Register plugin
+}); // Register plugin
 
-  tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);
-}
+tinymce.PluginManager.add('instructure_equation', tinymce.plugins.InstructureEquation);

package/lib/translated/fi/modules/rce/plugins/instructure_external_tools/components/LtiToolsModal/ExpandoText.js

@@ -40,7 +40,7 @@ export default function ExpandoText(props) {
     padding: "none none none xx-small",
     "aria-expanded": descExpanded,
     borderRadius: "medium",
-    focused: focused,
+    withFocusOutline: focused,
     onClick: () => {
       setDescExpanded(!descExpanded);
     },

package/lib/translated/fi/modules/rce/plugins/instructure_external_tools/components/LtiToolsModal/LtiTool.js

@@ -32,7 +32,7 @@ export default function LtiTool(props) {
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     as: "span",
-    focused: focused,
+    withFocusOutline: focused,
     className: css(styles.appButton),
     padding: "xxx-small xxx-small xx-small",
     borderRadius: "medium",

package/lib/translated/fi/modules/rce/plugins/instructure_external_tools/components/LtiToolsModal/index.js

@@ -73,8 +73,9 @@ export function LtiToolsModal(props) {
   }, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "end",
     offset: "medium",
-    onClick: props.onDismiss
-  }, "Sulje"), /*#__PURE__*/React.createElement(Heading, {
+    onClick: props.onDismiss,
+    screenReaderLabel: "Sulje"
+  }), /*#__PURE__*/React.createElement(Heading, {
     margin: "small"
   }, "Kaikki sovellukset"), /*#__PURE__*/React.createElement(View, {
     as: "div",
@@ -107,7 +108,7 @@ export function LtiToolsModal(props) {
 
   function renderTools(ltiButtons) {
     return /*#__PURE__*/React.createElement(List, {
-      variant: "unstyled"
+      isUnstyled: true
     }, ltiButtons.sort((a, b) => a.title.localeCompare(b.title)).map(b => {
       return /*#__PURE__*/React.createElement(List.Item, {
         key: b.id

package/lib/translated/fi/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/Header.js

@@ -22,7 +22,7 @@ import formatMessage from '../../../../../format-message';
 import { TextArea } from '@instructure/ui-text-area';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { View } from '@instructure/ui-view';
-import { Button } from '@instructure/ui-buttons';
+import { IconButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { IconQuestionLine } from '@instructure/ui-icons';
 import { decode } from '../../svg/utils';
@@ -65,15 +65,17 @@ export const Header = _ref => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     on: ['hover', 'focus'],
     placement: "top",
-    tip: /*#__PURE__*/React.createElement(View, {
+    renderTip: /*#__PURE__*/React.createElement(View, {
       display: "block",
       id: "alt-text-label-tooltip",
       maxWidth: "14rem"
     }, tooltipText)
-  }, /*#__PURE__*/React.createElement(Button, {
-    icon: IconQuestionLine,
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    renderIcon: IconQuestionLine,
+    withBackground: false,
+    withBorder: false,
     size: "small",
-    variant: "icon"
+    screenReaderLabel: "Toggle tooltip"
   }))));
   return /*#__PURE__*/React.createElement(Flex, {
     direction: "column",

package/lib/translated/fi/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageCropper/Modal.js

@@ -21,6 +21,8 @@ import { Modal } from '@instructure/ui-modal';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
+import { Alert } from '@instructure/ui-alerts';
+import { Spinner } from '@instructure/ui-spinner';
 import formatMessage from '../../../../../../format-message';
 import { cropperSettingsReducer, actions, defaultState } from '../../../reducers/imageCropper';
 import { Preview } from './Preview';
@@ -33,13 +35,58 @@ const handleSubmit = (onSubmit, settings) => createCroppedImageSvg(settings).the
   type: 'image/svg+xml'
 }))).then(base64Image => onSubmit(settings, base64Image));
 
+const renderBody = (settings, dispatch, message, loading) => {
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Flex, {
+      justifyItems: "center",
+      margin: ""
+    }, /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Spinner, {
+      margin: "small",
+      renderTitle: "Ladataan...",
+      size: "large"
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    margin: "none"
+  }, message && /*#__PURE__*/React.createElement(Flex.Item, {
+    "data-testid": "alert-message"
+  }, /*#__PURE__*/React.createElement(Alert, {
+    variant: "info",
+    renderCloseButtonLabel: "Close",
+    margin: "small",
+    timeout: 10000
+  }, message)), /*#__PURE__*/React.createElement(Flex.Item, {
+    margin: "0 0 small 0"
+  }, /*#__PURE__*/React.createElement(Controls, {
+    settings: settings,
+    dispatch: dispatch
+  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Preview, {
+    settings: settings,
+    dispatch: dispatch
+  })));
+};
+
+const renderFooter = (settings, onClose) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose,
+    margin: "0 x-small 0 0"
+  }, "Peruuta"), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    type: "submit"
+  }, "Tallenna"));
+};
+
 export const ImageCropperModal = _ref => {
   let {
     open,
     onClose,
     onSubmit,
     image,
-    cropSettings
+    message,
+    cropSettings,
+    loading
   } = _ref;
   const [settings, dispatch] = useReducer(cropperSettingsReducer, defaultState);
   useEffect(() => {
@@ -55,9 +102,16 @@ export const ImageCropperModal = _ref => {
     });
   }, [cropSettings]);
   return /*#__PURE__*/React.createElement(Modal, {
+    "data-mce-component": true,
+    as: "form",
+    label: "Rajaa kuva",
     size: "large",
     open: open,
     onDismiss: onClose,
+    onSubmit: e => {
+      e.preventDefault();
+      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
+    },
     shouldCloseOnDocumentClick: false
   }, /*#__PURE__*/React.createElement(Modal.Header, {
     id: "imageCropperHeader"
@@ -65,42 +119,25 @@ export const ImageCropperModal = _ref => {
     placement: "end",
     offset: "small",
     onClick: onClose,
-    screenReaderLabel: "Close"
-  }), /*#__PURE__*/React.createElement(Heading, null, "Rajaa kuva")), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Flex, {
-    direction: "column",
-    margin: "none"
-  }, /*#__PURE__*/React.createElement(Flex.Item, {
-    margin: "0 0 small 0"
-  }, /*#__PURE__*/React.createElement(Controls, {
-    settings: settings,
-    dispatch: dispatch
-  })), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(Preview, {
-    settings: settings,
-    dispatch: dispatch
-  })))), /*#__PURE__*/React.createElement(Modal.Footer, {
+    screenReaderLabel: "Sulje"
+  }), /*#__PURE__*/React.createElement(Heading, null, "Rajaa kuva")), /*#__PURE__*/React.createElement(Modal.Body, null, renderBody(settings, dispatch, message, loading)), !loading && /*#__PURE__*/React.createElement(Modal.Footer, {
     id: "imageCropperFooter"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: onClose,
-    margin: "0 x-small 0 0"
-  }, "Peruuta"), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    type: "submit",
-    onClick: e => {
-      e.preventDefault();
-      handleSubmit(onSubmit, settings).then(onClose).catch(onClose);
-    }
-  }, "Tallenna")));
+  }, renderFooter(settings, onClose)));
 };
 ImageCropperModal.propTypes = {
   image: PropTypes.string.isRequired,
   cropSettings: ImageCropperSettingsPropTypes,
+  message: PropTypes.string,
   open: PropTypes.bool,
   onClose: PropTypes.func,
-  onSubmit: PropTypes.func
+  onSubmit: PropTypes.func,
+  loading: PropTypes.bool
 };
 ImageCropperModal.defaultProps = {
   open: false,
   cropSettings: null,
+  message: null,
+  loading: false,
   onClose: () => {},
   onSubmit: () => {}
 };