LaTeX rendering in element-web using KaTeX #5244

akissinger · 2020-09-22T10:38:12Z

This is an implementation of MSC2191: matrix-org/matrix-spec-proposals#2191

It is based on a trimmed-down and updated version of PR #3251, which won't auto-merge any more. It is different in that implements the latest edits (as of Sept 2020) of MSC2191 and does not include GUI configuration (only a global on/off switch in Labs and flags in for custom delimiters in config.json).

LaTex rendering is implemented using KaTeX 0.12.0, and is turned off by default. It can be switched on by the user in Labs (documentation updated in matched PR element-hq/element-web#15277).

The other relevant setting is latex_maths_delims, which allows customization of user-facing LaTeX delimiters. By default, inline-math is wrapped in double-$'s and display in triple-$'s. The inline case matches the conventions of other chat utilities with TeX support, such as Zulip.

You can reproduce the default behaviour in config.json as follows:

"latex_maths_delimiters": {
  "inline_left": "$$",
  "inline_right": "$$",
  "inline_pattern": "\\$\\$(([^$]|\\\\\\$)*)\\$\\$",
  "display_left": "$$$",
  "display_right": "$$$",
  "display_pattern": "\\$\\$\\$(([^$]|\\\\\\$)*)\\$\\$\\$"
}

The *_pattern settings are given explicitly, which are double-quoted strings that get passed to RegExp(..., "mg") internally. Note backslashes in the regex should be escaped, and literal backslashes in the regex need to be escaped twice.

The first match group is HTML-entities encoded and given as the string in <span data-mx-maths="...."> or <div data-mx-maths="....">, for inline and display math, respectively.

The translation to/from delimited LaTeX to HTML tags described in MSC2191 is done in src/editor/(de)serialize.ts. The KaTeX rendering is in src/HtmlUtils.tsx.

Finally, src/Markdown.js is told to ignore these tags, so clients can mix math and markdown in a single message.

Signed-off-by: Aleks Kissinger <aleks0@gmail.com>

This reverts commit e4448ae.

NickHu · 2020-09-22T13:28:04Z

Might be pertinent to add new config stuff to config.sample.json too

akissinger · 2020-09-24T12:06:31Z

I can't seem to include katex.min.css in a way that jest-tests agrees with. I tried putting an @import in _common.scss, but it won't pull the fonts correctly then. Advice appreciated.

akissinger · 2020-09-24T17:44:55Z

Shifted katex.min.css into webpack.config.js in element-web (see linked PR), which makes most of the tests happy. Don't know why the first 2 are failing and/or if it's my doing.

behrmann · 2020-09-24T18:39:06Z

@akissinger You can bisect where the problem is by rolling back your branch to an earlier version. If I remember correctly all tests passed when you first submitted this branch.

Looking at the failing tests, a node module called dom_handler seems to be broken. No idea how this relates to your work. How does it look, when you build locally?

behrmann · 2020-09-25T08:22:17Z

Looks like d2054ea is good and build errors where introduced later.

akissinger · 2020-09-25T09:28:18Z

Tidied the commits and works now. Actual code is identical to before, so I figure it was a one-off problem with the CI server.

behrmann · 2020-09-25T10:15:56Z

Excellent, I hope your work gets reviewed and merged soon.

uhoreg

Thanks for your work on this! It's a great start.

src/HtmlUtils.tsx

src/Markdown.js

src/editor/serialize.ts

src/Markdown.js

uhoreg · 2020-10-09T15:11:56Z

The test failure (chains-end-to-end-tests) is probably just because you're based on an older version of develop. If you merge the latest develop it should pass.

uhoreg · 2020-11-19T04:59:16Z

package.json

@@ -76,6 +76,8 @@
    "highlight.js": "^10.1.2",
    "html-entities": "^1.3.1",
    "is-ip": "^2.0.0",
+    "katex": "^0.12.0",
+    "cheerio": "^1.0.0-rc.3",


Note to the next reviewer: cheerio is already pulled in by another dependency, so this isn't adding a new dependency, but is added here because it is now being used by HtmlUtils

uhoreg

Aside from a translation nit, looks good to me. Seems to do what it says on the box.

This should be re-reviewed by another developer who's more familiar with the react-sdk. It will probably need design/product review before the labs flag is removed.

Thank you for working on this, and sorry for the delay in reviewing it.

src/i18n/strings/en_EN.json

turt2live

The code seems reasonable at first glance, though I'm going to leave it to someone who has a bit more experience with the composer.

src/i18n/strings/nl.json

jryans

Overall, this looks great, and I am excited to try it out! 😄

I believe there are only a few small nits to resolve, and then we should be ready to merge this.

src/HtmlUtils.tsx

src/i18n/strings/en_US.json

src/settings/Settings.ts

akissinger · 2020-11-26T18:18:42Z

@jryans okay, I think that's all your changes done. I don't know why the new Vercel thing isn't working, but it might just need to be re-merged to develop. in any case, the other tests still pass.

jryans · 2020-11-27T09:54:50Z

I don't know why the new Vercel thing isn't working, but it might just need to be re-merged to develop. in any case, the other tests still pass.

Ah yeah, sorry about this, I was trialling Vercel to add previews of PR, but it went a bit haywire. I have disabled it now, and the error is fine to ignore.

jryans

Looks great, thanks again for working on this! 😄

akissinger · 2020-11-27T12:46:12Z

nice! it wasn't exactly the one-liner I was expecting, but glad to see it merged. :)

dinojr · 2020-12-07T10:45:40Z

Lab

LaTex rendering is implemented using KaTeX 0.12.0, and is turned off by default. It can be switched on by the user in Labs

I'm not familiar with this "Labs" configuration since I'm only using the matrix.org server. I'm guessing it's where the server is configured. As for the matrix.org server, do they plan to enable LaTeX rendering ?

t3chguy · 2020-12-07T10:47:12Z

It is not related to the Matrix server you are using but instead the client you are using. https://develop.element.io has a config.json with Labs enabled.

dinojr · 2020-12-07T15:59:31Z

https://develop.element.io has a config.json with Labs enabled.

I'm using element on Android. There is indeed a Labs settings but so far without an option to enable LaTeX. I guess it should appear there in a later version (I'm using version 1.0.11[401500112], up to date in the beta program from the Android PlayStore).

