feat(hyper-link): the callback function adds more params (value, input, from, to) => {}.

Author: jaywcjlove

extensions/hyper-link/README.md

@@ -63,7 +63,7 @@ export const hyperLink: Extension = [
   hyperLinkExtension({
     regexp: /Hyper/gi,
     match: { Hyper: 'https://google.com' },
-    handle: (value) => {
+    handle: (value, input, from, to) => {
       if (value === 'Hyper') return 'https://google.com';
       return value;
     },
@@ -82,6 +82,31 @@ const view = new EditorView({
 });
 ```
 
+## API
+
+```ts
+import { ViewPlugin, DecorationSet, MatchDecorator, ViewUpdate } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+export interface HyperLinkState {
+  at: number;
+  url: string;
+  anchor: HyperLinkExtensionOptions['anchor'];
+}
+export type HyperLinkExtensionOptions = {
+  regexp?: RegExp;
+  match?: Record<string, string>;
+  handle?: (value: string, input: string, from: number, to: number) => string;
+  anchor?: (dom: HTMLAnchorElement) => HTMLAnchorElement;
+};
+export declare function hyperLinkExtension({ regexp, match, handle, anchor }?: HyperLinkExtensionOptions): ViewPlugin<{
+  decorator?: MatchDecorator | undefined;
+  decorations: DecorationSet;
+  update(update: ViewUpdate): void;
+}>;
+export declare const hyperLinkStyle: Extension;
+export declare const hyperLink: Extension;
+```
+
 ## Contributors
 
 As always, thanks to our amazing contributors!

extensions/hyper-link/src/index.ts

@@ -67,14 +67,14 @@ function hyperLinkDecorations(view: EditorView, anchor?: HyperLinkExtensionOptio
 const linkDecorator = (
   regexp?: RegExp,
   matchData?: Record<string, string>,
-  matchFn?: (str: string) => string,
+  matchFn?: (str: string, input: string, from: number, to: number) => string,
   anchor?: HyperLinkExtensionOptions['anchor'],
 ) =>
   new MatchDecorator({
     regexp: regexp || /\b((?:https?|ftp):\/\/[^\s/$.?#].[^\s]*)\b/gi,
     decorate: (add, from, to, match, view) => {
       const url = match[0];
-      let urlStr = matchFn && typeof matchFn === 'function' ? matchFn(url) : url;
+      let urlStr = matchFn && typeof matchFn === 'function' ? matchFn(url, match.input, from, to) : url;
       if (matchData && matchData[url]) {
         urlStr = matchData[url];
       }
@@ -88,7 +88,7 @@ const linkDecorator = (
 export type HyperLinkExtensionOptions = {
   regexp?: RegExp;
   match?: Record<string, string>;
-  handle?: (value: string) => string;
+  handle?: (value: string, input: string, from: number, to: number) => string;
   anchor?: (dom: HTMLAnchorElement) => HTMLAnchorElement;
 };
 

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

@@ -1,10 +1,23 @@
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
+// import { hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { useTheme } from '../../../utils/useTheme';
 import { markdownString } from './codeSample';
 import { PageWarpper } from '..';
 
+// const hyperLink = [
+//   hyperLinkExtension({
+//     regexp: /codemirror/gi,
+//     match: { codemirror: 'https://google.com' },
+//     handle: (value, input, from, to) => {
+//       if (value === 'Hyper') return 'https://google.com';
+//       return value;
+//     },
+//   }),
+//   hyperLinkStyle,
+// ];
+
 export const HyperLinkExample = () => {
   const { theme } = useTheme();