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

Events Extensions


Events Extensions for CodeMirror6.

Install

``bash
npm install @uiw/codemirror-extensions-events --save
`

`js
import * as events from '@uiw/codemirror-extensions-events';
import { element } from '@uiw/codemirror-extensions-events';

const extension1 = events.scroll({
scroll: (evn) => {
/ ... /
},
});

const extension1 = events.dom({
click: (evn) => {
/ ... /
},
});

const extension2 = events.content({
focus: (evn) => {
/ ... /
},
blur: (evn) => {
/ ... /
},
});

const extension3 = element({
type: 'content',
props: {
inputMode: 'none',
},
});
`

Usage

`jsx
import CodeMirror from '@uiw/react-codemirror';
import * as events from '@uiw/codemirror-extensions-events';
import { element } from '@uiw/codemirror-extensions-events';

function App() {
const [scrollTop, setScrollTop] = useState(0);

const eventExt = events.scroll({
scroll: (evn) => {
setScrollTop(evn.target.scrollTop);
},
});

const eventExt2 = events.content({
focus: (evn) => {
console.log('focus');
},
blur: (evn) => {
console.log('blur');
},
});

return (
value="console.log('hello world!');"
height="200px"
extensions={[
element({
type: 'content',
props: {
inputMode: 'none',
},
}),
eventExt,
eventExt2,
]}
/>
);
}
export default App;
`

`js
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import * as events from '@uiw/codemirror-extensions-events';

const eventExt = events.content({
focus: (evn) => {
console.log('focus');
},
blur: (evn) => {
console.log('blur');
},
});

const state = EditorState.create({
doc: 'my source code',
extensions: [eventExt],
});

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

API

`ts
import { ViewPlugin, EditorView } from '@codemirror/view';
export declare type Events = Record<
K,
(this: HTMLElement, event: HTMLElementEventMap[K]) => void
>;
/**
* The DOM element that can be styled to scroll.
* (Note that it may not have been, so you can't assume this is scrollable.)
*/
export declare function dom(
opts: Events,
): ViewPlugin<{
dom?: HTMLElement | undefined;
view: EditorView;
destroy(): void;
}>;
/**
* The DOM element that wraps the entire editor view.
*/
export declare function scroll(
opts: Events,
): ViewPlugin<{
dom?: HTMLElement | undefined;
view: EditorView;
destroy(): void;
}>;
/**
* The editable DOM element holding the editor content.
* You should not, usually, interact with this content directly though the DOM,
* since the editor will immediately undo most of the changes you make.
*/
export declare function content(
opts: Events,
): ViewPlugin<{
dom?: HTMLElement | undefined;
view: EditorView;
destroy(): void;
}>;
``

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.