lexical-vue/dist/LexicalTablePlugin.vine.js

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

import { useDefaults } from "vue-vine";
import { defineComponent, onMounted, onUnmounted, toRefs, watchEffect } from "vue";
import { $isScrollableTablesActive, TableCellNode, TableNode, registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, setScrollableTablesActive } from "@lexical/table";
import { useLexicalComposer } from "./LexicalComposer.vine.js";
const TablePlugin = (()=>{
    const __vine = defineComponent({
        name: 'TablePlugin',
        props: {
            hasCellMerge: {
                type: Boolean,
                default: true
            },
            hasCellBackgroundColor: {
                type: Boolean,
                default: true
            },
            hasTabHandler: {
                type: Boolean,
                default: true
            },
            hasHorizontalScroll: {
                type: Boolean,
                default: false
            }
        },
        setup (__props, param) {
            let { expose: __expose } = param;
            __expose();
            const props = useDefaults(__props, {
                hasCellMerge: ()=>true,
                hasCellBackgroundColor: ()=>true,
                hasTabHandler: ()=>true,
                hasHorizontalScroll: ()=>false
            });
            const { hasCellMerge, hasCellBackgroundColor, hasTabHandler, hasHorizontalScroll } = toRefs(props);
            const editor = useLexicalComposer();
            watchEffect(()=>{
                const hadHorizontalScroll = $isScrollableTablesActive(editor);
                if (hadHorizontalScroll !== props.hasHorizontalScroll) {
                    setScrollableTablesActive(editor, props.hasHorizontalScroll);
                    editor.registerNodeTransform(TableNode, ()=>{})();
                }
            });
            onMounted(()=>{
                const unregister = registerTablePlugin(editor);
                onUnmounted(unregister);
            });
            watchEffect((onInvalidate)=>{
                const unregister = registerTableSelectionObserver(editor, props.hasTabHandler);
                onInvalidate(unregister);
            });
            watchEffect((onInvalidate)=>{
                if (!props.hasCellMerge) {
                    const unregister = registerTableCellUnmergeTransform(editor);
                    onInvalidate(unregister);
                }
            });
            watchEffect((onInvalidate)=>{
                if (!props.hasCellBackgroundColor) {
                    const unregister = editor.registerNodeTransform(TableCellNode, (node)=>{
                        if (null !== node.getBackgroundColor()) node.setBackgroundColor(null);
                    });
                    onInvalidate(unregister);
                }
            });
            return (_ctx, _cache)=>null;
        }
    });
    __vine.__vue_vine = true;
    return __vine;
})();
export { TablePlugin };