Feature mathtex

.gitignore

@@ -63,3 +63,5 @@ yarn-debug.log
 
 # Ignore Docker option files
 docker-compose.override.yml
+
+public/MathJax

app/javascript/flavours/glitch/actions/compose.js

@@ -9,12 +9,15 @@ import { tagHistory } from 'flavours/glitch/settings';
 import { recoverHashtags } from 'flavours/glitch/utils/hashtag';
 import resizeImage from 'flavours/glitch/utils/resize_image';
 
+import { tex_to_unicode } from '../features/compose/util/autolatex/autolatex';
+
 import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
 import { importFetchedAccounts, importFetchedStatus } from './importer';
 import { openModal } from './modal';
 import { updateTimeline } from './timelines';
 
+
 /** @type {AbortController | undefined} */
 let fetchComposeSuggestionsAccountsController;
 /** @type {AbortController | undefined} */
@@ -64,6 +67,7 @@ export const COMPOSE_CONTENT_TYPE_CHANGE = 'COMPOSE_CONTENT_TYPE_CHANGE';
 export const COMPOSE_LANGUAGE_CHANGE     = 'COMPOSE_LANGUAGE_CHANGE';
 
 export const COMPOSE_EMOJI_INSERT = 'COMPOSE_EMOJI_INSERT';
+export const COMPOSE_START_LATEX = 'COMPOSE_START_LATEX';
 
 export const COMPOSE_UPLOAD_CHANGE_REQUEST     = 'COMPOSE_UPLOAD_UPDATE_REQUEST';
 export const COMPOSE_UPLOAD_CHANGE_SUCCESS     = 'COMPOSE_UPLOAD_UPDATE_SUCCESS';
@@ -565,6 +569,36 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, token) =>
   });
 }, 200, { leading: true, trailing: true });
 
+const fetchComposeSuggestionsLatex = (dispatch, getState, token) => {
+  const start_delimiter = token.slice(0,2);
+  const end_delimiter = {'\\(': '\\)', '\\[': '\\]'}[start_delimiter];
+  let expression = token.slice(2).replace(/\\[)\]]?$/,'');
+  let brace = 0;
+  for(let i=0;i<expression.length;i++) {
+    switch(expression[i]) {
+      case '\\':
+        i += 1;
+        break;
+      case '{':
+        brace += 1;
+        break;
+      case '}':
+        brace -= 1;
+        break;
+    }
+  }
+  for(;brace<0;brace++) {
+    expression = '{'+expression;
+  }
+  for(;brace>0;brace--) {
+    expression += '}';
+  }
+  const results = [
+    { start_delimiter, end_delimiter, expression }
+  ];
+  dispatch(readyComposeSuggestionsLatex(token, results));
+};
+
 const fetchComposeSuggestionsEmojis = (dispatch, getState, token) => {
   const results = emojiSearch(token.replace(':', ''), { maxResults: 5 });
   dispatch(readyComposeSuggestionsEmojis(token, results));
@@ -608,13 +642,24 @@ export function fetchComposeSuggestions(token) {
     case '#':
       fetchComposeSuggestionsTags(dispatch, getState, token);
       break;
+    case '\\':
+      fetchComposeSuggestionsLatex(dispatch, getState, token);
+      break;
     default:
       fetchComposeSuggestionsAccounts(dispatch, getState, token);
       break;
     }
   };
 }
 
