From 1968d146cdccdde28b8eb4148eba7fff04a7f60a Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 12 Jun 2025 09:16:53 -0700
Subject: [PATCH] fix: (backport) enable markdown editor in libraries (#2098)

* fix: enable markdown editor for problems in libraries too

This fix is also achieved on master via 5991fd39976ad336cde0f068e50af198d737bdad / https://github.com/openedx/frontend-app-authoring/pull/2068 but this is a simpler fix, not a direct backport of that refactor.

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

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

Part of: https://github.com/openedx/frontend-app-authoring/issues/2099
Backports: 62589aea5054040d1227f81d1290e73aa410ba19

---------

Co-authored-by: Muhammad Anas <88967643+Anas12091101@users.noreply.github.com>
---
 .../data/redux/thunkActions/problem.test.ts      | 14 ++------------
 src/editors/data/redux/thunkActions/problem.ts   | 16 ++++++++--------
 .../components/ComponentEditorModal.tsx          |  6 +++++-
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/editors/data/redux/thunkActions/problem.test.ts b/src/editors/data/redux/thunkActions/problem.test.ts
index 17f7f85b0..3c7edbe52 100644
--- a/src/editors/data/redux/thunkActions/problem.test.ts
+++ b/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);
     });
   });
 
diff --git a/src/editors/data/redux/thunkActions/problem.ts b/src/editors/data/redux/thunkActions/problem.ts
index 28ba7b34f..74876fdb1 100644
--- a/src/editors/data/redux/thunkActions/problem.ts
+++ b/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, ''))) {
diff --git a/src/library-authoring/components/ComponentEditorModal.tsx b/src/library-authoring/components/ComponentEditorModal.tsx
index 023bcb52a..08df29a76 100644
--- a/src/library-authoring/components/ComponentEditorModal.tsx
+++ b/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}