Latex rendering with react-native-math-view (#5651)

* Added a Latex code window that displays the given code using katex * Latex is now displayed without having to go to the next screen * MathView test * MathView WIP: Displays math good, but in verry small font View does not load if there is a syntax error and we are hard stuck in the app * Math view now is rendered properly, few working points: Text is not fixed size, it renders in a weird size Multi Line subscript is not working * Latex is now rendered properly * Fixed Error message and moved helper function to utils * Added some padding and vertical scroll on latex screen * Updated config option to work on real phone too * Removed unused code and fixed tests * Added LatexInline and tried to modify parser, not yet finished though. InlineLatexOption is not yet coded for * Bugfixes and better line break checking * Few margin changes for ios, also updated pod files * padding is now dependend on system * Add platform import * Reverted package-lock change * Added tests * Bugfixes, UI tweaks and added unit test for latex util * Added enableLatex to markdown options instead getting the state and config * Changed the rendering a little bit, it is better but still far from perfect * Width and height is now correctely displayed. Still not clean enough though * Inline latex is now rendered properly for most equations * Inline latex is now working properly * tests for escaping and unescaping functions * Added inline latex setting support * Added inline latex tests * Delete unused comment * Added extra regex rule: there must be no word character in front of the inline latex code * Upgraded math-view package and deleted duplicate entry from gemfile.lock * Inline error functions are now class functions * Updated error color to theme error color * Latex screen now extends the code screen * Markdown changes: Now uses dimensions instead of windowdimensions Removed inline latex function extracted latex rendering into separate function * updated latex util test * Hardcoded latex language in latex code block * Added proptypes and cleaned up latex code block * Bugfix latex split lines * ÃDeleted language prop from latex code block * Changed commonmark packages to personal repo's * Latex rendering now goes by commonmark * Deleted unused function and tests * Commonmark packages back to normal versions with patch package * Updated commonmark patch file to right file and changed package lock to point at right repo * Updated patch files to latest version * Updated commonmark patch * Fixed linter errors * Integrety of commonmark fix * First fix of ios problems * Updated snapshot Co-authored-by: Kobe Bergmans <kobe.bergmans@student.kuleuven.be> Co-authored-by: Administrator <admin@Macintosh-3.localdomain> Co-authored-by: kobe bergmans <kobebergmans@kobes-MacBook-Pro.local>
2022-04-19 15:16:38 +02:00
parent 70d025fe1d
commit 21adcf6085
24 changed files with 1677 additions and 4 deletions
--- a/app/components/markdown/latex_code_block/latex_code_block.test.js
+++ b/app/components/markdown/latex_code_block/latex_code_block.test.js
@@ -0,0 +1,50 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {shallow} from 'enzyme';
+import React from 'react';
+
+import Preferences from '@mm-redux/constants/preferences';
+
+import LatexCodeBlock from './latex_code_block';
+
+describe('LatexCodeBlock', () => {
+    const baseProps = {
+        theme: Preferences.THEMES.denim,
+        language: 'latex',
+        textStyle: {},
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <LatexCodeBlock
+                {...baseProps}
+                content={'\\frac{1}{2} == 0.5^{0*\\pi} - 0.5'}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should have 2 lines', () => {
+        const wrapper = shallow(
+            <LatexCodeBlock
+                {...baseProps}
+                content={'\\frac{2}{1} = 2 \\\\ 2_{nd} = line'}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+
+    test('should have moreLinesText', () => {
+        const wrapper = shallow(
+            <LatexCodeBlock
+                {...baseProps}
+                content={'\\frac{5}{2} = 2 \\\\ 2_{nd} = line \\\\ \\pi = 3.14'}
+            />,
+        );
+
+        expect(wrapper.getElement()).toMatchSnapshot();
+    });
+});