refactor: add custom hook to manage static replacement

Author: bra-i-am

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

@@ -7,7 +7,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import { prepareEditorRef, useProcessedEditorContent } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
 const ExplanationWidget = ({
   // redux
@@ -19,12 +19,11 @@ const ExplanationWidget = ({
 }) => {
   const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-  const initialContent = settings?.solutionExplanation || '';
-  const newContent = replaceStaticWithAsset({
-    initialContent,
+
+  const solutionContent = useProcessedEditorContent({
+    initialContent: settings?.solutionExplanation || '',
     learningContextId,
   });
-  const solutionContent = newContent || initialContent;
   let staticRootUrl;
   if (isLibrary) {
     staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;

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

@@ -7,7 +7,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import { prepareEditorRef, useProcessedEditorContent } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
 const QuestionWidget = ({
   // redux
@@ -19,12 +19,11 @@ const QuestionWidget = ({
 }) => {
   const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-  const initialContent = question;
-  const newContent = replaceStaticWithAsset({
-    initialContent,
+
+  const questionContent = useProcessedEditorContent({
+    initialContent: question,
     learningContextId,
   });
-  const questionContent = newContent || initialContent;
   let staticRootUrl;
   if (isLibrary) {
     staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;

src/editors/containers/TextEditor/index.jsx

@@ -17,7 +17,7 @@ import RawEditor from '../../sharedComponents/RawEditor';
 import * as hooks from './hooks';
 import messages from './messages';
 import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../sharedComponents/TinyMceWidget/hooks';
+import { prepareEditorRef, useProcessedEditorContent } from '../../sharedComponents/TinyMceWidget/hooks';
 
 const TextEditor = ({
   onClose,
@@ -36,13 +36,12 @@ const TextEditor = ({
 }) => {
   const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-  const initialContent = blockValue ? blockValue.data.data : '';
-  const newContent = replaceStaticWithAsset({
-    initialContent,
+
+  const editorContent = useProcessedEditorContent({
+    initialContent: blockValue ? blockValue.data.data : '',
     learningContextId,
     validateAssetUrl,
   });
-  const editorContent = newContent || initialContent;
   let staticRootUrl;
   if (isLibrary) {
     staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
+import {
+  render, screen, initializeMocks, waitFor,
+} from '@src/testUtils';
 import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
 import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.';
@@ -67,7 +69,7 @@ describe('TextEditor', () => {
       expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text');
     });
 
-    test('renders static images with relative paths', () => {
+    test('renders static images with relative paths', async () => {
       const updatedProps = {
         ...props,
         validateAssetUrl: false,
@@ -76,7 +78,11 @@ describe('TextEditor', () => {
       const { container } = render(<TextEditor {...updatedProps} />);
       const element = container.querySelector('tinymcewidget');
       expect(element).toBeInTheDocument();
-      expect(element?.getAttribute('editorcontenthtml')).toBe('eDiTablE Text with <img src="/asset+org+run+type@[email protected]" />');
+      await waitFor(() => {
+        expect(element?.getAttribute('editorcontenthtml')).toBe(
+          'eDiTablE Text with <img src="/asset+org+run+type@[email protected]" />',
+        );
+      });
     });
     test('not yet loaded, Spinner appears', () => {
       const { container } = render(<TextEditor {...props} blockFinished={false} />);

src/editors/sharedComponents/TinyMceWidget/hooks.ts

@@ -577,3 +577,38 @@ export const selectedImage = (val) => {
     setSelection,
   };
 };
+
+export const useProcessedEditorContent = ({
+  initialContent,
+  learningContextId,
+  editorType,
+  validateAssetUrl = false,
+}) => {
+  const [content, setContent] = useState(initialContent);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const process = async () => {
+      const newContent = await replaceStaticWithAsset({
+        initialContent,
+        learningContextId,
+        editorType,
+        lmsEndpointUrl: getConfig().LMS_BASE_URL,
+        validateAssetUrl,
+      });
+
+      if (mounted) {
+        setContent(newContent || initialContent);
+      }
+    };
+
+    process();
+
+    return () => {
+      mounted = false;
+    };
+  }, [initialContent, learningContextId, editorType, validateAssetUrl]);
+
+  return content;
+};