import { ViewPlugin, EditorView } from '@codemirror/view'; export type Events = Record< K, (this: HTMLElement, event: HTMLElementEventMap[K]) => void >; interface DOMElementProps extends Partial {} type Options = { /** * Bind events on different dom nodes. * - `scroll` The DOM element that wraps the entire editor view. * - `dom` The DOM element that can be styled to scroll. (Note that it may not have been, so you can't assume this is scrollable.) * - `content` 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. */ type?: 'scroll' | 'dom' | 'content'; events?: Events; props?: DOMElementProps; }; export function element(opts: Options) { const { type = 'scroll', events, props } = opts; return ViewPlugin.fromClass( class { dom?: HTMLElement; view: EditorView; constructor(view: EditorView) { this.view = view; if (type === 'dom') { this.dom = view.dom; } else if (type === 'content') { this.dom = view.contentDOM; } else { this.dom = view.scrollDOM; } // Apply props to the DOM element if (this.dom && props) { const keys = Object.keys(props) as (keyof typeof props)[]; keys.forEach((key) => { (this.dom as any)[key] = props[key]; }); } (Object.keys(events || {}) as Array).forEach((keyname) => { if (events && events[keyname] && this.dom) { this.dom.addEventListener(keyname, events[keyname]); } }); } destroy() { (Object.keys(events || {}) as Array).forEach((keyname) => { if (events && events[keyname] && this.dom) { this.dom.removeEventListener(keyname, events[keyname]); } }); } }, ); } /** * 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 function dom(opts: Events) { return element({ type: 'dom', events: opts }); } /** * The DOM element that wraps the entire editor view. */ export function scroll(opts: Events) { return element({ type: 'scroll', events: opts }); } /** * 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 function content(opts: Events) { return element({ type: 'content', events: opts }); }