Skip to content

Commit d2a17b0

Browse files
dalejo96dalejo96
authored
feat(theme): add console theme (#632)
* feat: add `console` theme * chore: add readme to new theme and root
1 parent 042b6c9 commit d2a17b0

File tree

10 files changed

+264
-1
lines changed

10 files changed

+264
-1
lines changed

‎core/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ npm install @uiw/react-codemirror --save
6565
| [`@uiw/codemirror-theme-basic`](https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-basic.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-basic) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-basic.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-basic) |
6666
| [`@uiw/codemirror-theme-bbedit`](https://uiwjs.github.io/react-codemirror/#/theme/data/bbedit) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-bbedit.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-bbedit) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-bbedit.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-bbedit) |
6767
| [`@uiw/codemirror-theme-bespin`](https://uiwjs.github.io/react-codemirror/#/theme/data/bespin) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-bespin.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-bespin) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-bespin.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-bespin) |
68+
| [`@uiw/codemirror-theme-console`](https://uiwjs.github.io/react-codemirror/#/theme/data/console) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-console.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-console) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-console.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-console) |
6869
| [`@uiw/codemirror-theme-copilot`](https://uiwjs.github.io/react-codemirror/#/theme/data/copilot) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-copilot.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-copilot) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-copilot.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-copilot) |
6970
| [`@uiw/codemirror-theme-duotone`](https://uiwjs.github.io/react-codemirror/#/theme/data/duotone/light) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-duotone.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-duotone.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-duotone) |
7071
| [`@uiw/codemirror-theme-dracula`](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula) | [![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-dracula.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula) [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/codemirror-theme-dracula.svg?style=flat)](https://www.npmjs.com/package/@uiw/codemirror-theme-dracula) |
@@ -193,13 +194,13 @@ export default function App() {
193194
```
194195

195196
## Codemirror Merge
197+
196198
A component that highlights the changes between two versions of a file in a side-by-side view, highlighting added, modified, or deleted lines of code.
197199

198200
```bash
199201
npm install react-codemirror-merge --save
200202
```
201203

202-
203204
```jsx
204205
import CodeMirrorMerge from 'react-codemirror-merge';
205206
import { EditorView } from 'codemirror';

‎themes/console/README.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Console Theme (dark/light)
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
8+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-console.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-console)
9+
10+
<!--missing images-->
11+
12+
## Motivation
13+
14+
One of the usages for react-codemirror is a logger component, but there is no theme with the required styles for achieving the desired feature. This theme is intended to be used when you want to have plain text in a console or terminal viewer.
15+
16+
## Install
17+
18+
```bash
19+
npm install @uiw/codemirror-theme-console --save
20+
```
21+
22+
```jsx
23+
import { consoleLight, consoleLightInit, consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console';
24+
// Or
25+
import { consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console/dark';
26+
import { consoleLight, consoleLightInit } from '@uiw/codemirror-theme-console/light';
27+
28+
<CodeMirror theme={consoleLight} />
29+
<CodeMirror
30+
theme={consoleLightInit({
31+
settings: {
32+
caret: '#c6c6c6',
33+
fontFamily: 'monospace',
34+
}
35+
})}
36+
/>
37+
```
38+
39+
## API
40+
41+
```tsx
42+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
43+
export declare const defaultSettingsConsoleLight: CreateThemeOptions['settings'];
44+
export declare const consoleLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
45+
export declare const consoleLight: import('@codemirror/state').Extension;
46+
export declare const defaultSettingsConsoleDark: CreateThemeOptions['settings'];
47+
export declare const consoleDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
48+
export declare const consoleDark: import('@codemirror/state').Extension;
49+
```
50+
51+
## Usage
52+
53+
```jsx
54+
import CodeMirror from '@uiw/react-codemirror';
55+
import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';
56+
import { javascript } from '@codemirror/lang-javascript';
57+
58+
function App() {
59+
return (
60+
<CodeMirror
61+
value="INFO:waitress:Serving on http://0.0.0.0:5000"
62+
height="200px"
63+
theme={consoleLight}
64+
onChange={(value, viewUpdate) => {
65+
console.log('value:', value);
66+
}}
67+
/>
68+
);
69+
}
70+
export default App;
71+
```
72+
73+
```js
74+
import { EditorView } from '@codemirror/view';
75+
import { EditorState } from '@codemirror/state';
76+
import { javascript } from '@codemirror/lang-javascript';
77+
import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';
78+
79+
const state = EditorState.create({
80+
doc: 'my source code',
81+
extensions: [consoleDark],
82+
});
83+
84+
const view = new EditorView({
85+
parent: document.querySelector('#editor'),
86+
state,
87+
});
88+
```
89+
90+
## Contributors
91+
92+
As always, thanks to our amazing contributors!
93+
94+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
95+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
96+
</a>
97+
98+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
99+
100+
## License
101+
102+
Licensed under the MIT License.

‎themes/console/dark.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '@uiw/codemirror-theme-console/dark' {
2+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
3+
export const defaultSettingsConsoleDark: CreateThemeOptions['settings'];
4+
export const consoleDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
5+
export const consoleDark: import('@codemirror/state').Extension;
6+
}

‎themes/console/light.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
declare module '@uiw/codemirror-theme-console/light' {
2+
import { CreateThemeOptions } from '@uiw/codemirror-themes';
3+
export const defaultSettingsConsoleLight: CreateThemeOptions['settings'];
4+
export const consoleLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
5+
export const consoleLight: import('@codemirror/state').Extension;
6+
}

‎themes/console/package.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "@uiw/codemirror-theme-console",
3+
"version": "1.0.0",
4+
"description": "Theme console for CodeMirror.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/console/light",
6+
"author": "David Villamarin <[email protected]>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"exports": {
11+
"./README.md": "./README.md",
12+
".": {
13+
"import": "./esm/index.js",
14+
"types": "./cjs/index.d.ts",
15+
"require": "./cjs/index.js"
16+
},
17+
"./light": {
18+
"import": "./esm/light.js",
19+
"types": "./cjs/light.d.ts",
20+
"require": "./cjs/light.js"
21+
},
22+
"./dark": {
23+
"import": "./esm/dark.js",
24+
"types": "./cjs/dark.d.ts",
25+
"require": "./cjs/dark.js"
26+
}
27+
},
28+
"scripts": {
29+
"watch": "tsbb watch src/*.ts --use-babel",
30+
"build": "tsbb build src/*.ts --use-babel"
31+
},
32+
"repository": {
33+
"type": "git",
34+
"url": "https://github.com/uiwjs/react-codemirror.git"
35+
},
36+
"files": [
37+
"dark.d.ts",
38+
"light.d.ts",
39+
"src",
40+
"esm",
41+
"cjs"
42+
],
43+
"dependencies": {
44+
"@uiw/codemirror-themes": "4.21.21"
45+
},
46+
"keywords": [
47+
"codemirror",
48+
"codemirror6",
49+
"theme",
50+
"console",
51+
"syntax",
52+
"ide",
53+
"code"
54+
],
55+
"jest": {
56+
"coverageReporters": [
57+
"lcov",
58+
"json-summary"
59+
]
60+
}
61+
}

‎themes/console/src/dark.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
2+
3+
export const defaultSettingsConsoleDark: CreateThemeOptions['settings'] = {
4+
background: '#000',
5+
foreground: '#fff',
6+
caret: '#fff',
7+
selection: '#3e4865',
8+
selectionMatch: '#2a3967',
9+
gutterBackground: '#000',
10+
gutterForeground: '#ada9a9',
11+
gutterActiveForeground: '#000',
12+
lineHighlight: '#828282',
13+
};
14+
15+
export const consoleDarkInit = (options?: Partial<CreateThemeOptions>) => {
16+
const { theme = 'dark', settings = {}, styles = [] } = options || {};
17+
return createTheme({
18+
theme: theme,
19+
settings: {
20+
...defaultSettingsConsoleDark,
21+
...settings,
22+
},
23+
styles: [...styles],
24+
});
25+
};
26+
27+
export const consoleDark = consoleDarkInit();

‎themes/console/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './dark';
2+
export * from './light';

‎themes/console/src/light.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes';
2+
3+
export const defaultSettingsConsoleLight: CreateThemeOptions['settings'] = {
4+
background: '#fff',
5+
foreground: '#000',
6+
caret: '#000',
7+
selection: '#d6ddf2',
8+
selectionMatch: '#6d85cf',
9+
gutterBackground: '#fff',
10+
gutterForeground: '#ada9a9',
11+
gutterActiveForeground: '#000',
12+
lineHighlight: '#c7c5c5',
13+
};
14+
15+
export const consoleLightInit = (options?: Partial<CreateThemeOptions>) => {
16+
const { theme = 'light', settings = {}, styles = [] } = options || {};
17+
return createTheme({
18+
theme: theme,
19+
settings: {
20+
...defaultSettingsConsoleLight,
21+
...settings,
22+
},
23+
styles: [...styles],
24+
});
25+
};
26+
27+
export const consoleLight = consoleLightInit();

‎themes/console/tsconfig.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": ".",
7+
"noEmit": false
8+
}
9+
}

‎www/src/router.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,28 @@ export const routes: MenuRouteObject[] = [
248248
/>
249249
),
250250
},
251+
{
252+
path: 'data/console/light',
253+
label: 'Console Light',
254+
element: (
255+
<Preview
256+
mode="light"
257+
themePkg="@uiw/codemirror-theme-console"
258+
path={() => import('@uiw/codemirror-theme-console/README.md')}
259+
/>
260+
),
261+
},
262+
{
263+
path: 'data/console/dark',
264+
label: 'Console Dark',
265+
element: (
266+
<Preview
267+
mode="dark"
268+
themePkg="@uiw/codemirror-theme-console"
269+
path={() => import('@uiw/codemirror-theme-console/README.md')}
270+
/>
271+
),
272+
},
251273
{
252274
path: 'data/dracula',
253275
label: 'dracula',

0 commit comments

Comments
 (0)