[BD-14] 6/24/22 Problem Editor Contribution Ask

Owned by Connor Haugh
Sept 20, 2022
2 min read

 Hi Farhaan:

Here’s where things stand, and where your contribution might be most helpful.

Here is the current “skeleton” PR for the problem editor. https://github.com/edx/frontend-lib-content-components/pull/87

There is certainly plenty of UI work to be done, but the basic structure is laid out.

What is missing is effective conversions between the three data representations of a problem in the cases we need.

In the table and diagram, I have described the necessary flow. We would love for there to be a “Hub & spoke” model for an intermediary language, where all saves of an editor are loaded and saved directly from OLX. We understand, however, that the CAPA visual editor for labxchange already required a markdown-> react state transformer, so however we can most efficiently build the requisite transformers so that saving state works, we will be happy.

 

Type

Frontend

On “Load”

On “Save”

OLX (XML)

Used to power the legacy “advanced” editor

Returned as ‘data’ in the xblock object from the Get to the xblock API

Required for any save.

Markdown

Used to power the legacy “markdown” editor

Returned in the ‘studio_view’ and in the metadata of the xblock api call

Optional, but saving without it will cause future loads to potentially not have markdown in them.

React State (Redux)

Used to power the visual editor

Not Present

Not Present

 

For Opencraft: Potential Tickets:

Create Markdown->React State Transformer:

Acceptance Criteria:

  • Utilizes MardownParser.js to complete the two methods required in src/editors/containers/ProblemEditor/data/redux/thunkActions/app.js which map the markdown of a problem to the react state specified in src/editors/containers/ProblemEditor/data/redux/app/reducers/intialState

  • Contains unit tests for each of these parsers (labexchange problem editor might be helpful for this.)

Create React State -> OLX Transformer

Acceptance Criteria:

  • Converts React State to both markdown and perhaps also OLX if that is required for save in the captureMarkdownAndSettings hook in src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

  • Formats these into the requisite getContent function.

  • Contains unit tests for each of these transformers.