diff --git a/autocorrect-website/bun.lockb b/autocorrect-website/bun.lockb index 4e86f6d7..9ea4e2d8 100755 Binary files a/autocorrect-website/bun.lockb and b/autocorrect-website/bun.lockb differ diff --git a/autocorrect-website/index.html b/autocorrect-website/index.html index a415a8ef..91b4e415 100644 --- a/autocorrect-website/index.html +++ b/autocorrect-website/index.html @@ -5,91 +5,77 @@ AutoCorrect + - -
-
-
-
-

AutoCorrect

-
-
- Demo / - GitHub +
+
+
+
-
- Go - GitHub release (latest by date) - Docker Image Version (latest server) - Crates.io - NPM - PyPI version - Gem Version - Maven Central +

AutoCorrect

+
+

A linter and formatter for help you improve copywriting, to correct spaces, punctuations between CJK + (Chinese, Japanese, Korean).

+
+
+ +
Download
+
macOS / Windows / Linux
+ + +
Install Extension
+
Visual Studio Code
+ + +
Install Plugin
+
Intellij Platform
+ +
+
+ 
brew install autocorrect
+
Or just install via this:
+ 
curl -sSL https://git.io/JcGER | sh
+
+
+

Like Eslint, Rubocop, Gofmt ..., AutoCorrect allow us to checking soure code, and output as colorized diff + with corrected suggest. You can intergrating to CI (GitLab CI, GitHub Action, Travis CI....) for use to + checking the contents in source code. Recognize the file name, and find out the strings and the comment + part. +

+

基于 Rust 编写的 CLI 工具，用于「自动纠正」或「检查并建议」文案，给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号等等。

+

类似 ESlint、Rubocop、Gofmt 等工具，AutoCorrect 可以用于 CI 环境，它提供 Lint 功能能便捷的检测出项目中有问题的文案，起到统一规范的作用。

+

支持各种类型源代码文件，能自动识别文件名，并准确找到字符串、注释做自动纠正。

-
-
-

A linter and formatter for help you improve copywriting, to correct spaces, punctuations between CJK - (Chinese, Japanese, Korean).

-
-
- -
Download
-
macOS / Windows / Linux
- - -
Install Extension
-
Visual Studio Code
- - -
Install Plugin
-
Intellij Platform
- -
-
- 
brew install autocorrect
-
Or just install via this:
- 
curl -sSL https://git.io/JcGER | sh
-
-
-

Like Eslint, Rubocop, Gofmt ..., AutoCorrect allow us to checking soure code, and output as colorized diff - with corrected suggest. You can intergrating to CI (GitLab CI, GitHub Action, Travis CI....) for use to - checking the contents in source code. Recognize the file name, and find out the strings and the comment part. +

+ + +

-

基于 Rust 编写的 CLI 工具，用于「自动纠正」或「检查并建议」文案，给 CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号等等。

-

类似 ESlint、Rubocop、Gofmt 等工具，AutoCorrect 可以用于 CI 环境，它提供 Lint 功能能便捷的检测出项目中有问题的文案，起到统一规范的作用。

-

支持各种类型源代码文件，能自动识别文件名，并准确找到字符串、注释做自动纠正。

+
+
+
+
+
+
+
+
+
-

- - - -

+
+
- -

Try AutoCorrect

