feat: Add TinyMceWidget on export (#365)

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx

@@ -5,6 +5,8 @@ import { selectors } from '../../../../../data/redux';
 import { AnswerOption, mapStateToProps } from './AnswerOption';
 
 jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
   selectors: {
     problem: {
       answers: jest.fn(state => ({ answers: state })),

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx

@@ -6,6 +6,8 @@ import { selectors } from '../../../../../data/redux';
 import { ExplanationWidget, mapStateToProps } from '.';
 
 jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
   selectors: {
     problem: {
       settings: jest.fn(state => ({ question: state })),

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx

@@ -6,6 +6,8 @@ import { selectors } from '../../../../../data/redux';
 import { QuestionWidget, mapStateToProps } from '.';
 
 jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
   actions: {
     problem: {
       updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'),

src/editors/containers/TextEditor/index.test.jsx

@@ -42,6 +42,8 @@ jest.mock('react', () => {
 });
 
 jest.mock('../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
   actions: {
     app: {
       initializeEditor: jest.fn().mockName('actions.app.initializeEditor'),

src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap

@@ -1,7 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
-<Fragment>
+<Component
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
   <SourceCodeModal
     close={[MockFunction modal.closeModal]}
     editorRef={
@@ -42,12 +52,23 @@ exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
       }
     }
     id="sOMeiD"
+    onEditorChange={[Function]}
   />
-</Fragment>
+</Component>
 `;
 
 exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
-<Fragment>
+<Component
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
   <ImageUploadModal
     clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
     close={[MockFunction modal.closeModal]}
@@ -102,12 +123,23 @@ exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
       }
     }
     id="sOMeiD"
+    onEditorChange={[Function]}
   />
-</Fragment>
+</Component>
 `;
 
 exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = `
-<Fragment>
+<Component
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
   <ImageUploadModal
     clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
     close={[MockFunction modal.closeModal]}
@@ -173,6 +205,7 @@ exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] =
       }
     }
     id="sOMeiD"
+    onEditorChange={[Function]}
   />
-</Fragment>
+</Component>
 `;

src/editors/sharedComponents/TinyMceWidget/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { Provider, connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Editor } from '@tinymce/tinymce-react';
 
@@ -21,6 +21,7 @@ import 'tinymce/plugins/image';
 import 'tinymce/plugins/imagetools';
 import 'tinymce/plugins/quickbars';
 
+import store from '../../data/store';
 import { selectors } from '../../data/redux';
 import ImageUploadModal from '../ImageUploadModal';
 import SourceCodeModal from '../SourceCodeModal';
@@ -37,6 +38,7 @@ export const TinyMceWidget = ({
   isLibrary,
   lmsEndpointUrl,
   studioEndpointUrl,
+  updateContent,
   ...props
 }) => {
   const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
@@ -46,7 +48,7 @@ export const TinyMceWidget = ({
   const imageSelection = hooks.selectedImage(null);
 
   return (
-    <>
+    <Provider store={store}>
       {isLibrary ? null : (
         <ImageUploadModal
           isOpen={isImgOpen}
@@ -68,6 +70,7 @@ export const TinyMceWidget = ({
       <Editor
         id={id}
         disabled={disabled}
+        onEditorChange={updateContent}
         {
           ...hooks.editorConfig({
             openImgModal,
@@ -84,7 +87,7 @@ export const TinyMceWidget = ({
           })
         }
       />
-    </>
+    </Provider>
   );
 };
 TinyMceWidget.defaultProps = {
@@ -97,6 +100,7 @@ TinyMceWidget.defaultProps = {
   id: null,
   disabled: false,
   editorContentHtml: undefined,
+  updateContent: () => ({}),
 };
 TinyMceWidget.propTypes = {
   editorType: PropTypes.string,
@@ -108,6 +112,7 @@ TinyMceWidget.propTypes = {
   id: PropTypes.string,
   disabled: PropTypes.bool,
   editorContentHtml: PropTypes.string,
+  updateContent: PropTypes.func,
 };
 
 export const mapStateToProps = (state) => ({

src/editors/sharedComponents/TinyMceWidget/index.test.jsx

@@ -23,6 +23,8 @@ jest.mock('../ImageUploadModal', () => 'ImageUploadModal');
 jest.mock('../SourceCodeModal', () => 'SourceCodeModal');
 
 jest.mock('../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
   selectors: {
     app: {
       lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
@@ -64,6 +66,7 @@ describe('TinyMceWidget', () => {
     studioEndpointUrl: 'sOmEoThERvaLue.cOm',
     disabled: false,
     id: 'sOMeiD',
+    updateContent: () => ({}),
   };
   describe('snapshots', () => {
     imgModalToggle.mockReturnValue({

src/index.jsx

@@ -5,6 +5,8 @@ import VideoSelectorPage from './editors/VideoSelectorPage';
 import DraggableList, { SortableItem } from './editors/sharedComponents/DraggableList';
 import ErrorAlert from './editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import Footer from './footer';
+import { TinyMceWidget } from './editors/sharedComponents/TinyMceWidget';
+import { prepareEditorRef } from './editors/sharedComponents/TinyMceWidget/hooks';
 
 export {
   messages,
@@ -14,5 +16,7 @@ export {
   SortableItem,
   ErrorAlert,
   Footer,
+  TinyMceWidget,
+  prepareEditorRef,
 };
 export default Placeholder;