feat: add a use_mfe_theming toggle to the Text XBlock

src/editors/containers/TextEditor/hooks.js

@@ -3,14 +3,31 @@ import { setAssetToStaticUrl } from '../../sharedComponents/TinyMceWidget/hooks'
 
 export const { nullMethod, navigateCallback, navigateTo } = appHooks;
 
-export const getContent = ({ editorRef, showRawEditor }) => () => {
+/**
+ * Returns the content of the editor, as a function of the editor's state.
+ * @param {Object} editorRef - the editor's ref
+ * @param {boolean} showRawEditor - whether to show the raw editor
+ * @param {boolean} useMfeTheming - whether to include the theme
+ * @returns {function} the content of the editor
+ */
+export const getContent = ({ editorRef, showRawEditor, useMfeTheming }) => () => {
   const content = showRawEditor && editorRef && editorRef.current
     ? editorRef.current.state.doc.toString()
     : editorRef.current?.getContent();
-  return setAssetToStaticUrl({ editorValue: content });
+  return {
+    // `data` is sent as the block's `data` field, which the block API only
+    // accepts as a string. Everything else is settings-scoped and travels in
+    // `metadata` (see apiMethods.normalizeContent).
+    data: setAssetToStaticUrl({ editorValue: content }),
+    use_mfe_theming: useMfeTheming,
+  };
 };
 
-export const isDirty = ({ editorRef, showRawEditor }) => () => {
+export const isDirty = ({ editorRef, showRawEditor, useMfeTheming, initialUseMfeTheming }) => () => {
+  // Compare against the value the block was loaded with
+  if (useMfeTheming !== initialUseMfeTheming) {
+    return true;
+  }
   /* istanbul ignore next */
   if (!editorRef?.current) {
     return false;

src/editors/containers/TextEditor/hooks.test.jsx

@@ -48,17 +48,25 @@ describe('TextEditor hooks', () => {
         tinyMceHookKeys.setAssetToStaticUrl,
       ).mockReturnValueOnce(rawContent);
       test('returns correct content based on showRawEditor equals false', () => {
-        const getContent = module.getContent({ editorRef, showRawEditor: false })();
+        const getContent = module.getContent({
+          editorRef,
+          showRawEditor: false,
+          useMfeTheming: true,
+        })();
         expect(spies.visualHtml.mock.calls.length).toEqual(1);
         expect(spies.visualHtml).toHaveBeenCalledWith({ editorValue: visualContent });
-        expect(getContent).toEqual(visualContent);
+        expect(getContent).toEqual({ data: visualContent, use_mfe_theming: true });
       });
       test('returns correct content based on showRawEditor equals true', () => {
         jest.clearAllMocks();
-        const getContent = module.getContent({ editorRef, showRawEditor: true })();
+        const getContent = module.getContent({
+          editorRef,
+          showRawEditor: true,
+          useMfeTheming: false,
+        })();
         expect(spies.rawHtml.mock.calls.length).toEqual(1);
         expect(spies.rawHtml).toHaveBeenCalledWith({ editorValue: rawContent });
-        expect(getContent).toEqual(rawContent);
+        expect(getContent).toEqual({ data: rawContent, use_mfe_theming: false });
       });
     });
 
@@ -81,6 +89,34 @@ describe('TextEditor hooks', () => {
         const isDirty = module.isDirty({ editorRef, showRawEditor: true })();
         expect(isDirty).toEqual(true);
       });
+      test('is clean when the editor is untouched and the toggle is unchanged', () => {
+        const editorRef = {
+          current: {
+            isNotDirty: true,
+          },
+        };
+        const isDirty = module.isDirty({
+          editorRef,
+          showRawEditor: false,
+          useMfeTheming: false,
+          initialUseMfeTheming: false,
+        })();
+        expect(isDirty).toEqual(false);
+      });
+      test('is dirty when only the toggle changed', () => {
+        const editorRef = {
+          current: {
+            isNotDirty: true,
+          },
+        };
+        const isDirty = module.isDirty({
+          editorRef,
+          showRawEditor: false,
+          useMfeTheming: true,
+          initialUseMfeTheming: false,
+        })();
+        expect(isDirty).toEqual(true);
+      });
     });
   });
 });