use useEditorSettings for preview options

packages/app/src/client/services/EditorContainer.js

@@ -2,16 +2,9 @@ import { Container } from 'unstated';
 
 import loggerFactory from '~/utils/logger';
 
-import { apiv3Get } from '../util/apiv3-client';
-
 const logger = loggerFactory('growi:services:EditorContainer');
 
 
-const defaultPreviewOptions = {
-  renderMathJaxInRealtime: false,
-  renderDrawioInRealtime: true,
-};
-
 /**
  * Service container related to options for Editor/Preview
  * @extends {Container} unstated Container
@@ -34,8 +27,6 @@ export default class EditorContainer extends Container {
     this.state = {
       tags: null,
 
-      previewOptions: defaultPreviewOptions,
-
       indentSize: this.appContainer.config.adminPreferredIndentSize || 4,
     };
 

packages/app/src/client/util/interceptor/drawio-interceptor.js

@@ -1,8 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
+
+import { BasicInterceptor } from '@growi/core';
 import ReactDOM from 'react-dom';
 import { Provider } from 'unstated';
-import { BasicInterceptor } from '@growi/core';
 
 import Drawio from '~/components/Drawio';
 
@@ -103,8 +104,7 @@ export class DrawioInterceptor extends BasicInterceptor {
    */
   drawioPostRender(contextName, context) {
     const isPreview = (contextName === 'postRenderPreviewHtml');
-    const editorContainer = this.appContainer.getContainer('EditorContainer');
-    const renderDrawioInRealtime = editorContainer.state.previewOptions.renderDrawioInRealtime;
+    const renderDrawioInRealtime = context.editorSettings?.renderDrawioInRealtime;
 
     Object.keys(context.DrawioMap).forEach((domId) => {
       const elem = document.getElementById(domId);

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

@@ -1,13 +1,17 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
 
-import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import GrowiRenderer from '~/client/util/GrowiRenderer';
-import { addSmoothScrollEvent } from '~/client/util/smooth-scroll';
 import { blinkElem } from '~/client/util/blink-section-header';
+import { addSmoothScrollEvent } from '~/client/util/smooth-scroll';
+import { useEditorSettings } from '~/stores/editor';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 import RevisionBody from './RevisionBody';
+
 import { loggerFactory } from '^/../codemirror-textlint/src/utils/logger';
 
 const logger = loggerFactory('components:Page:RevisionRenderer');
@@ -29,6 +33,7 @@ class LegacyRevisionRenderer extends React.PureComponent {
     this.currentRenderingContext = {
       markdown: this.props.markdown,
       pagePath: this.props.pagePath,
+      editorSettings: this.editorSettings,
       currentPathname: decodeURIComponent(window.location.pathname),
     };
   }
@@ -173,6 +178,7 @@ LegacyRevisionRenderer.propTypes = {
   pagePath: PropTypes.string.isRequired,
   highlightKeywords: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   additionalClassName: PropTypes.string,
+  editorSettings: PropTypes.any,
 };
 
 /**
@@ -183,7 +189,13 @@ const LegacyRevisionRendererWrapper = withUnstatedContainers(LegacyRevisionRende
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const RevisionRenderer = (props) => {
-  return <LegacyRevisionRendererWrapper {...props} />;
+  const { data: editorSettings } = useEditorSettings();
+
+  if (editorSettings == null) {
+    return <></>;
+  }
+
+  return <LegacyRevisionRendererWrapper {...props} editorSettings={editorSettings} />;
 };
 
 RevisionRenderer.propTypes = {

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

@@ -2,18 +2,16 @@ import React, {
   UIEventHandler, useCallback, useEffect, useMemo, useState,
 } from 'react';
 
-import { Subscribe } from 'unstated';
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-import RevisionBody from '../Page/RevisionBody';
 
 import AppContainer from '~/client/services/AppContainer';
-import EditorContainer from '~/client/services/EditorContainer';
+import { useEditorSettings } from '~/stores/editor';
+
+import RevisionBody from '../Page/RevisionBody';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 
 type Props = {
   appContainer: AppContainer,
-  editorContainer: EditorContainer,
 
   markdown?: string,
   pagePath?: string,
@@ -35,6 +33,8 @@ const Preview = (props: Props): JSX.Element => {
 
   const [html, setHtml] = useState('');
 
+  const { data: editorSettings } = useEditorSettings();
+
   const { interceptorManager } = appContainer;
   const growiRenderer = props.appContainer.getRenderer('editor');
 
@@ -42,10 +42,11 @@ const Preview = (props: Props): JSX.Element => {
     return {
       markdown,
       pagePath,
+      editorSettings,
       currentPathname: decodeURIComponent(window.location.pathname),
       parsedHTML: null,
     };
-  }, [markdown, pagePath]);
+  }, [markdown, pagePath, editorSettings]);
 
   const renderPreview = useCallback(async() => {
     if (interceptorManager != null) {
@@ -85,21 +86,17 @@ const Preview = (props: Props): JSX.Element => {
   }, [context, html, interceptorManager]);
 
   return (
-    <Subscribe to={[EditorContainer]}>
-      { editorContainer => (
-        <div
-          className="page-editor-preview-body"
-          ref={inputRef}
-          onScroll={onScroll}
-        >
-          <RevisionBody
-            {...props}
-            html={html}
-            renderMathJaxInRealtime={editorContainer.state.previewOptions.renderMathJaxInRealtime}
-          />
-        </div>
-      ) }
-    </Subscribe>
+    <div
+      className="page-editor-preview-body"
+      ref={inputRef}
+      onScroll={onScroll}
+    >
+      <RevisionBody
+        {...props}
+        html={html}
+        renderMathJaxInRealtime={editorSettings?.renderMathJaxInRealtime}
+      />
+    </div>
   );
 
 };