make it possible to send data when conflicted

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

@@ -435,7 +435,7 @@ export default class PageContainer extends Container {
 
     const { pageId, path } = this.state;
     let { revisionId } = this.state;
-
+    console.log('save():, ', revisionId, pageId, path);
     const options = Object.assign({}, optionsToSave);
 
     if (editorMode === 'hackmd') {

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

@@ -3,12 +3,21 @@ import PropTypes from 'prop-types';
 import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
-import CodeMirror from 'codemirror/lib/codemirror';
+// import CodeMirror from 'codemirror/lib/codemirror';
 import { useTranslation } from 'react-i18next';
+import { UnControlled as CodeMirror } from 'react-codemirror2';
+import PageContainer from '../../client/services/PageContainer';
+
+require('codemirror/addon/lint/css-lint');
+require('codemirror/addon/hint/css-hint');
+require('codemirror/addon/hint/show-hint');
+require('codemirror/addon/edit/matchbrackets');
+require('codemirror/addon/edit/closebrackets');
+require('codemirror/mode/css/css');
+require('~/client/util/codemirror/autorefresh.ext');
+
+require('jquery-ui/ui/widgets/resizable');
 
-require('codemirror/lib/codemirror.css');
-require('codemirror/addon/merge/merge');
-require('codemirror/addon/merge/merge.css');
 const DMP = require('diff_match_patch');
 
 Object.keys(DMP).forEach((key) => { window[key] = DMP[key] });
@@ -17,28 +26,19 @@ type ConflictDiffModalProps = {
   isOpen: boolean | null;
   onCancel: (() => void) | null;
   onResolveConflict: (() => void) | null;
+  pageContainer: PageContainer;
+  editorContainer: EditorContainer;
 };
 
 export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
   const [val, setVal] = useState('value 1');
   const [orig, setOrig] = useState('value 2');
+  const [resolvedPageBody, SetResolvedPageBody] = useState<string>('initial text will be replaced');
   const [codeMirrorRef, setCodeMirrorRef] = useState<HTMLDivElement | null>(null);
   const { t } = useTranslation('');
 
-  useEffect(() => {
-    if (codeMirrorRef) {
-      CodeMirror.MergeView(codeMirrorRef, {
-        value: val,
-        origLeft: orig,
-        origRight: 'test!',
-        connect: 'align',
-        lineNumbers: true,
-        collapseIdentical: true,
-        highlightDifferences: true,
-        allowEditingOriginals: false,
-      });
-    }
-  }, [codeMirrorRef, orig, val]);
+  const { pageContainer } = props;
+
 
   const onCancel = () => {
     if (props.onCancel != null) {
@@ -46,20 +46,56 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
     }
   };
 
-  const onResolveConflict = () => {
-    if (props.onResolveConflict != null) {
-      props.onResolveConflict();
-    }
+  const onResolveConflict = () : void => {
+    pageContainer.setState({
+      revisionId: pageContainer.state.revisionsOnConflict?.latest.revisionId,
+    }, async() => {
+      try {
+        await pageContainer.save(resolvedPageBody);
+        window.location.href = pageContainer.state.path || '/';
+      }
+      catch (e) {
+        console.log(e);
+      }
+    });
   };
 
   return (
-    <Modal isOpen={props.isOpen || false} toggle={onCancel} className="modal-gfm-cheatsheet">
+    <Modal isOpen={props.isOpen || false} toggle={onCancel} className="modal-gfm-cheatsheet" size="xl">
       <ModalHeader tag="h4" toggle={onCancel} className="bg-primary text-light">
         <i className="icon-fw icon-exclamation" />{t('modal_resolve_conflict.resolve_conflict')}
       </ModalHeader>
       <ModalBody>
-        <div ref={(el) => { setCodeMirrorRef(el) }}></div>
-        <div className="bg-danger">body test</div>
+        {Object.keys(pageContainer.state.revisionsOnConflict || {}).length > 0
+          && (
+            <div className="row">
+              <h2>{`Selected ${val}`}</h2>
+              <div className="col-4">
+                <h2>Previous Revision</h2>
+                <CodeMirror
+                  value={pageContainer.state.revisionsOnConflict?.request.revisionBody}
+                  onChange={() => {
+                    console.log('test');
+                  }}
+                />
+              </div>
+              <div className="col-4">
+                <h2>Original Revision</h2>
+                <CodeMirror
+                  value={pageContainer.state.revisionsOnConflict?.origin.revisionBody}
+                />
+              </div>
+              <div className="col-4">
+                <h2>Latest Revision</h2>
+                <CodeMirror
+                  value={pageContainer.state.revisionsOnConflict?.latest.revisionBody}
+                />
+              </div>
+            </div>
+          )
+        }
+        {console.log('diff:', pageContainer?.state.revisionsOnConflict)}
+        {console.log(props.editorContainer)}
       </ModalBody>
       <ModalFooter>
         <button
@@ -85,6 +121,7 @@ ConflictDiffModal.propTypes = {
   isOpen: PropTypes.bool,
   onCancel: PropTypes.func,
   onResolveConflict: PropTypes.func,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
 ConflictDiffModal.defaultProps = {

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

@@ -373,8 +373,9 @@ class Editor extends AbstractEditor {
         </div>
         <ConflictDiffModal
           isOpen={this.props.pageContainer.state.isConflictDiffModalOpen}
-          onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
-          onResolveConflict={() => {}}
+          onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false, revisionsOnConflict: {} })}
+          pageContainer={this.props.pageContainer}
+          editorContainer={this.props.editorContainer}
         />
       </>
     );

packages/app/src/components/PageStatusAlert.jsx

@@ -59,7 +59,7 @@ class PageStatusAlert extends React.Component {
         {t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
       </>,
       <>
-        <button type="button" onClick={() => { }} className="btn btn-outline-white mr-4">
+        <button type="button" onClick={() => { window.location.href = pageContainer.state.path }} className="btn btn-outline-white mr-4">
           <i className="icon-fw icon-reload mr-1"></i>
           {t('modal_resolve_conflict.reload')}
         </button>

packages/app/src/server/models/page.js

@@ -335,6 +335,7 @@ module.exports = function(crowi) {
 
   pageSchema.methods.isUpdatable = function(previousRevision) {
     const revision = this.latestRevision || this.revision;
+
     // comparing ObjectId with string
     // eslint-disable-next-line eqeqeq
     if (revision != previousRevision) {

packages/app/src/server/routes/page.js

@@ -839,21 +839,21 @@ module.exports = function(crowi, app) {
       const revisions = {};
 
       revisions.request = {
-        revisionID: '',
+        revisionId: '',
         revisionBody: pageBody,
         createdAt: new Date(),
         userName: req.user.name,
         userImgPath: req.user.imageUrlCached,
       };
       revisions.origin = {
-        revisionID: originRevision._id.toString(),
+        revisionId: originRevision._id.toString(),
         revisionBody: originRevision.body,
         createdAt: originRevision.createdAt,
         userName: originRevision.author.name,
         userImgPath: originRevision.author.imageUrlCached,
       };
       revisions.latest = {
-        revisionID: latestRevision._id.toString(),
+        revisionId: latestRevision._id.toString(),
         revisionBody: latestRevision.body,
         createdAt: latestRevision.createdAt,
         userName: latestRevision.author.name,