diff --git a/www/package.json b/www/package.json
index d51926feb..1a05ddac6 100644
--- a/www/package.json
+++ b/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"
},
diff --git a/www/src/pages/examples/Example431.tsx b/www/src/pages/examples/Example431.tsx
index 310672405..9777f8337 100644
--- a/www/src/pages/examples/Example431.tsx
+++ b/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 (
{
/>
);
-};
+}
diff --git a/www/src/pages/examples/Example455.tsx b/www/src/pages/examples/Example455.tsx
new file mode 100644
index 000000000..1a22f89c1
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+}
diff --git a/www/src/pages/examples/ExampleRef.tsx b/www/src/pages/examples/ExampleRef.tsx
index a78673ade..af143fa9d 100644
--- a/www/src/pages/examples/ExampleRef.tsx
+++ b/www/src/pages/examples/ExampleRef.tsx
@@ -26,4 +26,4 @@ export function Component() {
);
}
-Component.displayName = 'HomePage';
+Component.displayName = 'PageExampleRef';
diff --git a/www/src/pages/home/index.tsx b/www/src/pages/home/index.tsx
index 80b18d2fc..f1081ddd0 100644
--- a/www/src/pages/home/index.tsx
+++ b/www/src/pages/home/index.tsx
@@ -127,7 +127,7 @@ const hyperlink: {
},
];
-export default function App() {
+export function Component() {
const version = VERSION;
return (
diff --git a/www/src/pages/theme/home/index.tsx b/www/src/pages/theme/home/index.tsx
index d6ddce1a7..db0bea0b3 100644
--- a/www/src/pages/theme/home/index.tsx
+++ b/www/src/pages/theme/home/index.tsx
@@ -69,7 +69,7 @@ const CodeEditor = styled(CodeMirror)`
}
`;
-export function ThemesHome() {
+export function Component() {
return (
diff --git a/www/src/router.tsx b/www/src/router.tsx
index 6658400c9..09d458182 100644
--- a/www/src/router.tsx
+++ b/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',