website: add example. (#455)

Author: jaywcjlove

www/package.json

@@ -82,7 +82,7 @@
     "react-code-preview-layout": "^3.0.1",
     "react-codemirror-merge": "4.21.9",
     "react-dom": "~18.2.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.14.2",
     "rehype-ignore": "^1.0.1",
     "styled-components": "^5.3.5"
   },

www/src/pages/examples/Example431.tsx

@@ -5,7 +5,7 @@ import { Fragment } from 'react';
 /**
  * https://github.com/uiwjs/react-codemirror/issues/431
  */
-export const PageExample431 = () => {
+export function Component() {
   return (
     <Fragment>
       <CodeMirror
@@ -18,4 +18,4 @@ export const PageExample431 = () => {
       />
     </Fragment>
   );
-};
+}

www/src/pages/examples/Example455.tsx

@@ -0,0 +1,27 @@
+import CodeMirrorMerge from 'react-codemirror-merge';
+import { EditorView } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { androidstudio } from '@uiw/codemirror-theme-androidstudio';
+
+const Original = CodeMirrorMerge.Original;
+const Modified = CodeMirrorMerge.Modified;
+/**
+ * https://github.com/uiwjs/react-codemirror/issues/455
+ */
+let doc = `one
+two
+three
+four
+five`;
+
+export function Component() {
+  return (
+    <CodeMirrorMerge style={{ width: 540 }} orientation="b-a" theme={androidstudio}>
+      <Original value={doc} />
+      <Modified
+        value={doc.replace(/t/g, 'T') + 'Six'}
+        extensions={[EditorView.editable.of(false), EditorState.readOnly.of(true)]}
+      />
+    </CodeMirrorMerge>
+  );
+}

www/src/pages/examples/ExampleRef.tsx

@@ -26,4 +26,4 @@ export function Component() {
   );
 }
 
-Component.displayName = 'HomePage';
+Component.displayName = 'PageExampleRef';

www/src/pages/home/index.tsx

@@ -127,7 +127,7 @@ const hyperlink: {
   },
 ];
 
-export default function App() {
+export function Component() {
   const version = VERSION;
   return (
     <div className="wmde-markdown-var">

www/src/pages/theme/home/index.tsx

@@ -69,7 +69,7 @@ const CodeEditor = styled(CodeMirror)`
   }
 `;
 
-export function ThemesHome() {
+export function Component() {
   return (
     <Warpper>
       <ThemesWarpper>

www/src/router.tsx

@@ -2,11 +2,7 @@ import React from 'react';
 import { Navigate, IndexRouteObject, NonIndexRouteObject, Outlet } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { ErrorPage } from './components/ErrorPage';
-import { ThemesHome } from './pages/theme/home';
 import { ThemeEditor } from './pages/theme/editor';
-import { PageExample431 } from './pages/examples/Example431';
-
-import Home from './pages/home';
 
 import { BasicSetupExample } from './pages/extensions/basic-setup/example';
 import { ClassNameExample } from './pages/extensions/classname/example';
@@ -40,7 +36,7 @@ export const routes: MenuRouteObject[] = [
       {
         index: true,
         label: 'Home',
-        Component: Home,
+        lazy: () => import('./pages/home'),
       },
       {
         path: 'extensions',
@@ -174,7 +170,7 @@ export const routes: MenuRouteObject[] = [
           {
             path: 'home',
             label: 'Home',
-            Component: ThemesHome,
+            lazy: () => import('./pages/theme/home'),
           },
           {
             path: 'data',
@@ -540,7 +536,12 @@ export const routes: MenuRouteObject[] = [
           {
             path: '431',
             label: 'How to remove all syntax highlighting?',
-            Component: PageExample431,
+            lazy: () => import('./pages/examples/Example431'),
+          },
+          {
+            path: '455',
+            label: 'CodeMirrorMerge use theme',
+            lazy: () => import('./pages/examples/Example455'),
           },
           {
             path: 'refs',