From bf2424523f6da62020f79681e670a4f9c2f0a531 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sat, 26 Aug 2023 01:20:38 +0800 Subject: [PATCH] feat(theme): add `basic` theme. --- .github/workflows/ci.yml | 466 +--------------------------- themes/all/README.md | 11 + themes/all/package.json | 1 + themes/basic/README.md | 106 +++++++ themes/basic/dark.d.ts | 6 + themes/basic/light.d.ts | 6 + themes/basic/package.json | 59 ++++ themes/basic/src/dark.ts | 123 ++++++++ themes/basic/src/index.ts | 2 + themes/basic/src/light.ts | 122 ++++++++ themes/basic/tsconfig.json | 9 + www/package.json | 1 + www/src/pages/theme/themes/Datas.ts | 3 + www/src/router.tsx | 26 ++ 14 files changed, 482 insertions(+), 459 deletions(-) create mode 100644 themes/basic/README.md create mode 100644 themes/basic/dark.d.ts create mode 100644 themes/basic/light.d.ts create mode 100644 themes/basic/package.json create mode 100644 themes/basic/src/dark.ts create mode 100644 themes/basic/src/index.ts create mode 100644 themes/basic/src/light.ts create mode 100644 themes/basic/tsconfig.json diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index e310743d1..a39abe20c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -158,6 +158,13 @@ jobs: env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: 📦 @uiw/codemirror-theme-basic publish to NPM + run: npm publish --access public + working-directory: ./themes/basic/ + continue-on-error: true + env: + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + - name: 📦 @uiw/codemirror-theme-bbedit publish to NPM run: npm publish --access public working-directory: ./themes/bbedit/ @@ -342,462 +349,3 @@ jobs: outputs: successful: ${{steps.create_tag.outputs.successful }} - - # github-package: - # runs-on: ubuntu-latest - # needs: build-deploy - # steps: - # - uses: actions/checkout@v3 - # - uses: actions/setup-node@v3 - # with: - # node-version: 16 - # registry-url: https://npm.pkg.github.com - # scope: '@uiwjs' - - # - run: npm install - # - run: npm run build - - # - name: "Modify @uiw/react-codemirror => @uiwjs/react-codemirror" - # uses: jaywcjlove/github-action-package@main - # with: - # path: core/package.json - # rename: "@uiwjs/react-codemirror" - - # - run: npm publish - # name: 📦 @uiwjs/react-codemirror publish to NPM - # working-directory: core - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: "Modify react-codemirror-merge => @uiwjs/react-codemirror-merge" - # uses: jaywcjlove/github-action-package@main - # continue-on-error: true - # with: - # path: merge/package.json - # rename: "@uiwjs/react-codemirror-merge" - - # - run: npm publish - # name: 📦 @uiwjs/react-codemirror-merge publish to NPM - # working-directory: merge - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-themes => @uiwjs/codemirror-themes - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/theme/package.json - # rename: "@uiwjs/codemirror-themes" - - # - run: npm publish - # working-directory: themes/theme - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-abcdef => @uiwjs/codemirror-theme-abcdef - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/abcdef/package.json - # rename: "@uiwjs/codemirror-theme-abcdef" - - # - run: npm publish - # working-directory: themes/abcdef - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-themes-all => @uiwjs/codemirror-themes-all - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/all/package.json - # rename: "@uiwjs/codemirror-themes-all" - - # - run: npm publish - # working-directory: themes/all - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-androidstudio => @uiwjs/codemirror-theme-androidstudio - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/androidstudio/package.json - # rename: "@uiwjs/codemirror-theme-androidstudio" - - # - run: npm publish - # working-directory: themes/androidstudio - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-atomone => @uiwjs/codemirror-theme-atomone - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/atomone/package.json - # rename: "@uiwjs/codemirror-theme-atomone" - - # - run: npm publish - # working-directory: themes/atomone - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-aura => @uiwjs/codemirror-theme-aura - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/aura/package.json - # rename: "@uiwjs/codemirror-theme-aura" - - # - run: npm publish - # working-directory: themes/aura - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-bbedit => @uiwjs/codemirror-theme-bbedit - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/bbedit/package.json - # rename: "@uiwjs/codemirror-theme-bbedit" - - # - run: npm publish - # working-directory: themes/bbedit - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-okaidia => @uiwjs/codemirror-theme-okaidia - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/okaidia/package.json - # rename: "@uiwjs/codemirror-theme-okaidia" - - # - run: npm publish - # working-directory: themes/okaidia - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-solarized => @uiwjs/codemirror-theme-solarized - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/solarized/package.json - # rename: "@uiwjs/codemirror-theme-solarized" - - # - run: npm publish - # working-directory: themes/solarized - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-dracula => @uiwjs/codemirror-theme-dracula - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/dracula/package.json - # rename: "@uiwjs/codemirror-theme-dracula" - - # - run: npm publish - # working-directory: themes/dracula - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-theme-duotone => @uiwjs/codemirror-theme-duotone - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/duotone/package.json - # rename: "@uiwjs/codemirror-theme-duotone" - - # - run: npm publish - # working-directory: themes/duotone - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-eclipse => @uiwjs/codemirror-theme-eclipse - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/eclipse/package.json - # rename: "@uiwjs/codemirror-theme-eclipse" - - # - run: npm publish - # working-directory: themes/eclipse - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-github => @uiwjs/codemirror-theme-github - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/github/package.json - # rename: "@uiwjs/codemirror-theme-github" - - # - run: npm publish - # working-directory: themes/github - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-gruvbox-dark => @uiwjs/codemirror-theme-gruvbox-dark - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/gruvbox/package.json - # rename: '@uiwjs/codemirror-theme-gruvbox-dark' - - # - run: npm publish - # working-directory: themes/gruvbox - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-material => @uiwjs/codemirror-theme-material - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/material/package.json - # rename: '@uiwjs/codemirror-theme-material' - - # - run: npm publish - # working-directory: themes/material - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-noctis-lilac => @uiwjs/codemirror-theme-noctis-lilac - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/noctis-lilac/package.json - # rename: '@uiwjs/codemirror-theme-noctis-lilac' - - # - run: npm publish - # working-directory: themes/noctis-lilac - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-nord => @uiwjs/codemirror-theme-nord - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/nord/package.json - # rename: '@uiwjs/codemirror-theme-nord' - - # - run: npm publish - # working-directory: themes/nord - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-darcula => @uiwjs/codemirror-theme-darcula - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/darcula/package.json - # rename: "@uiwjs/codemirror-theme-darcula" - - # - run: npm publish - # working-directory: themes/darcula - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-bespin => @uiwjs/codemirror-theme-bespin - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/bespin/package.json - # rename: "@uiwjs/codemirror-theme-bespin" - - # - run: npm publish - # working-directory: themes/bespin - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-sublime => @uiwjs/codemirror-theme-sublime - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/sublime/package.json - # rename: "@uiwjs/codemirror-theme-sublime" - - # - run: npm publish - # working-directory: themes/sublime - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-tokyo-night => @uiwjs/codemirror-theme-tokyo-night - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/tokyo-night/package.json - # rename: "@uiwjs/codemirror-theme-tokyo-night" - - # - run: npm publish - # working-directory: themes/tokyo-night - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-tokyo-night-storm => @uiwjs/codemirror-theme-tokyo-night-storm - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/tokyo-night-storm/package.json - # rename: "@uiwjs/codemirror-theme-tokyo-night-storm" - - # - run: npm publish - # working-directory: themes/tokyo-night-storm - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-tokyo-night-day => @uiwjs/codemirror-theme-tokyo-night-day - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/tokyo-night-day/package.json - # rename: "@uiwjs/codemirror-theme-tokyo-night-day" - - # - run: npm publish - # working-directory: themes/tokyo-night-day - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-vscode => @uiwjs/codemirror-theme-vscode - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/vscode/package.json - # rename: "@uiwjs/codemirror-theme-vscode" - - # - run: npm publish - # working-directory: themes/vscode - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-theme-xcode => @uiwjs/codemirror-theme-xcode - # uses: jaywcjlove/github-action-package@main - # with: - # path: themes/xcode/package.json - # rename: "@uiwjs/codemirror-theme-xcode" - - # - run: npm publish - # working-directory: themes/xcode - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-events => @uiwjs/codemirror-extensions-events - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/events/package.json - # rename: "@uiwjs/codemirror-extensions-events" - - # - run: npm publish - # working-directory: extensions/events - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-basic-setup => @uiwjs/codemirror-extensions-basic-setup - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/basic-setup/package.json - # rename: "@uiwjs/codemirror-extensions-basic-setup" - - # - run: npm publish - # working-directory: extensions/basic-setup - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-classname => @uiwjs/codemirror-extensions-classname - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/classname/package.json - # rename: "@uiwjs/codemirror-extensions-classname" - - # - run: npm publish - # working-directory: extensions/classname - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-color => @uiwjs/codemirror-extensions-color - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/color/package.json - # rename: "@uiwjs/codemirror-extensions-color" - - # - run: npm publish - # working-directory: extensions/color - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-line-numbers-relative => @uiwjs/codemirror-extensions-line-numbers-relative - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/line-numbers-relative/package.json - # rename: "@uiwjs/codemirror-extensions-line-numbers-relative" - - # - run: npm publish - # working-directory: extensions/line-numbers-relative - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-hyper-link => @uiwjs/codemirror-extensions-hyper-link - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/hyper-link/package.json - # rename: "@uiwjs/codemirror-extensions-hyper-link" - - # - run: npm publish - # working-directory: extensions/hyper-link - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-langs => @uiwjs/codemirror-extensions-langs - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/langs/package.json - # rename: "@uiwjs/codemirror-extensions-langs" - - # - run: npm publish - # working-directory: extensions/langs - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - # - name: Modify @uiw/codemirror-extensions-mentions => @uiwjs/codemirror-extensions-mentions - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/mentions/package.json - # rename: "@uiwjs/codemirror-extensions-mentions" - - # - run: npm publish - # working-directory: extensions/mentions - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} - - - # - name: Modify @uiw/codemirror-extensions-zebra-stripes => @uiwjs/codemirror-extensions-zebra-stripes - # uses: jaywcjlove/github-action-package@main - # with: - # path: extensions/zebra-stripes/package.json - # rename: "@uiwjs/codemirror-extensions-zebra-stripes" - - # - run: npm publish - # working-directory: extensions/zebra-stripes - # continue-on-error: true - # env: - # NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} \ No newline at end of file diff --git a/themes/all/README.md b/themes/all/README.md index 0643dc555..8c6229af4 100644 --- a/themes/all/README.md +++ b/themes/all/README.md @@ -63,6 +63,7 @@ export * from '@uiw/codemirror-theme-abcdef'; export * from '@uiw/codemirror-theme-androidstudio'; export * from '@uiw/codemirror-theme-atomone'; export * from '@uiw/codemirror-theme-aura'; +export * from '@uiw/codemirror-theme-basic'; export * from '@uiw/codemirror-theme-bbedit'; export * from '@uiw/codemirror-theme-bespin'; export * from '@uiw/codemirror-theme-darcula'; @@ -110,6 +111,16 @@ export * from '@uiw/codemirror-theme-xcode'; codemirror-theme-aura +**basic** + + + codemirror-theme-basic dark + + + + codemirror-theme-basic light + + **bbedit** diff --git a/themes/all/package.json b/themes/all/package.json index 4460e7018..1ea8858f0 100644 --- a/themes/all/package.json +++ b/themes/all/package.json @@ -25,6 +25,7 @@ "@uiw/codemirror-theme-androidstudio": "4.21.9", "@uiw/codemirror-theme-atomone": "4.21.9", "@uiw/codemirror-theme-aura": "4.21.9", + "@uiw/codemirror-theme-basic": "4.21.9", "@uiw/codemirror-theme-bbedit": "4.21.9", "@uiw/codemirror-theme-bespin": "4.21.9", "@uiw/codemirror-theme-darcula": "4.21.9", diff --git a/themes/basic/README.md b/themes/basic/README.md new file mode 100644 index 000000000..709e51d4e --- /dev/null +++ b/themes/basic/README.md @@ -0,0 +1,106 @@ + + +# Basic Theme (dark/light) + + + +[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-theme-basic.svg)](https://www.npmjs.com/package/@uiw/codemirror-theme-basic) + + + codemirror-theme-basic dark + + + + codemirror-theme-basic light + + +## Install + +```bash +npm install @uiw/codemirror-theme-basic --save +``` + +```jsx +import { basicLight, basicLightInit, basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic'; +// Or +import { basicDark, basicDarkInit } from '@uiw/codemirror-theme-basic/dark'; +import { basicLight, basicLightInit } from '@uiw/codemirror-theme-basic/light'; + + + +``` + +## API + +```tsx +import { CreateThemeOptions } from '@uiw/codemirror-themes'; +export declare const defaultSettingsBasicLight: CreateThemeOptions['settings']; +export declare const basicLightInit: (options?: Partial) => import('@codemirror/state').Extension; +export declare const basicLight: import('@codemirror/state').Extension; +export declare const defaultSettingsBasicDark: CreateThemeOptions['settings']; +export declare const basicDarkInit: (options?: Partial) => import('@codemirror/state').Extension; +export declare const basicDark: import('@codemirror/state').Extension; +``` + +## Usage + +```jsx +import CodeMirror from '@uiw/react-codemirror'; +import { basicLight, basicDark } from '@uiw/codemirror-theme-basic'; +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 { basicLight, basicDark } from '@uiw/codemirror-theme-basic'; + +const state = EditorState.create({ + doc: 'my source code', + extensions: [basicDark, javascript({ jsx: true })], +}); + +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. + +by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes) diff --git a/themes/basic/dark.d.ts b/themes/basic/dark.d.ts new file mode 100644 index 000000000..a2c2b0607 --- /dev/null +++ b/themes/basic/dark.d.ts @@ -0,0 +1,6 @@ +declare module '@uiw/codemirror-theme-basic/dark' { + import { CreateThemeOptions } from '@uiw/codemirror-themes'; + export const defaultSettingsBasicDark: CreateThemeOptions['settings']; + export const basicDarkInit: (options?: Partial) => import('@codemirror/state').Extension; + export const basicDark: import('@codemirror/state').Extension; +} diff --git a/themes/basic/light.d.ts b/themes/basic/light.d.ts new file mode 100644 index 000000000..3a5832abc --- /dev/null +++ b/themes/basic/light.d.ts @@ -0,0 +1,6 @@ +declare module '@uiw/codemirror-theme-basic/light' { + import { CreateThemeOptions } from '@uiw/codemirror-themes'; + export const defaultSettingsBasicLight: CreateThemeOptions['settings']; + export const basicLightInit: (options?: Partial) => import('@codemirror/state').Extension; + export const basicLight: import('@codemirror/state').Extension; +} diff --git a/themes/basic/package.json b/themes/basic/package.json new file mode 100644 index 000000000..3d2362b3b --- /dev/null +++ b/themes/basic/package.json @@ -0,0 +1,59 @@ +{ + "name": "@uiw/codemirror-theme-basic", + "version": "4.21.9", + "description": "Theme basic for CodeMirror.", + "homepage": "https://uiwjs.github.io/react-codemirror/#/theme/data/basic/light", + "author": "kenny wong ", + "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": [ + "src", + "esm", + "cjs" + ], + "dependencies": { + "@uiw/codemirror-themes": "4.21.9" + }, + "keywords": [ + "codemirror", + "codemirror6", + "theme", + "basic", + "syntax", + "ide", + "code" + ], + "jest": { + "coverageReporters": [ + "lcov", + "json-summary" + ] + } +} diff --git a/themes/basic/src/dark.ts b/themes/basic/src/dark.ts new file mode 100644 index 000000000..e736824ea --- /dev/null +++ b/themes/basic/src/dark.ts @@ -0,0 +1,123 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsBasicDark: CreateThemeOptions['settings'] = { + background: '#2E3235', + foreground: '#DDDDDD', + caret: '#DDDDDD', + selection: '#202325', + selectionMatch: '#B9D2FF30', + gutterBackground: '#292d30', + gutterForeground: '#808080', + gutterBorder: '1px solid #ffffff10', + lineHighlight: '#B9D2FF30', +}; + +export const basicDarkInit = (options?: Partial) => { + const { theme = 'dark', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsBasicDark, + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#fda331' }, + { + tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], + color: '#b5bd68', + }, + { tag: [t.variableName], color: '#6fb3d2' }, + { tag: [t.function(t.variableName)], color: '#fda331' }, + { tag: [t.labelName], color: '#fc6d24' }, + { + tag: [t.color, t.constant(t.name), t.standard(t.name)], + color: '#fda331', + }, + { tag: [t.definition(t.name), t.separator], color: '#cc99cc' }, + { tag: [t.brace], color: '#cc99cc' }, + { + tag: [t.annotation], + color: '#fc6d24', + }, + { + tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + color: '#fda331', + }, + { + tag: [t.typeName, t.className], + color: '#6fb3d2', + }, + { + tag: [t.operator, t.operatorKeyword], + color: '#cc99cc', + }, + { + tag: [t.tagName], + color: '#fda331', + }, + { + tag: [t.squareBracket], + color: '#cc99cc', + }, + { + tag: [t.angleBracket], + color: '#cc99cc', + }, + { + tag: [t.attributeName], + color: '#6fb3d2', + }, + { + tag: [t.regexp], + color: '#fda331', + }, + { + tag: [t.quote], + color: '#DDDDDD', + }, + { tag: [t.string], color: '#b5bd68' }, + { + tag: t.link, + color: '#6987AF', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { + tag: [t.url, t.escape, t.special(t.string)], + color: '#8abeb7', + }, + { tag: [t.meta], color: '#A54543' }, + { tag: [t.comment], color: '#808080', fontStyle: 'italic' }, + { tag: t.monospace, color: '#DDDDDD' }, + { tag: t.strong, fontWeight: 'bold', color: '#fda331' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#6fb3d2' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#DDDDDD' }, + { tag: t.special(t.heading1), fontWeight: 'bold', color: '#DDDDDD' }, + { tag: t.heading1, fontWeight: 'bold', color: '#DDDDDD' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#DDDDDD', + }, + { + tag: [t.heading5, t.heading6], + color: '#DDDDDD', + }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#8abeb7' }, + { + tag: [t.processingInstruction, t.inserted], + color: '#8abeb7', + }, + { + tag: [t.contentSeparator], + color: '#6fb3d2', + }, + { tag: t.invalid, color: '#B9D2FF', borderBottom: `1px dotted ${'#fc6d24'}` }, + ...styles, + ], + }); +}; + +export const basicDark = basicDarkInit(); diff --git a/themes/basic/src/index.ts b/themes/basic/src/index.ts new file mode 100644 index 000000000..4100599d4 --- /dev/null +++ b/themes/basic/src/index.ts @@ -0,0 +1,2 @@ +export * from './dark'; +export * from './light'; diff --git a/themes/basic/src/light.ts b/themes/basic/src/light.ts new file mode 100644 index 000000000..89c27fc3b --- /dev/null +++ b/themes/basic/src/light.ts @@ -0,0 +1,122 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme, CreateThemeOptions } from '@uiw/codemirror-themes'; + +export const defaultSettingsBasicLight: CreateThemeOptions['settings'] = { + background: '#ffffff', + foreground: '#2e3440', + caret: '#3b4252', + selection: '#eceff4', + selectionMatch: '#e5e9f0', + gutterBackground: '#eceff4', + gutterForeground: '#2e3440', + gutterBorder: 'none', + lineHighlight: '#eceff4', +}; + +export const basicLightInit = (options?: Partial) => { + const { theme = 'light', settings = {}, styles = [] } = options || {}; + return createTheme({ + theme: theme, + settings: { + ...defaultSettingsBasicLight, + ...settings, + }, + styles: [ + { tag: t.keyword, color: '#5e81ac' }, + { + tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], + color: '#d08770', + }, + { tag: [t.variableName], color: '#d08770' }, + { tag: [t.function(t.variableName)], color: '#5e81ac' }, + { tag: [t.labelName], color: '#81a1c1' }, + { + tag: [t.color, t.constant(t.name), t.standard(t.name)], + color: '#5e81ac', + }, + { tag: [t.definition(t.name), t.separator], color: '#a3be8c' }, + { tag: [t.brace], color: '#8fbcbb' }, + { + tag: [t.annotation], + color: '#d30102', + }, + { + tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + color: '#88c0d0', + }, + { + tag: [t.typeName, t.className], + color: '#ebcb8b', + }, + { + tag: [t.operator, t.operatorKeyword], + color: '#a3be8c', + }, + { + tag: [t.tagName], + color: '#b48ead', + }, + { + tag: [t.squareBracket], + color: '#bf616a', + }, + { + tag: [t.angleBracket], + color: '#d08770', + }, + { + tag: [t.attributeName], + color: '#ebcb8b', + }, + { + tag: [t.regexp], + color: '#5e81ac', + }, + { + tag: [t.quote], + color: '#3b4252', + }, + { tag: [t.string], color: '#d08770' }, + { + tag: t.link, + color: '#8fbcbb', + textDecoration: 'underline', + textUnderlinePosition: 'under', + }, + { + tag: [t.url, t.escape, t.special(t.string)], + color: '#d08770', + }, + { tag: [t.meta], color: '#88c0d0' }, + { tag: [t.comment], color: '#434c5e', fontStyle: 'italic' }, + { tag: t.strong, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.emphasis, fontStyle: 'italic', color: '#5e81ac' }, + { tag: t.strikethrough, textDecoration: 'line-through' }, + { tag: t.heading, fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.special(t.heading1), fontWeight: 'bold', color: '#5e81ac' }, + { tag: t.heading1, fontWeight: 'bold', color: '#5e81ac' }, + { + tag: [t.heading2, t.heading3, t.heading4], + fontWeight: 'bold', + color: '#5e81ac', + }, + { + tag: [t.heading5, t.heading6], + color: '#5e81ac', + }, + { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d08770' }, + { + tag: [t.processingInstruction, t.inserted], + color: '#8fbcbb', + }, + { + tag: [t.contentSeparator], + color: '#ebcb8b', + }, + { tag: t.invalid, color: '#434c5e', borderBottom: '1px dotted #d30102' }, + ...styles, + ], + }); +}; + +export const basicLight = basicLightInit(); diff --git a/themes/basic/tsconfig.json b/themes/basic/tsconfig.json new file mode 100644 index 000000000..d72ec3d49 --- /dev/null +++ b/themes/basic/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig", + "include": ["src"], + "compilerOptions": { + "outDir": "./cjs", + "baseUrl": ".", + "noEmit": false + } +} diff --git a/www/package.json b/www/package.json index 1a05ddac6..acccb96b3 100644 --- a/www/package.json +++ b/www/package.json @@ -48,6 +48,7 @@ "@uiw/codemirror-theme-androidstudio": "4.21.9", "@uiw/codemirror-theme-atomone": "4.21.9", "@uiw/codemirror-theme-aura": "4.21.9", + "@uiw/codemirror-theme-basic": "4.21.9", "@uiw/codemirror-theme-bbedit": "4.21.9", "@uiw/codemirror-theme-bespin": "4.21.9", "@uiw/codemirror-theme-darcula": "4.21.9", diff --git a/www/src/pages/theme/themes/Datas.ts b/www/src/pages/theme/themes/Datas.ts index 78febb5ac..bb1426420 100644 --- a/www/src/pages/theme/themes/Datas.ts +++ b/www/src/pages/theme/themes/Datas.ts @@ -2,6 +2,7 @@ import { abcdef } from '@uiw/codemirror-theme-abcdef'; import { androidstudio } from '@uiw/codemirror-theme-androidstudio'; import { atomone } from '@uiw/codemirror-theme-atomone'; import { aura } from '@uiw/codemirror-theme-aura'; +import { basicLight, basicDark } from '@uiw/codemirror-theme-basic'; import { bbedit } from '@uiw/codemirror-theme-bbedit'; import { dracula } from '@uiw/codemirror-theme-dracula'; import { darcula } from '@uiw/codemirror-theme-darcula'; @@ -27,6 +28,8 @@ export const themeData = { androidstudio, atomone, aura, + basicLight, + basicDark, bbedit, bespin, darcula, diff --git a/www/src/router.tsx b/www/src/router.tsx index f921cb8b4..fc4d94602 100644 --- a/www/src/router.tsx +++ b/www/src/router.tsx @@ -237,6 +237,32 @@ export const routes: MenuRouteObject[] = [ /> ), }, + { + path: 'data/basic', + element: , + }, + { + path: 'data/basic/light', + label: 'Basic Light', + element: ( + import('@uiw/codemirror-theme-basic/README.md')} + /> + ), + }, + { + path: 'data/basic/dark', + label: 'Basic Dark', + element: ( + import('@uiw/codemirror-theme-basic/README.md')} + /> + ), + }, { path: 'data/bespin', label: 'bespin',