feat: Add HTML and Problem editors plugin slots #2749

KyryloKireiev · 2025-12-11T11:10:09Z

Description

Added Plugin Slots for HTML and Problem editors;
Added usage examples;
Added configuration examples;

openedx-webhooks · 2025-12-11T11:10:14Z

Thanks for the pull request, @KyryloKireiev!

This repository is currently maintained by @bradenmacdonald.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

PKulkoRaccoonGang

I’ll review this in more detail later, but based on a quick pass, the following updates are needed:

Remove AILab-146 from the PR title.
Consider my suggestion about using import aliases for the new imports introduced in this PR’s diff.
Review the proposal regarding avoiding the use of React.FC<>.

PKulkoRaccoonGang · 2025-12-12T12:15:34Z

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


-import { selectors } from '../../../../data/redux';
+import { selectors, actions } from '../../../../data/redux';
+import { getDataFromOlx } from '../../../../data/redux/thunkActions/problem';


Can we use frontend-aliases for new imports in this PR?

Currently additional imports removed due to ProblemEditorPluginSlot refactored

PKulkoRaccoonGang · 2025-12-12T12:26:23Z

src/plugin-slots/TextEditorPluginSlot/index.tsx

+export const TextEditorPluginSlot: React.FC<TextEditorPluginSlotProps> = ({
+  updateContent,
+  blockType,
+}) => (


[optional]: I’m not a big fan of declaring types using React.FC. Also, looking at the other slots in this repository, they are defined without FC. To keep things consistent, I suggest following the same pattern:

Suggested change

export const TextEditorPluginSlot: React.FC<TextEditorPluginSlotProps> = ({

updateContent,

blockType,

}) => (

export const TextEditorPluginSlot = ({

updateContent,

blockType,

}: TextEditorPluginSlotProps) => (

https://github.com/raccoongang/frontend-app-authoring/blob/kireiev/AILab-146/feat/add_plugin_slots/src/plugin-slots/CourseAuthoringOutlineSidebarSlot/index.tsx

PKulkoRaccoonGang · 2025-12-15T07:46:42Z

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

+                updateContent={(newOLX) => {
+                  // Parse and update the problem state
+                  const rawSettings = {
+                    weight: problemState.settings?.scoring?.weight || 1,


Why is the default height 1 and not 0?

updateContent removed from plugin slot and moved in Plugin implementation.

by default we use weight == 1 for Problem xBlock

PKulkoRaccoonGang · 2025-12-15T07:51:41Z

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

+                    showanswer: problemState.settings?.showAnswer?.on || null,
+                    show_reset_button: problemState.settings?.showResetButton || null,
+                    rerandomize: problemState.settings?.randomization || null,
+                  };


[important]: You are using ||, which means that valid falsy values (0, false) will be replaced with defaults

weight: 0 -> 1 showAnswer.on: false-> null

Let's use nullish coalescing (??) instead of logical OR ||

also moved to AIAssistantWidget component.

Changed to ?? in AIAssistantWidget component.

PKulkoRaccoonGang · 2025-12-15T07:54:43Z

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

          ) : (
            <span className="flex-grow-1 mb-5">
+              <ProblemEditorPluginSlot
+                updateContent={(newOLX) => {


[optional]: In this file, I didn’t notice this, but it would be good to introduce a new updateProblemEditorContent function and move all logic related to updating the content for ProblemEditorPluginSlot into it

Function updateContent removed from ProblemEditorPluginSlot

PKulkoRaccoonGang · 2025-12-15T07:56:31Z

src/editors/containers/TextEditor/index.jsx

+            <>
+              <TextEditorPluginSlot
+                updateContent={(newContent) => {
+                  // Update the editor


It seems to me that, based on the updateContent prop name, it’s already clear that this is responsible for updating the content. So let’s remove this comment.

Removed.

updateContent function also removed from TextEditorPluginSlot

PKulkoRaccoonGang · 2025-12-15T07:58:20Z

src/editors/containers/TextEditor/index.jsx

+          ) : (
+            <>
+              <TextEditorPluginSlot
+                updateContent={(newContent) => {


[optional]: In this file, I didn’t notice this, but it would be good to introduce a new updateTextEditorContent function and move all logic related to updating the content for TextEditorPluginSlot into it

updateContent removed

PKulkoRaccoonGang · 2025-12-15T08:16:18Z

src/plugin-slots/ProblemEditorPluginSlot/README.md

+- The `blockType` prop may be in different formats:
+  - API format: `problem-single-select`, `problem-multi-select`, etc.
+  - OLX format: `multiplechoiceresponse`, `choiceresponse`, etc.
+  - Generic: `problem`, `advanced`


Should there be some code example here?

Removed entirely, because ProblemEditorPluginSlot and TextEditorPluginSlot know nothing about possible backend implementation inserted plugin

PKulkoRaccoonGang · 2025-12-15T08:17:53Z

src/plugin-slots/TextEditorPluginSlot/index.tsx

@@ -0,0 +1,36 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
+import React from 'react';


Do we need this React import?

PKulkoRaccoonGang · 2025-12-15T08:18:10Z

src/plugin-slots/TextEditorPluginSlot/index.tsx

+interface TextEditorPluginSlotProps {
+  /** Function to update editor content with new content */
+  updateContent: (content: string) => void;
+  /** Block type (e.g., 'html') */
+  blockType: string;
+}


Suggested change

interface TextEditorPluginSlotProps {

/** Function to update editor content with new content */

updateContent: (content: string) => void;

/** Block type (e.g., 'html') */

blockType: string;

}

interface TextEditorPluginSlotProps {

updateContent: (content: string) => void;

blockType: string;

}

PKulkoRaccoonGang · 2025-12-15T08:18:58Z

src/plugin-slots/TextEditorPluginSlot/index.tsx

+/**
+ * Plugin slot for Text Editor (HTML xBlocks)
+ * 
+ * Slot ID: `org.openedx.frontend.authoring.text_editor_plugin.v1`
+ * 
+ * This slot allows plugins to add custom widgets to the HTML/text editor.
+ * By default, the slot is empty. Add widgets via `env.config.jsx`.
+ * 
+ * Plugin Props:
+ * - `updateContent`: Function to update editor content with new content
+ * - `blockType`: Block type (e.g., 'html')
+ */


I reviewed several other plugin slots in this repository and didn’t find similar descriptive comments being added. I suggest removing this, since we already have a README.md file next to this plugin slot that documents all the necessary information about the plugin slot API.

PKulkoRaccoonGang · 2025-12-15T08:21:19Z

src/plugin-slots/TextEditorPluginSlot/README.md

+
+## Example: Screenshot with custom implementation
+
+![Screenshot with custom implementation](./images/custom_ai_assistant_html.png)


In the documentation for this plugin slot, let’s also follow the same structure used by other plugin slots in this repository. Images should be placed under a heading with the name of the corresponding example.

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

src/editors/containers/TextEditor/index.jsx

PKulkoRaccoonGang · 2025-12-15T11:34:01Z

src/plugin-slots/ProblemEditorPluginSlot/README.md

+- **Advanced/Raw Editor Mode**: Where the widget can generate raw OLX or Markdown content that is directly inserted into the CodeMirror editor.
+
+## Example: Adding the AI Content Assistant
+


If we don’t want to mention anything about the AI Assistant, should we update the other description as well?

PKulkoRaccoonGang · 2025-12-15T11:35:16Z

src/plugin-slots/ProblemEditorPluginSlot/README.md

+![Screenshot with custom implementation](./images/default_problem_editor.png)
+
+### Example: Screenshots with passed component into plugin slot for Problem editor
+![Screenshot with hidden AIAssistantWidget](./images/problem_editor_slot.png)


Should these images be placed under the corresponding usage example? And do we want to mention the AI Assistant Widget?

PKulkoRaccoonGang · 2025-12-15T11:35:41Z

src/plugin-slots/TextEditorPluginSlot/index.tsx

+  blockType: string;
+}
+
+


Do we need this extra space?

PKulkoRaccoonGang · 2025-12-15T11:37:16Z

src/plugin-slots/TextEditorPluginSlot/README.md

+
+## Description
+
+The slot is positioned in the Text Editor modal window for HTML XBlocks. It is suitable for adding AI-powered content generation tools or other editor enhancements.


Should we write the plugin slot description in a more general way? I don’t think we need to focus on “AI-powered content generation tools,” since this slot can be used for anything.

PKulkoRaccoonGang · 2025-12-15T11:38:31Z

src/plugin-slots/TextEditorPluginSlot/README.md

+
+### Example: Screenshot with default HTML Editor
+
+![Screenshot with custom implementation](./images/default_html_editor.png)


Should these images be placed under the usage example heading, following the pattern used in the documentation for other plugin slots?

Yes, thanks. I forgot a lot of the artifacts that were left over from the previous description, which included AI Assistant Widget. Now I deleted all artifacts and rewrite docs.

Co-authored-by: Peter Kulko <[email protected]>

feat: [AILab-146] HTML and Problem plugin slots

2df1ba6

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Dec 11, 2025

openedx-webhooks added this to Contributions Dec 11, 2025

github-project-automation bot moved this to Needs Triage in Contributions Dec 11, 2025

KyryloKireiev marked this pull request as draft December 11, 2025 11:10

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Dec 11, 2025

PKulkoRaccoonGang suggested changes Dec 12, 2025

View reviewed changes

PKulkoRaccoonGang suggested changes Dec 15, 2025

View reviewed changes

KyryloKireiev changed the title ~~feat: [AILab-146] HTML and Problem plugin slots~~ feat: Add HTML and Problem editors plugin slots Dec 15, 2025

kyrylo.kireiev added 2 commits December 15, 2025 12:32

refactor: remove functions from plugin slots

e3745e9

fix: remove unused import

8d74dd7

KyryloKireiev marked this pull request as ready for review December 15, 2025 10:36

PKulkoRaccoonGang reviewed Dec 15, 2025

View reviewed changes

KyryloKireiev and others added 4 commits December 15, 2025 17:00

refactor: remove hardcoded problem value

9271857

Co-authored-by: Peter Kulko <[email protected]>

refactor: remove hardcoded html value

4b782e7

Co-authored-by: Peter Kulko <[email protected]>

docs: rewrite and improve docs

1ea6e4c

fix: add forgotten imports

a31aa94

		@@ -0,0 +1,36 @@
		import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
		import React from 'react';


		## Example: Screenshot with custom implementation

		![Screenshot with custom implementation](./images/custom_ai_assistant_html.png) No newline at end of file

		- Advanced/Raw Editor Mode: Where the widget can generate raw OLX or Markdown content that is directly inserted into the CodeMirror editor.

		## Example: Adding the AI Content Assistant


		## Description

		The slot is positioned in the Text Editor modal window for HTML XBlocks. It is suitable for adding AI-powered content generation tools or other editor enhancements.


		### Example: Screenshot with default HTML Editor

		![Screenshot with custom implementation](./images/default_html_editor.png) No newline at end of file

feat: Add HTML and Problem editors plugin slots #2749

Are you sure you want to change the base?

feat: Add HTML and Problem editors plugin slots #2749

Conversation

KyryloKireiev commented Dec 11, 2025

Description

Uh oh!

openedx-webhooks commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PKulkoRaccoonGang left a comment

Choose a reason for hiding this comment

Uh oh!

PKulkoRaccoonGang Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

openedx-webhooks commented Dec 11, 2025 •

edited

Loading

PKulkoRaccoonGang Dec 12, 2025 •

edited

Loading