From ac9cfd48dd9847eba72058bc3d185e294b173aa0 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Sun, 21 Jul 2024 13:07:30 +0800
Subject: [PATCH] website: add example. #665

---
 www/src/pages/examples/Example674.tsx | 35 +++++++++++++++++++++++++++
 www/src/router.tsx                    |  5 ++++
 2 files changed, 40 insertions(+)
 create mode 100644 www/src/pages/examples/Example674.tsx

diff --git a/www/src/pages/examples/Example674.tsx b/www/src/pages/examples/Example674.tsx
new file mode 100644
index 000000000..0642e0199
--- /dev/null
+++ b/www/src/pages/examples/Example674.tsx
@@ -0,0 +1,35 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { EditorView } from '@uiw/react-codemirror';
+import { Fragment, useCallback, useState } from 'react';
+
+const code = `## Title
+
+[weisit ulr](https://uiwjs.github.io/react-codemirror/)
+four
+**Bold text**
+`;
+
+/**
+ * https://github.com/uiwjs/react-codemirror/issues/674
+ */
+export function Component() {
+  const [value, setValue] = useState(code);
+
+  const onChange = useCallback((val: string) => {
+    setValue(val);
+  }, []);
+
+  return (
+    <Fragment>
+      <CodeMirror
+        value={value}
+        theme="none"
+        height="400px !important"
+        width="100%"
+        onChange={onChange}
+        style={{ margin: '0 0 23px 0', flex: 1 }}
+        extensions={[EditorView.contentAttributes.of({ spellcheck: 'true' })]}
+      />
+    </Fragment>
+  );
+}
diff --git a/www/src/router.tsx b/www/src/router.tsx
index 0b05d8799..f9a2ad589 100644
--- a/www/src/router.tsx
+++ b/www/src/router.tsx
@@ -658,6 +658,11 @@ export const routes: MenuRouteObject[] = [
             label: 'How to remove all syntax highlighting?',
             lazy: () => import('./pages/examples/Example431'),
           },
+          {
+            path: '674',
+            label: 'Browser spell checking',
+            lazy: () => import('./pages/examples/Example674'),
+          },
           {
             path: '455',
             label: 'CodeMirrorMerge use theme',