fix: tinymce rtl issue and insert image

Author: viv-helix

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -308,6 +308,7 @@ export const editorConfig = ({
   learningContextId,
   staticRootUrl,
   enableImageUpload,
+  showImageButton,
 }) => {
   const lmsEndpointUrl = getConfig().LMS_BASE_URL;
   const studioEndpointUrl = getConfig().STUDIO_BASE_URL;
@@ -320,7 +321,9 @@ export const editorConfig = ({
     imageToolbar,
     quickbarsInsertToolbar,
     quickbarsSelectionToolbar,
-  } = pluginConfig({ placeholder, editorType, enableImageUpload });
+  } = pluginConfig({
+    placeholder, editorType, enableImageUpload, showImageButton,
+  });
   const isLocaleRtl = isRtl(getLocale());
   return {
     onInit: (evt, editor) => {

src/editors/sharedComponents/TinyMceWidget/pluginConfig.js

@@ -3,9 +3,12 @@ import { buttons, plugins } from '../../data/constants/tinyMCE';
 
 const mapToolbars = toolbars => toolbars.map(toolbar => toolbar.join(' ')).join(' | ');
 
-const pluginConfig = ({ placeholder, editorType, enableImageUpload }) => {
-  const image = enableImageUpload ? plugins.image : '';
+const pluginConfig = ({
+  placeholder, editorType, enableImageUpload, showImageButton = false,
+}) => {
+  const image = (enableImageUpload || showImageButton) ? plugins.image : '';
   const imageTools = enableImageUpload ? plugins.imagetools : '';
+  const imageButton = showImageButton ? 'image' : '';
   const imageUploadButton = enableImageUpload ? buttons.imageUploadButton : '';
   const editImageSettings = enableImageUpload ? buttons.editImageSettings : '';
   const codePlugin = editorType === 'text' ? plugins.code : '';
@@ -55,7 +58,7 @@ const pluginConfig = ({ placeholder, editorType, enableImageUpload }) => {
           buttons.outdent,
           buttons.indent,
         ],
-        [imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
+        [imageButton, imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
         [buttons.table, buttons.emoticons, buttons.charmap, buttons.hr],
         [buttons.removeFormat, codeButton, buttons.a11ycheck, buttons.embediframe],
       ]) : false,

src/release-notes/update-form/ReleaseNoteForm.jsx

@@ -11,8 +11,8 @@ import { Formik } from 'formik';
 import * as Yup from 'yup';
 import classNames from 'classnames';
 import moment from 'moment';
-
-import { WysiwygEditor } from '../../generic/WysiwygEditor';
+import { useSelector } from 'react-redux';
+import TinyMceWidget, { prepareEditorRef } from '../../editors/sharedComponents/TinyMceWidget';
 import messages from '../messages';
 import unsavedMessages from './unsaved-modal-messages';
 import { TIME_FORMAT } from '../../constants';
@@ -25,6 +25,8 @@ const ReleaseNoteForm = ({
 }) => {
   const [showUnsavedModal, setShowUnsavedModal] = React.useState(false);
   const intl = useIntl();
+  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+  const { courseId } = useSelector((state) => state.courseDetail);
   const tzName = React.useMemo(() => {
     try {
       const { timeZone } = Intl.DateTimeFormat().resolvedOptions();
@@ -169,13 +171,23 @@ const ReleaseNoteForm = ({
             </Form.Group>
 
             <Form.Group className="m-0 mb-3">
-              <WysiwygEditor
-                initialValue={values.description}
-                data-testid="release-note-wysiwyw"
-                name="description"
-                minHeight={200}
-                onChange={(value) => setFieldValue('description', value)}
-              />
+              {refReady && (
+                <TinyMceWidget
+                  editorRef={editorRef}
+                  editorType="text"
+                  textValue={values.description}
+                  initialValue={initialValues.description || ''}
+                  minHeight={200}
+                  editorContentHtml={initialValues.description || ''}
+                  setEditorRef={setEditorRef}
+                  onChange={(value) => setFieldValue('description', value)}
+                  initializeEditor={() => ({})}
+                  learningContextId={courseId}
+                  images={{}}
+                  enableImageUpload={false}
+                  showImageButton
+                />
+              )}
               {touched.description && errors.description && (
                 <p className="invalid-feedback d-block">
                   {errors.description}