feat: add hyper-link extensions.

.github/workflows/ci.yml

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

extensions/color/src/index.ts

@@ -66,7 +66,7 @@ function colorDecorations(view: EditorView) {
               to,
               alpha: a ? a.replace(/(\/|,)/g, '') : '',
             }),
-            side: 1,
+            side: 0,
           });
           widgets.push(widget.range(from));
         } else if (type.name === 'CallExpression' && hslMatcher(callExp)) {
@@ -108,7 +108,7 @@ function colorDecorations(view: EditorView) {
               to,
               alpha: match.a ? match.a.toString() : '',
             }),
-            side: 1,
+            side: 0,
           });
           widgets.push(widget.range(from));
         } else if (type.name === 'ColorLiteral') {
@@ -122,7 +122,7 @@ function colorDecorations(view: EditorView) {
               to,
               alpha,
             }),
-            side: 1,
+            side: 0,
           });
           widgets.push(widget.range(from));
         } else if (type.name === 'ValueName') {
@@ -137,7 +137,7 @@ function colorDecorations(view: EditorView) {
                 to,
                 alpha: '',
               }),
-              side: 1,
+              side: 0,
             });
             widgets.push(widget.range(from));
           }

extensions/hyper-link/README.md

@@ -0,0 +1,61 @@
+<!--rehype:ignore:start-->
+
+# Hyper link Extensions
+
+<!--rehype:ignore:end-->
+
+[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-hyper-link.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-hyper-link)
+
+Hyper link Extensions for CodeMirror6.
+
+## Install
+
+```bash
+npm install @uiw/codemirror-extensions-hyper-link --save
+```
+
+## Usage
+
+```jsx
+import CodeMirror from '@uiw/react-codemirror';
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
+
+const code = `https://uiwjs.github.io/react-codemirror`;
+
+function App() {
+  return <CodeMirror value={code} height="200px" extensions={[hyperLink]} />;
+}
+export default App;
+```
+
+```js
+import { EditorView } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
+
+const code = `https://uiwjs.github.io/react-codemirror`;
+
+const state = EditorState.create({
+  doc: code,
+  extensions: [hyperLink],
+});
+
+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/hyper-link/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@uiw/codemirror-extensions-hyper-link",
+  "version": "4.11.1",
+  "description": "Hyper link Extensions for CodeMirror6.",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/hyper-link",
+  "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",
+    "link",
+    "url",
+    "hyper-link",
+    "extensions",
+    "ide",
+    "code"
+  ],
+  "jest": {
+    "coverageReporters": [
+      "lcov",
+      "json-summary"
+    ]
+  }
+}

extensions/hyper-link/src/index.ts

