^{Using my app is also a way to support me:}

Hyper link Extensions


Hyper link Extensions for CodeMirror6.

Install

``bash
npm install @uiw/codemirror-extensions-hyper-link --save
`

`jsx
import { hyperLink, hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';
`

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 ;
}
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,
});
`

Custom match content

`tsx
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';

const code = Hyper Link\n====;

export const hyperLink: Extension = [
hyperLinkExtension({
regexp: /Hyper/gi,
match: { Hyper: 'https://google.com' },
handle: (value, input, from, to) => {
if (value === 'Hyper') return 'https://google.com';
return value;
},
}),
hyperLinkStyle,
];

const state = EditorState.create({
doc: code,
extensions: [hyperLink],
});

const view = new EditorView({
parent: document.querySelector('#editor'),
state,
});
`

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;
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!

Made with github-action-contributors.

License

Licensed under the MIT License.