diff --git a/core/README.md b/core/README.md index b14453c23..e7e821cc5 100644 --- a/core/README.md +++ b/core/README.md @@ -65,6 +65,7 @@ npm install @uiw/react-codemirror --save | [`@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) | | [`@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) | | [`@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) | +| [`@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) | | [`@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) | | [`@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) | | [`@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() { ``` ## Codemirror Merge + 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. ```bash npm install react-codemirror-merge --save ``` - ```jsx import CodeMirrorMerge from 'react-codemirror-merge'; import { EditorView } from 'codemirror'; diff --git a/themes/console/README.md b/themes/console/README.md new file mode 100644 index 000000000..3f6f9b8b8 --- /dev/null +++ b/themes/console/README.md @@ -0,0 +1,102 @@ + + +# Console Theme (dark/light) + + + +[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-console.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-console) + + + +## Motivation + +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. + +## Install + +```bash +npm install @uiw/codemirror-theme-console --save +``` + +```jsx +import { consoleLight, consoleLightInit, consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console'; +// Or +import { consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console/dark'; +import { consoleLight, consoleLightInit } from '@uiw/codemirror-theme-console/light'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const defaultSettingsConsoleLight: CreateThemeOptions['settings']; +export declare const consoleLightInit: (options?: Partial) => import('@codemirror/state').Extension; +export declare const consoleLight: import('@codemirror/state').Extension; +export declare const defaultSettingsConsoleDark: CreateThemeOptions['settings']; +export declare const consoleDarkInit: (options?: Partial) => import('@codemirror/state').Extension; +export declare const consoleDark: import('@codemirror/state').Extension; +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console'; +import { javascript } from '@codemirror/lang-javascript'; + +function App() { + return ( + { + console.log('value:', value); + }} + /> + ); +} +export default App; +``` + +```js +import { EditorView } from '@codemirror/view'; +import { EditorState } from '@codemirror/state'; +import { javascript } from '@codemirror/lang-javascript'; +import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [consoleDark], +}); + +const view = new EditorView({ + parent: document.querySelector('#editor'), + state, +}); +``` + +## Contributors + +As always, thanks to our amazing contributors! + + + + + +Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). + +## License + +Licensed under the MIT License. diff --git a/themes/console/dark.d.ts b/themes/console/dark.d.ts new file mode 100644 index 000000000..962784ed2 --- /dev/null +++ b/themes/console/dark.d.ts @@ -0,0 +1,6 @@ +declare module '@uiw/codemirror-theme-console/dark' { + import { CreateThemeOptions } from '@uiw/codemirror-themes'; + export const defaultSettingsConsoleDark: CreateThemeOptions['settings']; + export const consoleDarkInit: (options?: Partial) => import('@codemirror/state').Extension; + export const consoleDark: import('@codemirror/state').Extension; +} diff --git a/themes/console/light.d.ts b/themes/console/light.d.ts new file mode 100644 index 000000000..62fbb84b0 --- /dev/null +++ b/themes/console/light.d.ts @@ -0,0 +1,6 @@ +declare module '@uiw/codemirror-theme-console/light' { + import { CreateThemeOptions } from '@uiw/codemirror-themes'; + export const defaultSettingsConsoleLight: CreateThemeOptions['settings']; + export const consoleLightInit: (options?: Partial) => import('@codemirror/state').Extension; + export const consoleLight: import('@codemirror/state').Extension; +} diff --git a/themes/console/package.json b/themes/console/package.json new file mode 100644 index 000000000..93772cbe2 --- /dev/null +++ b/themes/console/package.json @@ -0,0 +1,61 @@ +{ + "name": "@uiw/codemirror-theme-console", + "version": "1.0.0", + "description": "Theme console for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/console/light", + "author": "David Villamarin ", + "license": "MIT", + "main": "./cjs/index.js", + "module": "./esm/index.js", + "exports": { + "./README.md": "./README.md", + ".": { + "import": "./esm/index.js", + "types": "./cjs/index.d.ts", + "require": "./cjs/index.js" + }, + "./light": { + "import": "./esm/light.js", + "types": "./cjs/light.d.ts", + "require": "./cjs/light.js" + }, + "./dark": { + "import": "./esm/dark.js", + "types": "./cjs/dark.d.ts", + "require": "./cjs/dark.js" + } + }, + "scripts": { + "watch": "tsbb watch src/*.ts --use-babel", + "build": "tsbb build src/*.ts --use-babel" + }, + "repository": { + "type": "git", + "url": "https://github.com/uiwjs/react-codemirror.git" + }, + "files": [ + "dark.d.ts", + "light.d.ts", + "src", + "esm", + "cjs" + ], + "dependencies": { + "@uiw/codemirror-themes": "4.21.21" + }, + "keywords": [ + "codemirror", + "codemirror6", + "theme", + "console", + "syntax", + "ide", + "code" + ], + "jest": { + "coverageReporters": [ + "lcov", + "json-summary" + ] + } +} diff --git a/themes/console/src/dark.ts b/themes/console/src/dark.ts new file mode 100644 index 000000000..cadab0a07 --- /dev/null +++ b/themes/console/src/dark.ts @@ -0,0 +1,27 @@ +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsConsoleDark: CreateThemeOptions['settings'] = { + background: '#000', + foreground: '#fff', + caret: '#fff', + selection: '#3e4865', + selectionMatch: '#2a3967', + gutterBackground: '#000', + gutterForeground: '#ada9a9', + gutterActiveForeground: '#000', + lineHighlight: '#828282', +}; + +export const consoleDarkInit = (options?: Partial) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsConsoleDark, + ...settings, + }, + styles: [...styles], + }); +}; + +export const consoleDark = consoleDarkInit(); diff --git a/themes/console/src/index.ts b/themes/console/src/index.ts new file mode 100644 index 000000000..4100599d4 --- /dev/null +++ b/themes/console/src/index.ts @@ -0,0 +1,2 @@ +export * from './dark'; +export * from './light'; diff --git a/themes/console/src/light.ts b/themes/console/src/light.ts new file mode 100644 index 000000000..4a2d16497 --- /dev/null +++ b/themes/console/src/light.ts @@ -0,0 +1,27 @@ +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsConsoleLight: CreateThemeOptions['settings'] = { + background: '#fff', + foreground: '#000', + caret: '#000', + selection: '#d6ddf2', + selectionMatch: '#6d85cf', + gutterBackground: '#fff', + gutterForeground: '#ada9a9', + gutterActiveForeground: '#000', + lineHighlight: '#c7c5c5', +}; + +export const consoleLightInit = (options?: Partial) => { + const { theme = 'light', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsConsoleLight, + ...settings, + }, + styles: [...styles], + }); +}; + +export const consoleLight = consoleLightInit(); diff --git a/themes/console/tsconfig.json b/themes/console/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/console/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/www/src/router.tsx b/www/src/router.tsx index b7c611049..e3ee7cff9 100644 --- a/www/src/router.tsx +++ b/www/src/router.tsx @@ -248,6 +248,28 @@ export const routes: MenuRouteObject[] = [ /> ), }, + { + path: 'data/console/light', + label: 'Console Light', + element: ( + import('@uiw/codemirror-theme-console/README.md')} + /> + ), + }, + { + path: 'data/console/dark', + label: 'Console Dark', + element: ( + import('@uiw/codemirror-theme-console/README.md')} + /> + ), + }, { path: 'data/dracula', label: 'dracula',