impl

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -32,6 +32,7 @@ import LinkEditModal from './LinkEditModal';
 import HandsontableModal from './HandsontableModal';
 import EditorIcon from './EditorIcon';
 import DrawioModal from './DrawioModal';
+import { UncontrolledCodeMirror } from '../UncontrolledCodeMirror';
 
 // Textlint
 window.JSHINT = JSHINT;
@@ -879,7 +880,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   render() {
-    const mode = this.state.isGfmMode ? 'gfm-growi' : undefined;
     const lint = this.props.isTextlintEnabled ? this.codemirrorLintConfig : false;
     const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
     const placeholder = this.state.isGfmMode ? 'Input with Markdown..' : 'Input with Plain Text..';
@@ -895,7 +895,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     return (
       <React.Fragment>
 
-        <ReactCodeMirror
+        <UncontrolledCodeMirror
           ref={(c) => { this.cm = c }}
           className={additionalClasses}
           placeholder="search"
@@ -906,12 +906,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
           }}
           value={this.state.value}
           options={{
-            mode,
-            theme: this.props.editorOptions.theme,
-            styleActiveLine: this.props.editorOptions.styleActiveLine,
-            lineNumbers: this.props.lineNumbers,
-            tabSize: 4,
-            indentUnit: this.props.indentSize,
             lineWrapping: true,
             scrollPastEnd: true,
             autoRefresh: { force: true }, // force option is enabled by autorefresh.ext.js -- Yuki Takei

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

@@ -195,7 +195,9 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
             <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
             <UncontrolledCodeMirror
               value={resolvedRevision.current}
-              placeholder={t('modal_resolve_conflict.resolve_conflict_message')}
+              options={{
+                placeholder: t('modal_resolve_conflict.resolve_conflict_message'),
+              }}
               onChange={(editor, data, pageBody) => {
                 if (pageBody === '') setIsRevisionSelected(false);
                 resolvedRevision.current = pageBody;

packages/app/src/components/PageEditor/Editor.jsx

@@ -374,9 +374,7 @@ class Editor extends AbstractEditor {
 
         </div>
         <ConflictDiffModal
-        // ################################# TEST ################################
-          // isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
-          isOpen
+          isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
           onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
           appContainer={this.props.appContainer}
           pageContainer={this.props.pageContainer}

packages/app/src/components/UncontrolledCodeMirror.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { forwardRef, ReactNode, Ref } from 'react';
 import { ICodeMirror, UnControlled as CodeMirror } from 'react-codemirror2';
 import { Container, Subscribe } from 'unstated';
 import EditorContainer from '~/client/services/EditorContainer';
@@ -8,47 +8,51 @@ window.CodeMirror = require('codemirror');
 require('codemirror/addon/display/placeholder');
 require('~/client/util/codemirror/gfm-growi.mode');
 
-export interface UncontrolledCodeMirrorProps extends AbstractEditorProps {
+export interface UncontrolledCodeMirrorProps extends AbstractEditorProps, ICodeMirror {
   value: string;
+  options?: ICodeMirror['options'];
   isGfmMode?: boolean;
   indentSize?: number;
-  placeholder?: string;
   lineNumbers?: boolean;
-  onChange: ICodeMirror['onChange'];
 }
 
 interface UncontrolledCodeMirrorCoreProps extends UncontrolledCodeMirrorProps {
   editorContainer: Container<EditorContainer>;
+  forwardedRef: Ref<UncontrolledCodeMirrorCore>;
 }
 
 class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCoreProps> {
 
   render(): ReactNode {
-    const { editorOptions } = this.props.editorContainer.state;
-    console.log(editorOptions);
+
+    const {
+      value, isGfmMode, indentSize, lineNumbers, editorContainer, options, forwardedRef, ...rest
+    } = this.props;
+
+    const { editorOptions } = editorContainer.state;
 
     return (
       <CodeMirror
-        value={this.props.value}
+        ref={forwardedRef}
+        value={value}
         options={{
-          lineNumbers: this.props.lineNumbers ?? true,
-          mode: this.props.isGfmMode ? 'gfm-growi' : undefined,
+          lineNumbers: lineNumbers ?? true,
+          mode: isGfmMode ? 'gfm-growi' : undefined,
           theme: editorOptions.theme,
           styleActiveLine: editorOptions.styleActiveLine,
           tabSize: 4,
-          indentUnit: this.props.indentSize,
-          placeholder: this.props.placeholder,
+          indentUnit: indentSize,
+          ...options,
         }}
-        onChange={this.props.onChange}
+        {...rest}
       />
     );
   }
 
 }
 
-
-export const UncontrolledCodeMirror: FC<UncontrolledCodeMirrorProps> = props => (
+export const UncontrolledCodeMirror = forwardRef<UncontrolledCodeMirrorCore, UncontrolledCodeMirrorProps>((props, ref) => (
   <Subscribe to={[EditorContainer]}>
-    {(EditorContainer: Container<EditorContainer>) => <UncontrolledCodeMirrorCore {...props} editorContainer={EditorContainer} />}
+    {(EditorContainer: Container<EditorContainer>) => <UncontrolledCodeMirrorCore {...props} forwardedRef={ref} editorContainer={EditorContainer} />}
   </Subscribe>
-);
+));