From a6b2e671b4f89cd90f2e25e1a739f3c0e75dea70 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Wed, 13 Sep 2023 19:01:18 +0800 Subject: [PATCH] Rewrite Edtior by use React. And use bun instead of yarn. --- autocorrect-website/bun.lockb | Bin 52844 -> 54710 bytes autocorrect-website/index.html | 12 +- autocorrect-website/package.json | 4 +- autocorrect-website/src/app.tsx | 212 +++++++++++++++---------- autocorrect-website/src/style.scss | 6 +- autocorrect-website/tailwind.config.js | 3 +- 6 files changed, 137 insertions(+), 100 deletions(-) diff --git a/autocorrect-website/bun.lockb b/autocorrect-website/bun.lockb index b87f51527451c170e5362cd1e9ccd163a93209fa..4e86f6d7aadf7048b2518e9ca170b7719ab1628b 100755 GIT binary patch delta 13290 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

Try AutoCorrect

-
- -
-
-
-
- or - - -
-
+
\ No newline at end of file diff --git a/autocorrect-website/package.json b/autocorrect-website/package.json index 660c04ef..454d3163 100644 --- 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" } \ No newline at end of file diff --git a/autocorrect-website/src/app.tsx b/autocorrect-website/src/app.tsx index f905bc16..5724d89c 100644 --- 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 "'; - }); - - 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 ( + + ); + })} + + ); + }; - 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 ( +
+
+ + +
+ {message} +
+ + +
+
+
+
+
+ ); }; + +document.addEventListener('DOMContentLoaded', () => { + const appEditor = createRoot(document.getElementById('app-editor') as any); + appEditor.render(); +}); diff --git a/autocorrect-website/src/style.scss b/autocorrect-website/src/style.scss index 12cfb974..2d37b2b6 100644 --- 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 index 6f123a99..a8c46112 100644 --- 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: {}, },