lexical-vue/dist/LexicalAutoScrollPlugin.vine.js

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

import { defineComponent, onMounted, onUnmounted } from "vue";
import { $getSelection, $isRangeSelection } from "lexical";
import { useLexicalComposer } from "./LexicalComposer.vine.js";
const LexicalAutoScrollPlugin = (()=>{
    const __vine = defineComponent({
        name: 'LexicalAutoScrollPlugin',
        props: {
            scrollRef: {
                required: true
            }
        },
        setup (__props, param) {
            let { expose: __expose } = param;
            __expose();
            const props = __props;
            const editor = useLexicalComposer();
            onMounted(()=>{
                const unregister = editor.registerUpdateListener((param)=>{
                    let { tags, editorState } = param;
                    const scrollElement = props.scrollRef;
                    if (!scrollElement || !tags.has('scroll-into-view')) return;
                    const selection = editorState.read(()=>$getSelection());
                    if (!$isRangeSelection(selection) || !selection.isCollapsed()) return;
                    const anchorElement = editor.getElementByKey(selection.anchor.key);
                    if (null === anchorElement) return;
                    const scrollRect = scrollElement.getBoundingClientRect();
                    const rect = anchorElement.getBoundingClientRect();
                    if (rect.bottom > scrollRect.bottom) anchorElement.scrollIntoView(false);
                    else if (rect.top < scrollRect.top) anchorElement.scrollIntoView();
                });
                onUnmounted(unregister);
            });
            return (_ctx, _cache)=>null;
        }
    });
    __vine.__vue_vine = true;
    return __vine;
})();
export { LexicalAutoScrollPlugin };