Fix style, Fix bug.

frontend/app/editor.tsx

@@ -1,31 +1,56 @@
-import { DownloadOutlined } from '@ant-design/icons';
-import { Button, Col, Layout, Row, Tree, message, Upload, Divider } from "antd";
-import { UploadOutlined, DownOutlined } from '@ant-design/icons';
-import type { TreeDataNode, TreeProps } from 'antd';
-import {
-  gzip, zlib, AsyncGzip, zip, unzip, strFromU8,
-  Zip, AsyncZipDeflate, Unzip, AsyncUnzipInflate,
-  Unzipped
-} from 'fflate';
-import { useState, useEffect, Key } from 'react';
-import { InboxOutlined, CheckOutlined, UndoOutlined } from '@ant-design/icons';
-import type { ChangeHandler, MonacoDiffEditorProps } from './monaco';
-import type { UploadProps } from 'antd';
+import DownloadOutlined from '@ant-design/icons/lib/icons/DownloadOutlined';
+import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
+import InboxOutlined from '@ant-design/icons/lib/icons/InboxOutlined';
+import CheckOutlined from '@ant-design/icons/lib/icons/CheckOutlined';
+import UndoOutlined from '@ant-design/icons/lib/icons/UndoOutlined';
+import LoadingOutlined from '@ant-design/icons/lib/icons/LoadingOutlined';
+import Button from 'antd/es/button/button';
+import Row from 'antd/es/row';
+import Col from 'antd/es/col';
+import Upload from 'antd/es/upload/Upload';
+import Divider from 'antd/es/divider';
+import message from 'antd/es/message';
+import Tree from 'antd/es/tree';
+import Layout from 'antd/es/layout';
 import Text from "antd/es/typography/Text";
-import { saveAs } from 'file-saver';
+import Flex from "antd/es/flex";
+import Dragger from 'antd/es/upload/Dragger';
 const { DirectoryTree } = Tree;
 
+import { zip, unzip, Unzipped } from 'fflate/browser';
+import { useState, Key } from 'react';
+import { saveAs } from 'file-saver';
+
+import type { TreeDataNode, TreeProps, UploadFile } from 'antd';
+import type { UploadProps } from 'antd';
+import type { ChangeHandler } from './monaco';
 
-// import MonacoDiffEditor from './monaco';
 import dynamic from "next/dynamic";
 const MonacoDiffEditor = dynamic(() => import("./monaco"), {
   ssr: false,
+  loading: () => (
+  <Flex vertical justify='center' align='center'>
+    <span style={{fontSize: 'xxx-large'}}> <LoadingOutlined /> <br />  </span> Loading...
+  </Flex>)
 });
 
-const { Header, Footer, Sider, Content } = Layout;
-const { Dragger } = Upload;
+const { Sider, Content } = Layout;
+
+export interface DiffEditorProps {
+  // oldFileTree: Unzipped | null,
+  // newFileTree: Unzipped | null,
+  /**
+   * An event emitted when tree data changed.
+   */
+  onOldTreeChange?: (data: Unzipped | null) => void;
+  onNewTreeChange?: (data: Unzipped | null) => void;
+}
 
