feat: Add support for loading themes at runtime

package.json

@@ -33,11 +33,11 @@
     "url": "https://github.com/openedx/frontend-app-discussions/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-[email protected]",
+    "@edx/brand": "npm:@edx/brand-[email protected]",
     "@edx/frontend-component-footer": "12.1.0",
     "@edx/frontend-component-header": "4.3.0",
-    "@edx/frontend-platform": "4.6.0",
-    "@edx/paragon": "20.44.0",
+    "@edx/frontend-platform": "github:openedx/frontend-platform#ags/inject-theme-css",
+    "@edx/paragon": "21.0.0-alpha.41",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
-    "@edx/frontend-build": "12.8.27",
+    "@edx/frontend-build": "github:openedx/frontend-build#ags/2321",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.5",

src/components/NavigationBar/navBar.scss

@@ -1,23 +1,16 @@
-@import "@edx/brand/paragon/fonts.scss";
-@import "@edx/brand/paragon/variables.scss";
-@import "@edx/paragon/scss/core/core.scss";
-@import "@edx/brand/paragon/overrides.scss";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }
@@ -29,7 +22,7 @@ $fa-font-path: "~font-awesome/fonts";
   .nav-link {
     border-bottom: 4px solid transparent;
     border-top: 4px solid transparent;
-    color: $gray-700;
+    color: var(--pgn-color-gray-700);
 
     // temporary until we can remove .btn class from dropdowns
     border-left: 0;
@@ -39,9 +32,9 @@ $fa-font-path: "~font-awesome/fonts";
     &:hover,
     &:focus,
     &.active {
-      font-weight: $font-weight-normal;
-      color: $primary-500;
-      border-bottom-color: $primary-500;
+      font-weight: var(--pgn-typography-font-weight-normal);
+      color: var(--pgn-color-primary-500);
+      border-bottom-color: var(--pgn-color-primary-500);
     }
   }
 }

src/components/TinyMCEEditor.jsx

@@ -1,4 +1,6 @@
-import React, { useCallback, useState } from 'react';
+import React, {
+  useCallback, useContext, useMemo, useState,
+} from 'react';
 
 import { Editor } from '@tinymce/tinymce-react';
 import { useParams } from 'react-router';
@@ -7,6 +9,7 @@ import { useParams } from 'react-router';
 import tinymce from 'tinymce/tinymce';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
 import { ActionRow, AlertModal, Button } from '@edx/paragon';
 
 import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
@@ -33,22 +36,13 @@ import 'tinymce/plugins/emoticons';
 import 'tinymce/plugins/emoticons/js/emojis';
 import 'tinymce/plugins/charmap';
 import 'tinymce/plugins/paste';
-/* eslint import/no-webpack-loader-syntax: off */
-// eslint-disable-next-line import/no-unresolved
-import edxBrandCss from '!!raw-loader!sass-loader!../index.scss';
-// eslint-disable-next-line import/no-unresolved
-import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css';
-// eslint-disable-next-line import/no-unresolved
-import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
 
 /* istanbul ignore next */
 const TinyMCEEditor = (props) => {
-  // note that skin and content_css is disabled to avoid the normal
-  // loading process and is instead loaded as a string via content_style
-
+  const intl = useIntl();
   const { courseId, postId } = useParams();
   const [showImageWarning, setShowImageWarning] = useState(false);
-  const intl = useIntl();
+  const { paragonTheme } = useContext(AppContext);
 
   /* istanbul ignore next */
   const setup = useCallback((editor) => {
@@ -91,13 +85,15 @@ const TinyMCEEditor = (props) => {
     setShowImageWarning(false);
   }, []);
 
-  let contentStyle;
-  // In the test environment this causes an error so set styles to empty since they aren't needed for testing.
-  try {
-    contentStyle = [contentCss, contentUiCss, edxBrandCss].join('\n');
-  } catch (err) {
-    contentStyle = '';
-  }
+  // The tinyMCE editor runs in an iframe so the paragon styling will not apply to editor content by default.
+  // This code extracts the links to the stylesheets loaded into the MFE and passes them along to the editor so the
+  // content styling can be seamless.
+  const themeCss = useMemo(
+    () => ['paragon-theme-core', 'paragon-theme-variant', 'brand-theme-core', 'brand-theme-variant']
+      .map(selector => document.querySelector(`link[rel=stylesheet][data-${selector}]`)?.href)
+      .filter(item => item !== null),
+    [paragonTheme?.state?.themeVariant],
+  );
 
   return (
     <>
@@ -121,8 +117,7 @@ const TinyMCEEditor = (props) => {
                       + ' | openedx_html'
                       + ' | emoticons'
                       + ' | charmap',
-          content_css: false,
-          content_style: contentStyle,
+          content_css: themeCss,
           body_class: 'm-2 text-editor',
           convert_urls: false,
           relative_urls: false,

src/discussions/common/AuthorLabel.jsx

@@ -100,7 +100,7 @@ const AuthorLabel = ({
       {postCreatedAt && (
         <span
           title={postCreatedAt}
-          className={classNames('font-family-inter align-content-center', {
+          className={classNames('align-content-center', {
             'text-white': alert,
             'text-gray-500': !alert,
           })}

src/discussions/common/EndorsedAlertBanner.jsx

@@ -43,7 +43,7 @@ const EndorsedAlertBanner = ({
                 height: '20px',
               }}
             />
-            <strong className="ml-2 font-family-inter">
+            <strong className="ml-2">
               {intl.formatMessage(isQuestion ? messages.answer : messages.endorsed)}
             </strong>
           </div>