KaTeX (1/n): Initial support for displaying basic KaTeX content #1408

rajveermalviya · 2025-03-13T15:31:40Z

This initial implementation include:

Displaying the characters in their corresponding
custom text styles (fonts, font weight, font style).
Character and symbol sizing.
And some subset of inline styles.

This results in support for displaying some simple KaTeX functions.

Related: #46

gnprice

Exciting!

Generally this structure looks good. Here's a high-level review — so just a handful of comments mostly about things that I think will help make the changes clearer to understand.

Then once these aspects look good (should be quick, I think), we'll do maintainer review as usual.

gnprice · 2025-04-01T21:27:31Z

test/model/settings_test.dart

+      check(globalSettings).getBool(BoolGlobalSetting.renderKatex)
+        .isFalse();
      assert(!BoolGlobalSetting.placeholderIgnore.default_);
+      assert(!BoolGlobalSetting.renderKatex.default_);


No need to add these feature flags to the tests (or to remove them from the tests when later taking them out) — adding them can be purely a matter of the one line adding the enum value, plus its dartdoc (and blank line above that).

That also means that adding the feature flag can be squashed into the first commit that uses it.

gnprice · 2025-04-01T21:30:41Z

lib/model/katex.dart

+      final spanClass = spanClasses[index];
+      switch (spanClass) {
+        case 'textbf':
+          // .textbf { font-weight: bold; }


These are quoting from KaTeX's CSS (or rather the source file for its CSS), and that's an important reference for understanding this code. So let's include a link to that in a comment.

gnprice · 2025-04-01T21:42:02Z

lib/model/content.dart

+  final String? text;
+  final List<KatexSpanNode> nodes;


It looks like these two are mutually exclusive: there's always at most one present, and in fact exactly one.

Let's make that invariant explicit in this class, by at least an assertion at the constructor.

It'd be good to also add some dartdoc on these two fields to say how they relate to each other and to the parent node.

gnprice · 2025-04-01T21:47:36Z

lib/model/content.dart


  final String texSource;
+  final List<KatexSpanNode>? nodes;


It looks like the next PR #1452 changes this to be a list of KatexNode, a new common base class for KatexSpanNode and some others.

It's probably cleanest if this says KatexNode from the start, then. That makes the conceptual relationship to this parent node (MathBlockNode) somewhat clearer — it's not that a math block necessarily contains only "KaTeX span nodes" as direct children, it can contain "KaTeX nodes" in general, and it's just that at this stage the spans are the only kind of KaTeX node that are yet implemented.

gnprice · 2025-04-02T00:24:29Z

lib/model/katex.dart

+          default:
+            // TODO handle more CSS properties
+            assert(debugLog('Unsupported CSS property: $property of type ${expression.runtimeType}'));
+        }


It seems like this code has three levels of how well it supports a given KaTeX blob:

The HTML doesn't follow any structure we've yet anticipated. The parser in this file throws KatexHtmlParseError, producing nodes of null.

The HTML contains something we know we don't yet support, but there's no exception; nodes ends up with some kind of parse result.

The HTML consists only of constructs we believe are fully supported — meaning we believe the current version of the code will produce widgets that make the intended math show up exactly the same as with KaTeX on the web.

This default case is an example of that middle state.

The middle state is very useful for development: you want to let the parser do its thing as best it currently can, and see how the resulting widgets look, while you work on supporting that case.

But I'd also really like to be able to run the parser in a mode where it will only accept constructs we believe are fully supported. That way we can run it on a corpus of public messages collected by the scripts in tools/content/, and get a survey of what remains to be implemented. That mode could also be useful for turning KaTeX support on by default, but only for expressions we believe will show up exactly right, and for other expressions falling back to the raw TeX like we do in main today.

I think the most effective way to draw that boundary will be to do so starting in this first PR, so that when we include a given construct on the "fully supported" side of it we do so at the same time as we're implementing support for that construct and thinking about it in detail.

Maybe have two experimental flags?

