editor.isFocused not updating inside Vue <NodeViewWrapper/>

[bakerkretzmar]

I have a custom image/figure extension with a Vue node view, and I'm trying to show some extra UI when the node is selected. That part works fine, but I want to hide that UI if the entire editor loses focus, which I'm trying to do inside the node, and that part doesn't work.

Simplified example of what I'm trying to do:

<template>
    <NodeViewWrapper as="figure">
        <img :src="attributes.src" :alt="attributes.alt" />
        <div v-show="selected && editor.isFocused">
            <input v-model="attributes.caption" type="text" />
        </div>
        <figcaption v-show="!selected || !editor.isFocused">
            {{ attributes.caption }}
        </figcaption>
    </NodeViewWrapper>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import { NodeViewProps, NodeViewWrapper } from '@tiptap/vue-3';

const props = defineProps<NodeViewProps>();

const attributes = reactive(props.node.attrs);

watch(attributes, (value) => {
    props.updateAttributes(value);
});
</script>

editor.isFocused never updates while my node is selected (i.e. if I select the node and then blur the entire editor). Outside this component it updates normally.

Am I missing something here?

[jonjieviduya]

Any update to this? I am also facing the same issue