Skip to content

Refactor Hast to ProseMirror converter API

What does this MR do and why?

It changes the API of the HAST to ProseMirror converter module. The original API indicates that a HAST Node should be mapped to a ProseMirror node or mark using the following object structure:

h1: {
  block: 'heading',
}

h1 is the Hast node name, and the block property contains the ProseMirror node name that should be created from the Hast Node. This structure has one big downside. Imagine that we have two HAST nodes with the same name and different attributes that represent two ProseMirror nodes, for example:

<ul>

</ul>
<ul class="task-list">

</ul>

In this case, we need to map the bullet list without a class selector to the bulletList ProseMirror node, and we need to map the bullet list with the class selector to the taskList ProseMirror node. The new structure allows that kind of flexibility:

bulletList: {
  type: 'block',
  selector: (hastNode) => hastNode.tagName === 'ul' && hastNode.properties.className.length === 0,
},
taskList: {
  type: 'block',
  selector: (hastNode) => hastNode.tagName === 'ul' && hastNode.properties.className.includes('task-list'),
}

How to review this MR?

I recommend checking this branch locally, and reading the documentation changes in app/assets/javascripts/content_editor/services/hast_to_prosemirror_converter.js. Then I recommend reading how we are using the new API in app/assets/javascripts/content_editor/services/remark_markdown_deserializer.js

Screenshots or screen recordings

This MR doesn’t introduce user-facing changes.

How to set up and validate locally

If all the tests in spec/frontend/content_editor/remark_markdown_processing_spec.js pass, these changes work as expected. The tests ensure that the original behavior didn’t change by applying the refactoring.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Enrique Alcántara

Merge request reports