lexical-vue/dist/LexicalOnChangePlugin.vine.js

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

import { useDefaults } from "vue-vine";
import { defineComponent, toRefs, watchEffect } from "vue";
import { HISTORY_MERGE_TAG } from "lexical";
import { useLexicalComposer } from "./LexicalComposer.vine.js";
const OnChangePlugin = (()=>{
    const __vine = defineComponent({
        name: 'OnChangePlugin',
        props: {
            ignoreSelectionChange: {
                type: Boolean,
                default: false
            },
            ignoreHistoryMergeTagChange: {
                type: Boolean,
                default: true
            }
        },
        emits: [
            'change'
        ],
        setup (__props, param) {
            let { emit: __emit, expose: __expose } = param;
            const emit = __emit;
            __expose();
            const props = useDefaults(__props, {
                ignoreSelectionChange: ()=>false,
                ignoreHistoryMergeTagChange: ()=>true
            });
            const { ignoreSelectionChange, ignoreHistoryMergeTagChange } = toRefs(props);
            const editor = useLexicalComposer();
            watchEffect((onInvalidate)=>{
                const unregister = editor.registerUpdateListener((param)=>{
                    let { editorState, dirtyElements, dirtyLeaves, prevEditorState, tags } = param;
                    if (props.ignoreSelectionChange && 0 === dirtyElements.size && 0 === dirtyLeaves.size || props.ignoreHistoryMergeTagChange && tags.has(HISTORY_MERGE_TAG) || prevEditorState.isEmpty()) return;
                    emit('change', editorState, editor, tags);
                });
                onInvalidate(unregister);
            });
            return (_ctx, _cache)=>null;
        }
    });
    __vine.__vue_vine = true;
    return __vine;
})();
export { OnChangePlugin };