One flag enables showing KaTeX at all. Things that are fully supported get rendered; things that are incompletely supported, just like those not supported, get the fallback.

A second flag enables showing KaTeX even where it's incomplete — so the behavior this revision has when renderKatex is true. (When the first flag is false, this one would just do nothing.)

Then when support is mostly complete, we might turn the first flag into always-true, while keeping the second flag as experimental (and default-false).

OK, added another flag (forceRenderKatex) to control if the KaTeX content should be rendered even if there were some errors encountered while parsing the HTML. Currently, the "ignorable errors" happen either when the parser encounters an unknown CSS class or an unknown CSS property in the inline styles.

rajveermalviya · 2025-04-02T21:43:14Z

Thanks for the review @gnprice. Pushed an update, PTAL.

gnprice

Thanks for the revision!

This resolves the high-level feedback I had — @PIG208, over to you for maintainer review.

gnprice · 2025-04-02T21:49:26Z

lib/model/katex.dart

+      }
+
+      // Work around the duplicated case statement with a new switch block,
+      // to preserve the same order and to keep the cases mirroring the CSS
+      // definitions in katex.scss .
+      switch (spanClass) {


Ah, I had wondered about these two separate switch statements 🙂 — this comment is helpful.

PIG208

Thanks for working on this! I just went through the entire PR and played with this a bit on my device. It looks pretty good!

With regards to testing, I'm not sure what the current plan is. It doesn't seem quite useful to have tests structured basically a duplicate of all the KaTeX classes we support. Maybe it would be better to test with examples crawled online?

PIG208 · 2025-04-03T00:14:26Z

assets/KaTeX/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)


fonts: Add KaTeX custom fonts These fonts will be used in later commits to show KaTeX content.

For future reference, perhaps we can also mention where we found these fonts in the commit message with a link.

PIG208 · 2025-04-03T00:47:54Z

test/widgets/content_test.dart