However, I can't find a Labs tab/menu in the desktop client for Linux (from https://element.io/get-started).

However, the

t3chguy · 2020-12-07T16:03:13Z

This repository is not related to the Mobile apps. The mobile apps are native, this is a React SDK.

For enabling Labs on the Desktop app see https://github.com/vector-im/element-web/blob/develop/docs/config.md and https://github.com/vector-im/element-desktop#user-specified-configjson

dinojr · 2020-12-07T16:13:21Z

For enabling Labs on the Desktop app see https://github.com/vector-im/element-web/blob/develop/docs/config.md and https://github.com/vector-im/element-desktop#user-specified-configjson

Thanks a lot, LaTeX is now working for me in the desktop client. I submitted a feature request in the Android sdk repository (matrix-org/matrix-android-sdk#566)

NickHu · 2020-12-07T16:41:09Z

For what it's worth, I implemented support for this in Element Android here: element-hq/element-android#2133

It could do with some polish but it basically works.

ljrk0 · 2021-03-10T11:55:53Z

This repository is not related to the Mobile apps. The mobile apps are native, this is a React SDK.

For enabling Labs on the Desktop app see https://github.com/vector-im/element-web/blob/develop/docs/config.md and https://github.com/vector-im/element-desktop#user-specified-configjson

Hm, I couldn't find any config.json in the packaged version of my system, but you can do:

go to a room
upper right go to the (i) symbol
room settings cog wheel
advanced
open devtools
settings explorer

change feature_latex_maths to:

{
    "device": true,
    "room-device": null,
    "room-account": null,
    "account": null,
    "room": null,
    "config": null,
    "default": false
}

akissinger added 10 commits September 19, 2020 15:45

added katex package and import

0604c86

send tex math as data-mx-maths attribute

becc79d

Deserialize back to math delimiters for editing

e78734b

math off by default, enable with latex_maths flag

428a6b9

send fallback in pre tags, not code

e4448ae

Revert "send fallback in pre tags, not code" (code looks better)

7e6d705

This reverts commit e4448ae.

made math display slightly larger

1f24b5b

support multi-line and escaped $

24a1834

allow custom latex delimiters in config.json

4df8754

tell markdown to ignore math tags

1b689bb

akissinger changed the title ~~LaTeX rending in element-web using KaTeX~~ LaTeX rendering in element-web using KaTeX Sep 22, 2020

cosmetic changes (lint)

aded3c9

thosgood mentioned this pull request Sep 22, 2020

Maths support #3251

Closed

akissinger mentioned this pull request Sep 24, 2020

added katex.min.css to webpack for math support (main PR in matrix-react-sdk) element-hq/element-web#15277

Merged

akissinger force-pushed the katex branch from 339a9ba to aded3c9 Compare September 25, 2020 08:02

HTML output for cross-browser support

d2054ea

beinganukul approved these changes Oct 3, 2020

View reviewed changes

uhoreg suggested changes Oct 9, 2020

View reviewed changes

whitespace fixes

65c4460

akissinger added 3 commits October 10, 2020 09:12

only allow code tags inside math tag

919a1a8

latex math as labs setting

96742fc

i18n en+nl for latex math labs setting

a89adb8

fixed duplicate import from merge

8233ce7

uhoreg reviewed Nov 19, 2020

View reviewed changes

uhoreg approved these changes Nov 19, 2020

View reviewed changes

src/i18n/strings/en_EN.json Outdated Show resolved Hide resolved

uhoreg requested a review from a team November 19, 2020 05:08

turt2live suggested changes Nov 19, 2020

View reviewed changes

src/i18n/strings/nl.json Outdated Show resolved Hide resolved

turt2live requested a review from a team November 19, 2020 05:13

reverted translation

ca9e43f

jryans requested review from jryans and removed request for a team November 24, 2020 16:00

jryans suggested changes Nov 24, 2020

View reviewed changes

src/HtmlUtils.tsx Outdated Show resolved Hide resolved

src/i18n/strings/en_US.json Outdated Show resolved Hide resolved

src/settings/Settings.ts Outdated Show resolved Hide resolved

akissinger added 4 commits November 26, 2020 16:22

reverted US translation

dacef10

UK spelling maths

7013483

parse html for latex rendering inside settings block

494ae3e

fixed indent

79baea9

matrix-org deleted a comment from vercel bot Nov 27, 2020

jryans self-requested a review November 27, 2020 09:55

jryans approved these changes Nov 27, 2020

View reviewed changes

jryans merged commit 8264661 into matrix-org:develop Nov 27, 2020

dinojr mentioned this pull request Dec 7, 2020

LaTeX rendering matrix-org/matrix-android-sdk#566

Open

rda0 mentioned this pull request Dec 21, 2020

Use LaTeX and TeX delimiters by default #5515

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LaTeX rendering in element-web using KaTeX #5244

LaTeX rendering in element-web using KaTeX #5244

akissinger commented Sep 22, 2020 •

edited

Loading

NickHu commented Sep 22, 2020

akissinger commented Sep 24, 2020 •

edited

Loading

akissinger commented Sep 24, 2020 •

edited

Loading

behrmann commented Sep 24, 2020 •

edited

Loading

behrmann commented Sep 25, 2020

akissinger commented Sep 25, 2020

behrmann commented Sep 25, 2020

uhoreg left a comment

uhoreg commented Oct 9, 2020

uhoreg Nov 19, 2020

uhoreg left a comment

turt2live left a comment

jryans left a comment

akissinger commented Nov 26, 2020

jryans commented Nov 27, 2020

jryans left a comment

akissinger commented Nov 27, 2020

dinojr commented Dec 7, 2020

t3chguy commented Dec 7, 2020 •

edited

Loading

dinojr commented Dec 7, 2020

t3chguy commented Dec 7, 2020

dinojr commented Dec 7, 2020 •

edited

Loading

NickHu commented Dec 7, 2020

ljrk0 commented Mar 10, 2021

LaTeX rendering in element-web using KaTeX #5244

LaTeX rendering in element-web using KaTeX #5244

Conversation

akissinger commented Sep 22, 2020 • edited Loading

NickHu commented Sep 22, 2020

akissinger commented Sep 24, 2020 • edited Loading

akissinger commented Sep 24, 2020 • edited Loading

behrmann commented Sep 24, 2020 • edited Loading

behrmann commented Sep 25, 2020

akissinger commented Sep 25, 2020

behrmann commented Sep 25, 2020

uhoreg left a comment

Choose a reason for hiding this comment

uhoreg commented Oct 9, 2020

uhoreg Nov 19, 2020

Choose a reason for hiding this comment

uhoreg left a comment

Choose a reason for hiding this comment

turt2live left a comment

Choose a reason for hiding this comment

jryans left a comment

Choose a reason for hiding this comment

akissinger commented Nov 26, 2020

jryans commented Nov 27, 2020

jryans left a comment

Choose a reason for hiding this comment

akissinger commented Nov 27, 2020

dinojr commented Dec 7, 2020

t3chguy commented Dec 7, 2020 • edited Loading

dinojr commented Dec 7, 2020

t3chguy commented Dec 7, 2020

dinojr commented Dec 7, 2020 • edited Loading

NickHu commented Dec 7, 2020

ljrk0 commented Mar 10, 2021

akissinger commented Sep 22, 2020 •

edited

Loading

akissinger commented Sep 24, 2020 •

edited

Loading

akissinger commented Sep 24, 2020 •

edited

Loading

behrmann commented Sep 24, 2020 •

edited

Loading

t3chguy commented Dec 7, 2020 •

edited

Loading

dinojr commented Dec 7, 2020 •

edited

Loading