Description
Zulip's Markdown flavor supports TeX for mathematical notation, using KaTeX. This will be one of the more complex message-content features for us to support.
The way this works for web and for the existing RN-based mobile client is:
- KaTeX consists of some JavaScript code to convert TeX into HTML, and then some CSS to style that HTML. The KaTeX-generated HTML also has some per-element style attributes.
- The server takes care of the conversion to HTML, by running the KaTeX JS code on Node. That HTML goes into the message's HTML content.
- Then the web and RN-mobile clients ship with KaTeX's CSS, and include that in their styles.
- Those clients also ship with the KaTeX JS code. They use that for local echo.
What I think we'll want to do in Flutter is:
- Skip TeX for local echo, and just show the source TeX. That seems fine.
- If we implement a "preview" feature for before sending a message, then it'll be important to get the actual rendering there… but even the web app relies on the server for its preview feature. So we'll do the same.
- Then we'll consume KaTeX HTML and convert it into Flutter widgets, just like we consume other kinds of Zulip content HTML and convert it into Flutter widgets, in
lib/model/content.dart
andlib/widgets/content.dart
.
Converting the HTML to Flutter widgets will involve having code in lib/widgets/content.dart
that is written to correspond to the KaTeX CSS, just like much of the existing code there is written to correspond to the Zulip markdown-content CSS.
That CSS is a few hundred lines of code. It's written in Less; but looking at the compiled output, it's not much longer than that source, and most of the difference is highly repetitive. So the real amount of information there is about what's in that one source file. That file is also highly stable over time — just as one might hope, given that TeX itself is famously extremely stable — with the last non-NFC change 20 months ago, in 2021-07.
So while this won't be a small subproject, it's one where I'm pretty confident we can do it well.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status