Create a HTML-to-CE parser

Created on 17 December 2024, 24 days ago

Problem/Motivation

Rich text fields are currently rendered as a single Element, we should have the option to parse the HTML and render each tag as structured Custom Elements.

Proposed resolution

Creating a CustomElementsFormatter which parses HTML DOM and recursively create a Custom Elements Tree.

Feature request
Status

Active

Version

3.0

Component

Code

Created by

🇹🇳Tunisia benellefimostfa

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @benellefimostfa
  • Merge request !108add html to custom elements formatter → (Open) created by benellefimostfa
  • Pipeline finished with Success
    23 days ago
    Total: 195s
    #370977
  • Pipeline finished with Success
    23 days ago
    Total: 193s
    #371046
  • 🇳🇱Netherlands roderik Amsterdam,NL / Budapest,HU

    We discussed this in person.

    The original intent for creating this ticket, was a "HTML to CE parser", that should not be inside a CE Field Formatter. It should be a helper class/service. (Unless it turns out to be so easy that no parser is even needed.)

    Naming: either CustomElementHtmlParser or CustomElementUnserializer, I guess. (Does not need an interface; CustomElementGenerator also is a service without interface.)

    This came out of a strangely-specified internal ticket. Just parsing the HTML to CE and outputting it as JSON unchanged is not a good use case for a Field Formatter. (It is very well possible that we will create a Field Fromatter later, once we do something with the parsed CE structure and actually change it. But that's a broader scope for this ticket.

    How to continue:

    After my interactive review, we realized that I don't even know enough about slots etc. to be of good help in reviewing all details. E.g. I have questions about how this example would be represented in a Custom Elements structure:

    <p>There is text before <em>an emphasized string</em> and also after it.</p>
    

    ...and whether to use addSlot() or something else.

    So:

    Likely a good use of your time is to first do 📌 Create test for checking markup serialization Active , which will make you work with the CustomElement class and which is very necessary.

    After you implement the "CE with attributes, no children", you will have a decent structure for the test and I can assist if you have any questions about slots (which I do not currently have answers to).

    We can get back to this ticket after that is done. Then we can

    • decide whether a separate 'unserializer' is worth it, or super simple / where to implement it
    • add tests for it. (Various examples, unserialize and then re-serialize to HTML markup and see if it is still the same? Or?)
    • decide whether to move on with adding a Field Formatter (likely in a separate followup issue) for specific functionality, or whether that is going to stay 'custom' code.

    A Field

Production build 0.71.5 2024