Hyper link Extensions for CodeMirror6.
npm install @uiw/codemirror-extensions-hyper-link --saveimport { hyperLink, hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';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;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
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,
});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;As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.