chore: update imports, fix lint issues

Makefile

@@ -35,13 +35,12 @@ pull_translations:
 	cd src/i18n/messages \
 	   && atlas pull $(ATLAS_OPTIONS) \
 	            translations/frontend-component-ai-translations/src/i18n/messages:frontend-component-ai-translations \
-	            translations/frontend-lib-content-components/src/i18n/messages:frontend-lib-content-components \
 	            translations/frontend-platform/src/i18n/messages:frontend-platform \
 	            translations/paragon/src/i18n/messages:paragon \
 	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	            translations/frontend-app-course-authoring/src/i18n/messages:frontend-app-course-authoring
 
-	$(intl_imports) frontend-component-ai-translations frontend-lib-content-components frontend-platform paragon frontend-component-footer frontend-app-course-authoring
+	$(intl_imports) frontend-component-ai-translations frontend-platform paragon frontend-component-footer frontend-app-course-authoring
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -145,10 +145,6 @@ Feature Description
 
 When a corresponding waffle flag is set, upon editing a block in Studio, the view is rendered by this MFE instead of by the XBlock's authoring view.  The user remains in Studio.
 
-.. note::
-
-   The new editors themselves are currently implemented in a repository outside ``openedx``: `frontend-lib-content-components <https://github.com/edx/frontend-lib-content-components/>`_, a dependency of this MFE.  This repository is slated to be moved to the ``openedx`` org, however.
-
 Feature: New Proctoring Exams View
 ==================================
 

package-lock.json

@@ -9,6 +9,11 @@
       "version": "0.1.0",
       "license": "AGPL-3.0",
       "dependencies": {
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-xml": "^6.0.0",
+        "@codemirror/lint": "^6.2.1",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^8.0.0",
@@ -17,7 +22,6 @@
         "@edx/frontend-component-footer": "^14.0.3",
         "@edx/frontend-component-header": "^5.3.3",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
-        "@edx/frontend-lib-content-components": "^2.6.0",
         "@edx/frontend-platform": "^8.0.3",
         "@edx/openedx-atlas": "^0.6.0",
         "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
@@ -32,16 +36,22 @@
         "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
         "@openedx/frontend-plugin-framework": "^1.2.1",
         "@openedx/paragon": "^22.5.1",
+        "@redux-devtools/extension": "^3.3.0",
         "@reduxjs/toolkit": "1.9.7",
         "@tanstack/react-query": "4.36.1",
+        "@tinymce/tinymce-react": "^3.14.0",
         "classnames": "2.5.1",
+        "codemirror": "^6.0.0",
         "email-validator": "2.0.4",
+        "fast-xml-parser": "^4.0.10",
         "file-saver": "^2.0.5",
         "formik": "2.4.6",
+        "frontend-components-tinymce-advanced-plugins": "^1.0.3",
         "jszip": "^3.10.1",
         "lodash": "4.17.21",
         "meilisearch": "^0.41.0",
         "moment": "2.30.1",
+        "moment-shortformat": "^2.1.0",
         "npm": "^10.8.1",
         "prop-types": "^15.8.1",
         "react": "17.0.2",
@@ -49,6 +59,7 @@
         "react-dom": "17.0.2",
         "react-error-boundary": "^4.0.13",
         "react-helmet": "^6.1.0",
+        "react-onclickoutside": "^6.13.0",
         "react-redux": "7.2.9",
         "react-responsive": "9.0.2",
         "react-router": "6.23.1",
@@ -57,14 +68,20 @@
         "react-textarea-autosize": "^8.5.3",
         "react-transition-group": "4.4.5",
         "redux": "4.0.5",
+        "redux-logger": "^3.0.6",
+        "redux-mock-store": "^1.5.4",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5",
         "start": "^5.1.0",
+        "tinymce": "^5.10.4",
         "universal-cookie": "^4.0.4",
         "uuid": "^3.4.0",
+        "xmlchecker": "^0.1.0",
         "yup": "0.31.1"
       },
       "devDependencies": {
         "@edx/browserslist-config": "1.2.0",
-        "@edx/react-unit-test-utils": "2.1.1",
+        "@edx/react-unit-test-utils": "3.0.0",
         "@edx/reactifex": "^1.0.3",
         "@edx/stylelint-config-edx": "2.3.3",
         "@edx/typescript-config": "^1.0.1",
@@ -73,6 +90,7 @@
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^13.2.1",
+        "@types/lodash": "^4.17.7",
         "axios": "^0.28.0",
         "axios-mock-adapter": "1.22.0",
         "eslint-import-resolver-webpack": "^0.13.8",
@@ -2036,9 +2054,9 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw=="
     },
     "node_modules/@codemirror/autocomplete": {
-      "version": "6.16.2",
+      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.16.2.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz",
-      "integrity": "sha512-MjfDrHy0gHKlPWsvSsikhO1+BOh+eBHNgfH1OXs1+DAf30IonQldgMM3kxLDTG9ktE7kDLaA1j/l7KMPA4KNfw==",
+      "integrity": "sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
         "@codemirror/state": "^6.0.0",
@@ -2132,9 +2150,9 @@
       }
     },
     "node_modules/@codemirror/lint": {
-      "version": "6.8.0",
+      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
-      "integrity": "sha512-lsFofvaw0lnPRJlQylNsC4IRt/1lI4OD/yYslrSGVndOJfStc58v+8p9dgGiD90ktOfL7OhBWns1ZETYgz0EJA==",
+      "integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.0.0",
@@ -2157,9 +2175,9 @@
       "integrity": "sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.28.1",
+      "version": "6.30.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.28.1.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.30.0.tgz",
-      "integrity": "sha512-BUWr+zCJpMkA/u69HlJmR+YkV4yPpM81HeMkOMZuwFa8iM5uJdEPKAs1icIRZKkKmy0Ub1x9/G3PQLTXdpBxrQ==",
+      "integrity": "sha512-96Nmn8OeLh6aONQprIeYk8hGVnEuYpWuxKSkdsODOx9hWPxyuyZGvmvxV/JmLsp+CubMO1PsLaN5TNNgrl0UrQ==",
       "dependencies": {
         "@codemirror/state": "^6.4.0",
         "style-mod": "^4.1.0",
@@ -2358,7 +2376,8 @@
     "node_modules/@edx/browserslist-config": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@edx/browserslist-config/-/browserslist-config-1.2.0.tgz",
-      "integrity": "sha512-T1+6P52Yx7SMkmoIr4O0Q3m/DyRdrLTJbv1xVijdRLFEq1hqdafEs+Ln1423U5LSkTePb9AOkEtL1G0RZLFl1w=="
+      "integrity": "sha512-T1+6P52Yx7SMkmoIr4O0Q3m/DyRdrLTJbv1xVijdRLFEq1hqdafEs+Ln1423U5LSkTePb9AOkEtL1G0RZLFl1w==",
+      "dev": true
     },
     "node_modules/@edx/eslint-config": {
       "version": "4.1.0",
@@ -2635,112 +2654,6 @@
         "react-router-dom": "^6.0.0"
       }
     },
