@uiw/codemirror-extensions-events v4.22.0
Events Extensions
Events Extensions for CodeMirror6.
Install
npm install @uiw/codemirror-extensions-events --save
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
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 (
<CodeMirror
value="console.log('hello world!');"
height="200px"
extensions={[
element({
type: 'content',
props: {
inputMode: 'none',
},
}),
eventExt,
eventExt2,
]}
/>
);
}
export default App;
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
import { ViewPlugin, EditorView } from '@codemirror/view';
export declare type Events<K extends keyof HTMLElementEventMap> = 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<T extends keyof HTMLElementEventMap>(
opts: Events<T>,
): ViewPlugin<{
dom?: HTMLElement | undefined;
view: EditorView;
destroy(): void;
}>;
/**
* The DOM element that wraps the entire editor view.
*/
export declare function scroll<T extends keyof HTMLElementEventMap>(
opts: Events<T>,
): 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<T extends keyof HTMLElementEventMap>(
opts: Events<T>,
): 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.
9 days ago
2 months ago
2 months ago
3 months ago
3 months ago
9 months ago
9 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
5 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago