website: Add language example.

Author: jaywcjlove

README.md

@@ -49,6 +49,49 @@ export default function App() {
 }
 ```
 
+## Support Language
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-language-rz4rh?fontsize=14&hidenavigation=1&theme=dark)
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { StreamLanguage } from '@codemirror/stream-parser';
+import { go } from '@codemirror/legacy-modes/mode/go';
+
+const goLang = `package main
+import "fmt"
+
+func main() {
+  fmt.Println("Hello, 世界")
+}`;
+
+export default function App() {
+  return (
+    <CodeMirror
+      value={goLang}
+      height="200px"
+      extensions={[StreamLanguage.define(go)]}
+      onChange={(value, viewUpdate) => {
+        console.log('value:', value);
+      }}
+    />
+  );
+}
+```
+
+- ~~`@codemirror/legacy-modes/mode/cpp`~~ => [`@codemirror/lang-cpp`](https://www.npmjs.com/package/@codemirror/lang-cpp)
+- ~~`@codemirror/legacy-modes/mode/html`~~ => [`@codemirror/lang-html`](https://www.npmjs.com/package/@codemirror/lang-html)
+- ~~`@codemirror/legacy-modes/mode/java`~~ => [`@codemirror/lang-java`](https://www.npmjs.com/package/@codemirror/lang-java)
+- ~~`@codemirror/legacy-modes/mode/javascript`~~ => [`@codemirror/lang-javascript`](https://www.npmjs.com/package/@codemirror/lang-javascript)
+- ~~`@codemirror/legacy-modes/mode/json`~~ => [`@codemirror/lang-json`](https://www.npmjs.com/package/@codemirror/lang-json)
+- ~~`@codemirror/legacy-modes/mode/lezer`~~ => [`@codemirror/lang-lezer`](https://www.npmjs.com/package/@codemirror/lang-lezer)
+- ~~`@codemirror/legacy-modes/mode/markdown`~~ => [`@codemirror/lang-markdown`](https://www.npmjs.com/package/@codemirror/lang-markdown)
+- ~~`@codemirror/legacy-modes/mode/php`~~ => [`@codemirror/lang-php`](https://www.npmjs.com/package/@codemirror/lang-php)
+- ~~`@codemirror/legacy-modes/mode/python`~~ => [`@codemirror/lang-python`](https://www.npmjs.com/package/@codemirror/lang-python)
+- ~~`@codemirror/legacy-modes/mode/rust`~~ => [`@codemirror/lang-rust`](https://www.npmjs.com/package/@codemirror/lang-rust)
+- ~~`@codemirror/legacy-modes/mode/sql`~~ => [`@codemirror/lang-sql`](https://www.npmjs.com/package/@codemirror/lang-sql)
+- ~~`@codemirror/legacy-modes/mode/xml`~~ => [`@codemirror/lang-xml`](https://www.npmjs.com/package/@codemirror/lang-xml)
+
 ## Support Hook
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-codemirror-example-codemirror-6-hook-yr4vg?fontsize=14&hidenavigation=1&theme=dark)

package.json

@@ -77,6 +77,8 @@
     "@codemirror/lang-rust": "0.19.1",
     "@codemirror/lang-sql": "0.19.3",
     "@codemirror/lang-xml": "0.19.1",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@codemirror/stream-parser": "0.19.2",
     "@kkt/less-modules": "6.11.0",
     "@kkt/raw-modules": "6.11.0",
     "@kkt/scope-plugin-options": "6.11.0",

website/App.tsx

@@ -10,12 +10,22 @@ import { json } from '@codemirror/lang-json';
 import { python } from '@codemirror/lang-python';
 import { markdown } from '@codemirror/lang-markdown';
 import { xml } from '@codemirror/lang-xml';
-import { sql } from '@codemirror/lang-sql';
+import { sql, MySQL, PostgreSQL } from '@codemirror/lang-sql';
 import { java } from '@codemirror/lang-java';
 import { rust } from '@codemirror/lang-rust';
 import { cpp } from '@codemirror/lang-cpp';
 import { lezer } from '@codemirror/lang-lezer';
 import { php } from '@codemirror/lang-php';
+import { StreamLanguage } from '@codemirror/stream-parser';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { lua } from '@codemirror/legacy-modes/mode/lua';
+import { swift } from '@codemirror/legacy-modes/mode/swift';
+import { tcl } from '@codemirror/legacy-modes/mode/tcl';
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+import { vb } from '@codemirror/legacy-modes/mode/vb';
+import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
 import logo from './logo.png';
 import styles from './App.module.less';
 import DocumentStr from '../README.md';
@@ -24,18 +34,32 @@ import { Select } from './Select';
 
 const langs: Record<string, any> = {
   javascript,
+  jsx: () => javascript({ jsx: true }),
+  typescript: () => javascript({ typescript: true }),
+  tsx: () => javascript({ jsx: true, typescript: true }),
+  json,
   html,
   css,
-  json,
   python,
   markdown,
   xml,
   sql,
+  mysql: () => sql({ dialect: MySQL }),
+  pgsql: () => sql({ dialect: PostgreSQL }),
   java,
   rust,
   cpp,
   lezer,
   php,
+  go: () => StreamLanguage.define(go),
+  ruby: () => StreamLanguage.define(ruby),
+  shell: () => StreamLanguage.define(shell),
+  lua: () => StreamLanguage.define(lua),
+  swift: () => StreamLanguage.define(swift),
+  tcl: () => StreamLanguage.define(tcl),
+  yaml: () => StreamLanguage.define(yaml),
+  vb: () => StreamLanguage.define(vb),
+  powershell: () => StreamLanguage.define(powerShell),
 };
 
 const hyperlink: {
@@ -77,15 +101,15 @@ export default function App() {
 
   function handleLangChange(lang: string) {
     try {
-      import(`code-example/txt/sample.${lang}.txt`)
+      import(`code-example/txt/sample.${lang.toLocaleLowerCase()}.txt`)
         .then((data) => {
+          setCode(data.default);
           if (langs[lang]) {
             setExtensions([langs[lang]()]);
           }
-          setCode(data.default);
           setMode(lang);
         })
-        .catch(() => {
+        .catch((err) => {
           setExtensions([]);
           setMode(lang);
           setCode('');