omit mathjax code and RevisionBody

packages/app/src/components/Page/RevisionBody.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-import { debounce } from 'throttle-debounce';
-
-export default class RevisionBody extends React.PureComponent {
-
-  constructor(props) {
-    super(props);
-
-    // create debounced method for rendering MathJax
-    this.renderMathJaxWithDebounce = debounce(200, this.renderMathJax);
-  }
-
-  componentDidMount() {
-    const MathJax = window.MathJax;
-    if (MathJax != null && this.props.isMathJaxEnabled && this.props.renderMathJaxOnInit) {
-      this.renderMathJaxWithDebounce();
-    }
-  }
-
-  componentDidUpdate() {
-    const MathJax = window.MathJax;
-    if (MathJax != null && this.props.isMathJaxEnabled && this.props.renderMathJaxInRealtime) {
-      this.renderMathJaxWithDebounce();
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const MathJax = window.MathJax;
-    if (MathJax != null && this.props.isMathJaxEnabled && this.props.renderMathJaxOnInit) {
-      this.renderMathJaxWithDebounce();
-    }
-  }
-
-  renderMathJax() {
-    const MathJax = window.MathJax;
-    // Workaround MathJax Rendering (Errors still occur, but MathJax can be rendered)
-    //
-    // Reason:
-    //   Addition of draw.io Integration causes initialization conflict between MathJax of draw.io and MathJax of GROWI.
-    //   So, before MathJax is initialized, execute renderMathJaxWithDebounce again.
-    //   Avoiding initialization of MathJax of draw.io solves the problem.
-    //   refs: https://github.com/jgraph/drawio/pull/831
-    if (MathJax != null && this.element != null) {
-      MathJax.typesetPromise([this.element]);
-    }
-    else {
-      this.renderMathJaxWithDebounce();
-    }
-  }
-
-  generateInnerHtml(html) {
-    return { __html: html };
-  }
-
-  render() {
-    const additionalClassName = this.props.additionalClassName || '';
-    return (
-      <div
-        ref={(elem) => {
-          this.element = elem;
-        }}
-        id="wiki"
-        className={`wiki ${additionalClassName}`}
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}
-      />
-    );
-  }
-
-}
-
-RevisionBody.propTypes = {
-  html: PropTypes.string,
-  renderMathJaxOnInit: PropTypes.bool,
-  renderMathJaxInRealtime: PropTypes.bool,
-  additionalClassName: PropTypes.string,
-};

packages/app/src/components/Page/RevisionRenderer.tsx

@@ -10,8 +10,6 @@ import { useCurrentPathname, useInterceptorManager } from '~/stores/context';
 import { useEditorSettings } from '~/stores/editor';
 import loggerFactory from '~/utils/logger';
 
-// import RevisionBody from './RevisionBody';
-
 import katexStyles from '../CommonStyles/katex.module.scss';
 
 

packages/app/src/components/PageEditor.tsx

