Overview: RichText, APIs, & Formatting Library

[ellatrix]

Just wanted to make part of my to do list for the Rich Text package public so it is out there and people can help if they'd like, add items, etc. This is a bit of a "living issue".

Formatting Library

• Text colour. (Not sure if @gziolo has anything it merge.)
• (Foot)notes.
• Checklist button in the list block.
• Mentions rewrite.

Roadmap

• Make RichText a completely controlled component. This means that the current value is continuously applied to the DOM, without exception.
• Use React to render the rich text tree (and take advantage of its diffing). Currently we build a DOM tree and diff it ourselves. The challenge here will be the selection, but I have some ideas. Another challenge will be that the DOM can be changed by the browser in a way that React is not expecting. I've encountered errors in previous attempts, and I'm unsure how to solve it.
• API for rendering more complex structures in RichText with React, probably as a save method in the format type object.
• Add an <Autocomplete> component that can be used by formats. This can help us move mentions to the format library, but is also very useful for plugins.
• API for inserting or replacing content at the caret on input. The "text patterns" need to be moved to the format library.
• Stabilise API to apply formatting on editable tree creation, used by e.g. annotations, spell checking, visualising invisible characters...
• Introduce a way to manage focus on the RichText editor. (Introduce a way to manage focus on the RichText editor #9740)

Low priority

• I would love to eventually move wptexturize into RichText. It makes the visual editor more visual, and it allows the user to undo it. It would also solve long standing bugs with wptexturize where it is not able to handle HTML tags well. In rich text values, text and formatting are separated, so it's fairly easy to implement.
• Visualise unknown tags/formatting.
• Visualise invisible characters like non breaking spaces.
• Hopefully at some point the list block could be rewritten to use a RichText instance per list item. I think this would be needed if we ever want to add movers per list item. This seems low priority though. See List Block: Try nesting with InnerBlocks #6394.
• Rewrite the quote blocks to use nested blocks, so they can contain lists etc. This would also help reduce the complexity of RichText, although I'm fine with keeping multiline capabilities.
• Find ways to make toTree faster.

Docs

• Add more inline documentation where they are lacking.
• Explain how the rich text value works.
• Add more examples of capabilities.

[phpbits]

Just created my first PR for text color. I need guidance on proper testing though if I missed something. Thanks a lot in advance.

[marybaum]

Some pals and I had this conversation yesterday. There are no doubt branches and offshoots I've missed capturing, but here it is: https://twitter.com/ChrisWiegman/status/1137449406108594176

[ellatrix]

@marybaum I'm not sure what we can do with that thread? Any specific thing that should be added to this roadmap?

[gziolo]

@ellatrix can we add the item to make it consistent when pressing enter on empty line new Paragraph blocks is crated for all text blocks? It works for:

• Paragraph
• List
• Quote as of Writing Flow/Quote: allow splitting #17121

I experimented with Verse block in #16880 but it was far from production quality :)

[mtias]

@ellatrix what's the state of these tasks?

[ellatrix]

There's still a lot of items left here. I'll look into footnotes after the iframe PRs are done.

[SeanDS]

@ellatrix Just wondering if these items are still being worked on? I'd be interested to see (and help test) the "API for rendering more complex structures in RichText" option so I can allow users to write inline MathJax MathML markup in paragraphs.

[ellatrix]

@SeanDS Thanks for mentioning a use case. Curious, would this MathJax markup be React?

[SeanDS]

Sorry I meant MathML, not MathJax. And React isn't really involved as far as I can tell. The background is that I have a "TeX" block for rendering mathematics, but this of course only works as a block. I'd also like to add support for rendering inline mathematics inside paragraphs, ideally in a form similar to how the URL tool currently works: a popup where the user can write some TeX markup, and then when closed this can be rendered in math form using MathML (e.g. via KaTeX). Another behaviour could be to let users write out some TeX inside a paragraph, then highlight it and click a "TeX" format button (similar to "bold") and have it convert to equivalent MathML (read-only).

I tried to make this work using the format API as of last year but ran into problems because the format API seems to require that the text being formatted is wrapped in some tag(s) rather than completely replaced by something else (see #19756). In my case, I would want to replace the user's raw markup (e.g. \frac{1}{2}) with some MathML.

[SeanDS]

I should also add a general point: if the format API is really supposed to replace shortcodes, then I think it needs some way to replace text with arbitrary HTML rather than just wrapping existing text.

[ellatrix]

Have you tried setting object: true in the format type? You can insert an object with any kind of data. You'd have to set the MathML as the wrapper tag name. Not sure if it would work with an HTML tree rather than a single element. Maybe we need some logic to ignore children of an element that is matched as an object.

[SeanDS]

I'll try that and report back, thanks for the hint.

[SeanDS]

@ellatrix, I have indeed run into the issue of not being able to add child nodes tree into my wrapper tags with insertObject. Ideally I'd like to make the wrapper tags <span> and add RawHTML elements inside it (these would contain my MathML). Is there a possibility this could be supported?

EDIT: I suppose I could have KaTeX render the MathML into the <span>, but that seems dangerous since it's rendering into a component that's being controlled by React.

[ellatrix]

It's possible. Could you maybe create a separate issue? Not sure when I'll have the time to work on this myself.

[x029a]

Fascinating. Has there been any traction on this @ellatrix? I'm using Gutenberg with a custom renderer, and makes heavy use of the format API. My renderer pares out attributes, uses them as props for react-components and uses that as information to compose the view, replacing my custom tags with react components.

I'd like to, in the Gutenberg editor view, replace the text in the editor that is having the format applied to it, with a react component - and I think this would help me achieve that :)

[mkkeck]

Hello,

I'm trying to register a format type, which renders a popover to enter class names and then inserts <span class="my-entered-class my-second-class...">selected text (perhabs with HTML)</span>. May this possible?

When I try to register a new format type, e.g. for the span-tag, then I get an error, the span tag was registered for underline.

I think, underline should use -tag.

Is there any hook, to filter or add actions in registering and unregistering format types?

Is it possible to extend an existing format type, e.g. the link, to enable custom class names, data-attributes and schema data, wich can entered in the link popover?

[ellatrix]

Let's close this for now and create a new overview if needed.