codemirror wip

packages/app/package.json

@@ -59,8 +59,8 @@
     "@google-cloud/storage": "^5.8.5",
     "@growi/codemirror-textlint": "^4.4.8-RC.0",
     "@growi/plugin-attachment-refs": "^4.4.8-RC.0",
-    "@growi/plugin-pukiwiki-like-linker": "^4.4.8-RC.0",
     "@growi/plugin-lsx": "^4.4.8-RC.0",
+    "@growi/plugin-pukiwiki-like-linker": "^4.4.8-RC.0",
     "@growi/slack": "^4.4.8-RC.0",
     "@promster/express": "^5.1.0",
     "@promster/server": "^6.0.3",
@@ -85,6 +85,7 @@
     "date-fns": "^2.23.0",
     "detect-indent": "^6.0.0",
     "diff": "^5.0.0",
+    "diff_match_patch": "^0.1.1",
     "elasticsearch": "^16.0.0",
     "entities": "^2.0.0",
     "esa-nodejs": "^0.0.7",

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

@@ -1,40 +1,66 @@
 import React, {
-  useState, useEffect, useRef, FC,
+  createElement, useState, useEffect, useRef, FC,
 } from 'react';
 import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
-import CodeMirror from 'codemirror';
+import CodeMirror from 'codemirror/lib/codemirror';
+import { JSHINT } from 'jshint';
 
-import('codemirror/addon/merge/merge');
+require('codemirror/addon/merge/merge');
+require('codemirror/lib/codemirror.css');
+require('codemirror/theme/eclipse.css');
+require('codemirror/theme/neat.css');
+require('codemirror/addon/lint/lint.css');
+require('codemirror/addon/merge/merge.css');
+require('codemirror/mode/javascript/javascript');
+require('codemirror/addon/lint/lint');
+require('codemirror/addon/lint/javascript-lint');
+require('codemirror/addon/merge/merge');
+
+
+Object.keys(JSHINT).forEach((key) => { window[key] = JSHINT[key] });
+const DMP = require('diff_match_patch');
+
+Object.keys(DMP).forEach((key) => { window[key] = DMP[key] });
 
 export const ConflictDiffModal: FC = () => {
 
-  const codeMirrorRef = useRef(null);
+  const codeMirrorRef = useRef<HTMLDivElement | null>(null);
 
-  const [val, setVal] = useState('');
-  const [orig, setOrig] = useState('');
+  const [val, setVal] = useState('Test Value');
+  const [orig, setOrig] = useState('Original Value');
 
+  const divElem = createElement('div');
 
   useEffect(() => {
-    CodeMirror.MergeView(codeMirrorRef.current, {
+    console.log(divElem);
+    const test = CodeMirror.MergeView(divElem, {
+      theme: 'eclipse',
       value: val,
-      origLeft: orig,
-      origRight: null,
+      origLeft: null,
+      origRight: orig,
       allowEditingOriginals: true,
+      lineNumbers: true,
+      mode: 'javascript',
+      highlightDifferences: true,
       gutters: ['CodeMirror-lint-markers'],
       lint: true,
       connect: 'align',
     });
-  });
+    console.log(test);
+
+  }, []);
 
   return (
     <Modal isOpen className="modal-gfm-cheatsheet">
       <ModalHeader tag="h4" className="bg-primary text-light">
-        <i className="icon-fw icon-question" />Markdown help
+        <i className="icon-fw icon-question" />Resolve Conflict
       </ModalHeader>
       <ModalBody>
-        <div ref={codeMirrorRef} />
+        <div
+          ref={codeMirrorRef}
+        />
       </ModalBody>
     </Modal>
   );

yarn.lock

@@ -7310,6 +7310,11 @@ diff@^5.0.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
   integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
 
+diff_match_patch@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/diff_match_patch/-/diff_match_patch-0.1.1.tgz#d3f14d5b76fb4b5a9cf44706261dadb5bd97edbc"
+  integrity sha1-0/FNW3b7S1qc9EcGJh2ttb2X7bw=
+
 diffie-hellman@^5.0.0:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"