feat: add line-numbers-relative extensions.

.github/workflows/ci.yml

@@ -176,6 +176,12 @@ jobs:
           token: ${{ secrets.NPM_TOKEN }}
           package: ./extensions/color/package.json
 
+      - name: 📦 @uiw/codemirror-extensions-line-numbers-relative to NPM
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          package: ./extensions/line-numbers-relative/package.json
+
     outputs:
       successful: ${{steps.create_tag.outputs.successful }}
 
@@ -404,5 +410,19 @@ jobs:
       - run: npm publish
         working-directory: extensions/color
         if: success() || failure()
+        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
+        if: success() || failure()
+        with:
+          path: extensions/line-numbers-relative/package.json
+          data: |
+            { "name": "@uiwjs/codemirror-extensions-line-numbers-relative" }
+
+      - run: npm publish
+        working-directory: extensions/line-numbers-relative
+        if: success() || failure()
         env:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

extensions/color/README.md

@@ -8,7 +8,7 @@
 
 Color Extensions for CodeMirror6.
 
-![Codemirror Extensions Color](https://user-images.githubusercontent.com/1680273/178143104-26e0564b-bd3e-42cd-a8d4-b40edf9ec44d.png)
+[![Codemirror Extensions Color](https://user-images.githubusercontent.com/1680273/178143104-26e0564b-bd3e-42cd-a8d4-b40edf9ec44d.png)](https://uiwjs.github.io/react-codemirror/#/extensions/color)
 
 ## Install
 

extensions/line-numbers-relative/README.md

@@ -0,0 +1,59 @@
+<!--rehype:ignore:start-->
+
+# Relative Line Numbers Extensions
+
+<!--rehype:ignore:end-->
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-line-numbers-relative.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-line-numbers-relative)
+
+Relative line numbers Extensions for CodeMirror6.
+
+[![Relative line numbers Extensions](https://user-images.githubusercontent.com/1680273/178179301-bbb70117-8d16-453e-b723-12efc132a3d1.png)](https://uiwjs.github.io/react-codemirror/#/extensions/line-numbers-relative)
+
+## Install
+
+```bash
+npm install @uiw/codemirror-extensions-line-numbers-relative --save
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
+
+function App() {
+  return <CodeMirror value="console.log('hello world!');" height="200px" extensions={[lineNumbersRelative]} />;
+}
+export default App;
+```
+
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
+
+const state = EditorState.create({
+  doc: 'my source code',
+  extensions: [lineNumbersRelative],
+});
+
+const view = new EditorView({
+  parent: document.querySelector('#editor'),
+  state,
+});
+```
+
+## Contributors
+
+As always, thanks to our amazing contributors!
+
+<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
+  <img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
+</a>
+
+Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
+
+## License
+
+Licensed under the MIT License.

extensions/line-numbers-relative/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@uiw/codemirror-extensions-line-numbers-relative",
+  "version": "4.11.1",
+  "description": "Relative line numbers Extensions for CodeMirror6.",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/line-numbers-relative",
+  "author": "kenny wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
+  "scripts": {
+    "watch": "tsbb watch",
+    "build": "tsbb build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  },
+  "files": [
+    "src",
+    "esm",
+    "cjs"
+  ],
+  "peerDependencies": {
+    "@codemirror/state": ">=6.0.0",
+    "@codemirror/view": ">=6.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/state": "^6.1.0",
+    "@codemirror/view": "^6.0.0"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "line-numbers-relative",
+    "extensions",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}

extensions/line-numbers-relative/src/index.ts

@@ -0,0 +1,20 @@
+import { lineNumbers } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+
+function formatNumber() {
+  return lineNumbers({
+    formatNumber: (lineNo, state) => {
+      if (lineNo > state.doc.lines) {
+        return '0';
+      }
+      const cursorLine = state.doc.lineAt(state.selection.asSingle().ranges[0].to).number;
+      if (lineNo === cursorLine) {
+        return '0';
+      } else {
+        return Math.abs(cursorLine - lineNo).toString();
+      }
+    },
+  });
+}
+
+export const lineNumbersRelative: Extension = [formatNumber()];

extensions/line-numbers-relative/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./cjs",
+    "baseUrl": ".",
+    "noEmit": false
+  }
+}

www/src/index.tsx

@@ -9,6 +9,7 @@ import { ThemeDoc } from './pages/theme/docs';
 import { ThemeOkaidia } from './pages/theme/themes';
 import { ExtensionsLayout } from './pages/extensions';
 import { EventsDoc } from './pages/extensions/events';
+import { LineNumbersRelativeDoc } from './pages/extensions/line-numbers-relative';
 import { ColorDoc } from './pages/extensions/color';
 
 export const GlobalStyle = createGlobalStyle`
@@ -69,8 +70,9 @@ root.render(
       </Route>
       <Route path="/extensions/" element={<ExtensionsLayout />}>
         <Route index element={<Navigate to="events" replace />} />
-        <Route path="events" element={<EventsDoc />} />
         <Route path="color" element={<ColorDoc />} />
+        <Route path="events" element={<EventsDoc />} />
+        <Route path="line-mumbers-relative" element={<LineNumbersRelativeDoc />} />
       </Route>
     </Routes>
   </HashRouter>,

www/src/pages/extensions/datas.tsx

@@ -1,7 +1,9 @@
 import eventsMd from '@uiw/codemirror-extensions-events/README.md';
 import colorMd from '@uiw/codemirror-extensions-color/README.md';
+import lineNumbersRelativeMd from '@uiw/codemirror-extensions-line-numbers-relative/README.md';
 
 export const mdSource = {
-  events: eventsMd.source,
   color: colorMd.source,
+  events: eventsMd.source,
+  'line-mumbers-relative': lineNumbersRelativeMd.source,
 };

www/src/pages/extensions/index.tsx

@@ -29,7 +29,7 @@ export const ExtensionsLayout = () => {
           {Object.keys(mdSource).map((name, key) => {
             return (
               <MenuItem key={key} to={`/extensions/${name}`}>
-                {name}
+                {name.split('-').join(' ')}
               </MenuItem>
             );
           })}

www/src/pages/extensions/line-numbers-relative/index.tsx

@@ -0,0 +1,37 @@
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import data from '@uiw/codemirror-extensions-line-numbers-relative/README.md';
+import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
+import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+import { langs } from '../../../langs';
+
+const Warpper = styled.div`
+  flex: 1;
+  max-width: 980px;
+  padding: 20px 20px 120px 20px;
+`;
+
+export const LineNumbersRelativeDoc = () => {
+  const dark = document.documentElement.getAttribute('data-color-mode');
+  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
+  useEffect(() => {
+    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
+    document.addEventListener('colorschemechange', (e) => {
+      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
+    });
+  }, []);
+
+  return (
+    <Warpper>
+      <CodeMirror
+        value={data.source}
+        theme={theme}
+        height="300px"
+        style={{ margin: '0 0 23px 0' }}
+        extensions={[langs.markdown(), lineNumbersRelative]}
+      />
+      <MarkdownPreview source={data.source} />
+    </Warpper>
+  );
+};

www/src/pages/theme/editor/index.tsx

@@ -16,7 +16,7 @@ import { themeCode } from './themeCode';
 import { Sample } from '../themes/Sample';
 
 export const Sider = styled.div`
-  width: 230px;
+  width: 245px;
   overflow: auto;
   height: calc(100vh - 42px);
   padding: 18px 16px 120px 16px;