migrate to state from ref

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

@@ -39,7 +39,7 @@ type IRevisionOnConflictWithStringDate = Omit<IRevisionOnConflict, 'createdAt'>
 
 export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
   const { t } = useTranslation('');
-  const resolvedRevision = useRef<string>('');
+  const [resolvedRevision, setResolvedRevision] = useState<string>('');
   const [isRevisionselected, setIsRevisionSelected] = useState<boolean>(false);
   const [codeMirrorRef, setCodeMirrorRef] = useState<HTMLDivElement | null>(null);
 
@@ -97,7 +97,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
       await pageContainer.resolveConflictAndReload(
         pageContainer.state.pageId,
         latest.revisionId,
-        resolvedRevision.current,
+        resolvedRevision,
         editorContainer.getCurrentOptionsToSave(),
       );
     }
@@ -162,7 +162,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     setIsRevisionSelected(true);
-                    resolvedRevision.current = request.revisionBody;
+                    setResolvedRevision(request.revisionBody);
                   }}
                 >
                   <i className="icon-fw icon-arrow-down-circle"></i>
@@ -177,7 +177,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     setIsRevisionSelected(true);
-                    resolvedRevision.current = origin.revisionBody;
+                    setResolvedRevision(origin.revisionBody);
                   }}
                 >
                   <i className="icon-fw icon-arrow-down-circle"></i>
@@ -192,7 +192,7 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
                   className="btn btn-primary"
                   onClick={() => {
                     setIsRevisionSelected(true);
-                    resolvedRevision.current = latest.revisionBody;
+                    setResolvedRevision(latest.revisionBody);
                   }}
                 >
                   <i className="icon-fw icon-arrow-down-circle"></i>
@@ -203,14 +203,10 @@ export const ConflictDiffModal: FC<ConflictDiffModalProps> = (props) => {
             <div className="col-12 border border-dark">
               <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
               <UncontrolledCodeMirror
-                value={resolvedRevision.current}
+                value={resolvedRevision}
                 options={{
                   placeholder: t('modal_resolve_conflict.resolve_conflict_message'),
                 }}
-                onChange={(editor, data, pageBody) => {
-                  if (pageBody === '') setIsRevisionSelected(false);
-                  resolvedRevision.current = pageBody;
-                }}
               />
             </div>
           </div>