feat: bump frontend-lib-content-components to 2.5.1 (#1174)

The primary purpose of this version bump backport is to remove the 2U feedback form
link from the editors (https://github.com/openedx/frontend-lib-content-components/issues/476),
but several other improvements will also be pulled in:

* Fix the Text editor so that when an image is added, it is added at the cursor,
  instead of the beginning of the component.
* Improve editor load time by reducing API calls and switching some calls to be lazy.
* Align controls better in the group feedback component.
* Add validation for start & stop date fields.
* Fix image handling bugs in both the raw & visual text editors.

Full changelog: https://github.com/openedx/frontend-lib-content-components/compare/v2.1.11...v2.5.1

Co-authored-by: Kyle McCormick <kyle@axim.org>

package-lock.json

@@ -18,7 +18,7 @@
         "@edx/frontend-component-footer": "^13.0.2",
         "@edx/frontend-component-header": "^5.1.0",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
-        "@edx/frontend-lib-content-components": "^2.1.11",
+        "@edx/frontend-lib-content-components": "^2.5.1",
         "@edx/frontend-platform": "7.0.1",
         "@edx/openedx-atlas": "^0.6.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -2580,9 +2580,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-content-components": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.1.11.tgz",
-      "integrity": "sha512-vzDpneZIXmjFo5sZxxZiVjt1zgczfEkJhT2h/sg2mcJ0m7Zuo9dPJeilATqB0pSTjZnNsIbX+NfT/Dx/mSJciQ==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.5.1.tgz",
+      "integrity": "sha512-qxSGCF6GxDaeszW/f3ikf8V0j9yR6r1sohV15fHURrNvV0JPF860EIVgbPHR1FKjL1Iwo16Q/KWc0uY+HVwBYA==",
       "dependencies": {
         "@codemirror/lang-html": "^6.0.0",
         "@codemirror/lang-xml": "^6.0.0",
@@ -2621,7 +2621,7 @@
         "xmlchecker": "^0.1.0"
       },
       "peerDependencies": {
-        "@edx/frontend-platform": "^7.0.1",
+        "@edx/frontend-platform": "^7.0.1 || ^8.0.0",
         "@openedx/paragon": "^21.5.7 || ^22.0.0",
         "prop-types": "^15.5.10",
         "react": "^16.14.0 || ^17.0.0",

package.json

@@ -45,7 +45,7 @@
     "@edx/frontend-component-footer": "^13.0.2",
     "@edx/frontend-component-header": "^5.1.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.1.11",
+    "@edx/frontend-lib-content-components": "^2.5.1",
     "@edx/frontend-platform": "7.0.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

src/course-updates/update-form/UpdateForm.test.jsx

@@ -5,14 +5,18 @@ import {
   waitFor,
   act,
 } from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
 import moment from 'moment/moment';
 
+import initializeStore from '../../store';
 import { REQUEST_TYPES } from '../constants';
 import { courseHandoutsMock, courseUpdatesMock } from '../__mocks__';
 import UpdateForm from './UpdateForm';
 import messages from './messages';
 
+let store;
 const closeMock = jest.fn();
 const onSubmitMock = jest.fn();
 const addNewUpdateMock = { id: 0, date: moment().utc().toDate(), content: 'Some content' };
@@ -48,18 +52,32 @@ const courseUpdatesInitialValues = (requestType) => {
 };
 
 const renderComponent = ({ requestType }) => render(
-  <IntlProvider locale="en">
-    <UpdateForm
-      isOpen
-      close={closeMock}
-      requestType={requestType}
-      onSubmit={onSubmitMock}
-      courseUpdatesInitialValues={courseUpdatesInitialValues(requestType)}
-    />
-  </IntlProvider>,
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <UpdateForm
+        isOpen
+        close={closeMock}
+        requestType={requestType}
+        onSubmit={onSubmitMock}
+        courseUpdatesInitialValues={courseUpdatesInitialValues(requestType)}
+      />
+    </IntlProvider>
+  </AppProvider>,
 );
 
 describe('<UpdateForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
   it('render Add new update form correctly', async () => {
     const { getByText, getByDisplayValue, getByRole } = renderComponent({ requestType: REQUEST_TYPES.add_new_update });
     const { date } = courseUpdatesInitialValues(REQUEST_TYPES.add_new_update);

src/generic/WysiwygEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect, Provider } from 'react-redux';
+import { connect, Provider, useSelector } from 'react-redux';
 import { createStore } from 'redux';
 import { getConfig } from '@edx/frontend-platform';
 import {
@@ -18,20 +18,19 @@ export const SUPPORTED_TEXT_EDITORS = {
 };
 
 const mapStateToProps = () => ({
-  assets: {},
+  images: {},
   lmsEndpointUrl: getConfig().LMS_BASE_URL,
   studioEndpointUrl: getConfig().STUDIO_BASE_URL,
   isLibrary: true,
   onEditorChange: () => ({}),
 });
-
 const Editor = connect(mapStateToProps)(TinyMceWidget);
 
 export const WysiwygEditor = ({
   initialValue, editorType, onChange, minHeight,
 }) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
-
+  const { courseId } = useSelector((state) => state.courseDetail);
   const isEquivalentCodeExtraSpaces = (first, second) => {
     // Utils allows to compare code extra spaces
     const removeWhitespace = (str) => str.replace(/\s/g, '');
@@ -75,6 +74,7 @@ export const WysiwygEditor = ({
         setEditorRef={setEditorRef}
         onChange={handleUpdate}
         initializeEditor={() => ({})}
+        learningContextId={courseId}
       />
     </Provider>
   );