diff --git a/core/README.md b/core/README.md index 2ad931319..386844079 100644 --- a/core/README.md +++ b/core/README.md @@ -68,7 +68,7 @@ npm install @uiw/react-codemirror --save | `@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) | | `@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) | | `@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) | -| `@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) | +| `@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) | | `@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) | | `@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) | | `@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) | diff --git a/themes/material/README.md b/themes/material/README.md index 34be916a2..211ef8c5f 100644 --- a/themes/material/README.md +++ b/themes/material/README.md @@ -8,10 +8,14 @@ This package implements the [Material](https://material.io/tools/color/) Dark theme for the CodeMirror code editor. - + codemirror-theme-material + + codemirror-theme-material + + ## Install ```bash @@ -19,7 +23,10 @@ npm install @uiw/codemirror-theme-material --save ``` ```jsx -import { material, materialInit } from '@uiw/codemirror-theme-material'; +import { materialDark, materialDarkInit, materialLight, materialLightInit } from '@uiw/codemirror-theme-material'; + +// materialInit === materialDarkInit +// material === materialDark import('@codemirror/state').Extension; +export declare const materialDarkInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const materialDark: import('@codemirror/state').Extension; export declare const material: import('@codemirror/state').Extension; +export declare const materialLightInit: (options?: CreateThemeOptions) => import('@codemirror/state').Extension; +export declare const materialLight: import('@codemirror/state').Extension; ``` ## Usage diff --git a/themes/material/src/index.ts b/themes/material/src/index.ts index ecf7e6909..79172f2a6 100644 --- a/themes/material/src/index.ts +++ b/themes/material/src/index.ts @@ -116,4 +116,50 @@ export const materialInit = (options?: CreateThemeOptions) => { }); }; +export const materialDarkInit = materialInit; +export const materialDark = materialInit(); export const material = materialInit(); + +export const materialLightInit = (options?: CreateThemeOptions) => { + const { theme = 'light', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + background: '#FAFAFA', + foreground: '#90A4AE', + caret: '#272727', + selection: '#80CBC440', + selectionMatch: '#FAFAFA', + gutterBackground: '#FAFAFA', + gutterForeground: '#90A4AE', + gutterBorder: 'transparent', + lineHighlight: '#CCD7DA50', + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#39ADB5' }, + { tag: [t.name, t.deleted, t.character, t.macroName], color: '#90A4AE' }, + { tag: [t.propertyName], color: '#6182B8' }, + { tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)], color: '#91B859' }, + { tag: [t.function(t.variableName), t.labelName], color: '#6182B8' }, + { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#39ADB5' }, + { tag: [t.definition(t.name), t.separator], color: '#90A4AE' }, + { tag: [t.className], color: '#E2931D' }, + { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#F76D47' }, + { tag: [t.typeName], color: '#E2931D', fontStyle: '#E2931D' }, + { tag: [t.operator, t.operatorKeyword], color: '#39ADB5' }, + { tag: [t.url, t.escape, t.regexp, t.link], color: '#91B859' }, + { tag: [t.meta, t.comment], color: '#90A4AE' }, + { tag: t.strong, fontWeight: 'bold' }, + { tag: t.emphasis, fontStyle: 'italic' }, + { tag: t.link, textDecoration: 'underline' }, + { tag: t.heading, fontWeight: 'bold', color: '#39ADB5' }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#90A4AE' }, + { tag: t.invalid, color: '#E5393570' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + ...styles, + ], + }); +}; + +export const materialLight = materialLightInit(); diff --git a/themes/theme/README.md b/themes/theme/README.md index b9eb6c6e2..29a21c562 100644 --- a/themes/theme/README.md +++ b/themes/theme/README.md @@ -200,10 +200,14 @@ export default App; **material** - + codemirror-theme-material + + codemirror-theme-material + + **noctis-lilac** diff --git a/www/src/pages/theme/home/index.tsx b/www/src/pages/theme/home/index.tsx index dadfab21b..182ad51f4 100644 --- a/www/src/pages/theme/home/index.tsx +++ b/www/src/pages/theme/home/index.tsx @@ -7,13 +7,7 @@ import { langs } from '@uiw/codemirror-extensions-langs'; import { SiderMenus } from '../themes/SiderMenus'; import { Warpper } from '../../../components/Warpper'; import { themeData } from '../themes/Datas'; -import { toSnakeCase } from '../themes/Document'; - -export const toTitleCase = (str: string = '') => - str - .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) - ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1)) - .join(' '); +import { toSnakeCase, toTitleCase } from '../../../utils/utils'; const ThemesWarpper = styled.div` grid-template-columns: repeat(3, minmax(0, 1fr)); diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 298d848f6..66f06464c 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -31,7 +31,7 @@ import { dracula } from '@uiw/codemirror-theme-dracula'; import { darcula } from '@uiw/codemirror-theme-darcula'; import { eclipse } from '@uiw/codemirror-theme-eclipse'; import { bespin } from '@uiw/codemirror-theme-bespin'; -import { material } from '@uiw/codemirror-theme-material'; +import { materialLight, materialDark } from '@uiw/codemirror-theme-material'; import { noctisLilac } from '@uiw/codemirror-theme-noctis-lilac'; import { vscodeDark } from '@uiw/codemirror-theme-vscode'; import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone'; @@ -62,7 +62,8 @@ export const mdSource = { githubDark: githubMd.source, gruvboxDark: gruvboxDarkMd.source, gruvboxLight: gruvboxDarkMd.source, - material: materialMd.source, + materialDark: materialMd.source, + materialLight: materialMd.source, noctisLilac: noctisLilacMd.source, nord: nordMd.source, okaidia: okaidiaMd.source, @@ -93,7 +94,8 @@ export const themeData = { githubDark, gruvboxDark, gruvboxLight, - material, + materialLight, + materialDark, noctisLilac, nord, okaidia, diff --git a/www/src/pages/theme/themes/Document.tsx b/www/src/pages/theme/themes/Document.tsx index f34ea7cf9..2114a686d 100644 --- a/www/src/pages/theme/themes/Document.tsx +++ b/www/src/pages/theme/themes/Document.tsx @@ -4,13 +4,7 @@ import styled from 'styled-components'; import { PreCode } from './PreCode'; import { mdSource } from './Datas'; import { Warpper } from '../../../components/Warpper'; - -export const toSnakeCase = (str: string = '') => - str - .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) - ?.map((x) => x.toLowerCase()) - .join(',') - .split(','); +import { toSnakeCase, toCamelCase } from '../../../utils/utils'; export const Button = styled.button``; @@ -42,11 +36,6 @@ interface DocumentProps { export const Document: FC> = ({ children, themeName }) => { const [previewDoc, setPreviewDoc] = useState(false); const [source, setSource] = useState(mdSource.okaidia); - useEffect(() => { - if (themeName) { - setSource(mdSource[themeName as keyof typeof mdSource]); - } - }, [themeName]); let pkgName: string | undefined = themeName; if (/(gruvbox)/i.test(themeName || '')) { @@ -55,6 +44,11 @@ export const Document: FC> = ({ children, theme pkgName = themeName?.replace(/\s+?(dark|light)/gi, ''); } const _name = toSnakeCase(pkgName || '') || []; + useEffect(() => { + if (themeName) { + setSource(mdSource[toCamelCase(themeName) as keyof typeof mdSource]); + } + }, [themeName]); return (
diff --git a/www/src/pages/theme/themes/SiderMenus.tsx b/www/src/pages/theme/themes/SiderMenus.tsx index f7bb9f379..fe2c8340f 100644 --- a/www/src/pages/theme/themes/SiderMenus.tsx +++ b/www/src/pages/theme/themes/SiderMenus.tsx @@ -1,8 +1,8 @@ import styled from 'styled-components'; import { NavLink } from 'react-router-dom'; -import { toSnakeCase } from './Document'; import { Sider } from '../editor'; import { themeData } from './Datas'; +import { toSnakeCase } from '../../../utils/utils'; export const MenuItem = styled(NavLink)` cursor: pointer; diff --git a/www/src/pages/theme/themes/index.tsx b/www/src/pages/theme/themes/index.tsx index a08fab443..95ae1b52c 100644 --- a/www/src/pages/theme/themes/index.tsx +++ b/www/src/pages/theme/themes/index.tsx @@ -4,15 +4,7 @@ import { Document } from './Document'; import { Sample } from './Sample'; import { themeData } from './Datas'; import { SiderMenus } from './SiderMenus'; - -export const toCamelCase = (str: string = '') => { - const s = - str - .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) - ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase()) - .join('') || ''; - return s.slice(0, 1).toLowerCase() + s.slice(1); -}; +import { toCamelCase } from '../../../utils/utils'; export const ThemeOkaidia = () => { const { name = '', ...other } = useParams(); diff --git a/www/src/utils/utils.ts b/www/src/utils/utils.ts new file mode 100644 index 000000000..fc18224ba --- /dev/null +++ b/www/src/utils/utils.ts @@ -0,0 +1,21 @@ +export const toSnakeCase = (str: string = '') => + str + .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) + ?.map((x) => x.toLowerCase()) + .join(',') + .split(','); + +export const toTitleCase = (str: string = '') => + str + .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) + ?.map((x) => x.charAt(0).toUpperCase() + x.slice(1)) + .join(' '); + +export const toCamelCase = (str: string = '') => { + const s = + str + .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g) + ?.map((x) => x.slice(0, 1).toUpperCase() + x.slice(1).toLowerCase()) + .join('') || ''; + return s.slice(0, 1).toLowerCase() + s.slice(1); +};