lexical-vue/dist/shared/useDecorators.js

An extensible Vue 3 web text-editor based on Lexical.

import { Teleport, computed, h, onMounted, onUnmounted, shallowRef, unref } from "vue";
function useDecorators(editor) {
    const decorators = shallowRef(editor.getDecorators());
    onMounted(()=>{
        const unregister = editor.registerDecoratorListener((nextDecorators)=>{
            decorators.value = nextDecorators;
        });
        onUnmounted(()=>{
            unregister();
        });
    });
    return computed(()=>{
        const decoratedTeleports = [];
        const decoratorKeys = Object.keys(unref(decorators));
        for(let i = 0; i < decoratorKeys.length; i++){
            const nodeKey = decoratorKeys[i];
            const vueDecorator = decorators.value[nodeKey];
            const element = editor.getElementByKey(nodeKey);
            if (null !== element) decoratedTeleports.push(h(Teleport, {
                to: element
            }, vueDecorator));
        }
        return decoratedTeleports;
    });
}
export { useDecorators };