Skip to content

Commit c488397

Browse files
jaywcjlovejaywcjlove
committed
feat(material): add materialLightInit/materialDarkInit/materialLight method to material theme.
1 parent fa35592 commit c488397

File tree

10 files changed

+100
-36
lines changed

10 files changed

+100
-36
lines changed

‎core/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ npm install @uiw/react-codemirror --save
6868
| `@uiw/codemirror-theme-eclipse` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-eclipse.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-eclipse.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-eclipse) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/eclipse) |
6969
| `@uiw/codemirror-theme-github` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-github.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-github.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-github) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/github) |
7070
| `@uiw/codemirror-theme-gruvbox-dark` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-gruvbox-dark.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-gruvbox-dark.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-gruvbox-dark) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/gruvbox/dark) |
71-
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material) |
71+
| `@uiw/codemirror-theme-material` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-material.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-material.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-material) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark) |
7272
| `@uiw/codemirror-theme-noctis-lilac` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-noctis-lilac.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-noctis-lilac.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-noctis-lilac) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac) |
7373
| `@uiw/codemirror-theme-nord` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-nord.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-nord.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-nord) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/nord) |
7474
| `@uiw/codemirror-theme-okaidia` | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-okaidia.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-okaidia.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-okaidia) | [`#preview`](https://uiwjs.github.io/react-codemirror/#/theme/data/okaidia) |

‎themes/material/README.md

+13-2
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,25 @@
88

99
This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor.
1010

11-
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
11+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
1212
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
1313
</a>
1414

15+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
16+
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
17+
</a>
18+
1519
## Install
1620

1721
```bash
1822
npm install @uiw/codemirror-theme-material --save
1923
```
2024

2125
```jsx
22-
import { material, materialInit } from '@uiw/codemirror-theme-material';
26+
import { materialDark, materialDarkInit, materialLight, materialLightInit } from '@uiw/codemirror-theme-material';
27+
28+
// materialInit === materialDarkInit
29+
// material === materialDark
2330

2431
<CodeMirror theme={material} />
2532
<CodeMirror
@@ -37,7 +44,11 @@ import { material, materialInit } from '@uiw/codemirror-theme-material';
3744
```tsx
3845
import { CreateThemeOptions } from '@uiw/codemirror-themes';
3946
export declare const materialInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
47+
export declare const materialDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
48+
export declare const materialDark: import('@codemirror/state').Extension;
4049
export declare const material: import('@codemirror/state').Extension;
50+
export declare const materialLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension;
51+
export declare const materialLight: import('@codemirror/state').Extension;
4152
```
4253

4354
## Usage

‎themes/material/src/index.ts

+46
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,50 @@ export const materialInit = (options?: CreateThemeOptions) => {
116116
});
117117
};
118118

119+
export const materialDarkInit = materialInit;
120+
export const materialDark = materialInit();
119121
export const material = materialInit();
122+
123+
export const materialLightInit = (options?: CreateThemeOptions) => {
124+
const { theme = 'light', settings = {}, styles = [] } = options || {};
125+
return createTheme({
126+
theme: theme,
127+
settings: {
128+
background: '#FAFAFA',
129+
foreground: '#90A4AE',
130+
caret: '#272727',
131+
selection: '#80CBC440',
132+
selectionMatch: '#FAFAFA',
133+
gutterBackground: '#FAFAFA',
134+
gutterForeground: '#90A4AE',
135+
gutterBorder: 'transparent',
136+
lineHighlight: '#CCD7DA50',
137+
...settings,
138+
},
139+
styles: [
140+
{ tag: t.keyword, color: '#39ADB5' },
141+
{ tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' },
142+
{ tag: [t.propertyName], color: '#6182B8' },
143+
{ tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' },
144+
{ tag: [t.function(t.variableName), t.labelName], color: '#6182B8' },
145+
{ tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' },
146+
{ tag: [t.definition(t.name), t.separator], color: '#90A4AE' },
147+
{ tag: [t.className], color: '#E2931D' },
148+
{ tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' },
149+
{ tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' },
150+
{ tag: [t.operator, t.operatorKeyword], color: '#39ADB5' },
151+
{ tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' },
152+
{ tag: [t.meta, t.comment], color: '#90A4AE' },
153+
{ tag: t.strong, fontWeight: 'bold' },
154+
{ tag: t.emphasis, fontStyle: 'italic' },
155+
{ tag: t.link, textDecoration: 'underline' },
156+
{ tag: t.heading, fontWeight: 'bold', color: '#39ADB5' },
157+
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' },
158+
{ tag: t.invalid, color: '#E5393570' },
159+
{ tag: t.strikethrough, textDecoration: 'line-through' },
160+
...styles,
161+
],
162+
});
163+
};
164+
165+
export const materialLight = materialLightInit();

‎themes/theme/README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -200,10 +200,14 @@ export default App;
200200

201201
**material**
202202

203-
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material">
203+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/dark">
204204
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/205537793-79f9c99c-831a-4ce3-8189-78b42896656f.png">
205205
</a>
206206

207+
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/material/light">
208+
<img width="436" alt="codemirror-theme-material" src="https://user-images.githubusercontent.com/1680273/206124615-b3896e2c-d299-4609-b1d9-523ea1cf9f5b.png">
209+
</a>
210+
207211
**noctis-lilac**
208212

209213
<a href="https://uiwjs.github.io/react-codemirror/#/theme/data/noctis-lilac">

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

+1-7
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@ import { langs } from '@uiw/codemirror-extensions-langs';
77
import { SiderMenus } from '../themes/SiderMenus';
88
import { Warpper } from '../../../components/Warpper';
99
import { themeData } from '../themes/Datas';
10-
import { toSnakeCase } from '../themes/Document';
11-
12-
export const toTitleCase = (str: string = '') =>
13-
str
14-
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
15-
?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
16-
.join(' ');
10+
import { toSnakeCase, toTitleCase } from '../../../utils/utils';
1711

1812
const ThemesWarpper = styled.div`
1913
grid-template-columns: repeat(3, minmax(0, 1fr));

‎www/src/pages/theme/themes/Datas.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { dracula } from '@uiw/codemirror-theme-dracula';
3131
import { darcula } from '@uiw/codemirror-theme-darcula';
3232
import { eclipse } from '@uiw/codemirror-theme-eclipse';
3333
import { bespin } from '@uiw/codemirror-theme-bespin';
34-
import { material } from '@uiw/codemirror-theme-material';
34+
import { materialLight, materialDark } from '@uiw/codemirror-theme-material';
3535
import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac';
3636
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
3737
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
@@ -62,7 +62,8 @@ export const mdSource = {
6262
githubDark: githubMd.source,
6363
gruvboxDark: gruvboxDarkMd.source,
6464
gruvboxLight: gruvboxDarkMd.source,
65-
material: materialMd.source,
65+
materialDark: materialMd.source,
66+
materialLight: materialMd.source,
6667
noctisLilac: noctisLilacMd.source,
6768
nord: nordMd.source,
6869
okaidia: okaidiaMd.source,
@@ -93,7 +94,8 @@ export const themeData = {
9394
githubDark,
9495
gruvboxDark,
9596
gruvboxLight,
96-
material,
97+
materialLight,
98+
materialDark,
9799
noctisLilac,
98100
nord,
99101
okaidia,

‎www/src/pages/theme/themes/Document.tsx

+6-12
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,7 @@ import styled from 'styled-components';
44
import { PreCode } from './PreCode';
55
import { mdSource } from './Datas';
66
import { Warpper } from '../../../components/Warpper';
7-
8-
export const toSnakeCase = (str: string = '') =>
9-
str
10-
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
11-
?.map((x) => x.toLowerCase())
12-
.join(',')
13-
.split(',');
7+
import { toSnakeCase, toCamelCase } from '../../../utils/utils';
148

159
export const Button = styled.button``;
1610

@@ -42,11 +36,6 @@ interface DocumentProps {
4236
export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, themeName }) => {
4337
const [previewDoc, setPreviewDoc] = useState(false);
4438
const [source, setSource] = useState(mdSource.okaidia);
45-
useEffect(() => {
46-
if (themeName) {
47-
setSource(mdSource[themeName as keyof typeof mdSource]);
48-
}
49-
}, [themeName]);
5039

5140
let pkgName: string | undefined = themeName;
5241
if (/(gruvbox)/i.test(themeName || '')) {
@@ -55,6 +44,11 @@ export const Document: FC<PropsWithChildren<DocumentProps>> = ({ children, theme
5544
pkgName = themeName?.replace(/\s+?(dark|light)/gi, '');
5645
}
5746
const _name = toSnakeCase(pkgName || '') || [];
47+
useEffect(() => {
48+
if (themeName) {
49+
setSource(mdSource[toCamelCase(themeName) as keyof typeof mdSource]);
50+
}
51+
}, [themeName]);
5852
return (
5953
<Warpper>
6054
<Header>

‎www/src/pages/theme/themes/SiderMenus.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import styled from 'styled-components';
22
import { NavLink } from 'react-router-dom';
3-
import { toSnakeCase } from './Document';
43
import { Sider } from '../editor';
54
import { themeData } from './Datas';
5+
import { toSnakeCase } from '../../../utils/utils';
66

77
export const MenuItem = styled(NavLink)`
88
cursor: pointer;

‎www/src/pages/theme/themes/index.tsx

+1-9
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,7 @@ import { Document } from './Document';
44
import { Sample } from './Sample';
55
import { themeData } from './Datas';
66
import { SiderMenus } from './SiderMenus';
7-
8-
export const toCamelCase = (str: string = '') => {
9-
const s =
10-
str
11-
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
12-
?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
13-
.join('') || '';
14-
return s.slice(0, 1).toLowerCase() + s.slice(1);
15-
};
7+
import { toCamelCase } from '../../../utils/utils';
168

179
export const ThemeOkaidia = () => {
1810
const { name = '', ...other } = useParams();

‎www/src/utils/utils.ts

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const toSnakeCase = (str: string = '') =>
2+
str
3+
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
4+
?.map((x) => x.toLowerCase())
5+
.join(',')
6+
.split(',');
7+
8+
export const toTitleCase = (str: string = '') =>
9+
str
10+
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
11+
?.map((x) => x.charAt(0).toUpperCase() + x.slice(1))
12+
.join(' ');
13+
14+
export const toCamelCase = (str: string = '') => {
15+
const s =
16+
str
17+
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
18+
?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase())
19+
.join('') || '';
20+
return s.slice(0, 1).toLowerCase() + s.slice(1);
21+
};

0 commit comments

Comments
 (0)