@uiw/codemirror-extensions-hyper-link NPM

Hyper link Extensions

Hyper link Extensions for CodeMirror6.

Install

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

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

Usage

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

API

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;