feat: Add HTML and Problem editors plugin slots

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

@@ -17,6 +17,7 @@ import QuestionWidget from './QuestionWidget';
 import EditorContainer from '../../../EditorContainer';
 import RawEditor from '../../../../sharedComponents/RawEditor';
 import { ProblemTypeKeys } from '../../../../data/constants/problem';
+import { blockTypes } from '../../../../data/constants/app';
 
 import {
   checkIfEditorsDirty, parseState, saveWarningModalToggle, getContent,
@@ -29,6 +30,7 @@ import { saveBlock } from '../../../../hooks';
 
 import { selectors } from '../../../../data/redux';
 import { ProblemEditorContextProvider } from './ProblemEditorContext';
+import { ProblemEditorPluginSlot } from '../../../../../plugin-slots/ProblemEditorPluginSlot';
 
 const EditProblemView = ({ returnFunction }) => {
   const intl = useIntl();
@@ -128,6 +130,7 @@ const EditProblemView = ({ returnFunction }) => {
             </Container>
           ) : (
             <span className="flex-grow-1 mb-5">
+              <ProblemEditorPluginSlot blockType={problemType || blockTypes.problem} />
               <QuestionWidget />
               <ExplanationWidget />
               <AnswerWidget problemType={problemType} />

src/editors/containers/TextEditor/index.jsx

@@ -10,6 +10,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { getConfig } from '@edx/frontend-platform';
 import { actions, selectors } from '../../data/redux';
+import { blockTypes } from '../../data/constants/app';
 import { RequestKeys } from '../../data/constants/requests';
 
 import EditorContainer from '../EditorContainer';
@@ -18,6 +19,7 @@ import * as hooks from './hooks';
 import messages from './messages';
 import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../sharedComponents/TinyMceWidget/hooks';
+import { TextEditorPluginSlot } from '../../../plugin-slots/TextEditorPluginSlot';
 
 const TextEditor = ({
   onClose,
@@ -97,7 +99,12 @@ const TextEditor = ({
                 screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
               />
             </div>
-          ) : (selectEditor())}
+          ) : (
+            <>
+              <TextEditorPluginSlot blockType={blockTypes.html} />
+              {selectEditor()}
+            </>
+          )}
       </div>
     </EditorContainer>
   );

src/plugin-slots/ProblemEditorPluginSlot/README.md

@@ -0,0 +1,122 @@
+# ProblemEditorPluginSlot
+
+### Slot ID: `org.openedx.frontend.authoring.problem_editor_plugin.v1`
+
+### Slot ID Aliases
+* `problem_editor_plugin_slot`
+
+### Plugin Props:
+
+* `blockType` - String. The type of problem block being edited (e.g., `problem-single-select`, `problem-multi-select`, `problem`, `advanced`).
+
+## Description
+
+The `ProblemEditorPluginSlot` is rendered inside the Problem Editor modal window for all major
+problem XBlock types:
+
+- single-select
+- multi-select
+- dropdown
+- numerical-input
+- text-input
+
+It is a **generic extension point** that can host any React component, such as:
+
+- **Problem authoring helpers** (validation, hints, accessibility tips)
+- **Preview or analysis tools** (show how a problem will render, check grading logic)
+- **Integrations** (external content sources, tagging, metadata editors)
+
+By default, the slot is **empty**. Widgets are attached via `env.config.jsx` using the
+`@openedx/frontend-plugin-framework`.
+
+The only prop your component receives from the slot is:
+
+- `blockType` – the current problem block type.
+
+Your component is responsible for interacting with the editor state (if needed) using
+Redux, `window.tinymce`, CodeMirror, or other utilities provided by `frontend-app-authoring`.
+
+The slot is available in the **visual editor** mode. Advanced / raw editing is handled
+by the raw editor, and your component can still interact with the underlying state
+if it chooses to.
+
+## Example: Adding a component into `ProblemEditorPluginSlot`
+
+The following example configuration shows how to add a custom widget to the slot:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { MyProblemEditorHelper } from '@example/my-problem-editor-helper';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.problem_editor_plugin.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'my-problem-editor-helper',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: MyProblemEditorHelper,
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+## Example: Custom Implementation
+
+The following example shows a minimal helper component that uses `blockType`:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Card } from '@openedx/paragon';
+
+const CustomProblemAssistant = ({ blockType }) => {
+  // Your custom implementation (example)
+  return (
+    <Card>
+      <Card.Body>
+        Custom component for {blockType} problem editor 🤗🤗🤗
+      </Card.Body>
+    </Card>
+  );
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.problem_editor_plugin.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom-problem-editor-assistant',
+            priority: 1,
+            type: DIRECT_PLUGIN,
+            RenderWidget: CustomProblemAssistant,
+          },
+          op: PLUGIN_OPERATIONS.Insert,
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+### Example: Screenshots
+
+**Default problem editor without a widget**
+
+![Screenshot with default Problem Editor](./images/default_problem_editor.png)
+
+**With a widget rendered in the slot**
+
+![Screenshot with component in ProblemEditorPluginSlot](./images/problem_editor_slot.png)
+

src/plugin-slots/ProblemEditorPluginSlot/index.tsx

@@ -0,0 +1,18 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
+
+interface ProblemEditorPluginSlotProps {
+  blockType: string | null;
+}
+
+export const ProblemEditorPluginSlot = ({
+  blockType,
+}: ProblemEditorPluginSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.authoring.problem_editor_plugin.v1"
+    idAliases={['problem_editor_plugin_slot']}
+    pluginProps={{
+      blockType,
+    }}
+  />
+);
+

src/plugin-slots/TextEditorPluginSlot/README.md

@@ -0,0 +1,108 @@
+# TextEditorPluginSlot
+
+### Slot ID: `org.openedx.frontend.authoring.text_editor_plugin.v1`
+
+### Slot ID Aliases
+* `text_editor_plugin_slot`
+
+### Plugin Props:
+
+* `blockType` - String. The type of block being edited (e.g., `html`).
+
+## Description
+
+The `TextEditorPluginSlot` is rendered inside the Text Editor modal window for HTML XBlocks.
+It is intended as a generic extension point that can host **any React component** – for example:
+
+- **Contextual helpers** (tips, validation messages, writing guides)
+- **Content utilities** (templates, reusable snippets, glossary insert tools)
+- **Integrations** (linking to external systems, analytics, metadata editors)
+
+By default, the slot is **empty**. Widgets are attached via `env.config.jsx` using the
+`@openedx/frontend-plugin-framework`.
+
+The only prop your component receives from the slot is:
+
+- `blockType` – the current editor block type (for this slot it will typically be `html`).
+
+Your component is responsible for interacting with the editor (if needed) using Redux state,
+DOM APIs, or other utilities provided by `frontend-app-authoring`.
+
+## Example: Adding a component into `TextEditorPluginSlot`
+
+The following example configuration shows how to add a custom widget to the slot:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { MyTextEditorHelper } from '@example/my-text-editor-helper';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.text_editor_plugin.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'my-text-editor-helper',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: MyTextEditorHelper,
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+## Example: Custom Implementation
+
+The following example shows a minimal helper component that uses `blockType`:
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Card } from '@openedx/paragon';
+
+const CustomTextEditorWidget = ({ blockType }) => {
+  // Your custom implementation (example)
+  return (
+    <Card>
+      <Card.Body>
+        Custom widget for {blockType} editor 🤗🤗🤗
+      </Card.Body>
+    </Card>
+  );
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.authoring.text_editor_plugin.v1': {
+      plugins: [
+        {
+          widget: {
+            id: 'custom-text-editor-widget',
+            priority: 1,
+            type: DIRECT_PLUGIN,
+            RenderWidget: CustomTextEditorWidget,
+          },
+          op: PLUGIN_OPERATIONS.Insert,
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+### Example: Screenshots
+
+**With a widget rendered in the slot**
+
+![Screenshot with component in TextEditorPluginSlot](./images/html_editor_slot.png)
+
+**Default HTML editor without a widget**
+
+![Screenshot with default HTML editor](./images/default_html_editor.png)

src/plugin-slots/TextEditorPluginSlot/index.tsx

@@ -0,0 +1,19 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
+
+interface TextEditorPluginSlotProps {
+  blockType: string;
+}
+
+
+export const TextEditorPluginSlot = ({
+  blockType,
+}: TextEditorPluginSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.authoring.text_editor_plugin.v1"
+    idAliases={['text_editor_plugin_slot']}
+    pluginProps={{
+      blockType,
+    }}
+  />
+);
+