Skip to content

Commit

Permalink
website: add example. (#455)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed Aug 3, 2023
1 parent 1502eef commit fd6a8db
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 13 deletions.
2 changes: 1 addition & 1 deletion www/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions www/src/pages/examples/Example431.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -18,4 +18,4 @@ export const PageExample431 = () => {
/>
</Fragment>
);
};
}
27 changes: 27 additions & 0 deletions www/src/pages/examples/Example455.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
2 changes: 1 addition & 1 deletion www/src/pages/examples/ExampleRef.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,4 @@ export function Component() {
);
}

Component.displayName = 'HomePage';
Component.displayName = 'PageExampleRef';
2 changes: 1 addition & 1 deletion www/src/pages/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const hyperlink: {
},
];

export default function App() {
export function Component() {
const version = VERSION;
return (
<div className="wmde-markdown-var">
Expand Down
2 changes: 1 addition & 1 deletion www/src/pages/theme/home/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const CodeEditor = styled(CodeMirror)`
}
`;

export function ThemesHome() {
export function Component() {
return (
<Warpper>
<ThemesWarpper>
Expand Down
15 changes: 8 additions & 7 deletions www/src/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -40,7 +36,7 @@ export const routes: MenuRouteObject[] = [
{
index: true,
label: 'Home',
Component: Home,
lazy: () => import('./pages/home'),
},
{
path: 'extensions',
Expand Down Expand Up @@ -174,7 +170,7 @@ export const routes: MenuRouteObject[] = [
{
path: 'home',
label: 'Home',
Component: ThemesHome,
lazy: () => import('./pages/theme/home'),
},
{
path: 'data',
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit fd6a8db

Please sign in to comment.