add i18n and use pagecontainer saveandreload

packages/app/resource/locales/en_US/translation.json

@@ -467,7 +467,9 @@
     "resolve_conflict": "Resolve Conflict",
     "resolve_and_save" : "Resolve and save",
     "select_revision" : "Select {{revision}}",
-    "revision_name": "{{revision}}本文",
+    "requested_revision": "requested page body",
+    "origin_revision": "page body before request",
+    "latest_revision": "latest page body",
     "selected_editable_revision": "Selected Revision(Editable)"
   },
   "link_edit": {

packages/app/resource/locales/ja_JP/translation.json

@@ -467,8 +467,10 @@
     "resolve_conflict": "衝突を解消",
     "resolve_and_save" : "解消し保存する",
     "select_revision" : "{{revision}}にする",
-    "revision_name": "{{revision}}の本文",
-    "selected_editable_revision": "Selected Revision(Editable)"
+    "requested_revision": "送信された本文",
+    "origin_revision": "送信する前の本文",
+    "latest_revision": "最新の本文",
+    "selected_editable_revision": "保存するページ本文(編集可能)"
   },
   "link_edit": {
     "edit_link": "リンク編集",

packages/app/resource/locales/zh_CN/translation.json

@@ -445,7 +445,9 @@
     "resolve_conflict": "解决冲突",
     "resolve_and_save" : "解决冲突并保存",
     "select_revision" : "选择{{revision}}",
-    "revision_name": "{{revision}}本文",
+    "requested_revision": "发送的页面正文",
+    "origin_revision": "发送前的页面正文",
+    "latest_revision": "最新页面正文",
     "selected_editable_revision": "选定的可编辑页面正文"
   },
   "link_edit": {

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

@@ -455,7 +455,7 @@ export default class PageContainer extends Container {
     return res;
   }
 
-  async saveAndReload(optionsToSave) {
+  async saveAndReload(optionsToSave, markdownOnConflict) {
     if (optionsToSave == null) {
       const msg = '\'saveAndReload\' requires the \'optionsToSave\' param';
       throw new Error(msg);
@@ -480,6 +480,9 @@ export default class PageContainer extends Container {
       options.isSyncRevisionToHackmd = true;
       revisionId = this.state.revisionIdHackmdSynced;
     }
+    else if (markdownOnConflict != null && markdownOnConflict.length >= 1) {
+      markdown = markdownOnConflict;
+    }
     else {
       const pageEditor = this.appContainer.getComponentInstance('PageEditor');
       markdown = pageEditor.getMarkdown();

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

@@ -7,45 +7,39 @@ import { parseISO, format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import PageContainer from '../../client/services/PageContainer';
+import EditorContainer from '../../client/services/EditorContainer';
 import { toastError } from '../../client/util/apiNotification';
 
-require('codemirror/addon/lint/css-lint');
-require('codemirror/addon/hint/css-hint');
-require('codemirror/addon/hint/show-hint');
-require('codemirror/mode/css/css');
-require('~/client/util/codemirror/autorefresh.ext');
-
-require('codemirror/addon/hint/show-hint');
-require('codemirror/addon/edit/matchbrackets');
-require('codemirror/addon/edit/closebrackets');
 require('codemirror/mode/htmlmixed/htmlmixed');
-require('~/client/util/codemirror/autorefresh.ext');
-
-require('jquery-ui/ui/widgets/resizable');
-
 
-require('jquery-ui/ui/widgets/resizable');
 
 const DMP = require('diff_match_patch');
 
-const INITIAL_TEXT = 'Please select revision';
-
 Object.keys(DMP).forEach((key) => { window[key] = DMP[key] });
 
 type ConflictDiffModalProps = {
   isOpen: boolean | null;
   onCancel: (() => void) | null;
   pageContainer: PageContainer;
+  editorContainer: EditorContainer;
 };
 
 export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
-  const resolvedRevision = useRef<string>(INITIAL_TEXT);
-  const [isRevisionselected, setIsRevisionselected] = useState<boolean>(false);
   const { t } = useTranslation('');
+  const resolvedRevision = useRef<string>(t('modal_resolve_conflict.resolve_conflict_message'));
+  const [isRevisionselected, setIsRevisionSelected] = useState<boolean>(false);
 
-  const { pageContainer } = props;
+  const { pageContainer, editorContainer } = props;
   const { request, origin, latest } = pageContainer.state.revisionsOnConflict || { request: {}, origin: {}, latest: {} };
 
+  const codeMirrorRevisionOption = {
+    mode: 'htmlmixed',
+    lineNumbers: true,
+    tabSize: 2,
+    indentUnit: 2,
+    readOnly: true,
+  };
+
   const onCancel = () => {
     if (props.onCancel != null) {
       props.onCancel();
@@ -54,12 +48,12 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
 
   const onResolveConflict = () : void => {
     // disable button after clicked
-    setIsRevisionselected(false);
+    setIsRevisionSelected(false);
     pageContainer.setState({
       revisionId: pageContainer.state.revisionsOnConflict?.latest.revisionId,
     }, async() => {
       try {
-        await pageContainer.save(resolvedRevision.current);
+        await pageContainer.saveAndReload(editorContainer.getCurrentOptionsToSave(), resolvedRevision.current);
         window.location.href = pageContainer.state.path || '/';
       }
       catch (error) {
@@ -80,34 +74,28 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
               <div className="col-12 text-center mt-2 mb-4">
                 <h2 className="font-weight-bold">{t('modal_resolve_conflict.resolve_conflict_message')}</h2>
               </div>
-              <div className="col-4 border border-dark">
-                <h3 className="font-weight-bold my-2">Request Revision</h3>
+              <div className="col-12 col-md-4 border border-dark">
+                <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.requested_revision')}</h3>
                 <div className="d-flex align-items-center my-3">
                   <div>
                     <img height="40px" className="rounded-circle" src={request.userImgPath} />
                   </div>
-                  <div className="ml-3">
-                    <p className="my-0 text-muted">updated by {request.userName}</p>
-                    <p className="my-0 text-muted">{format(parseISO(request.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                  <div className="ml-3 text-muted">
+                    <p className="my-0">updated by {request.userName}</p>
+                    <p className="my-0">{format(parseISO(request.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
                   </div>
                 </div>
                 <CodeMirror
-                  value={pageContainer.state.revisionsOnConflict?.request.revisionBody}
-                  options={{
-                    mode: 'htmlmixed',
-                    lineNumbers: true,
-                    tabSize: 2,
-                    indentUnit: 2,
-                    readOnly: true,
-                  }}
+                  value={request.revisionBody}
+                  options={codeMirrorRevisionOption}
                 />
                 <div className="text-center my-4">
                   <button
                     type="button"
                     className="btn btn-primary"
                     onClick={() => {
-                      setIsRevisionselected(true);
-                      resolvedRevision.current = pageContainer.state.revisionsOnConflict?.request.revisionBody;
+                      setIsRevisionSelected(true);
+                      resolvedRevision.current = request.revisionBody;
                     }}
                   >
                     <i className="icon-fw icon-arrow-down-circle"></i>
@@ -115,34 +103,28 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   </button>
                 </div>
               </div>
-              <div className="col-4 border border-dark">
-                <h3 className="font-weight-bold my-2">Original Revision</h3>
+              <div className="col-12 col-md-4 border border-dark">
+                <h3 className="font-weight-bold my-2">{t('origin_revision')}</h3>
                 <div className="d-flex align-items-center my-3">
                   <div>
                     <img height="40px" className="rounded-circle" src={origin.userImgPath} />
                   </div>
-                  <div className="ml-3">
-                    <p className="my-0 text-muted">updated by {origin.userName}</p>
-                    <p className="my-0 text-muted">{format(parseISO(origin.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                  <div className="ml-3 text-muted">
+                    <p className="my-0">updated by {origin.userName}</p>
+                    <p className="my-0">{format(parseISO(origin.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
                   </div>
                 </div>
                 <CodeMirror
-                  value={pageContainer.state.revisionsOnConflict?.origin.revisionBody}
-                  options={{
-                    mode: 'htmlmixed',
-                    lineNumbers: true,
-                    tabSize: 2,
-                    indentUnit: 2,
-                    readOnly: true,
-                  }}
+                  value={origin.revisionBody}
+                  options={codeMirrorRevisionOption}
                 />
                 <div className="text-center my-4">
                   <button
                     type="button"
                     className="btn btn-primary"
                     onClick={() => {
-                      setIsRevisionselected(true);
-                      resolvedRevision.current = pageContainer.state.revisionsOnConflict?.origin.revisionBody;
+                      setIsRevisionSelected(true);
+                      resolvedRevision.current = origin.revisionBody;
                     }}
                   >
                     <i className="icon-fw icon-arrow-down-circle"></i>
@@ -150,34 +132,28 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   </button>
                 </div>
               </div>
-              <div className="col-4 border border-dark">
-                <h3 className="font-weight-bold my-2">Latest Revision</h3>
+              <div className="col-12 col-md-4 border border-dark">
+                <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.latest_revision')}</h3>
                 <div className="d-flex align-items-center my-3">
                   <div>
                     <img height="40px" className="rounded-circle" src={latest.userImgPath} />
                   </div>
-                  <div className="ml-3">
-                    <p className="my-0 text-muted">updated by {latest.userName}</p>
-                    <p className="my-0 text-muted">{format(parseISO(latest.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
+                  <div className="ml-3 text-muted">
+                    <p className="my-0">updated by {latest.userName}</p>
+                    <p className="my-0">{format(parseISO(latest.createdAt), 'yyyy/MM/dd HH:mm:ss')}</p>
                   </div>
                 </div>
                 <CodeMirror
-                  value={pageContainer.state.revisionsOnConflict?.latest.revisionBody}
-                  options={{
-                    mode: 'htmlmixed',
-                    lineNumbers: true,
-                    tabSize: 2,
-                    indentUnit: 2,
-                    readOnly: true,
-                  }}
+                  value={latest.revisionBody}
+                  options={codeMirrorRevisionOption}
                 />
                 <div className="text-center my-4">
                   <button
                     type="button"
                     className="btn btn-primary"
                     onClick={() => {
-                      setIsRevisionselected(true);
-                      resolvedRevision.current = pageContainer.state.revisionsOnConflict?.latest.revisionBody;
+                      setIsRevisionSelected(true);
+                      resolvedRevision.current = latest.revisionBody;
                     }}
                   >
                     <i className="icon-fw icon-arrow-down-circle"></i>
@@ -186,7 +162,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                 </div>
               </div>
               <div className="col-12 border border-dark">
-                <h3 className="font-weight-bold my-2">{t('selected_editable_revision')}</h3>
+                <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
                 <CodeMirror
                   value={resolvedRevision.current}
                   options={{
@@ -195,15 +171,15 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                     tabSize: 2,
                     indentUnit: 2,
                   }}
-                  onChange={(editor, data, allText) => {
-                    resolvedRevision.current = allText;
+                  onChange={(editor, data, pageBody) => {
+                    if (pageBody === '') setIsRevisionSelected(false);
+                    resolvedRevision.current = pageBody;
                   }}
                 />
               </div>
             </div>
           )
         }
-        {console.log('diff:', pageContainer?.state.revisionsOnConflict)}
       </ModalBody>
       <ModalFooter>
         <button
@@ -230,6 +206,7 @@ ConflictDiffModal.propTypes = {
   isOpen: PropTypes.bool,
   onCancel: PropTypes.func,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  editorContainer:  PropTypes.instanceOf(EditorContainer).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, revisionsOnConflict: {} })}
+          onCancel={() => this.props.pageContainer.setState({ isConflictDiffModalOpen: false })}
           pageContainer={this.props.pageContainer}
+          editorContainer={this.props.editorContainer}
         />
       </>
     );

packages/app/src/components/PageStatusAlert.jsx

@@ -113,7 +113,6 @@ class PageStatusAlert extends React.Component {
     const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId;
 
     let getContentsFunc = null;
-    console.log('isConflictingOnSave:', isConflictingOnSave);
     // when conflicting on save
     if (isConflictingOnSave) {
       getContentsFunc = this.getContentsForRevisionOutdated;
@@ -137,9 +136,6 @@ class PageStatusAlert extends React.Component {
 
     const [additionalClasses, label, btn] = getContentsFunc();
 
-    console.log('return:', additionalClasses, label, btn);
-    this.props.pageContainer.setState({ isConflictDiffModalOpen: true });
-
     return (
       <div className={`card grw-page-status-alert text-white fixed-bottom animated fadeInUp faster ${additionalClasses.join(' ')}`}>
         <div className="card-body">