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.

https://github.com/logue/vue-codemirror6/blob/de7708e480b4a53c13de88011447ed2c86f02d43/src/components/CodeMirror.ts#L265-L280

[kristofferdamborg]

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

https://github.com/logue/vue-codemirror6/blob/de7708e480b4a53c13de88011447ed2c86f02d43/src/components/CodeMirror.ts#L265-L280

@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 https://github.com/logue/vue-codemirror6/commit/f5d4fd9ba39761779e54da0f53727e31616e8446 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).