Listening for focus and blur event

[kristofferdamborg]

I have previously used the vue wrapper for CodeMirror 5 (https://github.com/RennZhang/codemirror-editor-vue3) which supported binding the focus and blur event directly on the component. Is it possible to do this as well with vue-codemirror6?

Example:

<template>
  <CodeMirror
     @focus="onFocus"
     @blur="onBlur"
  />
</template>

[logue]

There is no blur, but I think focus can be used as is.

vue-codemirror6/src/components/CodeMirror.ts

Lines 265 to 280 in de7708e

	/** Model Update */
	'update:modelValue': (value: string | Text) => true,
	/** CodeMirror ViewUpdate */
	update: (value: ViewUpdate) => true,
	/** CodeMirror onReady */
	ready: (value: {
	view: EditorView;
	state: EditorState;
	container: HTMLElement;
	}) => true,
	/** CodeMirror onFocus */
	focus: (value: boolean) => true,
	/** State Changed */
	change: (value: EditorState) => true,
	/** CodeMirror onDestroy */
	destroy: () => true,

[kristofferdamborg]

There is no blur, but I think focus can be used as is.

vue-codemirror6/src/components/CodeMirror.ts

Lines 265 to 280 in de7708e

	/** Model Update */
	'update:modelValue': (value: string | Text) => true,
	/** CodeMirror ViewUpdate */
	update: (value: ViewUpdate) => true,
	/** CodeMirror onReady */
	ready: (value: {
	view: EditorView;
	state: EditorState;
	container: HTMLElement;
	}) => true,
	/** CodeMirror onFocus */
	focus: (value: boolean) => true,
	/** State Changed */
	change: (value: EditorState) => true,
	/** CodeMirror onDestroy */
	destroy: () => true,

@logue It doesn't seem to work unfortunately. Here's a Stackblitz replication: https://stackblitz.com/edit/vue-ump37q?file=src%2Fcomponents%2FEditor.vue

[kristofferdamborg]

@logue It unfortunately doesn't seem like f5d4fd9 fixed it. There's still no focus event triggered :(

Here's an updated Stackblitz (with version 1.1.26): https://vue-ump37q.stackblitz.io

[kristofferdamborg]

@logue

A possible solution is to add a focusChangeEffect as an extension. Tested to be working locally, see example below.

function focusEffectHandler(state: EditorState, focusing: boolean): StateEffect<any> | null {
    if (focusing) {
        emit('focus');
    } else {
        emit('blur');
    }

    return null;
}

const extensions = [
     EditorView.focusChangeEffect.of(focusEffectHandler),
     //  ...other extensions
];

[logue]

In 1.1.27, focus was solved by hooking ViewUpdate. As a side effect, character count processing and error counting processing are faster.

However, regarding blur, the official answer is as follows, but it didn't work when I implemented it, so I decided to postpone it.
https://discuss.codemirror.net/t/code-mirror-6-has-focus-what-about-blur/4071

I skipped the implementation of blur because it seems to be hitting the DOM directly instead of CodeMirror's function.
So, for blur, I'm thinking of releasing an API that can hit the dom (contentDOM).