fix: (backport) enable markdown editor in libraries (openedx#2098)

* fix: enable markdown editor for problems in libraries too

This fix is also achieved on master via 5991fd3 / openedx#2068 but this is a simpler fix, not a direct backport of that refactor.

* fix: remove duplicate markdown_edited save request (openedx#2127)

Removes the unnecessary duplicate save  request of markdown_edited
value to the backend.

Part of: openedx#2099
Backports: 62589ae

---------

Co-authored-by: Muhammad Anas <[email protected]>

Author: 2 people

src/editors/data/redux/thunkActions/problem.test.ts

@@ -10,7 +10,6 @@ import {
 } from './problem';
 import { checkboxesOLXWithFeedbackAndHintsOLX, advancedProblemOlX, blankProblemOLX } from '../../../containers/ProblemEditor/data/mockData/olxTestData';
 import { ProblemTypeKeys } from '../../constants/problem';
-import * as requests from './requests';
 
 const mockOlx = 'SOmEVALue';
 const mockBuildOlx = jest.fn(() => mockOlx);
@@ -72,22 +71,13 @@ describe('problem thunkActions', () => {
     );
   });
   test('switchToMarkdownEditor dispatches correct actions', () => {
-    switchToMarkdownEditor()(dispatch, getState);
+    switchToMarkdownEditor()(dispatch);
 
     expect(dispatch).toHaveBeenCalledWith(
       actions.problem.updateField({
         isMarkdownEditorEnabled: true,
       }),
     );
-
-    expect(dispatch).toHaveBeenCalledWith(
-      requests.saveBlock({
-        content: {
-          settings: { markdown_edited: true },
-          olx: blockValue.data.data,
-        },
-      }),
-    );
   });
 
   describe('switchEditor', () => {
@@ -110,7 +100,7 @@ describe('problem thunkActions', () => {
 
     test('dispatches switchToMarkdownEditor when editorType is markdown', () => {
       switchEditor('markdown')(dispatch, getState);
-      expect(switchToMarkdownEditorMock).toHaveBeenCalledWith(dispatch, getState);
+      expect(switchToMarkdownEditorMock).toHaveBeenCalledWith(dispatch);
     });
   });
 

src/editors/data/redux/thunkActions/problem.ts

@@ -24,17 +24,17 @@ export const switchToAdvancedEditor = () => (dispatch, getState) => {
   dispatch(actions.problem.updateField({ problemType: ProblemTypeKeys.ADVANCED, rawOLX }));
 };
 
-export const switchToMarkdownEditor = () => (dispatch, getState) => {
-  const state = getState();
+export const switchToMarkdownEditor = () => (dispatch) => {
   dispatch(actions.problem.updateField({ isMarkdownEditorEnabled: true }));
-  const { blockValue } = state.app;
-  const olx = get(blockValue, 'data.data', '');
-  const content = { settings: { markdown_edited: true }, olx };
-  // Sending a request to save the problem block with the updated markdown_edited value
-  dispatch(requests.saveBlock({ content }));
 };
 
-export const switchEditor = (editorType) => (dispatch, getState) => (editorType === 'advanced' ? switchToAdvancedEditor : switchToMarkdownEditor)()(dispatch, getState);
+export const switchEditor = (editorType) => (dispatch, getState) => {
+  if (editorType === 'advanced') {
+    switchToAdvancedEditor()(dispatch, getState);
+  } else {
+    switchToMarkdownEditor()(dispatch);
+  }
+};
 
 export const isBlankProblem = ({ rawOLX }) => {
   if (['<problem></problem>', '<problem/>'].includes(rawOLX.replace(/\s/g, ''))) {

src/library-authoring/components/ComponentEditorModal.tsx

@@ -1,7 +1,9 @@
 import { getConfig } from '@edx/frontend-platform';
 import React from 'react';
-
+import { useSelector } from 'react-redux';
 import { useQueryClient } from '@tanstack/react-query';
+
+import { getWaffleFlags } from '../../data/selectors';
 import EditorPage from '../../editors/EditorPage';
 import { getBlockType } from '../../generic/key-utils';
 import { useLibraryContext } from '../common/context/LibraryContext';
@@ -21,6 +23,7 @@ export function canEditComponent(usageKey: string): boolean {
 export const ComponentEditorModal: React.FC<Record<never, never>> = () => {
   const { componentBeingEdited, closeComponentEditor, libraryId } = useLibraryContext();
   const queryClient = useQueryClient();
+  const { useReactMarkdownEditor } = useSelector(getWaffleFlags);
 
   if (componentBeingEdited === undefined) {
     return null;
@@ -37,6 +40,7 @@ export const ComponentEditorModal: React.FC<Record<never, never>> = () => {
       courseId={libraryId}
       blockType={blockType}
       blockId={componentBeingEdited.usageKey}
+      isMarkdownEditorEnabledForCourse={useReactMarkdownEditor}
       studioEndpointUrl={getConfig().STUDIO_BASE_URL}
       lmsEndpointUrl={getConfig().LMS_BASE_URL}
       onClose={onClose}