@@ -0,0 +1,98 @@
+import { ViewPlugin, EditorView, Decoration, DecorationSet, WidgetType, ViewUpdate } from '@codemirror/view';
+import { Extension, Range } from '@codemirror/state';
+import { syntaxTree } from '@codemirror/language';
+
+const pathStr = `<svg viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"><path d="M607.934444 417.856853c-6.179746-6.1777-12.766768-11.746532-19.554358-16.910135l-0.01228 0.011256c-6.986111-6.719028-16.47216-10.857279-26.930349-10.857279-21.464871 0-38.864146 17.400299-38.864146 38.864146 0 9.497305 3.411703 18.196431 9.071609 24.947182l-0.001023 0c0.001023 0.001023 0.00307 0.00307 0.005117 0.004093 2.718925 3.242857 5.953595 6.03853 9.585309 8.251941 3.664459 3.021823 7.261381 5.997598 10.624988 9.361205l3.203972 3.204995c40.279379 40.229237 28.254507 109.539812-12.024871 149.820214L371.157763 796.383956c-40.278355 40.229237-105.761766 40.229237-146.042167 0l-3.229554-3.231601c-40.281425-40.278355-40.281425-105.809861 0-145.991002l75.93546-75.909877c9.742898-7.733125 15.997346-19.668968 15.997346-33.072233 0-23.312962-18.898419-42.211381-42.211381-42.211381-8.797363 0-16.963347 2.693342-23.725354 7.297197-0.021489-0.045025-0.044002-0.088004-0.066515-0.134053l-0.809435 0.757247c-2.989077 2.148943-5.691629 4.669346-8.025791 7.510044l-78.913281 73.841775c-74.178443 74.229608-74.178443 195.632609 0 269.758863l3.203972 3.202948c74.178443 74.127278 195.529255 74.127278 269.707698 0l171.829484-171.880649c74.076112-74.17435 80.357166-191.184297 6.282077-265.311575L607.934444 417.856853z"></path><path d="M855.61957 165.804257l-3.203972-3.203972c-74.17742-74.178443-195.528232-74.178443-269.706675 0L410.87944 334.479911c-74.178443 74.178443-78.263481 181.296089-4.085038 255.522628l3.152806 3.104711c3.368724 3.367701 6.865361 6.54302 10.434653 9.588379 2.583848 2.885723 5.618974 5.355985 8.992815 7.309476 0.025583 0.020466 0.052189 0.041956 0.077771 0.062422l0.011256-0.010233c5.377474 3.092431 11.608386 4.870938 18.257829 4.870938 20.263509 0 36.68962-16.428158 36.68962-36.68962 0-5.719258-1.309832-11.132548-3.645017-15.95846l0 0c-4.850471-10.891048-13.930267-17.521049-20.210297-23.802102l-3.15383-3.102664c-40.278355-40.278355-24.982998-98.79612 15.295358-139.074476l171.930791-171.830507c40.179095-40.280402 105.685018-40.280402 145.965419 0l3.206018 3.152806c40.279379 40.281425 40.279379 105.838513 0 146.06775l-75.686796 75.737962c-10.296507 7.628748-16.97358 19.865443-16.97358 33.662681 0 23.12365 18.745946 41.87062 41.87062 41.87062 8.048303 0 15.563464-2.275833 21.944801-6.211469 0.048095 0.081864 0.093121 0.157589 0.141216 0.240477l1.173732-1.083681c3.616364-2.421142 6.828522-5.393847 9.529027-8.792247l79.766718-73.603345C929.798013 361.334535 929.798013 239.981676 855.61957 165.804257z"></path></svg>`;
+
+export interface HyperLinkState {
+  from: number;
+  to: number;
+  url: string;
+}
+
+class HyperLink extends WidgetType {
+  private readonly state: HyperLinkState;
+  constructor({ ...state }: HyperLinkState) {
+    super();
+    this.state = state;
+  }
+  eq(other: HyperLink) {
+    return (
+      this.state.url === other.state.url && this.state.to === other.state.to && this.state.from === other.state.from
+    );
+  }
+  toDOM() {
+    const wrapper = document.createElement('a');
+    wrapper.href = this.state.url;
+    wrapper.target = '__blank';
+    wrapper.innerHTML = pathStr;
+    wrapper.className = 'cm-hyper-link-icon';
+    return wrapper;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+
+function hyperLinkDecorations(view: EditorView) {
+  const widgets: Array<Range<Decoration>> = [];
+  for (const range of view.visibleRanges) {
+    syntaxTree(view.state).iterate({
+      from: range.from,
+      to: range.to,
+      enter: ({ type, node, from, to }) => {
+        const callExp: string = view.state.doc.sliceString(from, to);
+        if (type.name === 'URL') {
+          const widget = Decoration.widget({
+            widget: new HyperLink({
+              from,
+              to,
+              url: callExp,
+            }),
+            side: 1,
+          });
+          widgets.push(widget.range(to));
+        } else if (type.name === 'String') {
+          console.log('type.name:', type.name, callExp);
+        } else if (type.name === 'CodeText') {
+          console.log('type.name:', type.name, callExp);
+        } else {
+          console.log('type.name:', type.name, callExp);
+        }
+      },
+    });
+  }
+  return Decoration.set(widgets);
+}
+
+export function hyperLinkExtension() {
+  return ViewPlugin.fromClass(
+    class HyperLinkView {
+      decorations: DecorationSet;
+      constructor(view: EditorView) {
+        this.decorations = hyperLinkDecorations(view);
+      }
+      update(update: ViewUpdate) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = hyperLinkDecorations(update.view);
+        }
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}
+
+export const hyperLinkStyle = EditorView.baseTheme({
+  '.cm-hyper-link-icon': {
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    marginLeft: '0.2ch',
+  },
+  '.cm-hyper-link-icon svg': {
+    display: 'block',
+  },
+});
+
+export const hyperLink: Extension = [hyperLinkExtension(), hyperLinkStyle];

extensions/hyper-link/tsconfig.json

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

www/package.json

@@ -39,6 +39,7 @@
     "@codemirror/legacy-modes": "~6.1.0",
     "@uiw/codemirror-extensions-color": "4.11.1",
     "@uiw/codemirror-extensions-events": "4.11.1",
+    "@uiw/codemirror-extensions-hyper-link": "4.11.1",
     "@uiw/codemirror-theme-abcdef": "4.11.1",
     "@uiw/codemirror-theme-androidstudio": "4.11.1",
     "@uiw/codemirror-theme-bespin": "4.11.1",

www/src/index.tsx

@@ -10,6 +10,7 @@ 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 { HyperLinkDoc } from './pages/extensions/hyper-link';
 import { ColorDoc } from './pages/extensions/color';
 
 export const GlobalStyle = createGlobalStyle`
@@ -73,6 +74,7 @@ root.render(
         <Route path="color" element={<ColorDoc />} />
         <Route path="events" element={<EventsDoc />} />
         <Route path="line-numbers-relative" element={<LineNumbersRelativeDoc />} />
+        <Route path="hyper-link" element={<HyperLinkDoc />} />
       </Route>
     </Routes>
   </HashRouter>,

www/src/pages/extensions/datas.tsx

@@ -1,9 +1,11 @@
 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';
+import hyperLinkMd from '@uiw/codemirror-extensions-hyper-link/README.md';
 
 export const mdSource = {
   color: colorMd.source,
   events: eventsMd.source,
   'line-numbers-relative': lineNumbersRelativeMd.source,
+  'hyper-link': hyperLinkMd.source,
 };

www/src/pages/extensions/hyper-link/codeSample.ts

@@ -0,0 +1,20 @@
+export const markdownString = `Hyper Link
+====
+
+- https://www.npmjs.com/package/@uiw/react-codemirror this url
+
+[url 1](https://www.npmjs.com)
+[url 2](https://www.npmjs.com/package/@uiw/react-codemirror)
+
+\`\`\`js
+const str = "https://www.npmjs.com/package/@uiw/react-codemirror"
+\`\`\`
+`;
+export const jsonString = `{
+  "name": "@uiw/codemirror-extensions-hyper-link",
+  "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/hyper-link",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uiwjs/react-codemirror.git"
+  }
+}`;

www/src/pages/extensions/hyper-link/index.tsx

@@ -0,0 +1,38 @@
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import data from '@uiw/codemirror-extensions-hyper-link/README.md';
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
+import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+import { langs } from '../../../langs';
+import { markdownString } from './codeSample';
+
+const Warpper = styled.div`
+  flex: 1;
+  max-width: 980px;
+  padding: 20px 20px 120px 20px;
+`;
+
+export const HyperLinkDoc = () => {
+  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={markdownString}
+        theme={theme}
+        height="300px"
+        style={{ margin: '0 0 23px 0' }}
+        extensions={[langs.markdown(), hyperLink]}
+      />
+      <MarkdownPreview source={data.source} />
+    </Warpper>
+  );
+};