@@ -419,7 +419,6 @@ const PageEditor = React.memo((): JSX.Element => {
           rendererOptions={rendererOptions}
           markdown={markdownToPreview}
           pagePath={currentPagePath}
-          renderMathJaxOnInit={false}
           onScroll={offset => scrollEditorByPreviewScrollWithThrottle(offset)}
         />
       </div>

packages/app/src/components/PageEditor/OptionsSelector.tsx

@@ -199,30 +199,6 @@ const ConfigurationDropdown = memo(({ onConfirmEnableTextlint }: ConfigurationDr
     );
   }, [editorSettings, update, t]);
 
-  const renderRealtimeMathJaxMenuItem = useCallback(() => {
-    if (editorSettings == null) {
-      return <></>;
-    }
-
-    const isActive = editorSettings.renderMathJaxInRealtime;
-
-    const iconClasses = ['text-info'];
-    if (isActive) {
-      iconClasses.push('ti-check');
-    }
-    const iconClassName = iconClasses.join(' ');
-
-    return (
-      <DropdownItem toggle={false} onClick={() => update({ renderMathJaxInRealtime: !isActive })}>
-        <div className="d-flex justify-content-between">
-          <span className="icon-container"><img src="/images/icons/fx.svg" width="14px" alt="fx"></img></span>
-          <span className="menuitem-label">MathJax Rendering</span>
-          <span className="icon-container"><i className={iconClassName}></i></span>
-        </div>
-      </DropdownItem>
-    );
-  }, [editorSettings, update]);
-
   const renderRealtimeDrawioMenuItem = useCallback(() => {
     if (editorSettings == null) {
       return <></>;
@@ -324,7 +300,6 @@ const ConfigurationDropdown = memo(({ onConfirmEnableTextlint }: ConfigurationDr
 
         <DropdownMenu>
           {renderActiveLineMenuItem()}
-          {renderRealtimeMathJaxMenuItem()}
           {renderRealtimeDrawioMenuItem()}
           {renderMarkdownTableAutoFormattingMenuItem()}
           {renderIsTextlintEnabledMenuItem()}

packages/app/src/components/PageEditor/Preview.tsx

@@ -12,7 +12,6 @@ type Props = {
   rendererOptions: RendererOptions,
   markdown?: string,
   pagePath?: string | null,
-  renderMathJaxOnInit?: boolean,
   onScroll?: (scrollTop: number) => void,
 }
 

packages/app/src/interfaces/editor-settings.ts

@@ -24,7 +24,6 @@ export interface IEditorSettings {
   theme: undefined | string,
   keymapMode: undefined | KeyMapMode,
   styleActiveLine: boolean,
-  renderMathJaxInRealtime: boolean,
   renderDrawioInRealtime: boolean,
   autoFormatMarkdownTable: boolean,
   textlintSettings: undefined | ITextlintSettings;

packages/app/src/pages/[[...path]].page.tsx

@@ -149,7 +149,6 @@ type Props = CommonProps & {
   // hasSlackConfig: boolean,
   // drawioUri: string,
   hackmdUri: string,
-  // mathJax: string,
   // noCdn: string,
   // highlightJsStyle: string,
   isAllReplyShown: boolean,
@@ -217,7 +216,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // useHasSlackConfig(props.hasSlackConfig);
   // useDrawioUri(props.drawioUri);
   useHackmdUri(props.hackmdUri);
-  // useMathJax(props.mathJax);
   // useNoCdn(props.noCdn);
   // useIndentSize(props.adminPreferredIndentSize);
   useDisableLinkSharing(props.disableLinkSharing);
@@ -284,7 +282,6 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
       <Head>
         {/*
         {renderScriptTagByName('drawio-viewer')}
-        {renderScriptTagByName('mathjax')}
         {renderScriptTagByName('highlight-addons')}
         {renderHighlightJsStyleTag(props.highlightJsStyle)}
         */}
@@ -520,7 +517,6 @@ function injectServerConfigurations(context: GetServerSidePropsContext, props: P
   // props.hasSlackConfig = slackNotificationService.hasSlackConfig();
   // props.drawioUri = configManager.getConfig('crowi', 'app:drawioUri');
   props.hackmdUri = configManager.getConfig('crowi', 'app:hackmdUri');
-  // props.mathJax = configManager.getConfig('crowi', 'app:mathJax');
   // props.noCdn = configManager.getConfig('crowi', 'app:noCdn');
   // props.highlightJsStyle = configManager.getConfig('crowi', 'customize:highlightJsStyle');
   props.isAllReplyShown = configManager.getConfig('crowi', 'customize:isAllReplyShown');

packages/app/src/server/models/editor-settings.ts

@@ -26,7 +26,6 @@ const editorSettingsSchema = new Schema<EditorSettingsDocument, EditorSettingsMo
   theme: { type: String },
   keymapMode: { type: String },
   styleActiveLine: { type: Boolean, default: false },
-  renderMathJaxInRealtime: { type: Boolean, default: true },
   renderDrawioInRealtime: { type: Boolean, default: true },
   autoFormatMarkdownTable: { type: Boolean, default: true },
   textlintSettings: textlintSettingsSchema,

packages/app/src/server/routes/apiv3/personal-setting.js

@@ -117,7 +117,6 @@ module.exports = (crowi) => {
       body('theme').optional().isString(),
       body('keymapMode').optional().isString(),
       body('styleActiveLine').optional().isBoolean(),
-      body('renderMathJaxInRealtime').optional().isBoolean(),
       body('renderDrawioInRealtime').optional().isBoolean(),
       body('autoFormatMarkdownTable').optional().isBoolean(),
       body('textlintSettings.neverAskBeforeDownloadLargeFiles').optional().isBoolean(),
@@ -540,12 +539,12 @@ module.exports = (crowi) => {
     const { body } = req;
 
     const {
-      theme, keymapMode, styleActiveLine, renderMathJaxInRealtime, renderDrawioInRealtime, autoFormatMarkdownTable,
+      theme, keymapMode, styleActiveLine, renderDrawioInRealtime, autoFormatMarkdownTable,
       textlintSettings,
     } = body;
 
     const document = {
-      theme, keymapMode, styleActiveLine, renderMathJaxInRealtime, renderDrawioInRealtime, autoFormatMarkdownTable,
+      theme, keymapMode, styleActiveLine, renderDrawioInRealtime, autoFormatMarkdownTable,
     };
 
     if (textlintSettings != null) {