Rewrite Edtior by use React. And use bun instead of yarn.

huacnlee · Sep 13, 2023 · a6b2e67 · a6b2e67
1 parent 17f4677
commit a6b2e67
Show file tree

Hide file tree

Showing 6 changed files with 137 additions and 100 deletions.
diff --git a/autocorrect-website/bun.lockb b/autocorrect-website/bun.lockb
diff --git a/autocorrect-website/index.html b/autocorrect-website/index.html
@@ -89,17 +89,7 @@ <h1 class="text-3xl">AutoCorrect</h1>
     </div>
 
     <h2 id="try" class="mb-6 text-2xl">Try AutoCorrect</h2>
-    <div class="flex items-center justify-between mx-auto mb-4">
-      <select class="min-w-[250px]" id="filetype"></select>
-    </div>
-    <div class="editor-wraper"></div>
-    <div class="flex flex-wrap justify-between mb-6 space-y-6 lg:flex-nowrap lg:space-x-6 lg:space-y-0">
-      <div>
-        <button id="btn">Format</button> <span class="mx-2">or</span>
-        <button id="btnReset">Reset</button>
-        <span class="message"></span>
-      </div>
-    </div>
+    <div id="app-editor"></div>
 </body>
 
 </html>
diff --git a/autocorrect-website/package.json b/autocorrect-website/package.json
@@ -20,7 +20,9 @@
     "vite-plugin-wasm": "^3.1.0"
   },
   "dependencies": {
-    "@huacnlee/autocorrect": "^2.6.3"
+    "@huacnlee/autocorrect": "^2.6.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "license": "MIT"
 }
diff --git a/autocorrect-website/src/app.tsx b/autocorrect-website/src/app.tsx
@@ -4,10 +4,11 @@ const autocorrectLib = import('@huacnlee/autocorrect');
 import * as monaco from 'monaco-editor';
 import examples from './examples';
 
