HTML Editor: Code-view option to edit raw HTML

[Aleks-gdb]

The HTML editor in the new designer does not allow to edit raw HTML of the email body:

[ek68794998]

I will probably start taking a look at this. @hartra344 or @Eric-B-Wu do either of you have any input on how the design of this should go?

[ek68794998]

Progress (same branch as above):

Switching back still has a lot of work to do.

[ek68794998]

More progress, but the format of the token is lost (switches from $[ ]$ to @{ }).

Assuming this is caused by how the token is serialized when we call getTextContent:

[ek68794998]

I have a working prototype but I did a few things that I am not sure are a good idea:

1. I changed the getTextContent mentioned above to be the same as toString (i.e., to use $[ ]$). This probably breaks copy/paste.
2. There are now two levels of encoding: We need to encode < and > before putting them into the temporary DOM used by convertEditorState, and we need to encode & and " after they are put into the temporary DOM. Doing all four symbols at the same time (before or after) causes issues.
3. Not sure if the method used by <Toolbar /> to control the raw editor state is really a good practice, or if that should be controlled by the parent component.

I also do not yet have any detection in the code for 1) extraneous style= tags added by Lexical, or 2) tags not supported by Lexical.

@Eric-B-Wu Would be great if we can grab some time Thursday or Friday to sync up on the items above and figure out the best path forward.

But here is an animation of the working change. Still needs UI design fixes.

[ek68794998]

Major progress thanks to Eric Wu's help:

Still remaining:

• Some encoding issues
• Robust testing
• Strip out the whitespace: pre-wrap attributes

[ek68794998]

PR opened: #3849