-    "node_modules/@edx/frontend-lib-content-components": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.6.0.tgz",
-      "integrity": "sha512-dqx94SSbaVSztkyInNH7GbBzMSyFvKdx1zFWa4itWeSf1cUlfvD7QBZfHC5US8kh+CHW7YvrQg6whaF2F2neNg==",
-      "dependencies": {
-        "@codemirror/lang-html": "^6.0.0",
-        "@codemirror/lang-xml": "^6.0.0",
-        "@codemirror/lint": "^6.2.1",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@dnd-kit/core": "^6.0.8",
-        "@dnd-kit/sortable": "^7.0.2",
-        "@dnd-kit/utilities": "^3.2.1",
-        "@edx/browserslist-config": "^1.1.1",
-        "@reduxjs/toolkit": "^1.8.1",
-        "@tinymce/tinymce-react": "^3.14.0",
-        "babel-polyfill": "6.26.0",
-        "classnames": "^2.5.1",
-        "codemirror": "^6.0.0",
-        "fast-xml-parser": "^4.0.10",
-        "frontend-components-tinymce-advanced-plugins": "^1.0.3",
-        "lodash-es": "^4.17.21",
-        "lodash.flatten": "^4.4.0",
-        "moment": "^2.29.4",
-        "moment-shortformat": "^2.1.0",
-        "react-dropzone": "^14.2.3",
-        "react-onclickoutside": "^6.13.0",
-        "react-redux": "^7.2.8",
-        "react-responsive": "8.2.0",
-        "react-transition-group": "4.4.2",
-        "redux": "4.1.2",
-        "redux-devtools-extension": "^2.13.9",
-        "redux-logger": "^3.0.6",
-        "redux-mock-store": "^1.5.4",
-        "redux-thunk": "^2.4.1",
-        "reselect": "^4.1.5",
-        "tinymce": "^5.10.4",
-        "video-react": "^0.15.0",
-        "video.js": "^7.18.1",
-        "xmlchecker": "^0.1.0"
-      },
-      "peerDependencies": {
-        "@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",
-        "react-dom": "^16.14.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@edx/frontend-lib-content-components/node_modules/@dnd-kit/sortable": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz",
-      "integrity": "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==",
-      "license": "MIT",
-      "dependencies": {
-        "@dnd-kit/utilities": "^3.2.0",
-        "tslib": "^2.0.0"
-      },
-      "peerDependencies": {
-        "@dnd-kit/core": "^6.0.7",
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@edx/frontend-lib-content-components/node_modules/react-responsive": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
-      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
-      "license": "MIT",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@edx/frontend-lib-content-components/node_modules/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.6.0",
-        "react-dom": ">=16.6.0"
-      }
-    },
-    "node_modules/@edx/frontend-lib-content-components/node_modules/redux": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
-      "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.9.2"
-      }
-    },
     "node_modules/@edx/frontend-platform": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.0.3.tgz",
@@ -2798,9 +2711,9 @@
       }
     },
     "node_modules/@edx/react-unit-test-utils": {
-      "version": "2.1.1",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/react-unit-test-utils/-/react-unit-test-utils-3.0.0.tgz",
-      "integrity": "sha512-ZiBGHQtAMBCs8ZjCGeDKkUQC/tXELe2GkCxqBNsmnypB8iM9U2NoBZJ3OrF0ZreoeoDDzDOlzABqLL76B4taTw==",
+      "integrity": "sha512-RQ+yFXXkrukGC3RciqjYKwNLCIVkCyctPFMn93eXMTCUY2fqTs6T6RjDGCLAI2/H7DMXPV8DjaDHQNQXIlJNAA==",
       "dev": true,
       "dependencies": {
         "@edx/browserslist-config": "^1.1.1",
@@ -3944,9 +3857,9 @@
       }
     },
     "node_modules/@lezer/lr": {
-      "version": "1.4.1",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
-      "integrity": "sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==",
+      "integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
       "dependencies": {
         "@lezer/common": "^1.0.0"
       }
@@ -4685,6 +4598,18 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@redux-devtools/extension": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.3.0.tgz",
+      "integrity": "sha512-X34S/rC8S/M1BIrkYD1mJ5f8vlH0BDqxXrs96cvxSBo4FhMdbhU+GUGsmNYov1xjSyLMHgo8NYrUG8bNX7525g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
+      },
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.9.7",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
@@ -5492,6 +5417,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -6433,52 +6364,6 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "peer": true
     },
-    "node_modules/@videojs/http-streaming": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
-      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "3.0.5",
-        "aes-decrypter": "3.1.3",
-        "global": "^4.4.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "^0.22.1",
-        "mux.js": "6.0.1",
-        "video.js": "^6 || ^7"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "video.js": "^6 || ^7"
-      }
-    },
-    "node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "global": "~4.4.0",
-        "is-function": "^1.0.1"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -6651,14 +6536,6 @@
         }
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -6751,17 +6628,6 @@
         "node": ">=8.9"
       }
     },
-    "node_modules/aes-decrypter": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
-      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0",
-        "pkcs7": "^1.0.4"
-      }
-    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -9325,11 +9191,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
-    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -10549,9 +10410,9 @@
       "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw=="
     },
     "node_modules/fast-xml-parser": {
-      "version": "4.4.0",
+      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.4.1.tgz",
-      "integrity": "sha512-kLY3jFlwIYwBNDojclKsNAC12sfD6NwW74QB2CoNGPvtVxjliYehVunB3HYyNi+n4Tt1dAcgwYvmKF/Z18flqg==",
+      "integrity": "sha512-xkjOecfnKGkSsOwtZ5Pz7Us/T6mrbPQrq0nh+aCO5V9nk5NLWmasAHumTKjiPJPWANe+kAZ84Jc8ooJkzZ88Sw==",
       "funding": [
         {
           "type": "github",
@@ -11339,15 +11200,6 @@
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
     },
-    "node_modules/global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "dependencies": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "node_modules/global-modules": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
@@ -12210,11 +12062,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/individual": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
-      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -12499,11 +12346,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
-    },
     "node_modules/is-generator-fn": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
@@ -14064,11 +13906,6 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
     },
-    "node_modules/keycode": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
-      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg=="
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -14244,11 +14081,6 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
-    "node_modules/lodash.flatten": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
-      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g=="
-    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -14281,11 +14113,6 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "dev": true
     },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
-    },
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -14353,16 +14180,6 @@
         "lz-string": "bin/bin.js"
       }
     },
-    "node_modules/m3u8-parser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
-      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
@@ -14663,14 +14480,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
-      "dependencies": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -14772,20 +14581,6 @@
         "color-name": "^1.1.4"
       }
     },
-    "node_modules/mpd-parser": {
-      "version": "0.22.1",
-      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.22.1.tgz",
-      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "@xmldom/xmldom": "^0.8.3",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "mpd-to-m3u8-json": "bin/parse.js"
-      }
-    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
@@ -14816,22 +14611,6 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
     },
-    "node_modules/mux.js": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.0.1.tgz",
-      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "muxjs-transmux": "bin/transmux.js"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -17898,17 +17677,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/pkcs7": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
-      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5"
-      },
-      "bin": {
-        "pkcs7": "bin/cli.js"
-      }
-    },
     "node_modules/pkg-dir": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
@@ -18823,14 +18591,6 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -19941,15 +19701,6 @@
         "symbol-observable": "^1.2.0"
       }
     },
-    "node_modules/redux-devtools-extension": {
-      "version": "2.13.9",
-      "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz",
-      "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==",
-      "deprecated": "Package moved to @redux-devtools/extension.",
-      "peerDependencies": {
-        "redux": "^3.1.0 || ^4.0.0"
-      }
-    },
     "node_modules/redux-logger": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
@@ -20259,14 +20010,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rust-result": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
-      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
-      "dependencies": {
-        "individual": "^2.0.0"
-      }
-    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -20311,14 +20054,6 @@
         }
       ]
     },