+import { useEffect, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 import './style.scss';
 
 let autocorrect: any;
-let currentFileType = 'text';
 
 let config = {
   rules: {
@@ -20,6 +21,26 @@ let config = {
   },
 };
 
+const createMarkers = (result: any) => {
+  const markers: monaco.editor.IMarkerData[] = result.lines.map(
+    (lineResult: any) => {
+      return {
+        severity:
+          lineResult.severity === 1
+            ? monaco.MarkerSeverity.Warning
+            : monaco.MarkerSeverity.Info,
+        startLineNumber: lineResult.l,
+        startColumn: lineResult.c,
+        endLineNumber: lineResult.l,
+        endColumn: lineResult.c + lineResult.old.length + 1,
+        message: `AutoCorrect: ${lineResult.new}`,
+      };
+    }
+  );
+
+  return markers;
+};
+
 const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
   theme: 'vs',
   tabSize: 2,
@@ -41,33 +62,40 @@ const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
 
 let editor: monaco.editor.IStandaloneCodeEditor;
 
-document.addEventListener('DOMContentLoaded', () => {
-  const input = document.querySelector('.editor-wraper') as HTMLElement;
-  if (!editor) {
-    editor = monaco.editor.create(input, {
-      value: '',
-      ...editorOptions,
-    });
-  }
-  editor.onDidChangeModelContent(() => {
-    lintText();
-  });
+export const AppEditor = () => {
+  const editorRef = useRef();
+  const [message, showMessage] = useState('');
+  const [fileType, setFileType] = useState('markdown');
 
-  editor.addCommand(monaco.KeyCode.KeyZ + monaco.KeyMod.CtrlCmd, function () {
-    reloadExample();
-  });
+  const onLint = () => {
+    if (!autocorrect) {
+      return;
+    }
+
+    const start = new Date();
+    const result = autocorrect.lintFor(editor.getValue(), fileType);
+    // @ts-ignore
+    const duration = new Date() - start;
+    showMessage(`Speed time: ${duration}ms`);
+
+    monaco.editor.setModelMarkers(
+      // @ts-ignore
+      editor.getModel(),
+      'autocorrect',
+      createMarkers(result)
+    );
 
-  const btn = document.querySelector('#btn') as HTMLElement;
-  const btnReset = document.querySelector('#btnReset') as HTMLElement;
-  const message = document.querySelector('.message') as HTMLElement;
-  const select = document.querySelector('#filetype') as any;
+    return false;
+  };
 
   const reloadExample = () => {
-    loadExampleByFileType(currentFileType);
+    loadExampleByFileType(fileType);
   };
 
   const loadExampleByFileType = (fileType: string) => {
-    currentFileType = fileType;
+    if (!editor) {
+      return;
+    }
 
     // @ts-ignore
     const example = examples[fileType];
@@ -77,89 +105,107 @@ document.addEventListener('DOMContentLoaded', () => {
     monaco.editor.setModelLanguage(editor.getModel(), fileType);
   };
 
-  const options = Object.keys(examples).map((key) => {
-    // @ts-ignore
-    const example = examples[key];
-    return "<option value='" + key + "'>" + example.title + '</option>';
-  });
-
-  autocorrectLib.then((ac) => {
-    const loadedConfig = ac.loadConfig(JSON.stringify(config));
-    console.log('Loaded config: ', loadedConfig);
-    autocorrect = ac;
-    // @ts-ignore
-    window.autocorrect = ac;
-
-    reloadExample();
-  });
-
-  select.innerHTML = options.join('');
-  select.value = 'javascript';
+  const FileTypeOptions = () => {
+    return (
+      <>
+        {Object.keys(examples).map((key) => {
+          // @ts-ignore
+          const item = examples[key];
+          return (
+            <option key={key} value={key}>
+              {item.title}
+            </option>
+          );
+        })}
+      </>
+    );
+  };
 
-  select.addEventListener('change', (e: any) => {
-    loadExampleByFileType(e.target.value);
-  });
+  const onChangeFileType = (e: any) => {
+    const fileType = e.target?.value;
+    setFileType(fileType);
+    loadExampleByFileType(fileType);
+  };
 
   const formatText = (e: any) => {
     e.preventDefault();
 
     const start = new Date();
-    const result = autocorrect.formatFor(editor.getValue(), currentFileType);
+    const result = autocorrect.formatFor(editor.getValue(), fileType);
     // @ts-ignore
     const duration = new Date() - start;
-    message.innerHTML = `Speed time: ${duration}ms`;
+    showMessage(`Speed time: ${duration}ms`);
     console.log(result);
 
     editor.setValue(result.out);
     return false;
   };
 
-  const lintText = () => {
-    if (!autocorrect) {
+  const initEditor = () => {
+    if (!editorRef?.current) {
+      return;
+    }
+    if (editor) {
       return;
     }
 
-    const start = new Date();
-    const result = autocorrect.lintFor(editor.getValue(), currentFileType);
-    // @ts-ignore
-    const duration = new Date() - start;
-    message.innerHTML = `Speed time: ${duration}ms`;
-
-    monaco.editor.setModelMarkers(
+    autocorrectLib.then((ac) => {
+      const loadedConfig = ac.loadConfig(JSON.stringify(config));
+      console.log('Loaded config: ', loadedConfig);
+      autocorrect = ac;
       // @ts-ignore
-      editor.getModel(),
-      'autocorrect',
-      createMarkers(result)
-    );
+      window.autocorrect = ac;
 
-    return false;
-  };
+      reloadExample();
+    });
 
-  // input.addEventListener('keyup', formatText);
-  btn.addEventListener('click', formatText);
-  btnReset.addEventListener('click', () => {
-    reloadExample();
-  });
+    console.log('initEditor');
+    editor = monaco.editor.create(editorRef?.current, {
+      value: '',
+      ...editorOptions,
+    });
 
-  loadExampleByFileType('javascript');
-});
+    editor.onDidChangeModelContent(() => {
+      onLint();
+    });
 
-const createMarkers = (result: any) => {
-  const markers: monaco.editor.IMarkerData[] = result.lines.map(
-    (lineResult: any) => {
-      return {
-        severity:
-          lineResult.severity === 1
-            ? monaco.MarkerSeverity.Warning
-            : monaco.MarkerSeverity.Info,
-        startLineNumber: lineResult.l,
-        startColumn: lineResult.c,
-        endLineNumber: lineResult.l,
-        endColumn: lineResult.c + lineResult.old.length + 1,
-        message: `AutoCorrect: ${lineResult.new}`,
-      };
-    }
-  );
+    editor.addCommand(monaco.KeyCode.KeyZ + monaco.KeyMod.CtrlCmd, function () {
+      reloadExample();
+    });
+  };
 
-  return markers;
+  useEffect(() => {
+    initEditor();
+    reloadExample();
+  }, [editorRef]);
+
+  return (
+    <div className="app-editor-wrap">
+      <div className="flex items-center justify-between mx-auto mb-4">
+        <select
+          onChange={onChangeFileType}
+          value={fileType}
+          className="min-w-[250px]"
+        >
+          <FileTypeOptions />
+        </select>
+
+        <div className="flex flex-wrap items-center justify-between space-y-6 lg:flex-nowrap lg:space-x-6 lg:space-y-0">
+          <span className="message">{message}</span>
+          <div className="flex gap-3">
+            <button onClick={reloadExample}>Reset</button>
+            <button className="btn-primary" onClick={formatText}>
+              Format
+            </button>
+          </div>
+        </div>
+      </div>
+      <div className="editor-wraper" ref={editorRef as any}></div>
+    </div>
+  );
 };
+
+document.addEventListener('DOMContentLoaded', () => {
+  const appEditor = createRoot(document.getElementById('app-editor') as any);
+  appEditor.render(<AppEditor />);
+});
diff --git a/autocorrect-website/src/style.scss b/autocorrect-website/src/style.scss
@@ -52,10 +52,10 @@ select {
 }
 
 button {
-  @apply border-0 shadow bg-gray-900 text-white rounded-md leading-4 py-3 px-10;
+  @apply border shadow border-gray-300 bg-white text-gray-900 hover:bg-gray-100 active:bg-gray-200 rounded-md leading-4 py-2.5 px-10;
 
-  &:active {
-    @apply bg-black;
+  &.btn-primary {
+    @apply bg-gray-900 text-white active:bg-black;
   }
 }
 

diff --git a/autocorrect-website/tailwind.config.js b/autocorrect-website/tailwind.config.js
@@ -1,6 +1,5 @@
 module.exports = {
-  purge: ['./**/*.html'],
-  content: [],
+  content: ['./**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
   theme: {
     extend: {},
   },