Switched react-katex package (#2619)

* switched react-katex package

* lockfile updated

* update test to corrected spelling

* decapitalize KaTex

* Fix slider UX (#2596)

* Fix slider UX

* Add snapshot

* Revert "Deploy button front (#2552)" (#2599)

* Revert "Deploy button front (#2552)"

This reverts commit 0f66b6e.

* Fix merge (erm... revert) conflict.

* Revert "Deploy button py (#2535)"

This reverts commit 0bbc7aa.

Co-authored-by: karrie <karrie@streamlit.io>

* Remove extra period from sentence (#2601)

* Have st.number_input warn user of mismatched type and format string (#2604)

* Add %u to list of valid number_input formatters

* Have number_input warn user of mismatched type and format string

* Use more modern f-string syntax instead of .format()

* Feature/sudoless metrics (#2605)

* Add and use sudoless machine id getter for metrics

Step 2 of the metrics user ID improvement plan.

* Add machine-id v3 tests

Duplicates of the v1 tests, since those covered the cases that remain in v3,
and we will remove v1 and its tests later.

Also fix formatting of some python files.

* DRY out machine ID paths into global constants

* Increase side padding to 5rem when app is in wide mode (#2613)

* Increase side padding to 5rem when app is in wide mode

* Upload Cypress snapshot

* Rerender Maybe components when they're first disabled (#2617)

\#2395 ended up being caused by this since we don't rerender placeholder
components created by `st.empty()` when react props/state change as a
performance optimization, but we need to do so when replacing an
existing component with an empty one to get rid of what's currently
drawn on screen.

Closes #2395

Co-authored-by: karrie <karrie@streamlit.io>
Co-authored-by: Thiago Teixeira <thiago@streamlit.io>
Co-authored-by: Randy Zwitch <randy@streamlit.io>
Co-authored-by: Vincent Donato <vincent.rdonato@gmail.com>
Co-authored-by: Amanda Walker <amanda@amandawalker.io>
Co-authored-by: Austin Chen <akrolsmir@gmail.com>
Co-authored-by: Vincent Donato <vincent@streamlit.io>

e2e/specs/st_markdown.spec.js

@@ -32,7 +32,7 @@ describe("st.markdown", () => {
       expect(els[3].textContent).to.eq("[text]");
       expect(els[4].textContent).to.eq("link");
       expect(els[5].textContent).to.eq("");
-      expect(els[6].textContent).to.eq("Inline math with KATXE\\KaTeXKATE​X");
+      expect(els[6].textContent).to.eq("Inline math with KaTeX\\KaTeXKATE​X");
       expect(els[7].textContent).to.eq(
         "ax2+bx+c=0ax^2 + bx + c = 0ax2+bx+c=0"
       );

frontend/package.json

@@ -40,6 +40,7 @@
     "@emotion/styled": "^10.0.27",
     "@loaders.gl/core": "^2.2.8",
     "@loaders.gl/csv": "^2.2.8",
+    "@matejmazur/react-katex": "^3.1.3",
     "axios": "^0.21.1",
     "baseui": "9.106.0",
     "camelcase": "^6.2.0",
@@ -77,7 +78,6 @@
     "react-google-login": "^5.1.21",
     "react-hotkeys": "^1.1.4",
     "react-json-view": "^1.19.1",
-    "react-katex": "^2.0.2",
     "react-map-gl": "^5.2.7",
     "react-markdown": "^4.3.1",
     "react-plotly.js": "^2.4.0",

frontend/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

@@ -21,7 +21,7 @@ import { once } from "lodash"
 // @ts-ignore
 import htmlParser from "react-markdown/plugins/html-parser"
 // @ts-ignore
-import { BlockMath, InlineMath } from "react-katex"
+import Tex from "@matejmazur/react-katex"
 // @ts-ignore
 import RemarkMathPlugin from "remark-math"
 import { Link as LinkIcon } from "react-feather"
@@ -195,10 +195,10 @@ class StreamlitMarkdown extends PureComponent<Props> {
       link: linkWithTargetBlank,
       linkReference: linkReferenceHasParens,
       inlineMath: (props: { value: string }): ReactElement => (
-        <InlineMath>{props.value}</InlineMath>
+        <Tex>{props.value}</Tex>
       ),
       math: (props: { value: string }): ReactElement => (
-        <BlockMath>{props.value}</BlockMath>
+        <Tex block>{props.value}</Tex>
       ),
       heading: CustomHeading,
       parsedHtml: CustomParsedHtml,

frontend/yarn.lock

@@ -1993,6 +1993,11 @@
   resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
   integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
 
+"@matejmazur/react-katex@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@matejmazur/react-katex/-/react-katex-3.1.3.tgz#f07404c848b93bfef9ed9653a4bb080dc8bf2bf0"
+  integrity sha512-rBp7mJ9An7ktNoU653BWOYdO4FoR4YNwofHZi+vaytX/nWbIlmHVIF+X8VFOn6c3WYmrLT5FFBjKqCZ1sjR5uQ==
+
 "@math.gl/core@3.3.2", "@math.gl/core@^3.3.0":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@math.gl/core/-/core-3.3.2.tgz#5ab38984c61a49e6c38671253f5b90b8a3ab784e"
@@ -11356,13 +11361,6 @@ katex@^0.11.1:
   dependencies:
     commander "^2.19.0"
 
-katex@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.9.0.tgz#26a7d082c21d53725422d2d71da9b2d8455fbd4a"
-  integrity sha512-lp3x90LT1tDZBW2tjLheJ98wmRMRjUHwk4QpaswT9bhqoQZ+XA4cPcjcQBxgOQNwaOSt6ZeL/a6GKQ1of3LFxQ==
-  dependencies:
-    match-at "^0.1.1"
-
 kdbush@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
@@ -11909,11 +11907,6 @@ mat4-recompose@^1.0.3:
   dependencies:
     gl-mat4 "^1.0.1"
 
-match-at@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/match-at/-/match-at-0.1.1.tgz#25d040d291777704d5e6556bbb79230ec2de0540"
-  integrity sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q==
-
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -15003,13 +14996,6 @@ react-json-view@^1.19.1:
     react-lifecycles-compat "^3.0.4"
     react-textarea-autosize "^6.1.0"
 
-react-katex@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-katex/-/react-katex-2.0.2.tgz#0cb9559a4f30cb18f808006922b116c06e8b0ae9"
-  integrity sha512-mk1ezfUF4mBIstjvpfELf9g1rWF1Y1+idXMiOvkFvCLi0JFZDCQdui59VqQcI2ynOpb0jj52TM4kyBjKG+qEBg==
-  dependencies:
-    katex "^0.9.0"
-
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"