mattermost-mobile/app/screens/index.js
KobeBergmans 21adcf6085
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 09:16:38 -04:00

254 lines
8.6 KiB
JavaScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Platform} from 'react-native';
import {ThemeProvider} from 'react-native-elements';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {Navigation} from 'react-native-navigation';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Provider} from 'react-redux';
import RootWrapper from '@components/root';
import ThreadFollow from '@screens/thread/thread_follow';
let store;
const withGestures = (screen, styles) => {
if (Platform.OS === 'android') {
return gestureHandlerRootHOC(screen, styles);
}
return screen;
};
// eslint-disable-next-line react/display-name
export const withReduxProvider = (Screen, excludeEvents = true) => (props) => (
<Provider store={store}>
<ThemeProvider>
<RootWrapper excludeEvents={excludeEvents}>
<SafeAreaProvider>
<Screen {...props}/>
</SafeAreaProvider>
</RootWrapper>
</ThemeProvider>
</Provider>
);
Navigation.setLazyComponentRegistrator((screenName) => {
let screen;
let extraStyles;
switch (screenName) {
case 'About':
screen = require('@screens/about').default;
break;
case 'AddReaction':
screen = require('@screens/add_reaction').default;
break;
case 'AdvancedSettings':
screen = require('@screens/settings/advanced_settings').default;
break;
case 'AppForm':
screen = require('@screens/apps_form').default;
break;
case 'ChannelAddMembers':
screen = require('@screens/channel_add_members').default;
break;
case 'ChannelInfo':
screen = require('@screens/channel_info').default;
break;
case 'ChannelMembers':
screen = require('@screens/channel_members').default;
break;
case 'ChannelNotificationPreference':
screen = require('@screens/channel_notification_preference').default;
break;
case 'ClearAfter':
screen = require('@screens/custom_status_clear_after/clear_after_modal').default;
break;
case 'ClockDisplaySettings':
screen = require('@screens/settings/clock_display').default;
break;
case 'Code':
screen = require('@screens/code').default;
break;
case 'CreateChannel':
screen = require('@screens/create_channel').default;
break;
case 'CustomStatus':
screen = require('@screens/custom_status').default;
break;
case 'DisplaySettings':
screen = require('@screens/settings/display_settings').default;
break;
case 'EditChannel':
screen = require('@screens/edit_channel').default;
break;
case 'EditPost':
screen = require('@screens/edit_post').default;
break;
case 'EditProfile':
screen = require('@screens/edit_profile').default;
break;
case 'ErrorTeamsList':
screen = require('@screens/error_teams_list').default;
break;
case 'ExpandedAnnouncementBanner':
screen = require('@screens/expanded_announcement_banner').default;
break;
case 'SavedPosts':
screen = require('@screens/saved_posts').default;
break;
case 'ForgotPassword':
screen = require('@screens/forgot_password').default;
break;
case 'Gallery':
screen = require('@screens/gallery').default;
break;
case 'GlobalThreadOptions':
screen = require('@screens/thread_options').default;
break;
case 'InteractiveDialog':
screen = require('@screens/interactive_dialog').default;
break;
case 'Latex':
screen = require('@screens/latex').default;
break;
case 'Login':
screen = require('@screens/login').default;
break;
case 'LoginOptions':
screen = require('@screens/login_options').default;
break;
case 'MainSidebar':
screen = require('app/components/sidebars/main').default;
break;
case 'Call':
screen = require('@mmproducts/calls/screens/call').default;
break;
case 'MFA':
screen = require('@screens/mfa').default;
break;
case 'MoreChannels':
screen = require('@screens/more_channels').default;
break;
case 'MoreDirectMessages':
screen = require('@screens/more_dms').default;
break;
case 'Notification':
extraStyles = Platform.select({android: {flex: undefined, height: 100}});
screen = require('@screens/notification/index.tsx').default;
break;
case 'NotificationSettings':
screen = require('@screens/settings/notification_settings').default;
break;
case 'NotificationSettingsAutoResponder':
screen = require('@screens/settings/notification_settings_auto_responder').default;
break;
case 'NotificationSettingsEmail':
screen = require('@screens/settings/notification_settings_email').default;
break;
case 'NotificationSettingsMentions':
screen = require('@screens/settings/notification_settings_mentions').default;
break;
case 'NotificationSettingsMentionsKeywords':
screen = require('@screens/settings/notification_settings_mentions_keywords').default;
break;
case 'NotificationSettingsMobile':
screen = require('@screens/settings/notification_settings_mobile').default;
break;
case 'OptionsModal':
screen = require('@screens/options_modal').default;
break;
case 'ParticipantsList':
screen = require('@screens/participants_list').default;
break;
case 'PerfMetrics':
screen = require('@screens/perf_metrics').default;
break;
case 'Permalink':
screen = require('@screens/permalink').default;
break;
case 'PinnedPosts':
screen = require('@screens/pinned_posts').default;
break;
case 'PostOptions':
screen = require('@screens/post_options').default;
break;
case 'CallOtherActions':
screen = require('@mmproducts/calls/screens/call_other_actions').default;
break;
case 'ReactionList':
screen = require('@screens/reaction_list').default;
break;
case 'RecentMentions':
screen = require('@screens/recent_mentions').default;
break;
case 'Search':
screen = require('@screens/search').default;
break;
case 'SelectorScreen':
screen = require('@screens/selector_screen').default;
break;
case 'SelectTeam':
screen = require('@screens/select_team').default;
break;
case 'SelectTimezone':
screen = require('@screens/settings/timezone/select_timezone').default;
break;
case 'Settings':
screen = require('@screens/settings/general').default;
break;
case 'SettingsSidebar':
screen = require('app/components/sidebars/settings').default;
break;
case 'SidebarSettings':
screen = require('@screens/settings/sidebar').default;
break;
case 'SSO':
screen = require('@screens/sso').default;
break;
case 'Table':
screen = require('@screens/table').default;
break;
case 'TermsOfService':
screen = require('@screens/terms_of_service').default;
break;
case 'ThemeSettings':
screen = require('@screens/settings/theme').default;
break;
case 'Thread':
screen = require('@screens/thread').default;
break;
case 'ThreadFollow': {
Navigation.registerComponent('ThreadFollow', () => ThreadFollow);
break;
}
case 'TimezoneSettings':
screen = require('@screens/settings/timezone').default;
break;
case 'UserProfile':
screen = require('@screens/user_profile').default;
break;
case 'PluginInternal':
screen = require('@screens/plugin').default;
break;
case 'SlideUp':
screen = require('@screens/slide_up').default;
break;
}
if (screen) {
Navigation.registerComponent(screenName, () => withGestures(withReduxProvider(screen), extraStyles), () => screen);
}
});
export function registerScreens(reduxStore) {
store = reduxStore;
const channelScreen = require('@screens/channel').default;
const serverScreen = require('@screens/select_server').default;
Navigation.registerComponent('Channel', () => withReduxProvider(channelScreen, false), () => channelScreen);
Navigation.registerComponent('SelectServer', () => withReduxProvider(serverScreen, false), () => serverScreen);
}