-
+
\ No newline at end of file diff --git a/autocorrect-website/package.json b/autocorrect-website/package.json index 454d3163..10b92e9d 100644 --- a/autocorrect-website/package.json +++ b/autocorrect-website/package.json @@ -21,8 +21,10 @@ }, "dependencies": { "@huacnlee/autocorrect": "^2.6.3", + "@monaco-editor/react": "^4.5.2", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.15.0" }, "license": "MIT" } \ No newline at end of file diff --git a/autocorrect-website/public/manifest.webmanifest b/autocorrect-website/public/manifest.webmanifest new file mode 100644 index 00000000..095821d3 --- /dev/null +++ b/autocorrect-website/public/manifest.webmanifest @@ -0,0 +1,17 @@ +{ + "name": "AutoCorrect", + "short_name": "AutoCorrect", + "description": "AutoCorrect Playground.", + "start_url": "/autocorrect/editor", + "scope": "/autocorrect/", + "display": "standalone", + "background_color": "#FFFFFF", + "theme_color": "#FFFFFF", + "icons": [ + { + "src": "https://user-images.githubusercontent.com/5518/194691346-13856309-266b-4bf6-b505-5a8b15d0c02e.png", + "sizes": "512x512", + "type": "image/png" + } + ] +} \ No newline at end of file diff --git a/autocorrect-website/src/AppEditor.tsx b/autocorrect-website/src/AppEditor.tsx new file mode 100644 index 00000000..2682691d --- /dev/null +++ b/autocorrect-website/src/AppEditor.tsx @@ -0,0 +1,207 @@ +import Editor from '@monaco-editor/react'; +import * as monaco from 'monaco-editor'; +import { useEffect, useState } from 'react'; +import examples from './examples'; +import './style.scss'; +export const autocorrectLib = import('@huacnlee/autocorrect'); + +export let config = { + rules: { + fullwidth: 2, + 'halfwidth-punctuation': 2, + spellcheck: 2, + }, + spellcheck: { + words: ['WebAssembly', 'Rust', 'NPM', 'Web', 'JavaScript'], + }, +}; + +export 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; +}; + +autocorrectLib.then((ac) => { + const loadedConfig = ac.loadConfig(JSON.stringify(config)); + console.log('Loaded config: ', loadedConfig); + // @ts-ignore + window.autocorrect = ac; +}); + +export const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = + { + theme: 'vs', + tabSize: 2, + useTabStops: true, + scrollbar: { + verticalScrollbarSize: 5, + horizontalScrollbarSize: 5, + useShadows: true, + }, + renderLineHighlight: 'none', + minimap: { + enabled: false, + }, + formatOnPaste: true, + unicodeHighlight: { + ambiguousCharacters: false, + }, + }; + +export const AppEditor = () => { + const [monaco, setMonaco] = useState(); + const [editor, setEditor] = useState(); + const [message, showMessage] = useState(''); + const [fileType, setFileType] = useState('markdown'); + + // @ts-ignore + const autocorrect = window.autocorrect; + + const onLint = () => { + if (!editor) { + return; + } + 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) + ); + + return false; + }; + + const reloadExample = () => { + loadExampleByFileType(fileType); + }; + + const loadExampleByFileType = (fileType: string) => { + if (!editor) { + return; + } + + // @ts-ignore + const example = examples[fileType]; + + editor.setValue(example.raw); + // @ts-ignore + monaco.editor.setModelLanguage(editor.getModel(), fileType); + }; + + const FileTypeOptions = () => { + return ( + <> + {Object.keys(examples).map((key) => { + // @ts-ignore + const item = examples[key]; + return ( + + ); + })} + + ); + }; + + const onChangeFileType = (e: any) => { + const fileType = e.target?.value; + setFileType(fileType); + loadExampleByFileType(fileType); + }; + + const formatText = (e: any) => { + e.preventDefault(); + if (!editor) { + return; + } + + const start = new Date(); + const result = autocorrect.formatFor(editor.getValue(), fileType); + // @ts-ignore + const duration = new Date() - start; + showMessage(`Speed time: ${duration}ms`); + console.log(result); + + editor.setValue(result.out); + return false; + }; + + const initEditor = () => { + if (!editor) { + return; + } + + editor.onDidChangeModelContent(() => { + onLint(); + }); + + editor.addCommand(monaco.KeyCode.KeyZ + monaco.KeyMod.CtrlCmd, function () { + reloadExample(); + }); + }; + + useEffect(() => { + initEditor(); + reloadExample(); + }, [editor]); + + return ( +
+
+ + +
+ {message} +
+ + +
+
+
+
+ { + setEditor(editor); + setMonaco(monaco); + }} + /> +
+
+ ); +}; diff --git a/autocorrect-website/src/app.tsx b/autocorrect-website/src/app.tsx index 5724d89c..c38c3f51 100644 --- a/autocorrect-website/src/app.tsx +++ b/autocorrect-website/src/app.tsx @@ -1,211 +1,97 @@ /// /// -const autocorrectLib = import('@huacnlee/autocorrect'); -import * as monaco from 'monaco-editor'; -import examples from './examples'; -import { useEffect, useRef, useState } from 'react'; +import React from 'react'; import { createRoot } from 'react-dom/client'; -import './style.scss'; - -let autocorrect: any; - -let config = { - rules: { - fullwidth: 2, - 'halfwidth-punctuation': 2, - spellcheck: 2, - }, - spellcheck: { - words: ['WebAssembly', 'Rust', 'NPM', 'Web', 'JavaScript'], - }, -}; - -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, - useTabStops: true, - scrollbar: { - verticalScrollbarSize: 5, - horizontalScrollbarSize: 5, - useShadows: true, - }, - renderLineHighlight: 'none', - minimap: { - enabled: false, - }, - formatOnPaste: true, - unicodeHighlight: { - ambiguousCharacters: false, - }, -}; - -let editor: monaco.editor.IStandaloneCodeEditor; - -export const AppEditor = () => { - const editorRef = useRef(); - const [message, showMessage] = useState(''); - const [fileType, setFileType] = useState('markdown'); - - 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) - ); - - return false; - }; - - const reloadExample = () => { - loadExampleByFileType(fileType); - }; - - const loadExampleByFileType = (fileType: string) => { - if (!editor) { - return; +import { + Link, + NavLink, + Outlet, + RouterProvider, + createBrowserRouter, +} from 'react-router-dom'; +import { AppEditor } from './AppEditor'; +import { Welcome } from './welcome'; + +const Layout = () => { + const NavbarItem = (props: any) => { + const { href, children } = props; + + if (href.startsWith('/autocorrect/')) { + return ( + { + return isActive ? 'navbar-item navbar-item-active' : 'navbar-item'; + }} + to={href} + > + {children} + + ); } - // @ts-ignore - const example = examples[fileType]; - - editor.setValue(example.raw); - // @ts-ignore - monaco.editor.setModelLanguage(editor.getModel(), fileType); - }; - - const FileTypeOptions = () => { return ( - <> - {Object.keys(examples).map((key) => { - // @ts-ignore - const item = examples[key]; - return ( - - ); - })} - + + {children} + ); }; - 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(), fileType); - // @ts-ignore - const duration = new Date() - start; - showMessage(`Speed time: ${duration}ms`); - console.log(result); - - editor.setValue(result.out); - return false; - }; - - const initEditor = () => { - if (!editorRef?.current) { - return; - } - if (editor) { - return; - } - - autocorrectLib.then((ac) => { - const loadedConfig = ac.loadConfig(JSON.stringify(config)); - console.log('Loaded config: ', loadedConfig); - autocorrect = ac; - // @ts-ignore - window.autocorrect = ac; - - reloadExample(); - }); - - console.log('initEditor'); - editor = monaco.editor.create(editorRef?.current, { - value: '', - ...editorOptions, - }); - - editor.onDidChangeModelContent(() => { - onLint(); - }); - - editor.addCommand(monaco.KeyCode.KeyZ + monaco.KeyMod.CtrlCmd, function () { - reloadExample(); - }); - }; - - useEffect(() => { - initEditor(); - reloadExample(); - }, [editorRef]); - return ( -
-
- - -
- {message} -
- - + <> +
+
+
+ + + +
AutoCorrect
+ +
+
+ Intro + Playground + + GitHub +
-
-
+ + ); }; +const router = createBrowserRouter([ + { + path: '/autocorrect', + + element: , + children: [ + { + path: '', + index: true, + element: , + }, + { + path: '/autocorrect/editor', + element: , + }, + ], + }, +]); + document.addEventListener('DOMContentLoaded', () => { - const appEditor = createRoot(document.getElementById('app-editor') as any); - appEditor.render(); + const appEditor = createRoot(document.getElementById('app') as any); + appEditor.render( + + + + ); }); diff --git a/autocorrect-website/src/examples.js b/autocorrect-website/src/examples.js index ae06f5cf..2789e77f 100644 --- a/autocorrect-website/src/examples.js +++ b/autocorrect-website/src/examples.js @@ -1,5 +1,20 @@ // autocorrect: false export default { + markdown: { + title: 'Markdown', + raw: `# 这是Heading 1大标题 +**加粗** +*倾斜* +~~删除线~~ +这是**Bold加粗**在1个段落中，这端会correct掉，如果是inline code，例如\`Rust语言\`，也可以应该处理。 +> 引用文本：Quote也是可以的。 +\`\`\`rust +// Codeblock里面也会处理 +let a = "你好hello"; +\`\`\` +- ![img图片](https://google.com/a/b/url不处理) +- [link链接](https://google.com/a/b/url不处理)`, + }, javascript: { title: 'JavaScript', raw: `/** @@ -52,21 +67,6 @@ function application() { font: Helvetica, sans-serif; } `, - }, - markdown: { - title: 'Markdown', - raw: `# 这是Heading 1大标题 -**加粗** -*倾斜* -~~删除线~~ -这是**Bold加粗**在1个段落中，这端会correct掉，如果是inline code，例如\`Rust语言\`，也可以应该处理。 -> 引用文本：Quote也是可以的。 -\`\`\`rust -// Codeblock里面也会处理 -let a = "你好hello"; -\`\`\` -- ![img图片](https://google.com/a/b/url不处理) -- [link链接](https://google.com/a/b/url不处理)`, }, rust: { title: 'Rust', diff --git a/autocorrect-website/src/style.scss b/autocorrect-website/src/style.scss index 2d37b2b6..be5f223f 100644 --- a/autocorrect-website/src/style.scss +++ b/autocorrect-website/src/style.scss @@ -2,24 +2,32 @@ @tailwind components; @tailwind utilities; -body { - @apply text-sm px-6 lg:px-0 text-center pb-20; +html { + overscroll-behavior: none; } -.container { - @apply max-w-5xl w-full my-8 mx-auto text-left; +body { + @apply text-sm text-center pt-12; } .navbar { - @apply text-lg text-gray-300; + @apply bg-white shadow fixed top-0 left-0 right-0 z-50; - a { - @apply text-blue-600 px-2; + .navbar-brand { + @apply flex items-center flex-shrink-0 py-2; + } + + .navbar-item { + @apply inline-flex items-center px-4 py-2 h-8 text-sm rounded font-medium text-gray-900; + + &-active { + @apply bg-gray-200; + } } } -.sub-navbar { - @apply flex items-center justify-center space-x-2; +.container { + @apply max-w-5xl w-full my-8 px-4 mx-auto text-left; } .intro { @@ -31,9 +39,7 @@ body { } .editor-wraper { - width: 100%; - height: 480px; - @apply rounded-sm border border-gray-300 shadow mb-4; + @apply rounded-sm border border-gray-300 shadow; } select { @@ -48,14 +54,14 @@ select { } select { - @apply block pl-3 pr-10 py-2 text-base shadow-sm border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md; + @apply block pl-3 pr-4 py-1.5 text-base shadow-sm border border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md; } button { - @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; + @apply rounded bg-white px-4 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50; &.btn-primary { - @apply bg-gray-900 text-white active:bg-black; + @apply bg-blue-600 ring-blue-800 hover:to-blue-500 text-white active:bg-blue-700; } } diff --git a/autocorrect-website/src/welcome.tsx b/autocorrect-website/src/welcome.tsx new file mode 100644 index 00000000..143af6d6 --- /dev/null +++ b/autocorrect-website/src/welcome.tsx @@ -0,0 +1,133 @@ +export const Welcome = () => { + return ( +
+
+ +
+

+ A linter and formatter for help you improve copywriting, to correct + spaces, punctuations between CJK (Chinese, Japanese, Korean). +

+
+ +
+ 
+            brew install autocorrect
+
+
Or just install via this:
+ 
+            curl -sSL https://git.io/JcGER | sh
+
+
+
+

+ Like Eslint, Rubocop, Gofmt ..., AutoCorrect allow us to checking + soure code, and output as colorized diff with corrected suggest. You + can intergrating to CI (GitLab CI, GitHub Action, Travis CI....) for + use to checking the contents in source code. Recognize the file + name, and find out the strings and the comment part. +

+

+ 基于 Rust 编写的 CLI 工具，用于「自动纠正」或「检查并建议」文案，给 + CJK（中文、日语、韩语）与英文混写的场景，补充正确的空格，同时尝试以安全的方式自动纠正标点符号等等。 +

+

+ 类似 ESlint、Rubocop、Gofmt 等工具，AutoCorrect 可以用于 CI + 环境，它提供 Lint + 功能能便捷的检测出项目中有问题的文案，起到统一规范的作用。 +

+

+ 支持各种类型源代码文件，能自动识别文件名，并准确找到字符串、注释做自动纠正。 +

+
+ +

+ + + +

+
+
+ ); +};