+    testWidgets('displays TeX source; experimental flag default', (tester) async {
+      final globalSettings = testBinding.globalStore.settings;
+      await globalSettings.setBool(BoolGlobalSetting.renderKatex, null);
+      check(globalSettings.getBool(BoolGlobalSetting.renderKatex)).isFalse();


nit: we can use check(globalSettings).getBool here

PIG208 · 2025-04-03T01:04:26Z

lib/model/content.dart

@@ -864,7 +906,10 @@ class GlobalTimeNode extends InlineContentNode {

 ////////////////////////////////////////////////////////////////

-String? _parseMath(dom.Element element, {required bool block}) {
+({List<KatexNode>? spans, bool debugHasError, String texSource})? _parseMath(


Perhaps it would be cleaner to make a class for the return value of this, and make factories for classes are constructed from the result?

PIG208 · 2025-04-03T01:07:00Z

lib/model/content.dart

          result.add(MathBlockNode(
-            texSource: texSource,
+            texSource: parsed.texSource,
+            nodes: parsed.spans,


Is it intentionally that we leave out debugHasError for this?

PIG208 · 2025-04-03T01:12:13Z

lib/model/katex.dart

+    //
+    // Each case in the switch blocks below is a separate CSS class definition
+    // in the same order as in katex.scss :
+    //   https://github.com/KaTeX/KaTeX/blob/2fe1941b7e6c0603680ef6edd799bd8a8b46871a/src/styles/katex.scss


nit: use just the first 8 characters of the commit hash to shorten the line

(FTR the length I normally use is 9 hex digits: https://github.com/zulip/zulip-mobile/blob/main/docs/style.md#mentioning-commits

Use 9 (or 10) hex digits to identify a commit. To help make this convenient, you can tell Git to routinely print 9-digit abbreviations for you by setting git config core.abbrev 9.

Rationale: The full 40 hex digits is a lot, and generally doesn't flow well in prose. On the other hand 7 hex digits, which is what GitHub shows in its UI whenever it doesn't show 40, is short enough that there's a material risk of collisions: in zulip.git there are already a handful of commits that are ambiguous when identified by just 7 digits, and in a very large project like the Linux kernel such collisions can become routine.

A 9-digit abbreviation is still short enough to fit well in running text; and it's long enough that it's extremely unlikely any given such abbreviation will ever be ambiguous.

For KaTeX 8 is fine and probably 7 would be fine, because it's a smaller repo; but I just use 9 everywhere to simplify.)

PIG208 · 2025-04-03T02:29:37Z

lib/model/katex.dart

+
+  KatexSpanStyles? _parseSpanInlineStyles(dom.Element element) {
+    if (element.attributes case {'style': final styleStr}) {
+      final stylesheet = css_parser.parse('*{$styleStr}');


Not sure if we need to sanitize styleStr. I guess not: the html package might have done that, and in the worst case this will just fail to parse.

Regardless, it should be helpful to explain why we want to wrap styleStr here.

PIG208 · 2025-04-03T02:37:07Z

lib/model/katex.dart

+    if (expression is css_visitor.EmTerm && expression.value is num) {
+      return (expression.value as num).toDouble();
+    }
+    return null;


Is this case, i.e. non-em values, something that we eventually want to add support for?

We only support em values currently because, they are the only ones observed in the Katex HTML currently, but if we encounter any other than this will return null and we handle that later in switch block. Error-ing if we get an unexpected type (non-em).

PIG208 · 2025-04-03T02:39:10Z

lib/model/katex.dart

+        switch (property) {
+          case 'margin-left':
+            marginLeftEm = _getEm(expression);
+            if (marginLeftEm != null) continue;


nit: this continue and the following ones look like no-ops

PIG208 · 2025-04-03T02:43:04Z

lib/model/katex.dart

+
+          default:
+            // TODO handle more CSS properties
+            assert(debugLog('Unsupported CSS property: $property of type ${expression.runtimeType}'));


Should we also use _logError here?

PIG208 · 2025-04-03T02:47:37Z

lib/model/katex.dart

+}
+
+class KatexSpanStyles {
+  double? heightEm;


Looks like heightEm was introduced here but not used/handled. Is this intended for the next PR?

gnprice · 2025-04-03T16:31:48Z

With regards with testing

Yeah, good question. It looks like the current version of the PR doesn't add tests for most of the functionality. Let's at a minimum have tests that cover the interesting logic like for sizing and delimsizing.

It doesn't seem quite useful to have tests structured basically a duplicate of all the KaTeX classes we support. Maybe it would be better to test with examples crawled online?

I think these are two complementary types of tests which are both useful:

In the test suite, we have examples that are simplified as much as possible — to make them clear to understand, and easy to update for refactorings when needed — while still being complex enough to exercise the desired logic.
Outside the test suite, but at times like when we're doing major development on this area, we systematically test a corpus of public real-world examples. When that finds things we'd previously missed, we take those examples and reduce them into new test cases to add to the test suite.

We'll definitely want to be doing the second kind once we're a couple of PRs in to this current effort and feel that we've covered the majority of usage — it'll help us prioritize which remaining areas to do next.

rajveermalviya · 2025-04-08T18:29:45Z

Thanks for the review @PIG208! Pushed an update, PTAL.

PIG208

Thanks for the revision! I did another pass and left some small comments.

PIG208 · 2025-04-10T00:16:56Z

lib/model/katex.dart

+  final String texSource;
+}
+
+MathParserResult? parseMath(dom.Element element, { required bool block }) {


Let's have a dartdoc for this function, for things like the meaning of null as the return value and what is expected of element.

PIG208 · 2025-04-10T00:29:07Z

lib/model/katex.dart

+            switch (property) {
+              case 'height':
+                heightEm = _getEm(expression);
+                if (heightEm != null) continue;


Similar to #1408 (comment), I'm not sure if we need continue's here.

Sorry, I should've replied to the above comment how I addressed it in the revision.

I had addressed that bug by moving the _logError call outside of the switch block. If _getEm returns null then the condition here will be false, in which case it would fall down to _logError where the error will be logged – reporting we got something other than em here.

Ah that makes sense. Thanks.

PIG208 · 2025-04-10T00:50:37Z

tools/content/unimplemented_features_test.dart

@@ -33,6 +34,8 @@ import 'model.dart';
 /// * lib/model/content.dart, which implements of the content parser.
 /// * tools/content/fetch_messages.dart, which produces the corpora.
 void main() async {
+  TestZulipBinding.ensureInitialized();


Since this is a bit different from regular tests, it might be worth it to explain why we need this here.

nit: remove "to" from "retrieves the GlobalSettings to for the experimental flag".

PIG208 · 2025-04-10T00:54:41Z

lib/model/content.dart

+
+  /// The text or a single character this KaTeX span contains, generally
+  /// observed to be the leaf node in the KaTeX HTML tree.
+  /// It will be null if this span has child nodes.


This seems to be talking about a "span", do we expect all KatexNode's to each correspond to a _KatexSpan?

PIG208 · 2025-04-10T00:59:42Z

lib/widgets/content.dart

+          fontSize: kBaseFontSize * 1.21,
+          fontFamily: 'KaTeX_Main',
+          height: 1.2),


1.21 and 1.2 seem quite mysterious. Let's perhaps create some const's for them or leave some comments explaining them.

PIG208 · 2025-04-10T01:08:13Z

lib/widgets/content.dart

@@ -805,7 +805,6 @@ class MathBlock extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final contentTheme = ContentTheme.of(context);
-


Looks like this belongs to another commit: 32aea8e

rajveermalviya · 2025-04-10T14:24:10Z

Thanks for the review @PIG208! Pushed an update, PTAL.

PIG208 · 2025-04-10T20:03:43Z

Thanks for the revision! I just tried this out locally again. Marking this for Greg's review. Left a question on the font style.

gnprice

Thanks @rajveermalviya for building this, and @PIG208 for the previous reviews!

Exciting to have this feature underway. Here's a review of the first 7/8 commits:
f7a4721 deps: Add csslib as a direct dependency
b4b38d7 fonts: Add KaTeX custom fonts
0106b95 content [nfc]: Alias package:intl import as intl
671fa12 content [nfc]: Use Dart patterns for parsing math content
1fca686 binding: Add getGlobalStoreSync method
7609852 content: Add KaTeX spans parser, initial rendering; w/o styles
c273b0a content: Support basic text styles for KaTeX content

so leaving one more for a later round:
0a8c846 content: Support parsing and handling inline styles for KaTeX content

(I see Zixuan also has one open comment just above.)

gnprice · 2025-04-11T21:42:08Z

lib/model/binding.dart

+  /// Get the app's singleton [GlobalStore], null if not already loaded.
+  ///
+  /// Where possible, use [GlobalStoreWidget.of] to get access to a [GlobalStore].
+  /// Use this method only in contexts like notifications where
+  /// a widget tree may not exist.
+  GlobalStore? getGlobalStoreSync();


Suggested change

/// Get the app's singleton [GlobalStore], null if not already loaded.

///

/// Where possible, use [GlobalStoreWidget.of] to get access to a [GlobalStore].

/// Use this method only in contexts like notifications where

/// a widget tree may not exist.

GlobalStore? getGlobalStoreSync();

/// Get the app's singleton [GlobalStore] if already loaded, else null.

///

/// Where possible, use [GlobalStoreWidget.of] to get access to a [GlobalStore].

/// Use this method only in contexts where getting access to a [BuildContext]

/// is inconvenient.

GlobalStore? getGlobalStoreSync();

Because this new method doesn't cause the global store to get loaded if it wasn't already, it's really most useful in contexts where a widget tree does presumably exist (because that will have caused the global store to get loaded).

gnprice · 2025-04-11T21:49:26Z

test/widgets/content_test.dart

+    testWidgets('displays TeX source; experimental flag enabled', (tester) async {
+      final globalSettings = testBinding.globalStore.settings;


A test should always reset the binding state if it manipulates it:

Suggested change

testWidgets('displays TeX source; experimental flag enabled', (tester) async {

final globalSettings = testBinding.globalStore.settings;

testWidgets('displays TeX source; experimental flag enabled', (tester) async {

addTearDown(testBinding.reset);

final globalSettings = testBinding.globalStore.settings;

gnprice · 2025-04-11T21:50:35Z

test/widgets/content_test.dart

+    testWidgets('displays TeX source; experimental flag default', (tester) async {
+      final globalSettings = testBinding.globalStore.settings;
+      await globalSettings.setBool(BoolGlobalSetting.renderKatex, null);
+      check(globalSettings).getBool(BoolGlobalSetting.renderKatex).isFalse();
+
+      await prepareContent(tester, plainContent(ContentExample.mathBlock.html));


Then when the test cases that set the setting properly reset the state, I think these can be simplified:

Suggested change

testWidgets('displays TeX source; experimental flag default', (tester) async {

final globalSettings = testBinding.globalStore.settings;

await globalSettings.setBool(BoolGlobalSetting.renderKatex, null);

check(globalSettings).getBool(BoolGlobalSetting.renderKatex).isFalse();

await prepareContent(tester, plainContent(ContentExample.mathBlock.html));

testWidgets('displays TeX source; experimental flag default', (tester) async {

await prepareContent(tester, plainContent(ContentExample.mathBlock.html));

because the default is by definition the state the setting starts in when it hasn't been set.

gnprice · 2025-04-11T21:53:15Z

lib/model/content.dart


  final String texSource;
+  final List<KatexNode>? nodes;


This should get dartdoc in particular to clarify what null means.

Ah, in fact I guess it can just copy what MathParserResult.nodes has 🙂

gnprice · 2025-04-11T21:55:19Z

lib/model/content.dart

+  /// The text or a single character this KaTeX node contains, generally
+  /// observed to be the leaf node in the KaTeX HTML tree.
+  /// It will be null if [nodes] is non-null.
+  final String? text;


Is "a single character" a different case from "the text"? It sounds like that's just the text when the text happens to be only one character.

gnprice · 2025-04-11T23:26:11Z

lib/model/katex.dart

+  KatexSpanFontStyle? fontStyle;
+  KatexSpanFontWeight? fontWeight;


nit: put these in same order as the enums are defined

(And I think weight, then style, is the preferred way around: one says "bold italic", e.g. in the names of the fonts this PR adds, not "italic bold")

gnprice · 2025-04-11T23:27:52Z

lib/model/katex.dart

+
+  @override
+  String toString() {
+    if (this == _zero) return '${objectRuntimeType(this, 'KatexSpanStyles')}()';


This is just an optimization, right?

Can leave it out in favor of simplifying the code — toString on these should only come up in errors or debugging.

gnprice · 2025-04-11T23:31:41Z

lib/widgets/content.dart

+    if (styles.fontFamily != null) {
+      textStyle ??= TextStyle();
+      textStyle = textStyle.copyWith(fontFamily: styles.fontFamily);
+    }


How about:

Suggested change

if (styles.fontFamily != null) {

textStyle ??= TextStyle();

textStyle = textStyle.copyWith(fontFamily: styles.fontFamily);

}

final fontFamily = styles.fontFamily;

and then construct textStyle and textAlign at the end after defining several locals like that?

I think that would be simpler. It'd also avoid copying a TextStyle repeatedly when there are a couple of different properties being set.

gnprice · 2025-04-11T23:32:52Z

lib/widgets/content.dart

+
+  @override
+  Widget build(BuildContext context) {
+    final em = DefaultTextStyle.of(context).style.fontSize!;


This lookup is only used in one condition, so can move inside that condition. That way we don't do the lookup when it doesn't end up being needed.

gnprice · 2025-04-11T23:42:05Z

test/model/content_test.dart

+            '<span class="mord mathnormal sizing reset-size6 size1">λ</span></span></span></span></span></p>',
+    [
+      MathBlockNode(
+        texSource: "\\tiny {\\lambda \\Huge \\lambda}",


Can you write a widget test for this?

I think that'll actually be more pertinent than the parsing test (though we'll naturally have this parsing test as a consequence given the way the ContentExample system is structured, and that's fine): the important thing isn't that one layer says "0.5em" and then a layer inside it says "4.976em" so much as it is that the text winds up at the size that would be 2.488em if found at the root of the math tree.

For the widget test it may be helpful to have this example split into two examples: one for each of the two blocks in this example. That way the widget test can render only the one that it intends to inspect.

rajveermalviya · 2025-04-21T14:02:53Z

first parenthesis (span with class "mopen" in HTML) appears differently in Flutter than on web.

@PIG208, that turned out to be a weird bug in upstream Flutter when displaying text with KaTeX_Math font with FontStyle.italic.

For now, I've added a workaround that should fix this behavior (forcing FontStyle.normal for this font on Android), and also reported the issue upstream — flutter/flutter#167474.

rajveermalviya · 2025-04-21T14:03:14Z

Thanks for the review @gnprice! Pushed an update, PTAL.

gnprice

Thanks for the revision! Just a couple of nits below, on those same first 7/8 commits.

Then let's save the last commit:
8644903 content: Support parsing and handling inline styles for KaTeX content

for the next PR. That way we can go ahead and merge the rest of them very soon.

gnprice · 2025-04-21T22:26:55Z

test/model/content_test.dart

+              KatexNode(
+                styles: KatexSpanStyles(fontSizeEm: 2.488), // .reset-size6.size11
+                text: '1',
+                nodes: null),


Ah neat — the use of numerals instead of letters here makes this expected parse result simpler, too, with no fontFamily or fontStyle.

(following up on #1408 (comment))

gnprice · 2025-04-21T22:33:29Z

lib/widgets/content.dart

+        fontSize != null ||
+        fontWeight != null ||
+        fontStyle != null) {
+      // TODO remove this workaround when upstream fixes the broken rendering


nit: say TODO(upstream) to make it greppable

(In particular, we might occasionally grep to find upstream issues to check in on, or follow up on.)

gnprice · 2025-04-21T22:37:54Z

lib/widgets/content.dart

+    }
+
+    if (styles.verticalAlignEm != null) {
+      final em = DefaultTextStyle.of(context).style.fontSize!;


Ah I see — in #1408 (comment) I wrote that this was used only in one condition, but that stops being true in the commit after the commits I was reading :-)

Because at the end of the branch it gets used in three different places, not just one place under one condition, the way you had this lookup at the top of the function is fine.

gnprice · 2025-04-21T22:45:17Z

test/widgets/content_test.dart

+      check(mergedStyleOf(tester, text))
+        .which((it) => it.isNotNull()
+          ..fontFamily.equals(fontFamily)
+          ..fontSize.equals(fontSize));


nit: simplify

Suggested change

check(mergedStyleOf(tester, text))

.which((it) => it.isNotNull()

..fontFamily.equals(fontFamily)

..fontSize.equals(fontSize));

check(mergedStyleOf(tester, text)).isNotNull()

..fontFamily.equals(fontFamily)

..fontSize.equals(fontSize);

This means the same thing, right?

gnprice · 2025-04-21T23:06:16Z

test/widgets/content_test.dart

+      var fontSize = 0.5 * kBaseKatexTextStyle.fontSize!;
+      checkKatexText(tester, '1',
+        fontFamily: 'KaTeX_Main',
+        fontSize: fontSize,
+        fontHeight: kBaseKatexTextStyle.height!);
+
+      fontSize = 4.976 * fontSize;
+      checkKatexText(tester, '2',
+        fontFamily: 'KaTeX_Main',
+        fontSize: fontSize,
+        fontHeight: kBaseKatexTextStyle.height!);


This still feels less end-to-end than I would like (continuing from #1408 (comment)).

This might be something that's clearer for me to express by demonstration, though. There are a couple of other refactors I'm thinking I'll try doing upon merging this PR, so I may include this in that effort.

There are a couple of other refactors I'm thinking I'll try doing upon merging this PR

Sent most of those just now as #1478.

Others are still a draft, as I mentioned there:

This doesn't include the changes I've sketched for passing the font size down directly through the recursion in the parser and widgets. I'll want to look a bit more at how those would interact with the changes in #1452 (which introduce a number of additional length-valued properties) before I'm confident just what shape that part of the API should take.

and I haven't yet tried revising these tests. (That would naturally go along with some of the changes still in draft.)

gnprice · 2025-04-21T23:59:51Z

lib/model/katex.dart

+          if (index + 2 < spanClass.length) {
+            final resetSizeClass = spanClasses[index + 1];
+            final sizeClass = spanClasses[index + 2];


Oh, one bug here:

Suggested change

if (index + 2 < spanClass.length) {

final resetSizeClass = spanClasses[index + 1];

final sizeClass = spanClasses[index + 2];

if (index + 2 < spanClasses.length) {

final resetSizeClass = spanClasses[index + 1];

final sizeClass = spanClasses[index + 2];

🙂

gnprice · 2025-04-22T01:17:16Z

lib/widgets/content.dart

+const kBaseKatexTextStyle = TextStyle(
+  fontSize: kBaseFontSize * 1.21,


A separate bug: this doesn't correctly handle scaling the font size up when the TeX appears inside a heading. For example: #test here > math @ 💬

To do that, this factor of 1.21 should instead get applied in the same way as the scaling factor for the font size of code spans. See references to kInlineCodeFontSizeFactor.

Let's make that fix as a separate commit, though, which can go in a follow-up PR. That way we can still merge this PR's changes very soon, as a baseline for further progress.

Added a fix for this in ffcdfb0, in #1452.

It will be used in later commits to parse inline CSS styles in HTML while parsing KaTeX HTML spans.

Downloaded from: https://github.com/KaTeX/KaTeX/tree/2fe1941b7/fonts These fonts will be used in later commits to show KaTeX content.

This later avoids a collision for the `TextDirection` type, which is also defined in `dart:ui`.

This will be useful in the later commits to query GlobalSettings while content HTML parsing phase.

With this, if the new experimental flag is enabled, the result will be really basic rendering of each text character in KaTeX spans.

This adds another experimental flag called `forceRenderKatex` which, if enabled, ignores any errors generated by the parser (like when encountering an unsupported CSS class) tries to do a "broken" render of the available span and their styles. Allowing the developer to test the different KaTeX content in the wild easily, while still in development.

rajveermalviya · 2025-04-22T15:35:04Z

Thanks for the review @gnprice! Pushed an update, PTAL.

gnprice · 2025-04-22T20:02:07Z

Thanks! Looks good; merging.

rajveermalviya force-pushed the pr-tex-content-1 branch 2 times, most recently from 476f6aa to 5164619 Compare March 13, 2025 20:43

rajveermalviya force-pushed the pr-tex-content-1 branch 4 times, most recently from c2a9c4a to babe5c8 Compare April 1, 2025 16:19

rajveermalviya changed the title ~~content: Add initial support for displaying some KaTeX content~~ KaTeX (1/n): Initial support for displaying basic KaTeX content Apr 1, 2025

This was referenced Apr 1, 2025

KaTeX (2/n): Support horizontal and vertical offsets for spans #1452

Open

Support TeX content in message list #1335

Closed

rajveermalviya force-pushed the pr-tex-content-1 branch from babe5c8 to fe49e16 Compare April 1, 2025 19:21

PIG208 requested review from gnprice and PIG208 April 1, 2025 22:17

PIG208 self-assigned this Apr 1, 2025

PIG208 added the maintainer review PR ready for review by Zulip maintainers label Apr 1, 2025

gnprice reviewed Apr 2, 2025

View reviewed changes

rajveermalviya force-pushed the pr-tex-content-1 branch from fe49e16 to 8f77f13 Compare April 2, 2025 21:25

rajveermalviya requested a review from gnprice April 2, 2025 21:43

gnprice reviewed Apr 2, 2025

View reviewed changes

PIG208 reviewed Apr 3, 2025

View reviewed changes

rajveermalviya force-pushed the pr-tex-content-1 branch 3 times, most recently from 5d39bef to 3764df5 Compare April 8, 2025 18:23

rajveermalviya requested a review from PIG208 April 8, 2025 18:30

PIG208 reviewed Apr 10, 2025

View reviewed changes

rajveermalviya force-pushed the pr-tex-content-1 branch 2 times, most recently from 52ff92c to 0a8c846 Compare April 10, 2025 14:04

gnprice reviewed Apr 11, 2025

View reviewed changes

rajveermalviya force-pushed the pr-tex-content-1 branch 6 times, most recently from a24eb43 to 8644903 Compare April 21, 2025 13:52

rajveermalviya requested a review from gnprice April 21, 2025 14:03

gnprice reviewed Apr 21, 2025

View reviewed changes

gnprice reviewed Apr 22, 2025

View reviewed changes

rajveermalviya force-pushed the pr-tex-content-1 branch from 8644903 to 5ee5214 Compare April 22, 2025 12:33

rajveermalviya added 7 commits April 22, 2025 18:03

deps: Add csslib as a direct dependency

e312716

It will be used in later commits to parse inline CSS styles in HTML while parsing KaTeX HTML spans.

fonts: Add KaTeX custom fonts

829dae9

Downloaded from: https://github.com/KaTeX/KaTeX/tree/2fe1941b7/fonts These fonts will be used in later commits to show KaTeX content.

content [nfc]: Alias package:intl import as intl

2080464

This later avoids a collision for the `TextDirection` type, which is also defined in `dart:ui`.

content [nfc]: Use Dart patterns for parsing math content

fd7e3e3

binding: Add getGlobalStoreSync method

8ab0adc

This will be useful in the later commits to query GlobalSettings while content HTML parsing phase.

content: Add KaTeX spans parser, initial rendering; w/o styles

4a26227

With this, if the new experimental flag is enabled, the result will be really basic rendering of each text character in KaTeX spans.

rajveermalviya force-pushed the pr-tex-content-1 branch 2 times, most recently from d055d66 to 1ca7f8a Compare April 22, 2025 15:24

rajveermalviya requested a review from gnprice April 22, 2025 15:35

gnprice merged commit 1ca7f8a into zulip:main Apr 22, 2025
1 check passed

gnprice mentioned this pull request Apr 22, 2025

Refactor parts of initial KaTeX handling #1478

Merged

rajveermalviya deleted the pr-tex-content-1 branch April 23, 2025 13:06

		testWidgets('displays TeX source; experimental flag enabled', (tester) async {
		final globalSettings = testBinding.globalStore.settings;

		KatexSpanFontStyle? fontStyle;
		KatexSpanFontWeight? fontWeight;

		const kBaseKatexTextStyle = TextStyle(
		fontSize: kBaseFontSize * 1.21,

KaTeX (1/n): Initial support for displaying basic KaTeX content #1408

KaTeX (1/n): Initial support for displaying basic KaTeX content #1408

Conversation

rajveermalviya commented Mar 13, 2025 • edited Loading

gnprice left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajveermalviya commented Apr 2, 2025

gnprice left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PIG208 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gnprice commented Apr 3, 2025

rajveermalviya commented Apr 8, 2025

PIG208 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajveermalviya commented Apr 10, 2025

PIG208 commented Apr 10, 2025

gnprice left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajveermalviya commented Apr 21, 2025

rajveermalviya commented Apr 21, 2025

gnprice left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rajveermalviya commented Apr 22, 2025

gnprice commented Apr 22, 2025

rajveermalviya commented Mar 13, 2025 •

edited

Loading

PIG208 left a comment •

edited

Loading