+export function readyComposeSuggestionsLatex(token, latex) {
+  return {
+    type: COMPOSE_SUGGESTIONS_READY,
+    token,
+    latex,
+  };
+};
+
 export function readyComposeSuggestionsEmojis(token, emojis) {
   return {
     type: COMPOSE_SUGGESTIONS_READY,
@@ -647,6 +692,10 @@ export function selectComposeSuggestion(position, token, suggestion, path) {
       completion = `#${suggestion.name}`;
     } else if (suggestion.type === 'account') {
       completion = '@' + getState().getIn(['accounts', suggestion.id, 'acct']);
+    } else if (suggestion.type === 'latex') {
+      const unicode = tex_to_unicode(suggestion.expression);
+      completion = unicode || `${suggestion.start_delimiter}${suggestion.expression}${suggestion.end_delimiter}`;
+      position -= 1;
     }
 
     // We don't want to replace hashtags that vary only in case due to accessibility, but we need to fire off an event so that
@@ -779,6 +828,14 @@ export function insertEmojiCompose(position, emoji) {
   };
 }
 
+export function startLaTeXCompose(position, latex_style) {
+  return {
+    type: COMPOSE_START_LATEX,
+    position,
+    latex_style,
+  };
+};
+
 export function addPoll() {
   return {
     type: COMPOSE_POLL_ADD,

app/javascript/flavours/glitch/components/autosuggest_input.jsx

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import classNames from 'classnames';
 
@@ -9,12 +10,30 @@ import AutosuggestAccountContainer from 'flavours/glitch/features/compose/contai
 
 import AutosuggestEmoji from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';
+import AutosuggestLatex from './autosuggest_latex';
+
 
 const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
   let word;
+  let left;
+  let right;
+
+  left = str.slice(0, caretPosition).search(/\\\((?:(?!\\\)).)*$/);
+  if (left >= 0) {
+    right = str.slice(caretPosition).search(/\\\)/);
+    if (right < 0) {
+      word = str.slice(left);
+    } else {
+      word = str.slice(left, right + caretPosition);
+    }
+    if (word.trim().length >= 3) {
+      return [left + 1, word];
+    }
+  }
+
+  left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
+  right = str.slice(caretPosition).search(/[\s\u200B]/);
 
-  let left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
-  let right = str.slice(caretPosition).search(/[\s\u200B]/);
 
   if (right < 0) {
     word = str.slice(left);
@@ -180,6 +199,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     } else if (suggestion.type === 'account') {
       inner = <AutosuggestAccountContainer id={suggestion.id} />;
       key   = suggestion.id;
+    } else if (suggestion.type === 'latex') {
+      inner = <AutosuggestLatex latex={suggestion} />;
+      key = 'latex' + suggestion.expression;
     }
 
     return (

app/javascript/flavours/glitch/components/autosuggest_latex.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class AutosuggestLatex extends React.PureComponent {
+
+  static propTypes = {
+    latex: PropTypes.object.isRequired,
+  };
+
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  componentDidMount() {
+    try {
+      // Loaded in script tag on page. not great but we couldn't figure out
+      // How to use MathJax as a module
+      // eslint-disable-next-line no-undef
+      MathJax.typeset([this.node]);
+    } catch(e) {
+      console.error(e);
+    }
+
+  }
+
+  render () {
+    const { latex } = this.props;
+
+    return (
+      <div className='autosuggest-latex' ref={this.setRef}>
+        \({latex.expression}\)
+        <br />
+        <small>Convert to unicode</small>
+      </div>
+    );
+  }
+
+}

app/javascript/flavours/glitch/components/autosuggest_textarea.jsx

@@ -11,12 +11,29 @@ import AutosuggestAccountContainer from 'flavours/glitch/features/compose/contai
 
 import AutosuggestEmoji from './autosuggest_emoji';
 import { AutosuggestHashtag } from './autosuggest_hashtag';
+import AutosuggestLatex from './autosuggest_latex';
 
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;
+  let left;
+  let right;
+
+  left = str.slice(0, caretPosition).search(/\\[([](?:(?!\\[)]]).)*(?:\\[)\]])?$/);
+  if (left >= 0) {
+    right = str.slice(caretPosition).search(/\\[)\]]/);
+    if (right < 0) {
+      word = str.slice(left);
+    } else {
+      word = str.slice(left, right + caretPosition + 2);
+    }
+    if (word.trim().length >= 3) {
+      return [left + 1, word];
+    }
+  }
+
+  left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
+  right = str.slice(caretPosition).search(/[\s\u200B]/);
 
-  let left  = str.slice(0, caretPosition).search(/[^\s\u200B]+$/);
-  let right = str.slice(caretPosition).search(/[\s\u200B]/);
 
   if (right < 0) {
     word = str.slice(left);
@@ -187,6 +204,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     } else if (suggestion.type === 'account') {
       inner = <AutosuggestAccountContainer id={suggestion.id} />;
       key   = suggestion.id;
+    } else if (suggestion.type === 'latex') {
+      inner = <AutosuggestLatex latex={suggestion} />;
+      key = suggestion.expression;
     }
 
     return (

app/javascript/flavours/glitch/components/status_content.jsx

@@ -8,11 +8,11 @@ import classnames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
 import Permalink from './permalink';
+import StatusExpandButton from './status_expand_button';
 
 const textMatchesTarget = (text, origin, host) => {
   return (text === origin || text === host
@@ -235,12 +235,31 @@ class StatusContent extends PureComponent {
     }
   };
 
+  _renderMathJax() {
+    const {status} = this.props;
+    const contentHtml = status.get('contentHtml');
+    if(this.last_contentHtml === contentHtml) {
+      return;
+    }
+    this.last_contentHtml = contentHtml;
+    try {
+      // Loaded in script tag on page. not great but we couldn't figure out
+      // How to use MathJax as a module
+      // eslint-disable-next-line no-undef
+      MathJax.typeset([this.contentsNode]);
+    } catch(e) {
+      console.error(e);
+    }
+  }
+
   componentDidMount () {
     this._updateStatusLinks();
+    this._renderMathJax();
   }
 
   componentDidUpdate () {
     this._updateStatusLinks();
+    this._renderMathJax();
     if (this.props.onUpdate) this.props.onUpdate();
   }
 
@@ -355,38 +374,6 @@ class StatusContent extends PureComponent {
         </Permalink>
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
-      let toggleText = null;
-      if (hidden) {
-        toggleText = [
-          <FormattedMessage
-            id='status.show_more'
-            defaultMessage='Show more'
-            key='0'
-          />,
-        ];
-        if (mediaIcons) {
-          mediaIcons.forEach((mediaIcon, idx) => {
-            toggleText.push(
-              <Icon
-                fixedWidth
-                className='status__content__spoiler-icon'
-                id={mediaIcon}
-                aria-hidden='true'
-                key={`icon-${idx}`}
-              />,
-            );
-          });
-        }
-      } else {
-        toggleText = (
-          <FormattedMessage
-            id='status.show_less'
-            defaultMessage='Show less'
-            key='0'
-          />
-        );
-      }
-
       if (hidden) {
         mentionsPlaceholder = <div>{mentionLinks}</div>;
       }
@@ -398,9 +385,11 @@ class StatusContent extends PureComponent {
           >
             <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={language} />
             {' '}
-            <button type='button' className='status__content__spoiler-link' onClick={this.handleSpoilerClick} aria-expanded={!hidden}>
-              {toggleText}
-            </button>
+            <StatusExpandButton
+              hidden={hidden}
+              handleSpoilerClick={this.handleSpoilerClick}
+              mediaIcons={mediaIcons}
+            />
           </p>
 
           {mentionsPlaceholder}