-    "node_modules/safe-json-parse": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
-      "dependencies": {
-        "rust-result": "^1.0.0"
-      }
-    },
     "node_modules/safe-regex-test": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
@@ -22516,11 +22251,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/url-toolkit": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
-      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
-    },
     "node_modules/use-callback-ref": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
@@ -22675,55 +22405,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/video-react": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/video-react/-/video-react-0.15.0.tgz",
-      "integrity": "sha512-wF3BwG1qikkSX11nu0KsygxeWehzMaYpd4Uvy1sKLFnCNk794f9TPL4q/+mMmLJ8uYb5DSlgg6VraTHyihiMHQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.5",
-        "classnames": "^2.2.6",
-        "lodash.throttle": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "redux": "^4.0.1"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
-    "node_modules/video.js": {
-      "version": "7.21.6",
-      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.6.tgz",
-      "integrity": "sha512-m41TbODrUCToVfK1aljVd296CwDQnCRewpIm5tTXMuV87YYSGw1H+VDOaV45HlpcWSsTWWLF++InDgGJfthfUw==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "2.16.3",
-        "@videojs/vhs-utils": "^3.0.4",
-        "@videojs/xhr": "2.6.0",
-        "aes-decrypter": "3.1.3",
-        "global": "^4.4.0",
-        "keycode": "^2.2.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "0.22.1",
-        "mux.js": "6.0.1",
-        "safe-json-parse": "4.0.0",
-        "videojs-font": "3.2.0",
-        "videojs-vtt.js": "^0.15.5"
-      }
-    },
-    "node_modules/videojs-font": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
-      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
-    },
-    "node_modules/videojs-vtt.js": {
-      "version": "0.15.5",
-      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
-      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
-      "dependencies": {
-        "global": "^4.3.1"
-      }
-    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -23548,7 +23229,6 @@
       "version": "0.1.0",
       "peerDependencies": {
         "@edx/frontend-app-course-authoring": "*",
-        "@edx/frontend-lib-content-components": "*",
         "@edx/frontend-platform": "*",
         "@openedx/paragon": "*",
         "@reduxjs/toolkit": "*",

package.json

@@ -37,6 +37,11 @@
     "url": "https://github.com/openedx/frontend-app-course-authoring/issues"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/lint": "^6.2.1",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -45,7 +50,6 @@
     "@edx/frontend-component-footer": "^14.0.3",
     "@edx/frontend-component-header": "^5.3.3",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.6.0",
     "@edx/frontend-platform": "^8.0.3",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
@@ -60,16 +64,22 @@
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
     "@openedx/frontend-plugin-framework": "^1.2.1",
     "@openedx/paragon": "^22.5.1",
+    "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
+    "@tinymce/tinymce-react": "^3.14.0",
     "classnames": "2.5.1",
+    "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
+    "fast-xml-parser": "^4.0.10",
     "file-saver": "^2.0.5",
     "formik": "2.4.6",
+    "frontend-components-tinymce-advanced-plugins": "^1.0.3",
     "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "meilisearch": "^0.41.0",
     "moment": "2.30.1",
+    "moment-shortformat": "^2.1.0",
     "npm": "^10.8.1",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
@@ -77,6 +87,7 @@
     "react-dom": "17.0.2",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
+    "react-onclickoutside": "^6.13.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
     "react-router": "6.23.1",
@@ -85,14 +96,20 @@
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^2.4.1",
+    "reselect": "^4.1.5",
     "start": "^5.1.0",
+    "tinymce": "^5.10.4",
     "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",
+    "xmlchecker": "^0.1.0",
     "yup": "0.31.1"
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/react-unit-test-utils": "2.1.1",
+    "@edx/react-unit-test-utils": "3.0.0",
     "@edx/reactifex": "^1.0.3",
     "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
@@ -101,6 +118,7 @@
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.2.1",
+    "@types/lodash": "^4.17.7",
     "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
     "eslint-import-resolver-webpack": "^0.13.8",

plugins/course-apps/live/Settings.jsx

@@ -3,10 +3,10 @@ import { useDispatch, useSelector } from 'react-redux';
 import { camelCase } from 'lodash';
 import { Icon } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { SelectableBox } from '@edx/frontend-lib-content-components';
 import PropTypes from 'prop-types';
 import * as Yup from 'yup';
 import { useNavigate } from 'react-router-dom';
+import SelectableBox from 'CourseAuthoring/editors/sharedComponents/SelectableBox';
 import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import { useModel } from 'CourseAuthoring/generic/model-store';
 import Loading from 'CourseAuthoring/generic/Loading';

plugins/course-apps/live/package.json

@@ -4,7 +4,6 @@
     "description": "Live course configuration for courses using it",
     "peerDependencies": {
         "@edx/frontend-app-course-authoring": "*",
-        "@edx/frontend-lib-content-components": "*",
         "@edx/frontend-platform": "*",
         "@openedx/paragon": "*",
         "@reduxjs/toolkit": "*",

renovate.json

@@ -19,15 +19,6 @@
       "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": false
-    },
-    {
-      "matchPackagePatterns": ["@edx/frontend-lib-content-components"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": false,
-      "schedule": [
-        "after 1am",
-        "before 11pm"
-      ]
     }
   ]
 }

src/CourseAuthoringRoutes.test.jsx

@@ -21,9 +21,10 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-// Mock the TinyMceWidget from frontend-lib-content-components
+// Mock the TinyMceWidget
-jest.mock('@edx/frontend-lib-content-components', () => ({
+jest.mock('./editors/sharedComponents/TinyMceWidget', () => ({
-  TinyMceWidget: () => <div>Widget</div>,
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
   Footer: () => <div>Footer</div>,
   prepareEditorRef: jest.fn(() => ({
     refReady: true,

src/advanced-settings/AdvancedSettings.jsx

@@ -6,7 +6,7 @@ import {
 } from '@openedx/paragon';
 import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import Placeholder from '@edx/frontend-lib-content-components';
+import Placeholder from '../editors/Placeholder';
 
 import AlertProctoringError from '../generic/AlertProctoringError';
 import { useModel } from '../generic/model-store';

src/certificates/Certificates.jsx

@@ -1,7 +1,7 @@
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
-import Placeholder from '@edx/frontend-lib-content-components';
 
+import Placeholder from '../editors/Placeholder';
 import { RequestStatus } from '../data/constants';
 import Loading from '../generic/Loading';
 import useCertificates from './hooks/useCertificates';

src/content-tags-drawer/ContentTagsCollapsible.jsx

@@ -12,9 +12,10 @@ import {
   Icon,
 } from '@openedx/paragon';
 import { Tag, KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
-import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
+
+import SelectableBox from '../editors/sharedComponents/SelectableBox';
 import messages from './messages';
 
 import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';

src/content-tags-drawer/ContentTagsDropDownSelector.jsx

@@ -5,13 +5,13 @@ import {
   Spinner,
   Button,
 } from '@openedx/paragon';
-import { SelectableBox } from '@edx/frontend-lib-content-components';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ArrowDropDown, ArrowDropUp, Add } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
-import messages from './messages';
 
+import SelectableBox from '../editors/sharedComponents/SelectableBox';
 import { useTaxonomyTagsData } from './data/apiHooks';
+import messages from './messages';
 
 const HighlightedText = ({ text, highlight }) => {
   if (!highlight) {

src/course-outline/page-alerts/PageAlerts.jsx

@@ -4,7 +4,6 @@ import { uniqBy } from 'lodash';
 import { getConfig } from '@edx/frontend-platform';
 import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { ErrorAlert } from '@edx/frontend-lib-content-components';
 import {
   Campaign as CampaignIcon,
   InfoOutline as InfoOutlineIcon,
@@ -16,6 +15,7 @@ import {
 } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
+import ErrorAlert from '../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
 import { RequestStatus } from '../../data/constants';
 import AlertMessage from '../../generic/alert-message';
 import AlertProctoringError from '../../generic/AlertProctoringError';

src/course-unit/CourseUnit.jsx

@@ -7,8 +7,8 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { Warning as WarningIcon } from '@openedx/paragon/icons';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { DraggableList } from '@edx/frontend-lib-content-components';
 
+import DraggableList from '../editors/sharedComponents/DraggableList';
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import SubHeader from '../generic/sub-header/SubHeader';
 import { RequestStatus } from '../data/constants';

src/course-updates/CourseUpdates.test.jsx

@@ -44,8 +44,9 @@ jest.mock('@tinymce/tinymce-react', () => {
   };
 });
 
-jest.mock('@edx/frontend-lib-content-components', () => ({
+jest.mock('../editors/sharedComponents/TinyMceWidget', () => ({
-  TinyMceWidget: () => <div>Widget</div>,
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
   prepareEditorRef: jest.fn(() => ({
     refReady: true,
     setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),

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

@@ -32,8 +32,9 @@ jest.mock('@tinymce/tinymce-react', () => {
   };
 });
 
-jest.mock('@edx/frontend-lib-content-components', () => ({
+jest.mock('../../editors/sharedComponents/TinyMceWidget', () => ({
-  TinyMceWidget: () => <div>Widget</div>,
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
   prepareEditorRef: jest.fn(() => ({
     refReady: true,
     setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),

src/custom-pages/CustomPages.jsx

@@ -18,11 +18,9 @@ import {
   Container,
 } from '@openedx/paragon';
 import { Add, SpinnerSimple } from '@openedx/paragon/icons';
-import Placeholder, {
+import Placeholder from '../editors/Placeholder';
-  DraggableList,
+import DraggableList, { SortableItem } from '../editors/sharedComponents/DraggableList';
-  SortableItem,
+import ErrorAlert from '../editors/sharedComponents/ErrorAlerts/ErrorAlert';
-  ErrorAlert,
-} from '@edx/frontend-lib-content-components';
 
 import { RequestStatus } from '../data/constants';
 import { useModels, useModel } from '../generic/model-store';

src/custom-pages/EditModal.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 
-import { EditorPage } from '@edx/frontend-lib-content-components';
+import EditorPage from '../editors/EditorPage';
 
 const EditModal = ({
   pageId,

src/editors/Editor.jsx

@@ -8,7 +8,7 @@ import * as hooks from './hooks';
 
 import supportedEditors from './supportedEditors';
 
-export const Editor = ({
+const Editor = ({
   learningContextId,
   blockType,
   blockId,

src/editors/Editor.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { shallow } from '@edx/react-unit-test-utils';
-import { Editor } from './Editor';
+import Editor from './Editor';
 import supportedEditors from './supportedEditors';
 import * as hooks from './hooks';
 import { blockTypes } from './data/constants/app';

src/editors/EditorContainer.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { EditorPage } from '@edx/frontend-lib-content-components';
 import { getConfig } from '@edx/frontend-platform';
 
+import EditorPage from './EditorPage';
+
 const EditorContainer = ({
   courseId,
 }) => {

src/editors/EditorContainer.test.jsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import EditorContainer from './EditorContainer';
 
-jest.mock('@edx/frontend-lib-content-components', () => ({ EditorPage: () => 'HeaderTitle' }));
-
 jest.mock('react-router', () => ({
   ...jest.requireActual('react-router'), // use actual for all non-hook parts
   useParams: () => ({

src/editors/EditorPage.jsx

@@ -6,7 +6,7 @@ import store from './data/store';
 import Editor from './Editor';
 import ErrorBoundary from './sharedComponents/ErrorBoundary';
 
-export const EditorPage = ({
+const EditorPage = ({
   courseId,
   blockType,
   blockId,

src/editors/Placeholder.test.jsx

@@ -4,7 +4,7 @@ import TestRenderer from 'react-test-renderer';
 import { AppContext } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
 
-import Placeholder from '../index';
+import Placeholder from './Placeholder';
 
 describe('<Placeholder />', () => {
   it('renders correctly', () => {

src/editors/VideoSelector.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import VideoGallery from './containers/VideoGallery';
 import * as hooks from './hooks';
 
-export const VideoSelector = ({
+const VideoSelector = ({
   blockId,
   learningContextId,
   lmsEndpointUrl,

src/editors/VideoSelector.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { shallow } from '@edx/react-unit-test-utils';

src/editors/__snapshots__/EditorContainer.test.jsx.snap

@@ -9,6 +9,8 @@ exports[`Editor Container snapshots rendering correctly with expected Input 1`]
     blockType="html"
     courseId="cOuRsEId"
     lmsEndpointUrl="http://localhost:18000"
+    onClose={null}
+    returnFunction={null}
     studioEndpointUrl="http://localhost:18010"
   />
 </div>

src/editors/__snapshots__/Placeholder.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Placeholder /> renders correctly 1`] = `
+<div
+  className="Placeholder"
+>
+  <h1>
+    Under Construction
+    <br />
+    Coming Soon
+  </h1>
+</div>
+`;

src/editors/containers/EditorContainer/components/EditorFooter/index.jsx

@@ -12,7 +12,7 @@ import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/
 
 import messages from './messages';
 
-export const EditorFooter = ({
+const EditorFooter = ({
   clearSaveFailed,
   disableSave,
   onCancel,
@@ -60,4 +60,5 @@ EditorFooter.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const EditorFooterInternal = EditorFooter; // For testing only
 export default injectIntl(EditorFooter);

src/editors/containers/EditorContainer/components/EditorFooter/index.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
-import { EditorFooter } from '.';
+import { EditorFooterInternal as EditorFooter } from '.';
 
 jest.mock('../../hooks', () => ({
   nullMethod: jest.fn().mockName('hooks.nullMethod'),

src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.jsx

@@ -7,7 +7,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-export const EditConfirmationButtons = ({
+const EditConfirmationButtons = ({
   updateTitle,
   cancelEdit,
   // injected
@@ -37,4 +37,5 @@ EditConfirmationButtons.propTypes = {
   // injected
   intl: intlShape.isRequired,
 };
+export const EditConfirmationButtonsInternal = EditConfirmationButtons; // For testing only
 export default injectIntl(EditConfirmationButtons);

src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.jsx

@@ -1,7 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
-import * as module from './EditConfirmationButtons';
+
+import { EditConfirmationButtonsInternal as EditConfirmationButtons } from './EditConfirmationButtons';
 
 describe('EditConfirmationButtons', () => {
   const props = {
@@ -11,7 +13,7 @@ describe('EditConfirmationButtons', () => {
   };
   describe('snapshot', () => {
     test('snapshot', () => {
-      expect(shallow(<module.EditConfirmationButtons {...props} />).snapshot).toMatchSnapshot();
+      expect(shallow(<EditConfirmationButtons {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Form } from '@openedx/paragon';
-import EditConfirmationButtons from './EditConfirmationButtons';
+import { EditConfirmationButtonsInternal as EditConfirmationButtons } from './EditConfirmationButtons';
 
-export const EditableHeader = ({
+const EditableHeader = ({
   handleChange,
   updateTitle,
   handleKeyDown,
@@ -41,4 +41,5 @@ EditableHeader.propTypes = {
   cancelEdit: PropTypes.func.isRequired,
 };
 
+export const EditableHeaderInternal = EditableHeader; // For testing only
 export default EditableHeader;

src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { Form } from '@openedx/paragon';
-import * as module from './EditableHeader';
+import { EditableHeaderInternal as EditableHeader } from './EditableHeader';
-import EditConfirmationButtons from './EditConfirmationButtons';
+import { EditConfirmationButtonsInternal as EditConfirmationButtons } from './EditConfirmationButtons';
 
 describe('EditableHeader', () => {
   const props = {
@@ -15,7 +16,7 @@ describe('EditableHeader', () => {
   };
   let el;
   beforeEach(() => {
-    el = shallow(<module.EditableHeader {...props} />);
+    el = shallow(<EditableHeader {...props} />);
   });
 
   describe('snapshot', () => {

src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`EditableHeader snapshot snapshot 1`] = `
       }
     }
     trailingElement={
-      <injectIntl(ShimmedIntlComponent)
+      <EditConfirmationButtons
         cancelEdit={[MockFunction args.cancelEdit]}
         updateTitle={[MockFunction args.updateTitle]}
       />

src/editors/containers/EditorContainer/components/TitleHeader/hooks.js

@@ -3,6 +3,10 @@ import { useSelector } from 'react-redux';
 
 import { actions, selectors } from '../../../../data/redux';
 import * as textEditorHooks from '../../hooks';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 export const { navigateCallback } = textEditorHooks;

src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { actions, selectors } from '../../../../data/redux';
-import { MockUseState } from '../../../../../testUtils';
+import { MockUseState } from '../../../../testUtils';
 import * as hooks from './hooks';
 
 jest.mock('react', () => {

src/editors/containers/EditorContainer/components/TitleHeader/index.jsx

@@ -11,7 +11,7 @@ import { localTitleHooks } from './hooks';
 import messages from './messages';
 import EditableHeader from './EditableHeader';
 
-export const TitleHeader = ({
+const TitleHeader = ({
   isInitialized,
   // injected
   intl,
@@ -70,4 +70,5 @@ TitleHeader.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const TitleHeaderInternal = TitleHeader; // For testing only
 export default injectIntl(TitleHeader);

src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx

@@ -1,10 +1,11 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../../testUtils';
+import { formatMessage } from '../../../../testUtils';
 import { localTitleHooks } from './hooks';
-import * as module from '.';
+import { TitleHeaderInternal as TitleHeader } from '.';
 
 jest.mock('./hooks', () => ({
   localTitleHooks: jest.fn(),
@@ -37,7 +38,7 @@ describe('TitleHeader', () => {
   describe('behavior', () => {
     it(' calls localTitleHooks with initialization args', () => {
       localTitleHooks.mockReturnValue(localTitleHooksProps);
-      shallow(<module.TitleHeader {...props} isInitialized />);
+      shallow(<TitleHeader {...props} isInitialized />);
       const dispatch = useDispatch();
       expect(localTitleHooks).toHaveBeenCalledWith({
         dispatch,
@@ -47,15 +48,15 @@ describe('TitleHeader', () => {
 
   describe('snapshots', () => {
     test('not initialized', () => {
-      expect(shallow(<module.TitleHeader {...props} />).snapshot).toMatchSnapshot();
+      expect(shallow(<TitleHeader {...props} />).snapshot).toMatchSnapshot();
     });
     test('initialized', () => {
       localTitleHooks.mockReturnValue(localTitleHooksProps);
-      expect(shallow(<module.TitleHeader {...props} isInitialized />).shallowWrapper).toMatchSnapshot();
+      expect(shallow(<TitleHeader {...props} isInitialized />).shallowWrapper).toMatchSnapshot();
     });
     test('editing', () => {
       localTitleHooks.mockReturnValue({ ...localTitleHooksProps, isEditing: true });
-      expect(shallow(<module.TitleHeader {...props} isInitialized />).snapshot).toMatchSnapshot();
+      expect(shallow(<TitleHeader {...props} isInitialized />).snapshot).toMatchSnapshot();
     });
   });
 });

src/editors/containers/EditorContainer/hooks.js

@@ -6,6 +6,10 @@ import { RequestKeys } from '../../data/constants/requests';
 import { selectors } from '../../data/redux';
 import { StrictDict } from '../../utils';
 import * as appHooks from '../../hooks';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 export const {

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

@@ -1,5 +1,6 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import * as reactRedux from 'react-redux';
-import { MockUseState } from '../../../testUtils';
+import { MockUseState } from '../../testUtils';
 
 import { RequestKeys } from '../../data/constants/requests';
 import { selectors } from '../../data/redux';

src/editors/containers/EditorContainer/index.jsx

@@ -15,7 +15,7 @@ import * as hooks from './hooks';
 import messages from './messages';
 import './index.scss';
 
-export const EditorContainer = ({
+const EditorContainer = ({
   children,
   getContent,
   onClose,
@@ -99,4 +99,5 @@ EditorContainer.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const EditorContainerInternal = EditorContainer; // For testing only
 export default injectIntl(EditorContainer);

src/editors/containers/EditorContainer/index.test.jsx

@@ -1,9 +1,10 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import { shallow } from '@edx/react-unit-test-utils';
 import { useDispatch } from 'react-redux';
 
-import { EditorContainer } from '.';
+import { EditorContainerInternal as EditorContainer } from '.';
 import * as hooks from './hooks';
-import { formatMessage } from '../../../testUtils';
+import { formatMessage } from '../../testUtils';
 
 const props = {
   getContent: jest.fn().mockName('props.getContent'),

src/editors/containers/GameEditor/index.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 /**
@@ -6,8 +8,6 @@
  * To use run npm run-script addXblock <your>
  */
 
-/* eslint-disable no-unused-vars */
-
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -16,6 +16,10 @@ import { Spinner } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import EditorContainer from '../EditorContainer';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from '.';
 import { actions, selectors } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -18,7 +18,7 @@ import * as hooks from './hooks';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
 
-export const AnswerOption = ({
+const AnswerOption = ({
   answer,
   hasSingleAnswer,
   // injected
@@ -142,4 +142,5 @@ export const mapStateToProps = (state) => ({
 });
 
 export const mapDispatchToProps = {};
+export const AnswerOptionInternal = AnswerOption; // For testing only
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption)));

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../testUtils';
+import { formatMessage } from '../../../../../testUtils';
 import { selectors } from '../../../../../data/redux';
-import { AnswerOption, mapStateToProps } from './AnswerOption';
+import { AnswerOptionInternal as AnswerOption, mapStateToProps } from './AnswerOption';
 
 jest.mock('../../../../../data/redux', () => ({
   __esModule: true,

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx

@@ -13,7 +13,7 @@ import AnswerOption from './AnswerOption';
 import Button from '../../../../../sharedComponents/Button';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 
-export const AnswersContainer = ({
+const AnswersContainer = ({
   problemType,
   // Redux
   answers,
@@ -95,4 +95,5 @@ export const mapDispatchToProps = {
   updateField: actions.problem.updateField,
 };
 
+export const AnswersContainerInternal = AnswersContainer; // For testing only
 export default connect(mapStateToProps, mapDispatchToProps)(AnswersContainer);

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx

@@ -1,13 +1,12 @@
 /* eslint-disable react/prop-types */
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { act, render, waitFor } from '@testing-library/react';
 
 import { actions, selectors } from '../../../../../data/redux';
 
-import * as module from './AnswersContainer';
+import { AnswersContainerInternal as AnswersContainer, mapStateToProps, mapDispatchToProps } from './AnswersContainer';
-
-import { AnswersContainer as AnswersContainerWithoutHOC } from './AnswersContainer';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
@@ -44,13 +43,13 @@ describe('AnswersContainer', () => {
   describe('render', () => {
     test('snapshot: renders correct default', () => {
       act(() => {
-        expect(shallow(<module.AnswersContainer {...props} />).snapshot).toMatchSnapshot();
+        expect(shallow(<AnswersContainer {...props} />).snapshot).toMatchSnapshot();
       });
     });
     test('snapshot: renders correctly with answers', () => {
       act(() => {
         expect(shallow(
-          <module.AnswersContainer
+          <AnswersContainer
             {...props}
             answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
           />,
@@ -67,7 +66,7 @@ describe('AnswersContainer', () => {
           addAnswerRange: jest.fn(),
         };
         expect(shallow(
-          <module.AnswersContainer
+          <AnswersContainer
             {...emptyAnswerProps}
           />,
         ).snapshot).toMatchSnapshot();
@@ -90,7 +89,7 @@ describe('AnswersContainer', () => {
           addAnswerRange: jest.fn(),
         };
         expect(shallow(
-          <module.AnswersContainer
+          <AnswersContainer
             {...answerRangeProps}
           />,
         ).snapshot).toMatchSnapshot();
@@ -122,7 +121,7 @@ describe('AnswersContainer', () => {
           addAnswerRange: jest.fn(),
         };
         expect(shallow(
-          <module.AnswersContainer
+          <AnswersContainer
             {...answersProps}
           />,
         ).snapshot).toMatchSnapshot();
@@ -133,7 +132,7 @@ describe('AnswersContainer', () => {
       let container = null;
       await act(async () => {
         const wrapper = render(
-          <AnswersContainerWithoutHOC
+          <AnswersContainer
             {...props}
             answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
           />,
@@ -142,7 +141,7 @@ describe('AnswersContainer', () => {
       });
 
       await waitFor(() => expect(container.querySelector('button')).toBeTruthy());
-      await new Promise(resolve => setTimeout(resolve, 500));
+      await new Promise(resolve => { setTimeout(resolve, 500); });
 
       expect(props.updateField).toHaveBeenCalledWith(expect.objectContaining({ correctAnswerCount: 2 }));
     });
@@ -151,16 +150,16 @@ describe('AnswersContainer', () => {
     const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
     test('answers from problem.answers', () => {
       expect(
-        module.mapStateToProps(testState).answers,
+        mapStateToProps(testState).answers,
       ).toEqual(selectors.problem.answers(testState));
     });
   });
   describe('mapDispatchToProps', () => {
     test('updateField from actions.problem.updateField', () => {
-      expect(module.mapDispatchToProps.updateField).toEqual(actions.problem.updateField);
+      expect(mapDispatchToProps.updateField).toEqual(actions.problem.updateField);
     });
     test('updateField from actions.problem.addAnswer', () => {
-      expect(module.mapDispatchToProps.addAnswer).toEqual(actions.problem.addAnswer);
+      expect(mapDispatchToProps.addAnswer).toEqual(actions.problem.addAnswer);
     });
   });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import { shallow } from '@edx/react-unit-test-utils';
 import Checker from '.';
 

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import { shallow } from '@edx/react-unit-test-utils';
 import FeedbackControl from './FeedbackControl';
 

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js

@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
 import { StrictDict } from '../../../../../utils';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 import { actions } from '../../../../../data/redux';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js

@@ -1,9 +1,14 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { actions } from '../../../../../data/redux';
-import { MockUseState } from '../../../../../../testUtils';
+import { MockUseState } from '../../../../../testUtils';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 jest.mock('react', () => {

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

@@ -34,4 +34,5 @@ AnswerWidget.propTypes = {
   // injected
   intl: intlShape.isRequired,
 };
+export const AnswerWidgetInternal = AnswerWidget; // For testing only
 export default injectIntl(AnswerWidget);

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

@@ -8,7 +8,7 @@ import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
-export const ExplanationWidget = ({
+const ExplanationWidget = ({
   // redux
   settings,
   learningContextId,
@@ -57,4 +57,5 @@ export const mapStateToProps = (state) => ({
   learningContextId: selectors.app.learningContextId(state),
 });
 
+export const ExplanationWidgetInternal = ExplanationWidget; // For testing only
 export default injectIntl(connect(mapStateToProps)(ExplanationWidget));

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

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../testUtils';
+import { formatMessage } from '../../../../../testUtils';
 import { selectors } from '../../../../../data/redux';
-import { ExplanationWidget, mapStateToProps } from '.';
+import { ExplanationWidgetInternal as ExplanationWidget, mapStateToProps } from '.';
 
 jest.mock('../../../../../data/redux', () => ({
   __esModule: true,

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

@@ -8,7 +8,7 @@ import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
-export const QuestionWidget = ({
+const QuestionWidget = ({
   // redux
   question,
   learningContextId,
@@ -53,4 +53,5 @@ export const mapStateToProps = (state) => ({
   learningContextId: selectors.app.learningContextId(state),
 });
 
+export const QuestionWidgetInternal = QuestionWidget; // For testing only
 export default injectIntl(connect(mapStateToProps)(QuestionWidget));

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

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../testUtils';
+import { formatMessage } from '../../../../../testUtils';
 import { selectors } from '../../../../../data/redux';
-import { QuestionWidget, mapStateToProps } from '.';
+import { QuestionWidgetInternal as QuestionWidget, mapStateToProps } from '.';
 
 jest.mock('../../../../../data/redux', () => ({
   __esModule: true,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import { shallow } from '@edx/react-unit-test-utils';
 import CardSection from './CardSection';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx

@@ -11,7 +11,7 @@ import {
 import { showFullCard } from './hooks';
 import CardSection from './CardSection';
 
-export const SettingsOption = ({
+const SettingsOption = ({
   title, className, extraSections, children, summary, hasExpandableTextArea, ...passThroughProps
 }) => {
   const { isCardCollapsibleOpen, toggleCardCollapse } = showFullCard(hasExpandableTextArea);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import SettingsOption from './SettingsOption';

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js

@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react';
 
-import _ from 'lodash-es';
+import _ from 'lodash';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 import messages from './messages';
 import {
@@ -129,7 +133,7 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
 
   const handleMaxAttemptChange = (event) => {
     let unlimitedAttempts = false;
-    let attemptNumber = parseInt(event.target.value);
+    let attemptNumber = parseInt(event.target.value, 10);
 
     if (!_.isFinite(attemptNumber) || attemptNumber === defaultValue) {
       attemptNumber = null;
@@ -147,7 +151,7 @@ export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
   };
 
   const handleOnChange = (event) => {
-    let newMaxAttempt = parseInt(event.target.value);
+    let newMaxAttempt = parseInt(event.target.value, 10);
     if (newMaxAttempt === defaultValue) {
       newMaxAttempt = `${defaultValue} (Default)`;
     } else if (_.isNaN(newMaxAttempt)) {
@@ -193,7 +197,7 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
   };
 
   const handleAttemptsChange = (event) => {
-    let attempts = parseInt(event.target.value);
+    let attempts = parseInt(event.target.value, 10);
     if (_.isNaN(attempts)) {
       attempts = 0;
     }
@@ -209,7 +213,7 @@ export const useAnswerSettings = (showAnswer, updateSettings) => {
 
 export const timerCardHooks = (updateSettings) => ({
   handleChange: (event) => {
-    let time = parseInt(event.target.value);
+    let time = parseInt(event.target.value, 10);
     if (_.isNaN(time)) {
       time = 0;
     }

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { MockUseState } from '../../../../../../testUtils';
+import { MockUseState } from '../../../../../testUtils';
 import messages from './messages';
 import { keyStore } from '../../../../../utils';
 import * as hooks from './hooks';
@@ -286,7 +286,9 @@ describe('Problem settings hooks', () => {
     test('test handleAttemptsChange', () => {
       const value = 3;
       output.handleAttemptsChange({ target: { value } });
-      expect(updateSettings).toHaveBeenCalledWith({ showAnswer: { ...showAnswer, afterAttempts: parseInt(value) } });
+      expect(updateSettings).toHaveBeenCalledWith({
+        showAnswer: { ...showAnswer, afterAttempts: parseInt(value, 10) },
+      });
     });
   });
 

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

@@ -23,7 +23,7 @@ import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import Randomization from './settingsComponents/Randomization';
 
 // This widget should be connected, grab all settings from store, update them as needed.
-export const SettingsWidget = ({
+const SettingsWidget = ({
   problemType,
   // redux
   answers,
@@ -192,4 +192,5 @@ export const mapDispatchToProps = {
   updateAnswer: actions.problem.updateAnswer,
 };
 
+export const SettingsWidgetInternal = SettingsWidget; // For testing only
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SettingsWidget));

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss

@@ -1,5 +1,5 @@
 .settingsCardTitleSection {
-    padding-bottom: 0rem;
+    padding-bottom: 0;
 }
 
 .halfSpacedMessage {
@@ -12,6 +12,7 @@
 
 .settingsWidget {
     margin-top: 40px;
+
     .pgn__form-text {
         font-size: small;
     }

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import { showAdvancedSettingsCards } from './hooks';
-import { SettingsWidget, mapDispatchToProps } from '.';
+import { SettingsWidgetInternal as SettingsWidget, mapDispatchToProps } from '.';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import { actions } from '../../../../../data/redux';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.js

@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react';
-import _ from 'lodash-es';
+import _ from 'lodash';
 import messages from './messages';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 export const state = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.test.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { MockUseState } from '../../../../../../../../testUtils';
+import { MockUseState } from '../../../../../../../testUtils';
 import messages from './messages';
 import * as hooks from './hooks';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.test.jsx

@@ -1,6 +1,7 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../../testUtils';
 import { GeneralFeedbackCard } from './index';
 import { generalFeedbackHooks } from './hooks';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx

@@ -7,7 +7,7 @@ import { DeleteOutline } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import messages from '../../messages';
 
-export const GroupFeedbackRow = ({
+const GroupFeedbackRow = ({
   value,
   handleAnswersSelectedChange,
   handleFeedbackChange,
@@ -76,4 +76,5 @@ GroupFeedbackRow.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const GroupFeedbackRowInternal = GroupFeedbackRow; // For testing only
 export default injectIntl(GroupFeedbackRow);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../../testUtils';
-import { GroupFeedbackRow } from './GroupFeedbackRow';
+import { GroupFeedbackRowInternal as GroupFeedbackRow } from './GroupFeedbackRow';
 
 jest.mock('@openedx/paragon', () => ({
   ...jest.requireActual('@openedx/paragon'),

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.js

@@ -1,6 +1,10 @@
 import { useState, useEffect } from 'react';
-import _ from 'lodash-es';
+import { isEmpty } from 'lodash';
 import messages from './messages';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 export const state = {
@@ -30,7 +34,7 @@ export const groupFeedbackCardHooks = (groupFeedbacks, updateSettings, answersli
 
   const handleAdd = () => {
     let newId = 0;
-    if (!_.isEmpty(groupFeedbacks)) {
+    if (!isEmpty(groupFeedbacks)) {
       newId = Math.max(...groupFeedbacks.map(feedback => feedback.id)) + 1;
     }
     const groupFeedback = { id: newId, answers: [], feedback: '' };

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.test.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { MockUseState } from '../../../../../../../../testUtils';
+import { MockUseState } from '../../../../../../../testUtils';
 import messages from './messages';
 import * as hooks from './hooks';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx

@@ -7,7 +7,7 @@ import { groupFeedbackCardHooks, groupFeedbackRowHooks } from './hooks';
 import GroupFeedbackRow from './GroupFeedbackRow';
 import Button from '../../../../../../../sharedComponents/Button';
 
-export const GroupFeedbackCard = ({
+const GroupFeedbackCard = ({
   groupFeedbacks,
   updateSettings,
   answers,
@@ -63,4 +63,5 @@ GroupFeedbackCard.propTypes = {
   updateSettings: PropTypes.func.isRequired,
 };
 
+export const GroupFeedbackCardInternal = GroupFeedbackCard; // For testing only
 export default injectIntl(GroupFeedbackCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../../testUtils';
-import { GroupFeedbackCard } from './index';
+import { GroupFeedbackCardInternal as GroupFeedbackCard } from './index';
 import { groupFeedbackRowHooks, groupFeedbackCardHooks } from './hooks';
 import messages from './messages';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import messages from '../messages';
 import ExpandableTextArea from '../../../../../../sharedComponents/ExpandableTextArea';
 
-export const HintRow = ({
+const HintRow = ({
   value,
   handleChange,
   handleDelete,
@@ -49,4 +49,5 @@ HintRow.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const HintRowInternal = HintRow; // For testing only
 export default injectIntl(HintRow);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
-import { HintRow } from './HintRow';
+import { HintRowInternal as HintRow } from './HintRow';
 
 describe('HintRow', () => {
   const props = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.jsx

@@ -8,7 +8,7 @@ import { hintsCardHooks, hintsRowHooks } from '../hooks';
 import HintRow from './HintRow';
 import Button from '../../../../../../sharedComponents/Button';
 
-export const HintsCard = ({
+const HintsCard = ({
   hints,
   problemType,
   updateSettings,
@@ -56,4 +56,5 @@ HintsCard.propTypes = {
   updateSettings: PropTypes.func.isRequired,
 };
 
+export const HintsCardInternal = HintsCard; // For testing only
 export default injectIntl(HintsCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
-import { HintsCard } from './HintsCard';
+import { HintsCardInternal as HintsCard } from './HintsCard';
 import { hintsCardHooks, hintsRowHooks } from '../hooks';
 import messages from '../messages';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.js

@@ -1,5 +1,9 @@
 import { useState, useEffect } from 'react';
 import { RandomizationTypes, RandomizationTypesKeys } from '../../../../../../../data/constants/problem';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 export const state = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.test.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { MockUseState } from '../../../../../../../../testUtils';
+import { MockUseState } from '../../../../../../../testUtils';
 import * as hooks from './hooks';
 import { RandomizationTypes, RandomizationTypesKeys } from '../../../../../../../data/constants/problem';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx

@@ -1,6 +1,7 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../../testUtils';
 import { RandomizationCard } from './index';
 import { useRandomizationSettingStatus } from './hooks';
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx

@@ -8,7 +8,7 @@ import messages from '../messages';
 import { resetCardHooks } from '../hooks';
 import { selectors } from '../../../../../../data/redux';
 
-export const ResetCard = ({
+const ResetCard = ({
   showResetButton,
   defaultValue,
   updateSettings,
@@ -58,4 +58,5 @@ ResetCard.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const ResetCardInternal = ResetCard; // For testing only
 export default injectIntl(ResetCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx

@@ -1,7 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { useSelector } from 'react-redux';
-import { ResetCard } from './ResetCard';
+import { formatMessage } from '../../../../../../testUtils';
+import { ResetCardInternal as ResetCard } from './ResetCard';
 import { resetCardHooks } from '../hooks';
 
 jest.mock('../hooks', () => ({
@@ -17,9 +19,7 @@ jest.mock('../../../../../../data/redux', () => ({
   },
 }));
 
-jest.mock('react-redux', () => ({
+useSelector.mockImplementation((args) => args);
-  useSelector: jest.fn().mockImplementation((args) => args),
-}));
 
 describe('ResetCard', () => {
   const props = {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import _ from 'lodash-es';
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -9,7 +9,7 @@ import SettingsOption from '../SettingsOption';
 import messages from '../messages';
 import { scoringCardHooks } from '../hooks';
 
-export const ScoringCard = ({
+const ScoringCard = ({
   scoring,
   defaultValue,
   updateSettings,
@@ -113,4 +113,5 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {};
 
+export const ScoringCardInternal = ScoringCard; // For testing only
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ScoringCard));

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
 import { scoringCardHooks } from '../hooks';
-import { ScoringCard } from './ScoringCard';
+import { ScoringCardInternal as ScoringCard } from './ScoringCard';
 
 jest.mock('../hooks', () => ({
   scoringCardHooks: jest.fn(),

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx

@@ -9,7 +9,7 @@ import { selectors } from '../../../../../../data/redux';
 import messages from '../messages';
 import { useAnswerSettings } from '../hooks';
 
-export const ShowAnswerCard = ({
+const ShowAnswerCard = ({
   showAnswer,
   updateSettings,
   defaultValue,
@@ -113,4 +113,5 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {};
 
+export const ShowAnswerCardInternal = ShowAnswerCard; // For testing only
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ShowAnswerCard));

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
 import { selectors } from '../../../../../../data/redux';
-import { ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard';
+import { ShowAnswerCardInternal as ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard';
 import { useAnswerSettings } from '../hooks';
 
 jest.mock('../hooks', () => ({

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx

@@ -10,7 +10,7 @@ import Button from '../../../../../../sharedComponents/Button';
 import { confirmSwitchToAdvancedEditor } from '../hooks';
 import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 
-export const SwitchToAdvancedEditorCard = ({
+const SwitchToAdvancedEditorCard = ({
   problemType,
   switchToAdvancedEditor,
 }) => {
@@ -59,4 +59,5 @@ export const mapDispatchToProps = {
   switchToAdvancedEditor: thunkActions.problem.switchToAdvancedEditor,
 };
 
+export const SwitchToAdvancedEditorCardInternal = SwitchToAdvancedEditorCard; // For testing only
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SwitchToAdvancedEditorCard));

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.test.jsx

@@ -1,6 +1,7 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { SwitchToAdvancedEditorCard, mapDispatchToProps } from './SwitchToAdvancedEditorCard';
+import { SwitchToAdvancedEditorCardInternal as SwitchToAdvancedEditorCard, mapDispatchToProps } from './SwitchToAdvancedEditorCard';
 import { thunkActions } from '../../../../../../data/redux';
 
 describe('SwitchToAdvancedEditorCard snapshot', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.jsx

@@ -6,7 +6,7 @@ import SettingsOption from '../SettingsOption';
 import messages from '../messages';
 import { timerCardHooks } from '../hooks';
 
-export const TimerCard = ({
+const TimerCard = ({
   timeBetween,
   updateSettings,
   // inject
@@ -42,4 +42,5 @@ TimerCard.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const TimerCardInternal = TimerCard; // For testing only
 export default injectIntl(TimerCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
-import { TimerCard } from './TimerCard';
+import { TimerCardInternal as TimerCard } from './TimerCard';
 import { timerCardHooks } from '../hooks';
 
 jest.mock('../hooks', () => ({

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx

@@ -42,7 +42,7 @@ export const getSummary = ({ tolerance, intl }) => {
   }
 };
 
-export const ToleranceCard = ({
+const ToleranceCard = ({
   tolerance,
   answers,
   updateSettings,
@@ -119,4 +119,5 @@ ToleranceCard.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const ToleranceCardInternal = ToleranceCard; // For testing only
 export default injectIntl(ToleranceCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx

@@ -4,8 +4,8 @@ import {
 import React from 'react';
 import messages from './messages';
 import { ToleranceTypes } from './constants';
-import { ToleranceCard } from './index';
+import { ToleranceCardInternal as ToleranceCard } from './index';
-import { formatMessage } from '../../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../../testUtils';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   __esmodule: true,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx

@@ -6,7 +6,7 @@ import { ProblemTypeKeys, ProblemTypes } from '../../../../../../data/constants/
 import messages from '../messages';
 import TypeRow from './TypeRow';
 
-export const TypeCard = ({
+const TypeCard = ({
   answers,
   blockTitle,
   correctAnswerCount,
@@ -64,4 +64,5 @@ TypeCard.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const TypeCardInternal = TypeCard; // For testing only
 export default injectIntl(TypeCard);

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx

@@ -1,7 +1,8 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { formatMessage } from '../../../../../../../testUtils';
+import { formatMessage } from '../../../../../../testUtils';
-import { TypeCard } from './TypeCard';
+import { TypeCardInternal as TypeCard } from './TypeCard';
 import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
 
 describe('TypeCard', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx

@@ -6,7 +6,7 @@ import { typeRowHooks } from '../hooks';
 
 import Button from '../../../../../../sharedComponents/Button';
 
-export const TypeRow = ({
+const TypeRow = ({
   answers,
   blockTitle,
   correctAnswerCount,

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.test.jsx

@@ -1,6 +1,7 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
-import { TypeRow } from './TypeRow';
+import TypeRow from './TypeRow';
 import { typeRowHooks } from '../hooks';
 
 jest.mock('../hooks', () => ({

src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js

@@ -24,7 +24,7 @@ export const fetchEditorContent = ({ format }) => {
   const editorObject = { hints: [] };
   const EditorsArray = window.tinymce.editors;
   Object.entries(EditorsArray).forEach(([id, editor]) => {
-    if (Number.isNaN(parseInt(id))) {
+    if (Number.isNaN(parseInt(id, 10))) {
       if (id.startsWith('answer')) {
         const { answers } = editorObject;
         const answerId = id.substring(id.indexOf('-') + 1);

src/editors/containers/ProblemEditor/components/EditProblemView/hooks.test.js

@@ -1,6 +1,6 @@
 import { ProblemTypeKeys, ShowAnswerTypesKeys } from '../../../../data/constants/problem';
 import * as hooks from './hooks';
-import { MockUseState } from '../../../../../testUtils';
+import { MockUseState } from '../../../../testUtils';
 
 const mockRawOLX = '<problem>rawOLX</problem>';
 const mockBuiltOLX = 'builtOLX';

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

@@ -24,7 +24,7 @@ import messages from './messages';
 import ExplanationWidget from './ExplanationWidget';
 import { saveBlock } from '../../../../hooks';
 
-export const EditProblemView = ({
+const EditProblemView = ({
   returnFunction,
   // redux
   problemType,
@@ -139,4 +139,5 @@ export const mapStateToProps = (state) => ({
   problemState: selectors.problem.completeState(state),
 });
 
+export const EditProblemViewInternal = EditProblemView; // For testing only
 export default injectIntl(connect(mapStateToProps)(EditProblemView));