-export default function DiffEditor() {
+
+export default function DiffEditor({
+  onOldTreeChange,
+  onNewTreeChange,
+}: DiffEditorProps) {
   const [oldProjectFilename, setOldProjectFilename] = useState("")
   const [newProjectFilename, setNewProjectFilename] = useState("")
   const [oldTreeData, setOldTreeData] = useState<Unzipped | null>(null)
@@ -34,6 +59,17 @@ export default function DiffEditor() {
   const [expandedKeysOld, setExpandedKeysOld] = useState<Key[]>([])
   const [expandedKeysNew, setExpandedKeysNew] = useState<Key[]>([])
 
+  const updateOld = (data: Unzipped | null, name: string) => {
+    setOldProjectFilename(name)
+    setOldTreeData(data)
+    onOldTreeChange?.(data)
+  }
+  const updateNew = (data: Unzipped | null, name: string) => {
+    setNewProjectFilename(name)
+    setNewTreeData(data)
+    onNewTreeChange?.(data)
+  }
+
   const makeOrGetDir = (children: TreeDataNode[], key: string, name: string) => {
     const node = children.find((child) => child.title === name)
     if (node) {
@@ -66,7 +102,7 @@ export default function DiffEditor() {
         currentKey = t.key as string
         current = t.children as TreeDataNode[]
       }
-      if (dirs.length === 0 || dirs[dirs.length-1].length === 0) { continue }
+      if (dirs.length === 0 || dirs[dirs.length - 1].length === 0) { continue }
       const leaf: TreeDataNode = {
         title: dirs[dirs.length - 1],
         key: path,
@@ -79,15 +115,15 @@ export default function DiffEditor() {
   }
   const uploadPropsOld: UploadProps = {
     onChange(info) {
+      // console.log(`Processing: ${info.file.name}`, 1.5);
       message.info(`Processing: ${info.file.name}`, 1.5);
       info.fileList[0].originFileObj?.arrayBuffer().then((buffer) => {
         unzip(new Uint8Array(buffer), (err, unzipped) => {
           if (err) {
             message.error(`Unzip file ${info.file.name} failed.`)
           } else {
             // console.log(unzipped);
-            setOldProjectFilename(info.file.name)
-            setOldTreeData(unzipped);
+            updateOld(unzipped, info.file.name)
           }
         });
       }).catch((err) => {
@@ -97,15 +133,14 @@ export default function DiffEditor() {
   }
   const uploadPropsNew: UploadProps = {
     onChange(info) {
-      message.success(`${info.file.name}`);
+      message.info(`Processing: ${info.file.name}`, 1.5);
       info.fileList[0].originFileObj?.arrayBuffer().then((buffer) => {
         unzip(new Uint8Array(buffer), (err, unzipped) => {
           if (err) {
             message.error(`Unzip file ${info.file.name} failed.`);
           } else {
             // console.log(unzipped)
-            setNewProjectFilename(info.file.name)
-            setNewTreeData(unzipped)
+            updateNew(unzipped, info.file.name)
           }
         });
       }).catch((err) => {
@@ -115,10 +150,13 @@ export default function DiffEditor() {
   }
 
   const onSelectTree: TreeProps['onSelect'] = (selectedKeys, info) => {
-    console.log('selected', selectedKeys, info);
     if (selectedKeys.length === 0) {
       setSelectedKey('')
     } else {
+      // selected folder
+      if (!hasFileData(oldTreeData, selectedKeys[0] as string) && !hasFileData(newTreeData, selectedKeys[0] as string)) {
+        return
+      }
       setSelectedKey(selectedKeys[0] as string)
     }
   }
@@ -214,7 +252,6 @@ export default function DiffEditor() {
           options={options}
           onOldChange={onOldChange}
           onNewChange={onNewChange}
-        // height={'70vh'}
         />
       </Content>
       <Sider width="15%" reverseArrow={true} collapsible={true} theme="light" collapsedWidth={0}>
@@ -229,16 +266,16 @@ export default function DiffEditor() {
         />
       </Sider>
     </Layout>
-    <Row style={{marginTop: "5px"}}>
-      <Col span={11} style={{ display: 'flex', justifyContent: 'center' }}>
+    <Row style={{ marginTop: "5px" }} justify="space-evenly" align="middle">
+      <Col>
         <Button icon={<DownloadOutlined />} onClick={() => { downloadZip(oldTreeData, oldProjectFilename) }}>
           Save
         </Button>
       </Col>
-      <Col span={2}>
-        <Button icon={<UndoOutlined />} onClick={() => {setNewTreeData(null); setNewProjectFilename(''); setOldTreeData(null); setOldProjectFilename(''); setSelectedKey('')}}>Reset</Button>
+      <Col>
+        <Button icon={<UndoOutlined />} onClick={() => { updateNew(null, ''); updateOld(null, ''); setSelectedKey('') }}>Reset</Button>
       </Col>
-      <Col span={11} style={{ display: 'flex', justifyContent: 'center' }}>
+      <Col>
         <Button icon={<DownloadOutlined />} onClick={() => { downloadZip(newTreeData, newProjectFilename) }}>
           Save
         </Button>

frontend/app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
+import AntdRegistry from '@ant-design/nextjs-registry/lib/AntdRegistry';
 
 export const metadata: Metadata = {
   title: "Latexdiff-web",
@@ -15,7 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body><AntdRegistry>{children}</AntdRegistry></body>
     </html>
   );
 }

frontend/app/monaco.tsx

@@ -44,46 +44,61 @@ export default function MonacoDiffEditor(
   const editor = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);
   const _oldSubscription = useRef<monaco.IDisposable | undefined>(undefined);
   const _newSubscription = useRef<monaco.IDisposable | undefined>(undefined);
+  const originalModel = useRef<monaco.editor.ITextModel | null>(null);
+  const modifiedModel = useRef<monaco.editor.ITextModel | null>(null);
 
   useEffect(
     () => {
       if (containerElement.current) {
         if (editor.current !== null) {
           console.log("Error! editor object is not null! Skip initialization.");
           return
+        } else {
+          editor.current = monaco.editor.createDiffEditor(
+            containerElement.current,
+            options
+          );
         }
-        // Before initializing monaco editor
-        editor.current = monaco.editor.createDiffEditor(
-          containerElement.current,
-          options
-        );
-        // Initialize models.
-        const originalModel = monaco.editor.createModel(
-          original === undefined ? "" : original
-        );
-        const modifiedModel = monaco.editor.createModel(
-          modified === undefined ? "" : modified
-        );
+        const originalText = original === undefined ? "" : original;
+        if (originalModel.current === null) {
+          originalModel.current = monaco.editor.createModel(
+            originalText
+          );
+        } else {
+          originalModel.current.setValue(originalText);
+        }
+
+        const modifiedText = modified === undefined ? "" : modified;
+        if (modifiedModel.current === null) {
+          modifiedModel.current = monaco.editor.createModel(
+            modifiedText
+          );
+        } else {
+          modifiedModel.current.setValue(modifiedText);
+        }
+
         editor.current.setModel({
-          original: originalModel,
-          modified: modifiedModel,
+          original: originalModel.current,
+          modified: modifiedModel.current,
         });
 
-        if (onOldChange !== undefined) {
+        // TODO: handle onOldChange and onNewChange change.
+        if (onOldChange !== undefined && _oldSubscription.current === undefined) {
           const models = editor.current.getModel()
           _oldSubscription.current = models?.original.onDidChangeContent((event) => {
             onOldChange(models?.original.getValue(), event)
           });
         }
-        if (onNewChange !== undefined) {
+        if (onNewChange !== undefined && _newSubscription.current === undefined) {
           const models = editor.current.getModel()
           _newSubscription.current = models?.modified.onDidChangeContent((event) => {
             onNewChange(models?.modified.getValue(), event)
           });
         }
+        return;
       }
     },
-    [],
+    [onOldChange, onNewChange, options, original, modified],
   );
 
   return (

frontend/app/page.tsx

@@ -1,5 +1,9 @@
 "use client";
-import { UploadOutlined, LoadingOutlined, CheckCircleOutlined, DownloadOutlined, RightOutlined } from '@ant-design/icons';
+import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
+import LoadingOutlined from '@ant-design/icons/lib/icons/LoadingOutlined';
+import CheckCircleOutlined from '@ant-design/icons/lib/icons/CheckCircleOutlined';
+import DownloadOutlined from '@ant-design/icons/lib/icons/DownloadOutlined';
+import RightOutlined from '@ant-design/icons/lib/icons/RightOutlined';
 import Text from "antd/es/typography/Text";
 import Title from "antd/es/typography/Title";
 import Button from 'antd/es/button/button';
@@ -15,14 +19,17 @@ import Checkbox from 'antd/es/checkbox/Checkbox';
 import Progress from 'antd/es/progress/progress';
 import Space from 'antd/es/space';
 import Flex from 'antd/es/flex';
+import Row from 'antd/es/row';
+import Col from 'antd/es/col';
+import Form from 'antd/es/form';
+import Divider from 'antd/es/divider';
+import { Color, ColorFactory } from 'antd/es/color-picker/color';
 
 import Giscus from './giscus';
-import { useState, useEffect, useRef } from 'react';
-import { Col, Divider, Form, Row } from 'antd';
-import { Color } from 'antd/es/color-picker';
-import { ColorFactory } from 'antd/es/color-picker/color';
 import message from 'antd/es/message';
 import DiffEditor from './editor';
+
+import { useState, useEffect, useRef } from 'react';
 const { Option } = Select;
 
 export default function Home() {
@@ -433,7 +440,7 @@ export default function Home() {
     <Flex align="center" vertical>
       <Title style={{ fontSize: "19pt", marginTop: 0, marginBottom: 0 }}><a href="https://github.com/am009/git-latexdiff-web">git-latexdiff web</a></Title>
     </Flex>);
-  let editor = (<div><DiffEditor /></div>)
+  let editor = (<DiffEditor />)
 
   let right = currentTab === 'editor' ? next : submit2
   return (

frontend/next.config.mjs

@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
+// import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
+
+let port = 8888;
 
 const webpack = (
     config,
@@ -12,6 +15,9 @@ const webpack = (
         filename: "static/[name].worker.js",
       }));
     }
+    // if (isServer) {
+    //   config.plugins.push(new BundleAnalyzerPlugin({analyzerPort: ++port}));
+    // }
     config.module.rules.push({
       test: /\.ttf$/,
       type: 'asset/resource',