From c65f60ec105181b78f14bba896325235b7c29588 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 28 Feb 2023 16:37:52 -0500
Subject: [PATCH] feat: refactor tinymce editor to sharedComponents (#255)

---
 .../containers/EditorContainer/index.jsx      |   2 +-
 .../__snapshots__/index.test.jsx.snap         |  16 +-
 .../__snapshots__/index.test.jsx.snap         |  21 +-
 .../EditProblemView/QuestionWidget/index.jsx  |  57 ++--
 .../QuestionWidget/index.test.jsx             |  35 +-
 .../QuestionWidget/messages.js                |   5 +
 .../SwitchToAdvancedEditorCard.jsx            |   3 +-
 .../SwitchToAdvancedEditorCard.test.jsx.snap  |   2 +-
 .../components/EditProblemView/index.jsx      |   1 +
 .../components/EditProblemView/index.test.jsx |   5 +-
 src/editors/containers/ProblemEditor/hooks.js |  73 -----
 .../containers/ProblemEditor/hooks.test.js    |  96 ------
 .../containers/ProblemEditor/index.jsx        |  10 +-
 .../containers/ProblemEditor/index.test.jsx   |  23 +-
 .../__snapshots__/index.test.jsx.snap         | 282 +++-------------
 src/editors/containers/TextEditor/hooks.js    | 172 ----------
 .../containers/TextEditor/hooks.test.jsx      | 218 +------------
 src/editors/containers/TextEditor/index.jsx   |  66 +---
 .../containers/TextEditor/index.test.jsx      |  38 +--
 src/editors/data/constants/tinyMCE.js         |   4 +
 .../__snapshots__/index.test.jsx.snap}        |   2 +-
 .../BaseModal/index.jsx}                      |   0
 .../BaseModal/index.test.jsx}                 |   2 +-
 .../BaseModal}/messages.js                    |   2 +-
 .../ImageSettingsModal/AltTextControls.jsx    |   0
 .../AltTextControls.test.jsx                  |   2 +-
 .../ImageSettingsModal/DimensionControls.jsx  |   0
 .../DimensionControls.test.jsx                |   2 +-
 .../AltTextControls.test.jsx.snap             |   0
 .../DimensionControls.test.jsx.snap           |   0
 .../__snapshots__/index.test.jsx.snap         |   0
 .../ImageSettingsModal/hooks.js               |   2 +-
 .../ImageSettingsModal/hooks.test.js          |   4 +-
 .../ImageSettingsModal/index.jsx              |   4 +-
 .../ImageSettingsModal/index.scss             |   0
 .../ImageSettingsModal/index.test.jsx         |   2 +-
 .../ImageSettingsModal/messages.js            |   0
 .../SelectImageModal/Gallery.jsx              |   4 +-
 .../SelectImageModal/Gallery.test.jsx         |   8 +-
 .../SelectImageModal/GalleryCard.jsx          |   0
 .../SelectImageModal/GalleryCard.test.jsx     |   0
 .../SelectImageModal/SearchSort.jsx           |   0
 .../SelectImageModal/SearchSort.test.jsx      |   2 +-
 .../__snapshots__/Gallery.test.jsx.snap       |   0
 .../__snapshots__/GalleryCard.test.jsx.snap   |   0
 .../__snapshots__/SearchSort.test.jsx.snap    |   0
 .../__snapshots__/index.test.jsx.snap         |   0
 .../SelectImageModal/hooks.js                 |   2 +-
 .../SelectImageModal/hooks.test.js            |   8 +-
 .../SelectImageModal/index.jsx                |  14 +-
 .../SelectImageModal/index.test.jsx           |  22 +-
 .../SelectImageModal/messages.js              |   0
 .../SelectImageModal/utils.js                 |   2 +-
 .../__snapshots__/index.test.jsx.snap}        |   0
 .../ImageUploadModal/index.jsx}               |   6 +-
 .../ImageUploadModal/index.test.jsx}          |  10 +-
 .../__snapshots__/index.test.jsx.snap         |   0
 .../SourceCodeModal/hooks.js                  |   0
 .../SourceCodeModal/hooks.test.js             |   0
 .../SourceCodeModal/index.jsx                 |   2 +-
 .../SourceCodeModal/index.test.jsx            |   2 +-
 .../SourceCodeModal/messages.js               |   0
 .../__snapshots__/index.test.jsx.snap         | 152 +++++++++
 .../sharedComponents/TinyMceWidget/hooks.js   | 294 +++++++++++++++++
 .../TinyMceWidget/hooks.test.js               | 301 ++++++++++++++++++
 .../sharedComponents/TinyMceWidget/index.jsx  |  86 +++++
 .../TinyMceWidget/index.test.jsx              |  76 +++++
 .../TinyMceWidget/pluginConfig.js}            |  44 +--
 68 files changed, 1172 insertions(+), 1014 deletions(-)
 rename src/editors/{containers/TextEditor/components/__snapshots__/BaseModal.test.jsx.snap => sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap} (93%)
 rename src/editors/{containers/TextEditor/components/BaseModal.jsx => sharedComponents/BaseModal/index.jsx} (100%)
 rename src/editors/{containers/TextEditor/components/BaseModal.test.jsx => sharedComponents/BaseModal/index.test.jsx} (92%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/BaseModal}/messages.js (72%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/AltTextControls.jsx (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/AltTextControls.test.jsx (94%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/DimensionControls.jsx (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/DimensionControls.test.jsx (95%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/__snapshots__/index.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/hooks.js (99%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/hooks.test.js (99%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/index.jsx (96%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/index.scss (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/index.test.jsx (95%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/ImageSettingsModal/messages.js (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/Gallery.jsx (94%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/Gallery.test.jsx (89%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/GalleryCard.jsx (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/GalleryCard.test.jsx (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/SearchSort.jsx (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/SearchSort.test.jsx (96%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/__snapshots__/Gallery.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/__snapshots__/GalleryCard.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/__snapshots__/SearchSort.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/__snapshots__/index.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/hooks.js (98%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/hooks.test.js (98%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/index.jsx (86%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/index.test.jsx (81%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/messages.js (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents/ImageUploadModal}/SelectImageModal/utils.js (95%)
 rename src/editors/{containers/TextEditor/components/__snapshots__/ImageUploadModal.test.jsx.snap => sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap} (100%)
 rename src/editors/{containers/TextEditor/components/ImageUploadModal.jsx => sharedComponents/ImageUploadModal/index.jsx} (95%)
 rename src/editors/{containers/TextEditor/components/ImageUploadModal.test.jsx => sharedComponents/ImageUploadModal/index.test.jsx} (95%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/__snapshots__/index.test.jsx.snap (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/hooks.js (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/hooks.test.js (100%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/index.jsx (95%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/index.test.jsx (93%)
 rename src/editors/{containers/TextEditor/components => sharedComponents}/SourceCodeModal/messages.js (100%)
 create mode 100644 src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
 create mode 100644 src/editors/sharedComponents/TinyMceWidget/hooks.js
 create mode 100644 src/editors/sharedComponents/TinyMceWidget/hooks.test.js
 create mode 100644 src/editors/sharedComponents/TinyMceWidget/index.jsx
 create mode 100644 src/editors/sharedComponents/TinyMceWidget/index.test.jsx
 rename src/editors/{data/constants/tinyMCEConfig.js => sharedComponents/TinyMceWidget/pluginConfig.js} (66%)

diff --git a/src/editors/containers/EditorContainer/index.jsx b/src/editors/containers/EditorContainer/index.jsx
index 16fc89d73..9cc96572d 100644
--- a/src/editors/containers/EditorContainer/index.jsx
+++ b/src/editors/containers/EditorContainer/index.jsx
@@ -11,7 +11,7 @@ import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/
 import EditorFooter from './components/EditorFooter';
 import TitleHeader from './components/TitleHeader';
 import * as hooks from './hooks';
-import BaseModal from '../TextEditor/components/BaseModal';
+import BaseModal from '../../sharedComponents/BaseModal';
 import messages from './messages';
 
 export const EditorContainer = ({
diff --git a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
index 7cd7c9768..f1383f015 100644
--- a/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/__snapshots__/index.test.jsx.snap
@@ -1,6 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ProblemEditor snapshots block not yet loaded, Spinner appears 1`] = `
+exports[`ProblemEditor snapshots assets loaded, block and studio view not yet loaded, Spinner appears 1`] = `
+<div
+  className="text-center p-6"
+>
+  <Spinner
+    animation="border"
+    className="m-3"
+    screenreadertext="Loading Problem Editor"
+  />
+</div>
+`;
+
+exports[`ProblemEditor snapshots block loaded, studio view and assets not yet loaded, Spinner appears 1`] = `
 <div
   className="text-center p-6"
 >
@@ -36,7 +48,7 @@ exports[`ProblemEditor snapshots renders as expected with default behavior 1`] =
 </div>
 `;
 
-exports[`ProblemEditor snapshots studio view not yet loaded, Spinner appears 1`] = `
+exports[`ProblemEditor snapshots studio view loaded, block and assets not yet loaded, Spinner appears 1`] = `
 <div
   className="text-center p-6"
 >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap
index 5ea0c51e1..206c3ca41 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap
@@ -13,15 +13,18 @@ exports[`QuestionWidget render snapshot: renders correct default 1`] = `
       id="authoring.questionwidget.question.questionWidgetTitle"
     />
   </div>
-  <Editor
-    problemEditorConfig={
-      Object {
-        "isLibrary": false,
-        "question": "This is my question",
-        "setEditorRef": [MockFunction hooks.prepareEditorRef.setEditorRef],
-        "updateQuestion": [MockFunction],
-      }
-    }
+  <TinyMceWidget
+    assets={Object {}}
+    editorRef={null}
+    editorType="problem"
+    isLibrary={false}
+    lmsEndpointUrl="sOmEvaLue.cOm"
+    minHeight={150}
+    placeholder="Enter your question"
+    setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+    studioEndpointUrl="sOmEoThERvaLue.cOm"
+    textValue="This is my question"
+    updateQuestion={[MockFunction]}
   />
 </div>
 `;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
index 8786180b5..076e0de05 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
@@ -1,51 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Editor } from '@tinymce/tinymce-react';
 import { connect } from 'react-redux';
-import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
 import * as hooks from '../../../hooks';
 import { selectors, actions } from '../../../../../data/redux';
 import { messages } from './messages';
 import './index.scss';
 
-import 'tinymce';
-import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
-import 'tinymce/icons/default';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/hr';
-import 'tinymce/plugins/codesample';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/emoticons/js/emojis';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/autoresize';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/imagetools';
+import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
 
 export const QuestionWidget = ({
   // redux
   isLibrary,
   question,
   updateQuestion,
+  assets,
+  lmsEndpointUrl,
+  studioEndpointUrl,
+  // injected
+  intl,
 }) => {
-  const { refReady, setEditorRef } = hooks.prepareEditorRef();
+  const { editorRef, refReady, setEditorRef } = hooks.prepareEditorRef();
   if (!refReady) { return null; }
   return (
     <div className="question-widget">
       <div className="h4 mb-3">
         <FormattedMessage {...messages.questionWidgetTitle} />
       </div>
-      <Editor {
-          ...hooks.problemEditorConfig({
-            isLibrary,
-            setEditorRef,
-            question,
-            updateQuestion,
-          })
-        }
+      <TinyMceWidget
+        editorType="problem"
+        editorRef={editorRef}
+        textValue={question}
+        isLibrary={isLibrary}
+        updateQuestion={updateQuestion}
+        setEditorRef={setEditorRef}
+        minHeight={150}
+        placeholder={intl.formatMessage(messages.placeholder)}
+        assets={assets}
+        lmsEndpointUrl={lmsEndpointUrl}
+        studioEndpointUrl={studioEndpointUrl}
       />
     </div>
   );
@@ -53,17 +46,25 @@ export const QuestionWidget = ({
 
 QuestionWidget.defaultProps = {
   isLibrary: null,
+  assets: null,
 };
 QuestionWidget.propTypes = {
   // redux
   isLibrary: PropTypes.bool,
+  lmsEndpointUrl: PropTypes.string.isRequired,
+  studioEndpointUrl: PropTypes.string.isRequired,
+  assets: PropTypes.shape({}),
   question: PropTypes.string.isRequired,
   updateQuestion: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
 };
-
 export const mapStateToProps = (state) => ({
+  assets: selectors.app.assets(state),
   isLibrary: selectors.app.isLibrary(state),
   question: selectors.problem.question(state),
+  lmsEndpointUrl: selectors.app.lmsEndpointUrl(state),
+  studioEndpointUrl: selectors.app.studioEndpointUrl(state),
 });
 
 export const mapDispatchToProps = {
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx
index 51660e389..10e60fa67 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx
@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import { shallow } from 'enzyme';
+import { formatMessage } from '../../../../../../testUtils';
 import { actions, selectors } from '../../../../../data/redux';
 import { QuestionWidget, mapStateToProps, mapDispatchToProps } from '.';
 
@@ -13,6 +14,9 @@ jest.mock('../../../../../data/redux', () => ({
   selectors: {
     app: {
       isLibrary: jest.fn(state => ({ isLibrary: state })),
+      lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
+      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
+      assets: jest.fn(state => ({ assets: state })),
     },
     problem: {
       question: jest.fn(state => ({ question: state })),
@@ -20,17 +24,6 @@ jest.mock('../../../../../data/redux', () => ({
   },
 }));
 
-// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
-// Consequently, mock the Editor out.
-jest.mock('@tinymce/tinymce-react', () => {
-  const originalModule = jest.requireActual('@tinymce/tinymce-react');
-  return {
-    __esModule: true,
-    ...originalModule,
-    Editor: () => 'TiNYmCE EDitOR',
-  };
-});
-
 jest.mock('../../../hooks', () => ({
   prepareEditorRef: jest.fn(() => ({
     refReady: true,
@@ -44,6 +37,11 @@ describe('QuestionWidget', () => {
     isLibrary: false,
     question: 'This is my question',
     updateQuestion: jest.fn(),
+    lmsEndpointUrl: 'sOmEvaLue.cOm',
+    studioEndpointUrl: 'sOmEoThERvaLue.cOm',
+    assets: {},
+    // injected
+    intl: { formatMessage },
   };
   describe('render', () => {
     test('snapshot: renders correct default', () => {
@@ -55,9 +53,24 @@ describe('QuestionWidget', () => {
     test('isLibrary from app.isLibrary', () => {
       expect(mapStateToProps(testState).isLibrary).toEqual(selectors.app.isLibrary(testState));
     });
+    test('assets from app.assets', () => {
+      expect(
+        mapStateToProps(testState).assets,
+      ).toEqual(selectors.app.assets(testState));
+    });
     test('question from problem.question', () => {
       expect(mapStateToProps(testState).question).toEqual(selectors.problem.question(testState));
     });
+    test('lmsEndpointUrl from app.lmsEndpointUrl', () => {
+      expect(
+        mapStateToProps(testState).lmsEndpointUrl,
+      ).toEqual(selectors.app.lmsEndpointUrl(testState));
+    });
+    test('studioEndpointUrl from app.studioEndpointUrl', () => {
+      expect(
+        mapStateToProps(testState).studioEndpointUrl,
+      ).toEqual(selectors.app.studioEndpointUrl(testState));
+    });
   });
   describe('mapDispatchToProps', () => {
     test('updateField from actions.problem.updateQuestion', () => {
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js
index 2d96f56e1..48354a96d 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js
@@ -4,6 +4,11 @@ export const messages = {
     defaultMessage: 'Question',
     description: 'Question Title',
   },
+  placeholder: {
+    id: 'authoring.problemEditor.questionwidget.placeholder',
+    defaultMessage: 'Enter your question',
+    description: 'Placeholder text for tinyMCE editor',
+  },
 };
 
 export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
index 03882ee8d..3b00cdab7 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
@@ -5,7 +5,7 @@ import { Card } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import messages from '../messages';
 import { thunkActions } from '../../../../../../data/redux';
-import BaseModal from '../../../../../TextEditor/components/BaseModal';
+import BaseModal from '../../../../../../sharedComponents/BaseModal';
 import Button from '../../../../../../sharedComponents/Button';
 import { confirmSwitchToAdvancedEditor } from '../hooks';
 import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
@@ -27,6 +27,7 @@ export const SwitchToAdvancedEditorCard = ({
         confirmAction={(
           <Button
             onClick={() => confirmSwitchToAdvancedEditor({ switchToAdvancedEditor, setConfirmOpen })}
+            variant="primary"
           >
             <FormattedMessage {...messages.ConfirmSwitchButtonLabel} />
           </Button>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
index dc1e81250..2ecc2a26c 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
@@ -11,7 +11,7 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
         className={null}
         onClick={[Function]}
         text={null}
-        variant="default"
+        variant="primary"
       >
         <FormattedMessage
           defaultMessage="Switch to advanced editor"
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
index 1c0be158c..c745e122b 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
@@ -16,6 +16,7 @@ import { parseState } from './hooks';
 import './index.scss';
 
 export const EditProblemView = ({
+  // redux
   problemType,
   problemState,
 }) => {
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx
index 05e934a07..54f1c5bfb 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx
@@ -6,7 +6,10 @@ import RawEditor from '../../../../sharedComponents/RawEditor';
 
 describe('EditorProblemView component', () => {
   test('renders simple view', () => {
-    const wrapper = shallow(<EditProblemView problemType={ProblemTypeKeys.SINGLESELECT} problemState={{}} />);
+    const wrapper = shallow(<EditProblemView
+      problemType={ProblemTypeKeys.SINGLESELECT}
+      problemState={{}}
+    />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(AnswerWidget).length).toBe(1);
   });
diff --git a/src/editors/containers/ProblemEditor/hooks.js b/src/editors/containers/ProblemEditor/hooks.js
index da61935c7..fcdd28863 100644
--- a/src/editors/containers/ProblemEditor/hooks.js
+++ b/src/editors/containers/ProblemEditor/hooks.js
@@ -2,85 +2,12 @@ import {
   useRef, useCallback, useState, useEffect,
 } from 'react';
 import { StrictDict } from '../../utils';
-import tinyMCEConfig from '../../data/constants/tinyMCEConfig';
 import * as module from './hooks';
 
 export const state = StrictDict({
   refReady: (val) => useState(val),
 });
 
-export const parseContentForLabels = ({ editor, updateQuestion }) => {
-  let content = editor.getContent();
-  if (content && content?.length > 0) {
-    const parsedLabels = content.split(/<label>|<\/label>/gm);
-    let updatedContent;
-    parsedLabels.forEach((label, i) => {
-      let updatedLabel = label;
-      if (!label.startsWith('<') && !label.endsWith('>')) {
-        let previousLabel = parsedLabels[i - 1];
-        let nextLabel = parsedLabels[i + 1];
-        if (!previousLabel.endsWith('<p>')) {
-          previousLabel = `${previousLabel}</p><p>`;
-          updatedContent = content.replace(parsedLabels[i - 1], previousLabel);
-          content = updatedContent;
-        }
-        if (previousLabel.endsWith('</p>') && !label.startWith('<p>')) {
-          updatedLabel = `<p>${label}`;
-          updatedContent = content.replace(label, updatedLabel);
-          content = updatedContent;
-        }
-        if (!nextLabel.startsWith('</p>')) {
-          nextLabel = `</p><p>${nextLabel}`;
-          updatedContent = content.replace(parsedLabels[i + 1], nextLabel);
-          content = updatedContent;
-        }
-      }
-    });
-  }
-  updateQuestion(content);
-};
-
-export const setupCustomBehavior = ({ updateQuestion }) => (editor) => {
-  // add a custom simple inline label formatter.
-  const toggleLabelFormatting = () => {
-    editor.execCommand('mceToggleFormat', false, 'label');
-  };
-  editor.ui.registry.addIcon('textToSpeech',
-    '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>');
-  editor.ui.registry.addButton('customLabelButton', {
-    icon: 'textToSpeech',
-    text: 'Label',
-    tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
-    onAction: toggleLabelFormatting,
-  });
-  editor.on('blur', () => {
-    module.parseContentForLabels({
-      editor,
-      updateQuestion,
-    });
-  });
-};
-
-export const problemEditorConfig = ({
-  isLibrary,
-  setEditorRef,
-  question,
-  updateQuestion,
-}) => ({
-  onInit: (evt, editor) => {
-    setEditorRef(editor);
-  },
-  initialValue: question || '',
-  init: {
-    ...tinyMCEConfig(isLibrary).config.shared,
-    ...tinyMCEConfig(isLibrary).config.problemEditor,
-    formats: { label: { inline: 'label' } },
-    plugins: 'autoresize',
-    setup: module.setupCustomBehavior({ updateQuestion }),
-    toolbar: `${tinyMCEConfig().toolbar} | customLabelButton`,
-  },
-});
-
 export const prepareEditorRef = () => {
   const editorRef = useRef(null);
   const setEditorRef = useCallback((ref) => {
diff --git a/src/editors/containers/ProblemEditor/hooks.test.js b/src/editors/containers/ProblemEditor/hooks.test.js
index 0ef3263dd..a804adac2 100644
--- a/src/editors/containers/ProblemEditor/hooks.test.js
+++ b/src/editors/containers/ProblemEditor/hooks.test.js
@@ -1,9 +1,6 @@
 import { useEffect } from 'react';
 import { MockUseState } from '../../../testUtils';
 
-// import tinyMCE from '../../data/constants/tinyMCE';
-import { keyStore } from '../../utils';
-import tinyMCEConfig from '../../data/constants/tinyMCEConfig';
 import * as module from './hooks';
 
 jest.mock('react', () => ({
@@ -15,10 +12,8 @@ jest.mock('react', () => ({
 }));
 
 const state = new MockUseState(module);
-const moduleKeys = keyStore(module);
 
 let hook;
-let output;
 
 describe('Problem editor hooks', () => {
   beforeEach(() => {
@@ -31,97 +26,6 @@ describe('Problem editor hooks', () => {
   describe('non-state hooks', () => {
     beforeEach(() => { state.mock(); });
     afterEach(() => { state.restore(); });
-
-    describe('setupCustomBehavior', () => {
-      test('It calls addButton and addToggleButton in the editor, but openModal is not called', () => {
-        const addButton = jest.fn();
-        const addIcon = jest.fn();
-        const updateQuestion = jest.fn();
-        const editor = {
-          ui: { registry: { addButton, addIcon } },
-          on: jest.fn(),
-        };
-        const toggleLabelFormatting = expect.any(Function);
-        output = module.setupCustomBehavior({ updateQuestion })(editor);
-        expect(addIcon.mock.calls).toEqual([['textToSpeech',
-          '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>',
-        ]]);
-        expect(addButton.mock.calls).toEqual([
-          ['customLabelButton', {
-            icon: 'textToSpeech',
-            text: 'Label',
-            tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
-            onAction: toggleLabelFormatting,
-          }],
-        ]);
-      });
-    });
-
-    describe('parseContentForLabels', () => {
-      test('it calls getContent and updateQuestion for some content', () => {
-        const editor = { getContent: jest.fn(() => '<p><label>Some question label</label></p><p>some content <label>around a label</label> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>') };
-        const updateQuestion = jest.fn();
-        const content = '<p><label>Some question label</label></p><p>some content </p><p><label>around a label</label></p><p> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>';
-        module.parseContentForLabels({ editor, updateQuestion });
-        expect(editor.getContent).toHaveBeenCalled();
-        expect(updateQuestion).toHaveBeenCalledWith(content);
-      });
-      test('it calls getContent and updateQuestion for empty content', () => {
-        const editor = { getContent: jest.fn(() => '') };
-        const updateQuestion = jest.fn();
-        const content = '';
-        module.parseContentForLabels({ editor, updateQuestion });
-        expect(editor.getContent).toHaveBeenCalled();
-        expect(updateQuestion).toHaveBeenCalledWith(content);
-      });
-    });
-
-    describe('problemEditorConfig', () => {
-      const props = {
-        question: '',
-      };
-      const evt = 'fakeEvent';
-      const editor = 'myEditor';
-      const setupCustomBehavior = args => ({ setupCustomBehavior: args });
-      beforeEach(() => {
-        props.setEditorRef = jest.fn();
-        props.updateQuestion = jest.fn();
-        jest.spyOn(module, moduleKeys.setupCustomBehavior)
-          .mockImplementationOnce(setupCustomBehavior);
-        output = module.problemEditorConfig(props);
-      });
-      test('It creates an onInit which calls setEditorRef', () => {
-        output.onInit(evt, editor);
-        expect(props.setEditorRef).toHaveBeenCalledWith(editor);
-      });
-      test('It sets the blockvalue to be empty string by default', () => {
-        expect(output.initialValue).toBe('');
-      });
-      test('It sets the blockvalue to be the blockvalue if nonempty', () => {
-        const questionText = 'SomE hTML content';
-        output = module.problemEditorConfig({ ...props, question: questionText });
-        expect(output.initialValue).toBe(questionText);
-      });
-      test('It configures plugins and toolbars correctly', () => {
-        expect(output.init.plugins).toEqual('autoresize');
-        expect(output.init.toolbar).toEqual(`${tinyMCEConfig().toolbar} | customLabelButton`);
-        Object.keys(tinyMCEConfig(props.isLibrary).config.shared).forEach(key => {
-          expect(output.init[key]).toEqual(tinyMCEConfig(props.isLibrary).config.shared[key]);
-        });
-        Object.keys(tinyMCEConfig(props.isLibrary).config.problemEditor).forEach(key => {
-          expect(output.init[key]).toEqual(tinyMCEConfig(props.isLibrary).config.problemEditor[key]);
-        });
-      });
-
-      it('calls setupCustomBehavior on setup', () => {
-        expect(output.init.setup).toEqual(
-          setupCustomBehavior({
-            updateQuestion: props.updateQuestion,
-          }),
-        );
-      });
-    });
-
     describe('prepareEditorRef', () => {
       beforeEach(() => {
         hook = module.prepareEditorRef();
diff --git a/src/editors/containers/ProblemEditor/index.jsx b/src/editors/containers/ProblemEditor/index.jsx
index b96a400c7..22f16e90b 100644
--- a/src/editors/containers/ProblemEditor/index.jsx
+++ b/src/editors/containers/ProblemEditor/index.jsx
@@ -16,8 +16,9 @@ export const ProblemEditor = ({
   studioViewFinished,
   blockValue,
   initializeProblemEditor,
+  assetsFinished,
 }) => {
-  if (!blockFinished || !studioViewFinished) {
+  if (!blockFinished || !studioViewFinished || !assetsFinished) {
     return (
       <div className="text-center p-6">
         <Spinner
@@ -29,7 +30,7 @@ export const ProblemEditor = ({
     );
   }
   // once data is loaded, init store
-  React.useEffect(() => initializeProblemEditor(blockValue), [blockValue]);
+  React.useEffect(() => initializeProblemEditor(blockValue), []);
   // TODO: INTL MSG, Add LOAD FAILED ERROR using BLOCKFAILED
 
   if (problemType === null) {
@@ -38,9 +39,13 @@ export const ProblemEditor = ({
   return (<EditProblemView onClose={onClose} />);
 };
 
+ProblemEditor.defaultProps = {
+  assetsFinished: null,
+};
 ProblemEditor.propTypes = {
   onClose: PropTypes.func.isRequired,
   // redux
+  assetsFinished: PropTypes.bool,
   blockFinished: PropTypes.bool.isRequired,
   studioViewFinished: PropTypes.bool.isRequired,
   problemType: PropTypes.string.isRequired,
@@ -53,6 +58,7 @@ export const mapStateToProps = (state) => ({
   studioViewFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
   problemType: selectors.problem.problemType(state),
   blockValue: selectors.app.blockValue(state),
+  assetsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAssets }),
 });
 
 export const mapDispatchToProps = {
diff --git a/src/editors/containers/ProblemEditor/index.test.jsx b/src/editors/containers/ProblemEditor/index.test.jsx
index b1da0373f..70603a3ed 100644
--- a/src/editors/containers/ProblemEditor/index.test.jsx
+++ b/src/editors/containers/ProblemEditor/index.test.jsx
@@ -45,22 +45,32 @@ describe('ProblemEditor', () => {
     blockFinished: false,
     studioViewFinished: false,
     initializeProblemEditor: jest.fn().mockName('args.intializeProblemEditor'),
+    assetsFinished: false,
   };
   describe('snapshots', () => {
     test('renders as expected with default behavior', () => {
       expect(shallow(<ProblemEditor {...props} />)).toMatchSnapshot();
     });
-    test('block not yet loaded, Spinner appears', () => {
+    test('block loaded, studio view and assets not yet loaded, Spinner appears', () => {
       expect(shallow(<ProblemEditor {...props} blockFinished />)).toMatchSnapshot();
     });
-    test('studio view not yet loaded, Spinner appears', () => {
+    test('studio view loaded, block and assets not yet loaded, Spinner appears', () => {
       expect(shallow(<ProblemEditor {...props} studioViewFinished />)).toMatchSnapshot();
     });
+    test('assets loaded, block and studio view not yet loaded, Spinner appears', () => {
+      expect(shallow(<ProblemEditor {...props} assetsFinished />)).toMatchSnapshot();
+    });
     test('renders SelectTypeModal', () => {
-      expect(shallow(<ProblemEditor {...props} blockFinished studioViewFinished />)).toMatchSnapshot();
+      expect(shallow(<ProblemEditor {...props} blockFinished studioViewFinished assetsFinished />)).toMatchSnapshot();
     });
     test('renders EditProblemView', () => {
-      expect(shallow(<ProblemEditor {...props} problemType="multiplechoiceresponse" blockFinished studioViewFinished />)).toMatchSnapshot();
+      expect(shallow(<ProblemEditor
+        {...props}
+        problemType="multiplechoiceresponse"
+        blockFinished
+        studioViewFinished
+        assetsFinished
+      />)).toMatchSnapshot();
     });
   });
 
@@ -86,6 +96,11 @@ describe('ProblemEditor', () => {
         mapStateToProps(testState).studioViewFinished,
       ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchStudioView }));
     });
+    test('assetsFinished from requests.isFinished', () => {
+      expect(
+        mapStateToProps(testState).assetsFinished,
+      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchAssets }));
+    });
   });
   describe('mapDispatchToProps', () => {
     test('initializeProblemEditor from thunkActions.problem.initializeProblem', () => {
diff --git a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
index b7b79cd3c..da6b8b20c 100644
--- a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
@@ -1,79 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextEditor snapshots ImageUploadModal is not rendered 1`] = `
-<EditorContainer
-  getContent={
-    Object {
-      "getContent": Object {
-        "assets": Object {
-          "sOmEaSsET": Object {
-            "staTICUrl": "/assets/sOmEaSsET",
-          },
-        },
-        "editorRef": Object {
-          "current": Object {
-            "value": "something",
-          },
-        },
-        "isRaw": false,
-      },
-    }
-  }
-  onClose={[MockFunction props.onClose]}
->
-  <div
-    className="editor-body h-75 overflow-auto"
-  >
-    <SourceCodeModal
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      isOpen={false}
-    />
-    <Toast
-      onClose={[MockFunction hooks.nullMethod]}
-      show={false}
-    >
-      <FormattedMessage
-        defaultMessage="Error: Could Not Load Text Content"
-        description="Error Message Dispayed When HTML content fails to Load"
-        id="authoring.texteditor.load.error"
-      />
-    </Toast>
-    <Editor
-      editorConfig={
-        Object {
-          "blockValue": Object {
-            "data": Object {
-              "data": "eDiTablE Text",
-            },
-          },
-          "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
-          "images": Array [
-            Object {
-              "staTICUrl": "/assets/sOmEaSsET",
-            },
-          ],
-          "initializeEditor": [MockFunction args.intializeEditor],
-          "isLibrary": true,
-          "lmsEndpointUrl": "sOmEvaLue.cOm",
-          "openImgModal": [MockFunction modal.openModal],
-          "openSourceCodeModal": [MockFunction modal.openModal],
-          "setEditorRef": [MockFunction hooks.prepareEditorRef.setEditorRef],
-          "setSelection": [MockFunction hooks.selectedImage.setSelection],
-          "studioEndpointUrl": "sOmEoThERvaLue.cOm",
-        }
-      }
-    />
-  </div>
-</EditorContainer>
-`;
-
 exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
 <EditorContainer
   getContent={
@@ -98,38 +24,6 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
   <div
     className="editor-body h-75 overflow-auto"
   >
-    <ImageUploadModal
-      clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      images={
-        Array [
-          Object {
-            "staTICUrl": "/assets/sOmEaSsET",
-          },
-        ]
-      }
-      isOpen={false}
-      selection="hooks.selectedImage.selection"
-      setSelection={[MockFunction hooks.selectedImage.setSelection]}
-    />
-    <SourceCodeModal
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      isOpen={false}
-    />
     <Toast
       onClose={[MockFunction hooks.nullMethod]}
       show={true}
@@ -140,30 +34,30 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
         id="authoring.texteditor.load.error"
       />
     </Toast>
-    <Editor
-      editorConfig={
+    <TinyMceWidget
+      assets={
         Object {
-          "blockValue": Object {
-            "data": Object {
-              "data": "eDiTablE Text",
-            },
+          "sOmEaSsET": Object {
+            "staTICUrl": "/assets/sOmEaSsET",
           },
-          "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
-          "images": Array [
-            Object {
-              "staTICUrl": "/assets/sOmEaSsET",
-            },
-          ],
-          "initializeEditor": [MockFunction args.intializeEditor],
-          "isLibrary": false,
-          "lmsEndpointUrl": "sOmEvaLue.cOm",
-          "openImgModal": [MockFunction modal.openModal],
-          "openSourceCodeModal": [MockFunction modal.openModal],
-          "setEditorRef": [MockFunction hooks.prepareEditorRef.setEditorRef],
-          "setSelection": [MockFunction hooks.selectedImage.setSelection],
-          "studioEndpointUrl": "sOmEoThERvaLue.cOm",
         }
       }
+      editorRef={
+        Object {
+          "current": Object {
+            "value": "something",
+          },
+        }
+      }
+      editorType="text"
+      height="100%"
+      initializeEditor={[MockFunction args.intializeEditor]}
+      isLibrary={false}
+      lmsEndpointUrl="sOmEvaLue.cOm"
+      minHeight={500}
+      setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+      studioEndpointUrl="sOmEoThERvaLue.cOm"
+      textValue="eDiTablE Text"
     />
   </div>
 </EditorContainer>
@@ -193,38 +87,6 @@ exports[`TextEditor snapshots loaded, raw editor 1`] = `
   <div
     className="editor-body h-75 overflow-auto"
   >
-    <ImageUploadModal
-      clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      images={
-        Array [
-          Object {
-            "staTICUrl": "/assets/sOmEaSsET",
-          },
-        ]
-      }
-      isOpen={false}
-      selection="hooks.selectedImage.selection"
-      setSelection={[MockFunction hooks.selectedImage.setSelection]}
-    />
-    <SourceCodeModal
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      isOpen={false}
-    />
     <Toast
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
@@ -280,38 +142,6 @@ exports[`TextEditor snapshots not yet loaded, Spinner appears 1`] = `
   <div
     className="editor-body h-75 overflow-auto"
   >
-    <ImageUploadModal
-      clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      images={
-        Array [
-          Object {
-            "staTICUrl": "/assets/sOmEaSsET",
-          },
-        ]
-      }
-      isOpen={false}
-      selection="hooks.selectedImage.selection"
-      setSelection={[MockFunction hooks.selectedImage.setSelection]}
-    />
-    <SourceCodeModal
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      isOpen={false}
-    />
     <Toast
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
@@ -359,38 +189,6 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
   <div
     className="editor-body h-75 overflow-auto"
   >
-    <ImageUploadModal
-      clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      images={
-        Array [
-          Object {
-            "staTICUrl": "/assets/sOmEaSsET",
-          },
-        ]
-      }
-      isOpen={false}
-      selection="hooks.selectedImage.selection"
-      setSelection={[MockFunction hooks.selectedImage.setSelection]}
-    />
-    <SourceCodeModal
-      close={[MockFunction modal.closeModal]}
-      editorRef={
-        Object {
-          "current": Object {
-            "value": "something",
-          },
-        }
-      }
-      isOpen={false}
-    />
     <Toast
       onClose={[MockFunction hooks.nullMethod]}
       show={false}
@@ -401,30 +199,30 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
         id="authoring.texteditor.load.error"
       />
     </Toast>
-    <Editor
-      editorConfig={
+    <TinyMceWidget
+      assets={
         Object {
-          "blockValue": Object {
-            "data": Object {
-              "data": "eDiTablE Text",
-            },
+          "sOmEaSsET": Object {
+            "staTICUrl": "/assets/sOmEaSsET",
           },
-          "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
-          "images": Array [
-            Object {
-              "staTICUrl": "/assets/sOmEaSsET",
-            },
-          ],
-          "initializeEditor": [MockFunction args.intializeEditor],
-          "isLibrary": false,
-          "lmsEndpointUrl": "sOmEvaLue.cOm",
-          "openImgModal": [MockFunction modal.openModal],
-          "openSourceCodeModal": [MockFunction modal.openModal],
-          "setEditorRef": [MockFunction hooks.prepareEditorRef.setEditorRef],
-          "setSelection": [MockFunction hooks.selectedImage.setSelection],
-          "studioEndpointUrl": "sOmEoThERvaLue.cOm",
         }
       }
+      editorRef={
+        Object {
+          "current": Object {
+            "value": "something",
+          },
+        }
+      }
+      editorType="text"
+      height="100%"
+      initializeEditor={[MockFunction args.intializeEditor]}
+      isLibrary={false}
+      lmsEndpointUrl="sOmEvaLue.cOm"
+      minHeight={500}
+      setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+      studioEndpointUrl="sOmEoThERvaLue.cOm"
+      textValue="eDiTablE Text"
     />
   </div>
 </EditorContainer>
diff --git a/src/editors/containers/TextEditor/hooks.js b/src/editors/containers/TextEditor/hooks.js
index ff36c74a2..5d0bb6aeb 100644
--- a/src/editors/containers/TextEditor/hooks.js
+++ b/src/editors/containers/TextEditor/hooks.js
@@ -3,161 +3,15 @@ import {
 } from 'react';
 
 import { StrictDict } from '../../utils';
-import tinyMCE from '../../data/constants/tinyMCE';
-import tinyMCEConfig from '../../data/constants/tinyMCEConfig';
 import * as appHooks from '../../hooks';
 import * as module from './hooks';
 
 export const { nullMethod, navigateCallback, navigateTo } = appHooks;
 
 export const state = StrictDict({
-  isImageModalOpen: (val) => useState(val),
-  isSourceCodeModalOpen: (val) => useState(val),
-  imageSelection: (val) => useState(val),
   refReady: (val) => useState(val),
 });
 
-export const setupCustomBehavior = ({
-  openImgModal,
-  openSourceCodeModal, setImage,
-}) => (editor) => {
-  // image upload button
-  editor.ui.registry.addButton(tinyMCE.buttons.imageUploadButton, {
-    icon: 'image',
-    tooltip: 'Add Image',
-    onAction: openImgModal,
-  });
-  // editing an existing image
-  editor.ui.registry.addButton(tinyMCE.buttons.editImageSettings, {
-    icon: 'image',
-    tooltip: 'Edit Image Settings',
-    onAction: module.openModalWithSelectedImage({ editor, setImage, openImgModal }),
-  });
-  // overriding the code plugin's icon with 'HTML' text
-  editor.ui.registry.addButton(tinyMCE.buttons.code, {
-    text: 'HTML',
-    tooltip: 'Source code',
-    onAction: openSourceCodeModal,
-  });
-  // add a custom simple inline code block formatter.
-  const setupCodeFormatting = (api) => {
-    editor.formatter.formatChanged(
-      'code',
-      (active) => api.setActive(active),
-    );
-  };
-  const toggleCodeFormatting = () => {
-    editor.formatter.toggle('code');
-    editor.undoManager.add();
-    editor.focus();
-  };
-  editor.ui.registry.addToggleButton(tinyMCE.buttons.codeBlock, {
-    icon: 'sourcecode',
-    tooltip: 'Code Block',
-    onAction: toggleCodeFormatting,
-    onSetup: setupCodeFormatting,
-  });
-};
-
-export const replaceStaticwithAsset = (editor, imageUrls) => {
-  const content = editor.getContent();
-  const imageSrcs = content.split('src="');
-  imageSrcs.forEach(src => {
-    if (src.startsWith('/static/') && imageUrls.length > 0) {
-      const imgName = src.substring(8, src.indexOf('"'));
-      let staticFullUrl;
-      imageUrls.forEach((url) => {
-        if (imgName === url.displayName) {
-          staticFullUrl = url.staticFullUrl;
-        }
-      });
-      if (staticFullUrl) {
-        const currentSrc = src.substring(0, src.indexOf('"'));
-        const updatedContent = content.replace(currentSrc, staticFullUrl);
-        editor.setContent(updatedContent);
-      }
-    }
-  });
-};
-
-export const checkRelativeUrl = (imageUrls) => (editor) => {
-  editor.on('ExecCommand', (e) => {
-    if (e.command === 'mceFocus') {
-      module.replaceStaticwithAsset(editor, imageUrls);
-    }
-  });
-};
-
-// imagetools_cors_hosts needs a protocol-sanatized url
-export const removeProtocolFromUrl = (url) => url.replace(/^https?:\/\//, '');
-
-export const editorConfig = ({
-  blockValue,
-  initializeEditor,
-  lmsEndpointUrl,
-  openImgModal,
-  openSourceCodeModal,
-  setEditorRef,
-  setSelection,
-  studioEndpointUrl,
-  images,
-  isLibrary,
-}) => ({
-  onInit: (evt, editor) => {
-    setEditorRef(editor);
-    initializeEditor();
-  },
-  initialValue: blockValue ? blockValue.data.data : '',
-  init: {
-    ...tinyMCEConfig(isLibrary).config.shared,
-    ...tinyMCEConfig(isLibrary).config.textEditor,
-    contextmenu: 'link table',
-    document_base_url: lmsEndpointUrl,
-    init_instance_callback: module.checkRelativeUrl(module.fetchImageUrls(images)),
-    imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
-    imagetools_toolbar: tinyMCEConfig(isLibrary).imageToolbar,
-    plugins: tinyMCEConfig(isLibrary).plugins,
-    setup: module.setupCustomBehavior({
-      openImgModal,
-      openSourceCodeModal,
-      setImage: setSelection,
-    }),
-    toolbar: tinyMCEConfig(isLibrary).toolbar,
-  },
-});
-
-export const imgModalToggle = () => {
-  const [isImgOpen, setIsOpen] = module.state.isImageModalOpen(false);
-  return {
-    isImgOpen,
-    openImgModal: () => setIsOpen(true),
-    closeImgModal: () => setIsOpen(false),
-  };
-};
-
-export const sourceCodeModalToggle = (editorRef) => {
-  const [isSourceCodeOpen, setIsOpen] = module.state.isSourceCodeModalOpen(false);
-  return {
-    isSourceCodeOpen,
-    openSourceCodeModal: () => setIsOpen(true),
-    closeSourceCodeModal: () => {
-      setIsOpen(false);
-      editorRef.current.focus();
-    },
-  };
-};
-
-export const openModalWithSelectedImage = ({ editor, setImage, openImgModal }) => () => {
-  const imgHTML = editor.selection.getNode();
-  setImage({
-    externalUrl: imgHTML.src,
-    altText: imgHTML.alt,
-    width: imgHTML.width,
-    height: imgHTML.height,
-  });
-  openImgModal();
-};
-
 export const prepareEditorRef = () => {
   const editorRef = useRef(null);
   const setEditorRef = useCallback((ref) => {
@@ -168,15 +22,6 @@ export const prepareEditorRef = () => {
   return { editorRef, refReady, setEditorRef };
 };
 
-export const filterAssets = ({ assets }) => {
-  let images = [];
-  const assetsList = Object.values(assets);
-  if (assetsList.length > 0) {
-    images = assetsList.filter(asset => asset?.contentType?.startsWith('image/'));
-  }
-  return images;
-};
-
 export const setAssetToStaticUrl = ({ editorValue, assets }) => {
   /* For assets to remain usable across course instances, we convert their url to be course-agnostic.
    * For example, /assets/course/<asset hash>/filename gets converted to /static/filename. This is
@@ -218,20 +63,3 @@ export const getContent = ({ editorRef, isRaw, assets }) => () => {
     : editorRef.current?.getContent());
   return setAssetToStaticUrl({ editorValue: content, assets });
 };
-
-export const fetchImageUrls = (images) => {
-  const imageUrls = [];
-  images.forEach(image => {
-    imageUrls.push({ staticFullUrl: image.staticFullUrl, displayName: image.displayName });
-  });
-  return imageUrls;
-};
-
-export const selectedImage = (val) => {
-  const [selection, setSelection] = module.state.imageSelection(val);
-  return {
-    clearSelection: () => setSelection(null),
-    selection,
-    setSelection,
-  };
-};
diff --git a/src/editors/containers/TextEditor/hooks.test.jsx b/src/editors/containers/TextEditor/hooks.test.jsx
index 2a5dfe95d..885256e10 100644
--- a/src/editors/containers/TextEditor/hooks.test.jsx
+++ b/src/editors/containers/TextEditor/hooks.test.jsx
@@ -1,10 +1,7 @@
 import { useEffect } from 'react';
 import { MockUseState } from '../../../testUtils';
 
-import tinyMCE from '../../data/constants/tinyMCE';
-import { keyStore } from '../../utils';
 import * as appHooks from '../../hooks';
-import tinyMCEConfig from '../../data/constants/tinyMCEConfig';
 import * as module from './hooks';
 
 jest.mock('react', () => ({
@@ -16,26 +13,14 @@ jest.mock('react', () => ({
 }));
 
 const state = new MockUseState(module);
-const moduleKeys = keyStore(module);
-
-const mockNode = {
-  src: 'sOmEuRl.cOm',
-  alt: 'aLt tExt',
-  width: 2022,
-  height: 1619,
-};
 
 let hook;
-let output;
 
 describe('TextEditor hooks', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
   describe('state hooks', () => {
-    state.testGetter(state.keys.isImageModalOpen);
-    state.testGetter(state.keys.isSourceCodeModalOpen);
-    state.testGetter(state.keys.imageSelection);
     state.testGetter(state.keys.refReady);
   });
 
@@ -54,179 +39,6 @@ describe('TextEditor hooks', () => {
   describe('non-state hooks', () => {
     beforeEach(() => { state.mock(); });
     afterEach(() => { state.restore(); });
-
-    describe('setupCustomBehavior', () => {
-      test('It calls addButton and addToggleButton in the editor, but openModal is not called', () => {
-        const addButton = jest.fn();
-        const addToggleButton = jest.fn();
-        const openImgModal = jest.fn();
-        const openSourceCodeModal = jest.fn();
-        const setImage = jest.fn();
-        const editor = {
-          ui: { registry: { addButton, addToggleButton } },
-        };
-        const mockOpenModalWithImage = args => ({ openModalWithSelectedImage: args });
-        const expectedSettingsAction = mockOpenModalWithImage({ editor, setImage, openImgModal });
-        const toggleCodeFormatting = expect.any(Function);
-        const setupCodeFormatting = expect.any(Function);
-        jest.spyOn(module, moduleKeys.openModalWithSelectedImage)
-          .mockImplementationOnce(mockOpenModalWithImage);
-        output = module.setupCustomBehavior({ openImgModal, openSourceCodeModal, setImage })(editor);
-        expect(addButton.mock.calls).toEqual([
-          [tinyMCE.buttons.imageUploadButton, { icon: 'image', tooltip: 'Add Image', onAction: openImgModal }],
-          [tinyMCE.buttons.editImageSettings, { icon: 'image', tooltip: 'Edit Image Settings', onAction: expectedSettingsAction }],
-          [tinyMCE.buttons.code, { text: 'HTML', tooltip: 'Source code', onAction: openSourceCodeModal }],
-        ]);
-        expect(addToggleButton.mock.calls).toEqual([
-          [tinyMCE.buttons.codeBlock, {
-            icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting, onSetup: setupCodeFormatting,
-          }],
-        ]);
-        expect(openImgModal).not.toHaveBeenCalled();
-      });
-    });
-
-    describe('replaceStaticwithAsset', () => {
-      test('it calls getContent and setContent', () => {
-        const editor = { getContent: jest.fn(() => '<img src="/static/soMEImagEURl1.jpeg"/>'), setContent: jest.fn() };
-        const imageUrls = [{ staticFullUrl: '/assets/soMEImagEURl1.jpeg', displayName: 'soMEImagEURl1.jpeg' }];
-        module.replaceStaticwithAsset(editor, imageUrls);
-        expect(editor.getContent).toHaveBeenCalled();
-        expect(editor.setContent).toHaveBeenCalled();
-      });
-    });
-    describe('setAssetToStaticUrl', () => {
-      it('returns content with updated img links', () => {
-        const editorValue = '<img src="/asset@asset-block/soME_ImagE_URl1"/> <a href="/asset@soMEImagEURl">testing link</a>';
-        const assets = [
-          { portableUrl: '/static/soMEImagEURl', displayName: 'soMEImagEURl' },
-          { portableUrl: '/static/soME_ImagE_URl1', displayName: 'soME ImagE URl1' },
-        ];
-        const content = module.setAssetToStaticUrl({ editorValue, assets });
-        expect(content).toEqual('<img src="/static/soME_ImagE_URl1"/> <a href="/static/soMEImagEURl">testing link</a>');
-      });
-    });
-    describe('checkRelativeUrl', () => {
-      test('it calls editor.on', () => {
-        const editor = { on: jest.fn() };
-        const imageUrls = ['soMEImagEURl1'];
-        module.checkRelativeUrl(imageUrls)(editor);
-        expect(editor.on).toHaveBeenCalled();
-      });
-    });
-
-    describe('editorConfig', () => {
-      const props = {
-        blockValue: null,
-        lmsEndpointUrl: 'sOmEuRl.cOm',
-        studioEndpointUrl: 'sOmEoThEruRl.cOm',
-        images: [{ staTICUrl: '/assets/sOmEuiMAge' }],
-        isLibrary: false,
-      };
-      const evt = 'fakeEvent';
-      const editor = 'myEditor';
-      const setupCustomBehavior = args => ({ setupCustomBehavior: args });
-      beforeEach(() => {
-        props.setEditorRef = jest.fn();
-        props.openImgModal = jest.fn();
-        props.openSourceCodeModal = jest.fn();
-        props.initializeEditor = jest.fn();
-        jest.spyOn(module, moduleKeys.setupCustomBehavior)
-          .mockImplementationOnce(setupCustomBehavior);
-        output = module.editorConfig(props);
-      });
-      test('It creates an onInit which calls initializeEditor and setEditorRef', () => {
-        output.onInit(evt, editor);
-        expect(props.setEditorRef).toHaveBeenCalledWith(editor);
-        expect(props.initializeEditor).toHaveBeenCalled();
-      });
-      test('It sets the blockvalue to be empty string by default', () => {
-        expect(output.initialValue).toBe('');
-      });
-      test('It sets the blockvalue to be the blockvalue if nonempty', () => {
-        const htmltext = 'SomE hTML content';
-        const blockValue = { data: { data: htmltext } };
-        output = module.editorConfig({ ...props, blockValue });
-        expect(output.initialValue).toBe(htmltext);
-      });
-      test('It configures plugins and toolbars correctly', () => {
-        expect(output.init.plugins).toEqual(tinyMCEConfig(props.isLibrary).plugins);
-        expect(output.init.imagetools_toolbar).toEqual(tinyMCEConfig(props.isLibrary).imageToolbar);
-        expect(output.init.toolbar).toEqual(tinyMCEConfig(props.isLibrary).toolbar);
-        Object.keys(tinyMCEConfig(props.isLibrary).config.shared).forEach(key => {
-          expect(output.init[key]).toEqual(tinyMCEConfig(props.isLibrary).config.shared[key]);
-        });
-        Object.keys(tinyMCEConfig(props.isLibrary).config.textEditor).forEach(key => {
-          expect(output.init[key]).toEqual(tinyMCEConfig(props.isLibrary).config.textEditor[key]);
-        });
-        // Commented out as we investigate whether this is only needed for image proxy
-        // expect(output.init.imagetools_cors_hosts).toMatchObject([props.lmsEndpointUrl]);
-      });
-
-      it('calls setupCustomBehavior on setup', () => {
-        expect(output.init.setup).toEqual(
-          setupCustomBehavior({
-            openImgModal: props.openImgModal,
-            openSourceCodeModal: props.openSourceCodeModal,
-            setImage: props.setSelection,
-          }),
-        );
-      });
-    });
-
-    describe('imgModalToggle', () => {
-      const hookKey = state.keys.isImageModalOpen;
-      beforeEach(() => {
-        hook = module.imgModalToggle();
-      });
-      test('isOpen: state value', () => {
-        expect(hook.isImgOpen).toEqual(state.stateVals[hookKey]);
-      });
-      test('openModal: calls setter with true', () => {
-        hook.openImgModal();
-        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
-      });
-      test('closeModal: calls setter with false', () => {
-        hook.closeImgModal();
-        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
-      });
-    });
-
-    describe('sourceCodeModalToggle', () => {
-      const editorRef = { current: { focus: jest.fn() } };
-      const hookKey = state.keys.isSourceCodeModalOpen;
-      beforeEach(() => {
-        hook = module.sourceCodeModalToggle(editorRef);
-      });
-      test('isOpen: state value', () => {
-        expect(hook.isSourceCodeOpen).toEqual(state.stateVals[hookKey]);
-      });
-      test('openModal: calls setter with true', () => {
-        hook.openSourceCodeModal();
-        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
-      });
-      test('closeModal: calls setter with false', () => {
-        hook.closeSourceCodeModal();
-        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
-      });
-    });
-
-    describe('openModalWithSelectedImage', () => {
-      test('image is set to be value stored in editor, modal is opened', () => {
-        const setImage = jest.fn();
-        const openImgModal = jest.fn();
-        const editor = { selection: { getNode: () => mockNode } };
-        module.openModalWithSelectedImage({ editor, openImgModal, setImage })();
-        expect(setImage).toHaveBeenCalledWith({
-          externalUrl: mockNode.src,
-          altText: mockNode.alt,
-          width: mockNode.width,
-          height: mockNode.height,
-        });
-        expect(openImgModal).toHaveBeenCalled();
-      });
-    });
-
     describe('prepareEditorRef', () => {
       beforeEach(() => {
         hook = module.prepareEditorRef();
@@ -251,6 +63,18 @@ describe('TextEditor hooks', () => {
       });
     });
 
+    describe('setAssetToStaticUrl', () => {
+      it('returns content with updated img links', () => {
+        const editorValue = '<img src="/asset@asset-block/soME_ImagE_URl1"/> <a href="/asset@soMEImagEURl">testing link</a>';
+        const assets = [
+          { portableUrl: '/static/soMEImagEURl', displayName: 'soMEImagEURl' },
+          { portableUrl: '/static/soME_ImagE_URl1', displayName: 'soME ImagE URl1' },
+        ];
+        const content = module.setAssetToStaticUrl({ editorValue, assets });
+        expect(content).toEqual('<img src="/static/soME_ImagE_URl1"/> <a href="/static/soMEImagEURl">testing link</a>');
+      });
+    });
+
     describe('getContent', () => {
       const visualContent = 'sOmEViSualContent';
       const rawContent = 'soMeRawContent';
@@ -268,23 +92,5 @@ describe('TextEditor hooks', () => {
         expect(module.getContent({ editorRef, isRaw: true, assets })()).toEqual(rawContent);
       });
     });
-
-    describe('selectedImage hooks', () => {
-      const val = { a: 'VaLUe' };
-      beforeEach(() => {
-        hook = module.selectedImage(val);
-      });
-      test('selection: state value', () => {
-        expect(hook.selection).toEqual(state.stateVals[state.keys.imageSelection]);
-      });
-      test('setSelection: setter for value', () => {
-        expect(hook.setSelection).toEqual(state.setState[state.keys.imageSelection]);
-      });
-      test('clearSelection: calls setter with null', () => {
-        expect(hook.setSelection).not.toHaveBeenCalled();
-        hook.clearSelection();
-        expect(hook.setSelection).toHaveBeenCalledWith(null);
-      });
-    });
   });
 });
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
index b3f3d16c4..3f3753c1e 100644
--- a/src/editors/containers/TextEditor/index.jsx
+++ b/src/editors/containers/TextEditor/index.jsx
@@ -1,24 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Editor } from '@tinymce/tinymce-react';
-
-import 'tinymce';
-import 'tinymce/themes/silver';
-import 'tinymce/skins/ui/oxide/skin.css';
-import 'tinymce/icons/default';
-import 'tinymce/plugins/link';
-import 'tinymce/plugins/lists';
-import 'tinymce/plugins/table';
-import 'tinymce/plugins/hr';
-import 'tinymce/plugins/codesample';
-import 'tinymce/plugins/emoticons';
-import 'tinymce/plugins/emoticons/js/emojis';
-import 'tinymce/plugins/charmap';
-import 'tinymce/plugins/code';
-import 'tinymce/plugins/autoresize';
-import 'tinymce/plugins/image';
-import 'tinymce/plugins/imagetools';
 
 import {
   Spinner,
@@ -30,11 +12,10 @@ import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
 
 import EditorContainer from '../EditorContainer';
-import ImageUploadModal from './components/ImageUploadModal';
-import SourceCodeModal from './components/SourceCodeModal';
 import RawEditor from '../../sharedComponents/RawEditor';
 import * as hooks from './hooks';
 import messages from './messages';
+import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
 
 export const TextEditor = ({
   onClose,
@@ -52,10 +33,6 @@ export const TextEditor = ({
   intl,
 }) => {
   const { editorRef, refReady, setEditorRef } = hooks.prepareEditorRef();
-  const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
-  const { isSourceCodeOpen, openSourceCodeModal, closeSourceCodeModal } = hooks.sourceCodeModalToggle(editorRef);
-  const images = hooks.filterAssets({ assets });
-  const imageSelection = hooks.selectedImage(null);
 
   if (!refReady) { return null; }
 
@@ -69,20 +46,18 @@ export const TextEditor = ({
       );
     }
     return (
-      <Editor
-        {...hooks.editorConfig({
-          setEditorRef,
-          blockValue,
-          openImgModal,
-          openSourceCodeModal,
-          initializeEditor,
-          lmsEndpointUrl,
-          studioEndpointUrl,
-          isLibrary,
-          images,
-          setSelection: imageSelection.setSelection,
-          clearSelection: imageSelection.clearSelection,
-        })}
+      <TinyMceWidget
+        editorType="text"
+        editorRef={editorRef}
+        textValue={blockValue ? blockValue.data.data : ''}
+        setEditorRef={setEditorRef}
+        minHeight={500}
+        height="100%"
+        initializeEditor={initializeEditor}
+        isLibrary={isLibrary}
+        lmsEndpointUrl={lmsEndpointUrl}
+        studioEndpointUrl={studioEndpointUrl}
+        assets={assets}
       />
     );
   };
@@ -93,21 +68,6 @@ export const TextEditor = ({
       onClose={onClose}
     >
       <div className="editor-body h-75 overflow-auto">
-        {isLibrary ? null : (
-          <ImageUploadModal
-            isOpen={isImgOpen}
-            close={closeImgModal}
-            editorRef={editorRef}
-            images={images}
-            {...imageSelection}
-          />
-        )}
-        <SourceCodeModal
-          isOpen={isSourceCodeOpen}
-          close={closeSourceCodeModal}
-          editorRef={editorRef}
-        />
-
         <Toast show={blockFailed} onClose={hooks.nullMethod}>
           <FormattedMessage {...messages.couldNotLoadTextContext} />
         </Toast>
diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.jsx
index 025175b67..e49844cf9 100644
--- a/src/editors/containers/TextEditor/index.test.jsx
+++ b/src/editors/containers/TextEditor/index.test.jsx
@@ -4,7 +4,6 @@ import { shallow } from 'enzyme';
 import { formatMessage } from '../../../testUtils';
 import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
-import { imgModalToggle, sourceCodeModalToggle } from './hooks';
 import { TextEditor, mapStateToProps, mapDispatchToProps } from '.';
 
 // Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
@@ -20,34 +19,15 @@ jest.mock('@tinymce/tinymce-react', () => {
 
 jest.mock('../EditorContainer', () => 'EditorContainer');
 
-jest.mock('./components/ImageUploadModal', () => 'ImageUploadModal');
-jest.mock('./components/SourceCodeModal', () => 'SourceCodeModal');
-
 jest.mock('./hooks', () => ({
   editorConfig: jest.fn(args => ({ editorConfig: args })),
   getContent: jest.fn(args => ({ getContent: args })),
-  imgModalToggle: jest.fn(() => ({
-    isImgOpen: true,
-    openImgModal: jest.fn().mockName('openModal'),
-    closeImgModal: jest.fn().mockName('closeModal'),
-  })),
-  sourceCodeModalToggle: jest.fn(() => ({
-    isSourceCodeOpen: true,
-    openSourceCodeModal: jest.fn().mockName('openModal'),
-    closeSourceCodeModal: jest.fn().mockName('closeModal'),
-  })),
-  selectedImage: jest.fn(() => ({
-    selection: 'hooks.selectedImage.selection',
-    setSelection: jest.fn().mockName('hooks.selectedImage.setSelection'),
-    clearSelection: jest.fn().mockName('hooks.selectedImage.clearSelection'),
-  })),
   nullMethod: jest.fn().mockName('hooks.nullMethod'),
   prepareEditorRef: jest.fn(() => ({
     editorRef: { current: { value: 'something' } },
     refReady: true,
     setEditorRef: jest.fn().mockName('hooks.prepareEditorRef.setEditorRef'),
   })),
-  filterAssets: jest.fn(() => [{ staTICUrl: '/assets/sOmEaSsET' }]),
 }));
 
 jest.mock('react', () => {
@@ -98,16 +78,6 @@ describe('TextEditor', () => {
     intl: { formatMessage },
   };
   describe('snapshots', () => {
-    imgModalToggle.mockReturnValue({
-      isImgOpen: false,
-      openImgModal: jest.fn().mockName('modal.openModal'),
-      closeImgModal: jest.fn().mockName('modal.closeModal'),
-    });
-    sourceCodeModalToggle.mockReturnValue({
-      isSourceCodeOpen: false,
-      openSourceCodeModal: jest.fn().mockName('modal.openModal'),
-      closeSourceCodeModal: jest.fn().mockName('modal.closeModal'),
-    });
     test('renders as expected with default behavior', () => {
       expect(shallow(<TextEditor {...props} />)).toMatchSnapshot();
     });
@@ -120,9 +90,6 @@ describe('TextEditor', () => {
     test('block failed to load, Toast is shown', () => {
       expect(shallow(<TextEditor {...props} blockFailed />)).toMatchSnapshot();
     });
-    test('ImageUploadModal is not rendered', () => {
-      expect(shallow(<TextEditor {...props} isLibrary />)).toMatchSnapshot();
-    });
   });
 
   describe('mapStateToProps', () => {
@@ -137,6 +104,11 @@ describe('TextEditor', () => {
         mapStateToProps(testState).lmsEndpointUrl,
       ).toEqual(selectors.app.lmsEndpointUrl(testState));
     });
+    test('studioEndpointUrl from app.studioEndpointUrl', () => {
+      expect(
+        mapStateToProps(testState).studioEndpointUrl,
+      ).toEqual(selectors.app.studioEndpointUrl(testState));
+    });
     test('assets from app.assets', () => {
       expect(
         mapStateToProps(testState).assets,
diff --git a/src/editors/data/constants/tinyMCE.js b/src/editors/data/constants/tinyMCE.js
index f1c2fe2c9..16d7e0e34 100644
--- a/src/editors/data/constants/tinyMCE.js
+++ b/src/editors/data/constants/tinyMCE.js
@@ -25,6 +25,7 @@ export const buttons = StrictDict({
   charmap: 'charmap',
   code: 'code-modified', // use a custom button name, consistently, for our text-only button
   codesample: 'codesample',
+  customLabelButton: 'customLabelButton',
   editImageSettings: 'editimagesettings',
   emoticons: 'emoticons',
   flip: StrictDict({
@@ -65,8 +66,11 @@ export const plugins = listKeyStore([
   'imagetools',
 ]);
 
+export const textToSpeechIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>';
+
 export default StrictDict({
   buttons,
   commands,
   plugins,
+  textToSpeechIcon,
 });
diff --git a/src/editors/containers/TextEditor/components/__snapshots__/BaseModal.test.jsx.snap b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
similarity index 93%
rename from src/editors/containers/TextEditor/components/__snapshots__/BaseModal.test.jsx.snap
rename to src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
index 5947d9f57..e15c4ccdc 100644
--- a/src/editors/containers/TextEditor/components/__snapshots__/BaseModal.test.jsx.snap
+++ b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
@@ -29,7 +29,7 @@ exports[`BaseModal ImageUploadModal template component snapshot 1`] = `
         <FormattedMessage
           defaultMessage="Cancel"
           description="Label for cancel button."
-          id="authoring.texteditor.baseModal.cancelButtonLabel"
+          id="authoring.baseModal.cancelButtonLabel"
         />
       </ModalDialog.CloseButton>
       props.confirmAction node
diff --git a/src/editors/containers/TextEditor/components/BaseModal.jsx b/src/editors/sharedComponents/BaseModal/index.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/BaseModal.jsx
rename to src/editors/sharedComponents/BaseModal/index.jsx
diff --git a/src/editors/containers/TextEditor/components/BaseModal.test.jsx b/src/editors/sharedComponents/BaseModal/index.test.jsx
similarity index 92%
rename from src/editors/containers/TextEditor/components/BaseModal.test.jsx
rename to src/editors/sharedComponents/BaseModal/index.test.jsx
index 718d5201f..f855014c4 100644
--- a/src/editors/containers/TextEditor/components/BaseModal.test.jsx
+++ b/src/editors/sharedComponents/BaseModal/index.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { BaseModal } from './BaseModal';
+import BaseModal from '.';
 
 describe('BaseModal ImageUploadModal template component', () => {
   test('snapshot', () => {
diff --git a/src/editors/containers/TextEditor/components/messages.js b/src/editors/sharedComponents/BaseModal/messages.js
similarity index 72%
rename from src/editors/containers/TextEditor/components/messages.js
rename to src/editors/sharedComponents/BaseModal/messages.js
index e72930ea5..eac25a893 100644
--- a/src/editors/containers/TextEditor/components/messages.js
+++ b/src/editors/sharedComponents/BaseModal/messages.js
@@ -1,6 +1,6 @@
 export const messages = {
   cancelButtonLabel: {
-    id: 'authoring.texteditor.baseModal.cancelButtonLabel',
+    id: 'authoring.baseModal.cancelButtonLabel',
     defaultMessage: 'Cancel',
     description: 'Label for cancel button.',
   },
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/AltTextControls.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/AltTextControls.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/AltTextControls.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx
similarity index 94%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/AltTextControls.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx
index 0badd6a53..ebdddaa56 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/AltTextControls.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
 import { AltTextControls } from './AltTextControls';
 
 jest.mock('./hooks', () => ({
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/DimensionControls.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/DimensionControls.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/DimensionControls.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx
similarity index 95%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/DimensionControls.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx
index 9a6119163..249511d77 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/DimensionControls.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
 import { DimensionControls } from './DimensionControls';
 
 jest.mock('./hooks', () => ({
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/__snapshots__/index.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js
similarity index 99%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.js
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js
index a853b1175..7bb9dbf0e 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.js
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { StrictDict } from '../../../../utils';
+import { StrictDict } from '../../../utils';
 import * as module from './hooks';
 
 // Simple wrappers for useState to allow easy mocking for tests.
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.test.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js
similarity index 99%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.test.js
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js
index bfe5b9d52..a4de14743 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/hooks.test.js
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { StrictDict } from '../../../../utils';
-import { MockUseState } from '../../../../../testUtils';
+import { StrictDict } from '../../../utils';
+import { MockUseState } from '../../../../testUtils';
 import * as hooks from './hooks';
 
 jest.mock('react', () => ({
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx
similarity index 96%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/index.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx
index 00c42e799..0a1b041f8 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/index.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx
@@ -8,10 +8,10 @@ import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/
 import './index.scss';
 import hooks from './hooks';
 import messages from './messages';
-import BaseModal from '../BaseModal';
+import BaseModal from '../../BaseModal';
 import AltTextControls from './AltTextControls';
 import DimensionControls from './DimensionControls';
-import ErrorAlert from '../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import ErrorAlert from '../../ErrorAlerts/ErrorAlert';
 
 /**
  * Modal display wrapping the dimension and alt-text controls for image tags
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/index.scss b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/index.scss
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx
similarity index 95%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/index.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx
index 1b4637226..95662a7b8 100644
--- a/src/editors/containers/TextEditor/components/ImageSettingsModal/index.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
 import { ImageSettingsModal } from '.';
 
 jest.mock('./AltTextControls', () => 'AltTextControls');
diff --git a/src/editors/containers/TextEditor/components/ImageSettingsModal/messages.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/messages.js
similarity index 100%
rename from src/editors/containers/TextEditor/components/ImageSettingsModal/messages.js
rename to src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/messages.js
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/Gallery.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.jsx
similarity index 94%
rename from src/editors/containers/TextEditor/components/SelectImageModal/Gallery.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.jsx
index 4e67bc298..99419a6a9 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/Gallery.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.jsx
@@ -8,8 +8,8 @@ import {
 
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import { selectors } from '../../../../data/redux';
-import { RequestKeys } from '../../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
+import { RequestKeys } from '../../../data/constants/requests';
 
 import messages from './messages';
 import GalleryCard from './GalleryCard';
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/Gallery.test.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.test.jsx
similarity index 89%
rename from src/editors/containers/TextEditor/components/SelectImageModal/Gallery.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.test.jsx
index eeac14089..1227f08ea 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/Gallery.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/Gallery.test.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { formatMessage } from '../../../../../testUtils';
-import { RequestKeys } from '../../../../data/constants/requests';
-import { selectors } from '../../../../data/redux';
+import { formatMessage } from '../../../../testUtils';
+import { RequestKeys } from '../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
 import { Gallery, mapStateToProps, mapDispatchToProps } from './Gallery';
 
-jest.mock('../../../../data/redux', () => ({
+jest.mock('../../../data/redux', () => ({
   selectors: {
     requests: {
       isFinished: (state, { requestKey }) => ({ isFinished: { state, requestKey } }),
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/GalleryCard.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/GalleryCard.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/GalleryCard.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/GalleryCard.jsx
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/GalleryCard.test.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/GalleryCard.test.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/GalleryCard.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/GalleryCard.test.jsx
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/SearchSort.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/SearchSort.jsx
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/SearchSort.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/SearchSort.jsx
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/SearchSort.test.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/SearchSort.test.jsx
similarity index 96%
rename from src/editors/containers/TextEditor/components/SelectImageModal/SearchSort.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/SearchSort.test.jsx
index b6e9c7016..bb2b98676 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/SearchSort.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/SearchSort.test.jsx
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { Dropdown } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
 
 import { sortKeys, sortMessages } from './utils';
 import { SearchSort } from './SearchSort';
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/Gallery.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/Gallery.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/Gallery.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/Gallery.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/GalleryCard.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/GalleryCard.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/GalleryCard.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/SearchSort.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/SearchSort.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/SearchSort.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/SearchSort.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/__snapshots__/index.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/hooks.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js
similarity index 98%
rename from src/editors/containers/TextEditor/components/SelectImageModal/hooks.js
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js
index 93c08966b..b8e813770 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/hooks.js
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
-import { thunkActions } from '../../../../data/redux';
+import { thunkActions } from '../../../data/redux';
 import * as module from './hooks';
 import { sortFunctions, sortKeys } from './utils';
 
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/hooks.test.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js
similarity index 98%
rename from src/editors/containers/TextEditor/components/SelectImageModal/hooks.test.js
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js
index a226d6523..7128d857b 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/hooks.test.js
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { dispatch } from 'react-redux';
 
-import { MockUseState } from '../../../../../testUtils';
-import { keyStore } from '../../../../utils';
-import { thunkActions } from '../../../../data/redux';
+import { MockUseState } from '../../../../testUtils';
+import { keyStore } from '../../../utils';
+import { thunkActions } from '../../../data/redux';
 
 import * as hooks from './hooks';
 import { sortFunctions, sortKeys } from './utils';
@@ -24,7 +24,7 @@ jest.mock('react-redux', () => {
   };
 });
 
-jest.mock('../../../../data/redux', () => ({
+jest.mock('../../../data/redux', () => ({
   thunkActions: {
     app: {
       uploadImage: jest.fn(),
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
similarity index 86%
rename from src/editors/containers/TextEditor/components/SelectImageModal/index.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
index 25145222f..e2ee598bf 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/index.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
@@ -9,19 +9,19 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { selectors } from '../../../../data/redux';
-import { RequestKeys } from '../../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
+import { RequestKeys } from '../../../data/constants/requests';
 import { acceptedImgKeys } from './utils';
 
 import hooks from './hooks';
 import messages from './messages';
-import BaseModal from '../BaseModal';
+import BaseModal from '../../BaseModal';
 import SearchSort from './SearchSort';
 import Gallery from './Gallery';
-import FileInput from '../../../../sharedComponents/FileInput';
-import FetchErrorAlert from '../../../../sharedComponents/ErrorAlerts/FetchErrorAlert';
-import UploadErrorAlert from '../../../../sharedComponents/ErrorAlerts/UploadErrorAlert';
-import ErrorAlert from '../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import FileInput from '../../FileInput';
+import FetchErrorAlert from '../../ErrorAlerts/FetchErrorAlert';
+import UploadErrorAlert from '../../ErrorAlerts/UploadErrorAlert';
+import ErrorAlert from '../../ErrorAlerts/ErrorAlert';
 
 export const SelectImageModal = ({
   isOpen,
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx
similarity index 81%
rename from src/editors/containers/TextEditor/components/SelectImageModal/index.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx
index 0738b6295..cc6cbf1b6 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/index.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx
@@ -1,23 +1,23 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { formatMessage } from '../../../../../testUtils';
-import { RequestKeys } from '../../../../data/constants/requests';
-import { selectors } from '../../../../data/redux';
-import BaseModal from '../BaseModal';
-import FileInput from '../../../../sharedComponents/FileInput';
+import { formatMessage } from '../../../../testUtils';
+import { RequestKeys } from '../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
+import BaseModal from '../../BaseModal';
+import FileInput from '../../FileInput';
 import Gallery from './Gallery';
 import SearchSort from './SearchSort';
 import hooks from './hooks';
 import { SelectImageModal, mapStateToProps, mapDispatchToProps } from '.';
 
-jest.mock('../BaseModal', () => 'BaseModal');
-jest.mock('../../../../sharedComponents/FileInput', () => 'FileInput');
+jest.mock('../../BaseModal', () => 'BaseModal');
+jest.mock('../../FileInput', () => 'FileInput');
 jest.mock('./Gallery', () => 'Gallery');
 jest.mock('./SearchSort', () => 'SearchSort');
-jest.mock('../../../../sharedComponents/ErrorAlerts/FetchErrorAlert', () => 'FetchErrorAlert');
-jest.mock('../../../../sharedComponents/ErrorAlerts/UploadErrorAlert', () => 'UploadErrorAlert');
-jest.mock('../../../../sharedComponents/ErrorAlerts/ErrorAlert', () => 'ErrorAlert');
+jest.mock('../../ErrorAlerts/FetchErrorAlert', () => 'FetchErrorAlert');
+jest.mock('../../ErrorAlerts/UploadErrorAlert', () => 'UploadErrorAlert');
+jest.mock('../..//ErrorAlerts/ErrorAlert', () => 'ErrorAlert');
 
 jest.mock('./hooks', () => ({
   imgHooks: jest.fn(() => ({
@@ -42,7 +42,7 @@ jest.mock('./hooks', () => ({
   })),
 }));
 
-jest.mock('../../../../data/redux', () => ({
+jest.mock('../../../data/redux', () => ({
   selectors: {
     requests: {
       isPending: (state, { requestKey }) => ({ isPending: { state, requestKey } }),
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/messages.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js
similarity index 100%
rename from src/editors/containers/TextEditor/components/SelectImageModal/messages.js
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js
diff --git a/src/editors/containers/TextEditor/components/SelectImageModal/utils.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js
similarity index 95%
rename from src/editors/containers/TextEditor/components/SelectImageModal/utils.js
rename to src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js
index 80240abf3..a94a6ebf2 100644
--- a/src/editors/containers/TextEditor/components/SelectImageModal/utils.js
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js
@@ -1,4 +1,4 @@
-import { StrictDict, keyStore } from '../../../../utils';
+import { StrictDict, keyStore } from '../../../utils';
 import messages from './messages';
 
 export const sortKeys = StrictDict({
diff --git a/src/editors/containers/TextEditor/components/__snapshots__/ImageUploadModal.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/__snapshots__/ImageUploadModal.test.jsx.snap
rename to src/editors/sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/ImageUploadModal.jsx b/src/editors/sharedComponents/ImageUploadModal/index.jsx
similarity index 95%
rename from src/editors/containers/TextEditor/components/ImageUploadModal.jsx
rename to src/editors/sharedComponents/ImageUploadModal/index.jsx
index 89f085e3d..a6877da10 100644
--- a/src/editors/containers/TextEditor/components/ImageUploadModal.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/index.jsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
 
-import { selectors } from '../../../data/redux';
-import tinyMCEKeys from '../../../data/constants/tinyMCE';
+import { selectors } from '../../data/redux';
+import tinyMCEKeys from '../../data/constants/tinyMCE';
 import ImageSettingsModal from './ImageSettingsModal';
 import SelectImageModal from './SelectImageModal';
-import * as module from './ImageUploadModal';
+import * as module from '.';
 
 export const propsString = (props) => (
   Object.keys(props).map((key) => `${key}="${props[key]}"`).join(' ')
diff --git a/src/editors/containers/TextEditor/components/ImageUploadModal.test.jsx b/src/editors/sharedComponents/ImageUploadModal/index.test.jsx
similarity index 95%
rename from src/editors/containers/TextEditor/components/ImageUploadModal.test.jsx
rename to src/editors/sharedComponents/ImageUploadModal/index.test.jsx
index e7baa4dc7..59ec3870c 100644
--- a/src/editors/containers/TextEditor/components/ImageUploadModal.test.jsx
+++ b/src/editors/sharedComponents/ImageUploadModal/index.test.jsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { keyStore } from '../../../utils';
-import { selectors } from '../../../data/redux';
-import tinyMCEKeys from '../../../data/constants/tinyMCE';
+import { keyStore } from '../../utils';
+import { selectors } from '../../data/redux';
+import tinyMCEKeys from '../../data/constants/tinyMCE';
 
-import * as module from './ImageUploadModal';
+import * as module from '.';
 
 jest.mock('./ImageSettingsModal', () => 'ImageSettingsModal');
 jest.mock('./SelectImageModal', () => 'SelectImageModal');
 
 const { ImageUploadModal, mapStateToProps, mapDispatchToProps } = module;
 
-jest.mock('../../../data/redux', () => ({
+jest.mock('../../data/redux', () => ({
   selectors: {
     app: {
       lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
similarity index 100%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/__snapshots__/index.test.jsx.snap
rename to src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/hooks.js b/src/editors/sharedComponents/SourceCodeModal/hooks.js
similarity index 100%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/hooks.js
rename to src/editors/sharedComponents/SourceCodeModal/hooks.js
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/hooks.test.js b/src/editors/sharedComponents/SourceCodeModal/hooks.test.js
similarity index 100%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/hooks.test.js
rename to src/editors/sharedComponents/SourceCodeModal/hooks.test.js
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/index.jsx b/src/editors/sharedComponents/SourceCodeModal/index.jsx
similarity index 95%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/index.jsx
rename to src/editors/sharedComponents/SourceCodeModal/index.jsx
index 3241fd9bb..590e10c1e 100644
--- a/src/editors/containers/TextEditor/components/SourceCodeModal/index.jsx
+++ b/src/editors/sharedComponents/SourceCodeModal/index.jsx
@@ -12,7 +12,7 @@ import messages from './messages';
 import hooks from './hooks';
 import BaseModal from '../BaseModal';
 
-import CodeEditor from '../../../../sharedComponents/CodeEditor';
+import CodeEditor from '../CodeEditor';
 
 export const SourceCodeModal = ({
   isOpen,
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/index.test.jsx b/src/editors/sharedComponents/SourceCodeModal/index.test.jsx
similarity index 93%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/index.test.jsx
rename to src/editors/sharedComponents/SourceCodeModal/index.test.jsx
index b01045346..33c4f8dca 100644
--- a/src/editors/containers/TextEditor/components/SourceCodeModal/index.test.jsx
+++ b/src/editors/sharedComponents/SourceCodeModal/index.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import hooks from './hooks';
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../testUtils';
 
 import { SourceCodeModal } from '.';
 
diff --git a/src/editors/containers/TextEditor/components/SourceCodeModal/messages.js b/src/editors/sharedComponents/SourceCodeModal/messages.js
similarity index 100%
rename from src/editors/containers/TextEditor/components/SourceCodeModal/messages.js
rename to src/editors/sharedComponents/SourceCodeModal/messages.js
diff --git a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 000000000..59ae8b86d
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TinyMceEditor snapshots ImageUploadModal is not rendered 1`] = `
+<Fragment>
+  <SourceCodeModal
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      Object {
+        "current": Object {
+          "value": "something",
+        },
+      }
+    }
+    isOpen={false}
+  />
+  <Editor
+    editorConfig={
+      Object {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "editorRef": Object {
+          "current": Object {
+            "value": "something",
+          },
+        },
+        "editorType": "text",
+        "images": Array [
+          Object {
+            "staTICUrl": "/assets/sOmEaSsET",
+          },
+        ],
+        "isLibrary": true,
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`TinyMceEditor snapshots SourcecodeModal is not rendered 1`] = `
+<Fragment>
+  <ImageUploadModal
+    clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      Object {
+        "current": Object {
+          "value": "something",
+        },
+      }
+    }
+    images={
+      Array [
+        Object {
+          "staTICUrl": "/assets/sOmEaSsET",
+        },
+      ]
+    }
+    isOpen={false}
+    selection="hooks.selectedImage.selection"
+    setSelection={[MockFunction hooks.selectedImage.setSelection]}
+  />
+  <Editor
+    editorConfig={
+      Object {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "editorRef": Object {
+          "current": Object {
+            "value": "something",
+          },
+        },
+        "editorType": "problem",
+        "images": Array [
+          Object {
+            "staTICUrl": "/assets/sOmEaSsET",
+          },
+        ],
+        "isLibrary": false,
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`TinyMceEditor snapshots renders as expected with default behavior 1`] = `
+<Fragment>
+  <ImageUploadModal
+    clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      Object {
+        "current": Object {
+          "value": "something",
+        },
+      }
+    }
+    images={
+      Array [
+        Object {
+          "staTICUrl": "/assets/sOmEaSsET",
+        },
+      ]
+    }
+    isOpen={false}
+    selection="hooks.selectedImage.selection"
+    setSelection={[MockFunction hooks.selectedImage.setSelection]}
+  />
+  <SourceCodeModal
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      Object {
+        "current": Object {
+          "value": "something",
+        },
+      }
+    }
+    isOpen={false}
+  />
+  <Editor
+    editorConfig={
+      Object {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "editorRef": Object {
+          "current": Object {
+            "value": "something",
+          },
+        },
+        "editorType": "text",
+        "images": Array [
+          Object {
+            "staTICUrl": "/assets/sOmEaSsET",
+          },
+        ],
+        "isLibrary": false,
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+      }
+    }
+  />
+</Fragment>
+`;
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
new file mode 100644
index 000000000..30c809ab0
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -0,0 +1,294 @@
+import { useState } from 'react';
+import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
+import { StrictDict } from '../../utils';
+import pluginConfig from './pluginConfig';
+import * as module from './hooks';
+import tinyMCE from '../../data/constants/tinyMCE';
+
+import * as appHooks from '../../hooks';
+
+export const { nullMethod, navigateCallback, navigateTo } = appHooks;
+
+export const state = StrictDict({
+  isImageModalOpen: (val) => useState(val),
+  isSourceCodeModalOpen: (val) => useState(val),
+  imageSelection: (val) => useState(val),
+});
+
+export const parseContentForLabels = ({ editor, updateQuestion }) => {
+  let content = editor.getContent();
+  if (content && content?.length > 0) {
+    const parsedLabels = content.split(/<label>|<\/label>/gm);
+    let updatedContent;
+    parsedLabels.forEach((label, i) => {
+      let updatedLabel = label;
+      if (!label.startsWith('<') && !label.endsWith('>')) {
+        let previousLabel = parsedLabels[i - 1];
+        let nextLabel = parsedLabels[i + 1];
+        if (!previousLabel.endsWith('<p>')) {
+          previousLabel = `${previousLabel}</p><p>`;
+          updatedContent = content.replace(parsedLabels[i - 1], previousLabel);
+          content = updatedContent;
+        }
+        if (previousLabel.endsWith('</p>') && !label.startWith('<p>')) {
+          updatedLabel = `<p>${label}`;
+          updatedContent = content.replace(label, updatedLabel);
+          content = updatedContent;
+        }
+        if (!nextLabel.startsWith('</p>')) {
+          nextLabel = `</p><p>${nextLabel}`;
+          updatedContent = content.replace(parsedLabels[i + 1], nextLabel);
+          content = updatedContent;
+        }
+      }
+    });
+  }
+  updateQuestion(content);
+};
+
+export const replaceStaticwithAsset = (editor, imageUrls) => {
+  const content = editor.getContent();
+  const imageSrcs = content.split('src="');
+  imageSrcs.forEach(src => {
+    if (src.startsWith('/static/') && imageUrls.length > 0) {
+      const imgName = src.substring(8, src.indexOf('"'));
+      let staticFullUrl;
+      imageUrls.forEach((url) => {
+        if (imgName === url.displayName) {
+          staticFullUrl = url.staticFullUrl;
+        }
+      });
+      if (staticFullUrl) {
+        const currentSrc = src.substring(0, src.indexOf('"'));
+        const updatedContent = content.replace(currentSrc, staticFullUrl);
+        editor.setContent(updatedContent);
+      }
+    }
+  });
+};
+
+export const setupCustomBehavior = ({
+  updateQuestion,
+  openImgModal,
+  openSourceCodeModal,
+  setImage,
+  editorType,
+}) => (editor) => {
+  // image upload button
+  editor.ui.registry.addButton(tinyMCE.buttons.imageUploadButton, {
+    icon: 'image',
+    tooltip: 'Add Image',
+    onAction: openImgModal,
+  });
+  // editing an existing image
+  editor.ui.registry.addButton(tinyMCE.buttons.editImageSettings, {
+    icon: 'image',
+    tooltip: 'Edit Image Settings',
+    onAction: module.openModalWithSelectedImage({ editor, setImage, openImgModal }),
+  });
+  // overriding the code plugin's icon with 'HTML' text
+  editor.ui.registry.addButton(tinyMCE.buttons.code, {
+    text: 'HTML',
+    tooltip: 'Source code',
+    onAction: openSourceCodeModal,
+  });
+  // add a custom simple inline code block formatter.
+  const setupCodeFormatting = (api) => {
+    editor.formatter.formatChanged(
+      'code',
+      (active) => api.setActive(active),
+    );
+  };
+  const toggleCodeFormatting = () => {
+    editor.formatter.toggle('code');
+    editor.undoManager.add();
+    editor.focus();
+  };
+  editor.ui.registry.addToggleButton(tinyMCE.buttons.codeBlock, {
+    icon: 'sourcecode',
+    tooltip: 'Code Block',
+    onAction: toggleCodeFormatting,
+    onSetup: setupCodeFormatting,
+  });
+  // add a custom simple inline label formatter.
+  const toggleLabelFormatting = () => {
+    editor.execCommand('mceToggleFormat', false, 'label');
+  };
+  editor.ui.registry.addIcon('textToSpeech', tinyMCE.textToSpeechIcon);
+  editor.ui.registry.addButton('customLabelButton', {
+    icon: 'textToSpeech',
+    text: 'Label',
+    tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
+    onAction: toggleLabelFormatting,
+  });
+  editor.on('blur', () => {
+    if (editorType === 'problem') {
+      module.parseContentForLabels({
+        editor,
+        updateQuestion,
+      });
+    }
+  });
+};
+
+export const checkRelativeUrl = (imageUrls) => (editor) => {
+  editor.on('ExecCommand', (e) => {
+    if (e.command === 'mceFocus') {
+      module.replaceStaticwithAsset(editor, imageUrls);
+    }
+  });
+};
+
+// imagetools_cors_hosts needs a protocol-sanatized url
+export const removeProtocolFromUrl = (url) => url.replace(/^https?:\/\//, '');
+
+export const editorConfig = ({
+  editorType,
+  setEditorRef,
+  textValue,
+  images,
+  lmsEndpointUrl,
+  studioEndpointUrl,
+  isLibrary,
+  placeholder,
+  initializeEditor,
+  openImgModal,
+  openSourceCodeModal,
+  setSelection,
+  updateQuestion,
+  minHeight,
+}) => {
+  const {
+    toolbar,
+    config,
+    plugins,
+    imageToolbar,
+  } = pluginConfig({ isLibrary, placeholder, editorType });
+  return {
+    onInit: (evt, editor) => {
+      setEditorRef(editor);
+      if (editorType === 'text') {
+        initializeEditor();
+      }
+    },
+    initialValue: textValue || '',
+    init: {
+      ...config,
+      skin: false,
+      content_css: false,
+      content_style: tinyMCEStyles,
+      min_height: minHeight,
+      contextmenu: 'link table',
+      document_base_url: lmsEndpointUrl,
+      init_instance_callback: module.checkRelativeUrl(module.fetchImageUrls(images)),
+      imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
+      imagetools_toolbar: imageToolbar,
+      formats: { label: { inline: 'label' } },
+      setup: module.setupCustomBehavior({
+        editorType,
+        updateQuestion,
+        openImgModal,
+        openSourceCodeModal,
+        setImage: setSelection,
+      }),
+      toolbar,
+      plugins,
+      valid_children: '+body[style]',
+      valid_elements: '*[*]',
+      entity_encoding: 'utf-8',
+    },
+  };
+};
+
+export const imgModalToggle = () => {
+  const [isImgOpen, setIsOpen] = module.state.isImageModalOpen(false);
+  return {
+    isImgOpen,
+    openImgModal: () => setIsOpen(true),
+    closeImgModal: () => setIsOpen(false),
+  };
+};
+
+export const sourceCodeModalToggle = (editorRef) => {
+  const [isSourceCodeOpen, setIsOpen] = module.state.isSourceCodeModalOpen(false);
+  return {
+    isSourceCodeOpen,
+    openSourceCodeModal: () => setIsOpen(true),
+    closeSourceCodeModal: () => {
+      setIsOpen(false);
+      editorRef.current.focus();
+    },
+  };
+};
+
+export const openModalWithSelectedImage = ({ editor, setImage, openImgModal }) => () => {
+  const imgHTML = editor.selection.getNode();
+  setImage({
+    externalUrl: imgHTML.src,
+    altText: imgHTML.alt,
+    width: imgHTML.width,
+    height: imgHTML.height,
+  });
+  openImgModal();
+};
+
+export const filterAssets = ({ assets }) => {
+  let images = [];
+  const assetsList = Object.values(assets);
+  if (assetsList.length > 0) {
+    images = assetsList.filter(asset => asset?.contentType?.startsWith('image/'));
+  }
+  return images;
+};
+
+export const setAssetToStaticUrl = ({ editorValue, assets }) => {
+  /* For assets to remain usable across course instances, we convert their url to be course-agnostic.
+   * For example, /assets/course/<asset hash>/filename gets converted to /static/filename. This is
+   * important for rerunning courses and importing/exporting course as the /static/ part of the url
+   * allows the asset to be mapped to the new course run.
+  */
+  let content = editorValue;
+  const assetUrls = [];
+  const assetsList = Object.values(assets);
+  assetsList.forEach(asset => {
+    assetUrls.push({ portableUrl: asset.portableUrl, displayName: asset.displayName });
+  });
+  const assetSrcs = typeof content === 'string' ? content.split(/(src="|href=")/g) : [];
+  assetSrcs.forEach(src => {
+    if (src.startsWith('/asset') && assetUrls.length > 0) {
+      const assetBlockName = src.substring(src.indexOf('@') + 1, src.indexOf('"'));
+      const nameFromEditorSrc = assetBlockName.substring(assetBlockName.indexOf('@') + 1);
+      const nameFromStudioSrc = assetBlockName.substring(assetBlockName.indexOf('/') + 1);
+      let portableUrl;
+      assetUrls.forEach((url) => {
+        const displayName = url.displayName.replace(/\s/g, '_');
+        if (displayName === nameFromEditorSrc || displayName === nameFromStudioSrc) {
+          portableUrl = url.portableUrl;
+        }
+      });
+      if (portableUrl) {
+        const currentSrc = src.substring(0, src.indexOf('"'));
+        const updatedContent = content.replace(currentSrc, portableUrl);
+        content = updatedContent;
+      }
+    }
+  });
+  return content;
+};
+
+export const fetchImageUrls = (images) => {
+  const imageUrls = [];
+  images.forEach(image => {
+    imageUrls.push({ staticFullUrl: image.staticFullUrl, displayName: image.displayName });
+  });
+  return imageUrls;
+};
+
+export const selectedImage = (val) => {
+  const [selection, setSelection] = module.state.imageSelection(val);
+  return {
+    clearSelection: () => setSelection(null),
+    selection,
+    setSelection,
+  };
+};
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
new file mode 100644
index 000000000..478f1dff7
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
@@ -0,0 +1,301 @@
+import { MockUseState } from '../../../testUtils';
+
+import tinyMCE from '../../data/constants/tinyMCE';
+import { keyStore } from '../../utils';
+import pluginConfig from './pluginConfig';
+import * as module from './hooks';
+
+const state = new MockUseState(module);
+const moduleKeys = keyStore(module);
+
+let hook;
+let output;
+
+const mockNode = {
+  src: 'sOmEuRl.cOm',
+  alt: 'aLt tExt',
+  width: 2022,
+  height: 1619,
+};
+
+describe('TinyMceEditor hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isImageModalOpen);
+    state.testGetter(state.keys.isSourceCodeModalOpen);
+    state.testGetter(state.keys.imageSelection);
+  });
+
+  describe('non-state hooks', () => {
+    beforeEach(() => { state.mock(); });
+    afterEach(() => { state.restore(); });
+
+    describe('setupCustomBehavior', () => {
+      test('It calls addButton and addToggleButton in the editor, but openModal is not called', () => {
+        const addButton = jest.fn();
+        const addIcon = jest.fn();
+        const addToggleButton = jest.fn();
+        const openImgModal = jest.fn();
+        const openSourceCodeModal = jest.fn();
+        const setImage = jest.fn();
+        const updateQuestion = jest.fn();
+        const editorType = 'SOmeEDitor';
+        const editor = {
+          ui: { registry: { addButton, addToggleButton, addIcon } },
+          on: jest.fn(),
+        };
+        const mockOpenModalWithImage = args => ({ openModalWithSelectedImage: args });
+        const expectedSettingsAction = mockOpenModalWithImage({ editor, setImage, openImgModal });
+        const toggleCodeFormatting = expect.any(Function);
+        const toggleLabelFormatting = expect.any(Function);
+        const setupCodeFormatting = expect.any(Function);
+        jest.spyOn(module, moduleKeys.openModalWithSelectedImage)
+          .mockImplementationOnce(mockOpenModalWithImage);
+        output = module.setupCustomBehavior({
+          editorType,
+          updateQuestion,
+          openImgModal,
+          openSourceCodeModal,
+          setImage,
+        })(editor);
+        expect(addIcon.mock.calls).toEqual([['textToSpeech', tinyMCE.textToSpeechIcon]]);
+        expect(addButton.mock.calls).toEqual([
+          [tinyMCE.buttons.imageUploadButton, { icon: 'image', tooltip: 'Add Image', onAction: openImgModal }],
+          [tinyMCE.buttons.editImageSettings, { icon: 'image', tooltip: 'Edit Image Settings', onAction: expectedSettingsAction }],
+          [tinyMCE.buttons.code, { text: 'HTML', tooltip: 'Source code', onAction: openSourceCodeModal }],
+          ['customLabelButton', {
+            icon: 'textToSpeech',
+            text: 'Label',
+            tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
+            onAction: toggleLabelFormatting,
+          }],
+        ]);
+        expect(addToggleButton.mock.calls).toEqual([
+          [tinyMCE.buttons.codeBlock, {
+            icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting, onSetup: setupCodeFormatting,
+          }],
+        ]);
+        expect(openImgModal).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('parseContentForLabels', () => {
+      test('it calls getContent and updateQuestion for some content', () => {
+        const editor = { getContent: jest.fn(() => '<p><label>Some question label</label></p><p>some content <label>around a label</label> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>') };
+        const updateQuestion = jest.fn();
+        const content = '<p><label>Some question label</label></p><p>some content </p><p><label>around a label</label></p><p> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>';
+        module.parseContentForLabels({ editor, updateQuestion });
+        expect(editor.getContent).toHaveBeenCalled();
+        expect(updateQuestion).toHaveBeenCalledWith(content);
+      });
+      test('it calls getContent and updateQuestion for empty content', () => {
+        const editor = { getContent: jest.fn(() => '') };
+        const updateQuestion = jest.fn();
+        const content = '';
+        module.parseContentForLabels({ editor, updateQuestion });
+        expect(editor.getContent).toHaveBeenCalled();
+        expect(updateQuestion).toHaveBeenCalledWith(content);
+      });
+    });
+
+    describe('replaceStaticwithAsset', () => {
+      test('it calls getContent and setContent', () => {
+        const editor = { getContent: jest.fn(() => '<img src="/static/soMEImagEURl1.jpeg"/>'), setContent: jest.fn() };
+        const imageUrls = [{ staticFullUrl: '/assets/soMEImagEURl1.jpeg', displayName: 'soMEImagEURl1.jpeg' }];
+        module.replaceStaticwithAsset(editor, imageUrls);
+        expect(editor.getContent).toHaveBeenCalled();
+        expect(editor.setContent).toHaveBeenCalled();
+      });
+    });
+    describe('setAssetToStaticUrl', () => {
+      it('returns content with updated img links', () => {
+        const editorValue = '<img src="/asset@asset-block/soME_ImagE_URl1"/> <a href="/asset@soMEImagEURl">testing link</a>';
+        const assets = [
+          { portableUrl: '/static/soMEImagEURl', displayName: 'soMEImagEURl' },
+          { portableUrl: '/static/soME_ImagE_URl1', displayName: 'soME ImagE URl1' },
+        ];
+        const content = module.setAssetToStaticUrl({ editorValue, assets });
+        expect(content).toEqual('<img src="/static/soME_ImagE_URl1"/> <a href="/static/soMEImagEURl">testing link</a>');
+      });
+    });
+    describe('checkRelativeUrl', () => {
+      test('it calls editor.on', () => {
+        const editor = { on: jest.fn() };
+        const imageUrls = ['soMEImagEURl1'];
+        module.checkRelativeUrl(imageUrls)(editor);
+        expect(editor.on).toHaveBeenCalled();
+      });
+    });
+
+    describe('editorConfig', () => {
+      const props = {
+        textValue: null,
+        editorType: 'text',
+        lmsEndpointUrl: 'sOmEuRl.cOm',
+        studioEndpointUrl: 'sOmEoThEruRl.cOm',
+        images: [{ staTICUrl: '/assets/sOmEuiMAge' }],
+        isLibrary: false,
+      };
+      const evt = 'fakeEvent';
+      const editor = 'myEditor';
+      const setupCustomBehavior = args => ({ setupCustomBehavior: args });
+      beforeEach(() => {
+        props.setEditorRef = jest.fn();
+        props.openImgModal = jest.fn();
+        props.openSourceCodeModal = jest.fn();
+        props.initializeEditor = jest.fn();
+        props.updateQuestion = jest.fn();
+        jest.spyOn(module, moduleKeys.setupCustomBehavior)
+          .mockImplementationOnce(setupCustomBehavior);
+        output = module.editorConfig(props);
+      });
+      describe('text editor plugins and toolbar', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          expect(output.init.plugins).toEqual(pluginConfig({ isLibrary: props.isLibrary }).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig({ isLibrary: props.isLibrary }).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig({ isLibrary: props.isLibrary }).toolbar);
+          Object.keys(pluginConfig({ isLibrary: props.isLibrary }).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig({ isLibrary: props.isLibrary }).config[key]);
+          });
+          // Commented out as we investigate whether this is only needed for image proxy
+          // expect(output.init.imagetools_cors_hosts).toMatchObject([props.lmsEndpointUrl]);
+        });
+      });
+      describe('text editor plugins and toolbar for content library', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: true,
+          };
+          output = module.editorConfig({ ...props, isLibrary: true });
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+        });
+      });
+      describe('problem editor plugins and toolbar', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: props.isLibrary,
+            editorType: 'problem',
+            placeholder: 'soMEtExT',
+          };
+          output = module.editorConfig({
+            ...props,
+            editorType: 'problem',
+            placeholder: 'soMEtExT',
+          });
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+        });
+      });
+      test('It creates an onInit which calls initializeEditor and setEditorRef', () => {
+        output.onInit(evt, editor);
+        expect(props.setEditorRef).toHaveBeenCalledWith(editor);
+        expect(props.initializeEditor).toHaveBeenCalled();
+      });
+      test('It sets the blockvalue to be empty string by default', () => {
+        expect(output.initialValue).toBe('');
+      });
+      test('It sets the blockvalue to be the blockvalue if nonempty', () => {
+        const textValue = 'SomE hTML content';
+        output = module.editorConfig({ ...props, textValue });
+        expect(output.initialValue).toBe(textValue);
+      });
+
+      // test('It configures plugins and toolbars correctly', () => {
+      //   expect(output.init.plugins).toEqual('autoresize');
+      //   expect(output.init.toolbar).toEqual(`${pluginConfig().toolbar} | customLabelButton`);
+      // });
+      it('calls setupCustomBehavior on setup', () => {
+        expect(output.init.setup).toEqual(
+          setupCustomBehavior({
+            editorType: props.editorType,
+            updateQuestion: props.updateQuestion,
+            openImgModal: props.openImgModal,
+            openSourceCodeModal: props.openSourceCodeModal,
+            setImage: props.setSelection,
+          }),
+        );
+      });
+    });
+
+    describe('imgModalToggle', () => {
+      const hookKey = state.keys.isImageModalOpen;
+      beforeEach(() => {
+        hook = module.imgModalToggle();
+      });
+      test('isOpen: state value', () => {
+        expect(hook.isImgOpen).toEqual(state.stateVals[hookKey]);
+      });
+      test('openModal: calls setter with true', () => {
+        hook.openImgModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
+      });
+      test('closeModal: calls setter with false', () => {
+        hook.closeImgModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe('sourceCodeModalToggle', () => {
+      const editorRef = { current: { focus: jest.fn() } };
+      const hookKey = state.keys.isSourceCodeModalOpen;
+      beforeEach(() => {
+        hook = module.sourceCodeModalToggle(editorRef);
+      });
+      test('isOpen: state value', () => {
+        expect(hook.isSourceCodeOpen).toEqual(state.stateVals[hookKey]);
+      });
+      test('openModal: calls setter with true', () => {
+        hook.openSourceCodeModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
+      });
+      test('closeModal: calls setter with false', () => {
+        hook.closeSourceCodeModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe('openModalWithSelectedImage', () => {
+      test('image is set to be value stored in editor, modal is opened', () => {
+        const setImage = jest.fn();
+        const openImgModal = jest.fn();
+        const editor = { selection: { getNode: () => mockNode } };
+        module.openModalWithSelectedImage({ editor, openImgModal, setImage })();
+        expect(setImage).toHaveBeenCalledWith({
+          externalUrl: mockNode.src,
+          altText: mockNode.alt,
+          width: mockNode.width,
+          height: mockNode.height,
+        });
+        expect(openImgModal).toHaveBeenCalled();
+      });
+    });
+    describe('selectedImage hooks', () => {
+      const val = { a: 'VaLUe' };
+      beforeEach(() => {
+        hook = module.selectedImage(val);
+      });
+      test('selection: state value', () => {
+        expect(hook.selection).toEqual(state.stateVals[state.keys.imageSelection]);
+      });
+      test('setSelection: setter for value', () => {
+        expect(hook.setSelection).toEqual(state.setState[state.keys.imageSelection]);
+      });
+      test('clearSelection: calls setter with null', () => {
+        expect(hook.setSelection).not.toHaveBeenCalled();
+        hook.clearSelection();
+        expect(hook.setSelection).toHaveBeenCalledWith(null);
+      });
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx
new file mode 100644
index 000000000..793df426d
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/index.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Editor } from '@tinymce/tinymce-react';
+
+import 'tinymce';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import 'tinymce/icons/default';
+import 'tinymce/plugins/link';
+import 'tinymce/plugins/lists';
+import 'tinymce/plugins/table';
+import 'tinymce/plugins/hr';
+import 'tinymce/plugins/codesample';
+import 'tinymce/plugins/emoticons';
+import 'tinymce/plugins/emoticons/js/emojis';
+import 'tinymce/plugins/charmap';
+import 'tinymce/plugins/code';
+import 'tinymce/plugins/autoresize';
+import 'tinymce/plugins/image';
+import 'tinymce/plugins/imagetools';
+
+import ImageUploadModal from '../ImageUploadModal';
+import SourceCodeModal from '../SourceCodeModal';
+import * as hooks from './hooks';
+
+export const TinyMceWidget = ({
+  editorType,
+  editorRef,
+  assets,
+  isLibrary,
+  ...props
+}) => {
+  const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
+  const { isSourceCodeOpen, openSourceCodeModal, closeSourceCodeModal } = hooks.sourceCodeModalToggle(editorRef);
+  const images = hooks.filterAssets({ assets });
+  const imageSelection = hooks.selectedImage(null);
+  return (
+    <>
+      {isLibrary ? null : (
+        <ImageUploadModal
+          isOpen={isImgOpen}
+          close={closeImgModal}
+          editorRef={editorRef}
+          images={images}
+          {...imageSelection}
+        />
+      )}
+      {editorType === 'text' ? (
+        <SourceCodeModal
+          isOpen={isSourceCodeOpen}
+          close={closeSourceCodeModal}
+          editorRef={editorRef}
+        />
+      ) : null}
+      <Editor
+        {
+          ...hooks.editorConfig({
+            openImgModal,
+            openSourceCodeModal,
+            editorType,
+            editorRef,
+            isLibrary,
+            images,
+            setSelection: imageSelection.setSelection,
+            clearSelection: imageSelection.clearSelection,
+            ...props,
+          })
+        }
+      />
+    </>
+  );
+};
+TinyMceWidget.defaultProps = {
+  isLibrary: null,
+  assets: null,
+  editorType: null,
+  editorRef: null,
+};
+TinyMceWidget.propTypes = {
+  editorType: PropTypes.string,
+  isLibrary: PropTypes.bool,
+  assets: PropTypes.shape({}),
+  editorRef: PropTypes.shape({}),
+};
+
+export default TinyMceWidget;
diff --git a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx
new file mode 100644
index 000000000..cc9cb1ef7
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import SourceCodeModal from '../SourceCodeModal';
+import ImageUploadModal from '../ImageUploadModal';
+import { imgModalToggle, sourceCodeModalToggle } from './hooks';
+import TinyMceEditor from '.';
+
+// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
+// Consequently, mock the Editor out.
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'TiNYmCE EDitOR',
+  };
+});
+
+jest.mock('../ImageUploadModal', () => 'ImageUploadModal');
+jest.mock('../SourceCodeModal', () => 'SourceCodeModal');
+
+jest.mock('./hooks', () => ({
+  editorConfig: jest.fn(args => ({ editorConfig: args })),
+  imgModalToggle: jest.fn(() => ({
+    isImgOpen: true,
+    openImgModal: jest.fn().mockName('openModal'),
+    closeImgModal: jest.fn().mockName('closeModal'),
+  })),
+  sourceCodeModalToggle: jest.fn(() => ({
+    isSourceCodeOpen: true,
+    openSourceCodeModal: jest.fn().mockName('openModal'),
+    closeSourceCodeModal: jest.fn().mockName('closeModal'),
+  })),
+  selectedImage: jest.fn(() => ({
+    selection: 'hooks.selectedImage.selection',
+    setSelection: jest.fn().mockName('hooks.selectedImage.setSelection'),
+    clearSelection: jest.fn().mockName('hooks.selectedImage.clearSelection'),
+  })),
+  filterAssets: jest.fn(() => [{ staTICUrl: '/assets/sOmEaSsET' }]),
+}));
+
+describe('TinyMceEditor', () => {
+  const props = {
+    editorType: 'text',
+    editorRef: { current: { value: 'something' } },
+    isLibrary: false,
+    assets: { sOmEaSsET: { staTICUrl: '/assets/sOmEaSsET' } },
+    lmsEndpointUrl: 'sOmEvaLue.cOm',
+    studioEndpointUrl: 'sOmEoThERvaLue.cOm',
+  };
+  describe('snapshots', () => {
+    imgModalToggle.mockReturnValue({
+      isImgOpen: false,
+      openImgModal: jest.fn().mockName('modal.openModal'),
+      closeImgModal: jest.fn().mockName('modal.closeModal'),
+    });
+    sourceCodeModalToggle.mockReturnValue({
+      isSourceCodeOpen: false,
+      openSourceCodeModal: jest.fn().mockName('modal.openModal'),
+      closeSourceCodeModal: jest.fn().mockName('modal.closeModal'),
+    });
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<TinyMceEditor {...props} />)).toMatchSnapshot();
+    });
+    test('SourcecodeModal is not rendered', () => {
+      const wrapper = shallow(<TinyMceEditor {...props} editorType="problem" />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.find(SourceCodeModal).length).toBe(0);
+    });
+    test('ImageUploadModal is not rendered', () => {
+      const wrapper = shallow(<TinyMceEditor {...props} isLibrary />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.find(ImageUploadModal).length).toBe(0);
+    });
+  });
+});
diff --git a/src/editors/data/constants/tinyMCEConfig.js b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
similarity index 66%
rename from src/editors/data/constants/tinyMCEConfig.js
rename to src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
index ba0060dd3..5384a9fab 100644
--- a/src/editors/data/constants/tinyMCEConfig.js
+++ b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
@@ -1,14 +1,16 @@
 import { StrictDict } from '../../utils';
-import { buttons, plugins } from './tinyMCE';
-import tinyMCEStyles from './tinyMCEStyles';
+import { buttons, plugins } from '../../data/constants/tinyMCE';
 
 const mapToolbars = toolbars => toolbars.map(toolbar => toolbar.join(' ')).join(' | ');
 
-const tinyMCEConfig = (isLibrary) => {
+const pluginConfig = ({ isLibrary, placeholder, editorType }) => {
   const image = isLibrary ? '' : plugins.image;
   const imageTools = isLibrary ? '' : plugins.imagetools;
   const imageUploadButton = isLibrary ? '' : buttons.imageUploadButton;
   const editImageSettings = isLibrary ? '' : buttons.editImageSettings;
+  const codePlugin = editorType === 'problem' ? '' : plugins.code;
+  const codeButton = editorType === 'problem' ? '' : buttons.code;
+  const labelButton = editorType === 'problem' ? buttons.customLabelButton : '';
 
   return (
     StrictDict({
@@ -20,7 +22,7 @@ const tinyMCEConfig = (isLibrary) => {
         plugins.table,
         plugins.hr,
         plugins.charmap,
-        plugins.code,
+        codePlugin,
         plugins.autoresize,
         image,
         imageTools,
@@ -29,6 +31,7 @@ const tinyMCEConfig = (isLibrary) => {
       toolbar: mapToolbars([
         [buttons.undo, buttons.redo],
         [buttons.formatSelect],
+        [labelButton],
         [buttons.bold, buttons.italic, buttons.underline, buttons.foreColor, buttons.backColor],
         [
           buttons.align.left,
@@ -44,7 +47,7 @@ const tinyMCEConfig = (isLibrary) => {
         ],
         [imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
         [buttons.table, buttons.emoticons, buttons.charmap, buttons.hr],
-        [buttons.removeFormat, buttons.code],
+        [buttons.removeFormat, codeButton],
       ]),
       imageToolbar: mapToolbars([
         // [buttons.rotate.left, buttons.rotate.right],
@@ -52,30 +55,17 @@ const tinyMCEConfig = (isLibrary) => {
         [editImageSettings],
       ]),
       config: {
-        shared: {
-          branding: false,
-          content_css: false,
-          content_style: tinyMCEStyles,
-          menubar: false,
-          skin: false,
-          valid_children: '+body[style]',
-          valid_elements: '*[*]',
-        },
-        textEditor: {
-          height: '100%',
-          min_height: 500,
-          toolbar_sticky: true,
-          toolbar_sticky_offset: 76,
-          relative_urls: true,
-          convert_urls: false,
-        },
-        problemEditor: {
-          min_height: 150,
-          placeholder: 'Enter your question',
-        },
+        branding: false,
+        height: '100%',
+        menubar: false,
+        toolbar_sticky: true,
+        toolbar_sticky_offset: 76,
+        relative_urls: true,
+        convert_urls: false,
+        placeholder,
       },
     })
   );
 };
 
-export default tinyMCEConfig;
+export default pluginConfig;