lexical-vue/dist/LexicalHorizontalRuleNode.js

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

import { addClassNamesToElement, mergeRegister, removeClassNamesFromElement } from "@lexical/utils";
import { $applyNodeReplacement, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, createCommand } from "lexical";
import { defineComponent, h, watchEffect } from "vue";
import { useLexicalComposer } from "./LexicalComposer.vine.js";
import { useLexicalNodeSelection } from "./useLexicalNodeSelection.js";
const INSERT_HORIZONTAL_RULE_COMMAND = createCommand('INSERT_HORIZONTAL_RULE_COMMAND');
const HorizontalRuleComponent = defineComponent({
    props: {
        nodeKey: {
            type: String,
            required: true
        }
    },
    setup (props) {
        const editor = useLexicalComposer();
        const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(()=>props.nodeKey);
        watchEffect((onInvalidate)=>{
            const unregister = mergeRegister(editor.registerCommand(CLICK_COMMAND, (event)=>{
                const hrElem = editor.getElementByKey(props.nodeKey);
                if (event.target === hrElem) {
                    if (!event.shiftKey) clearSelection();
                    setSelected(!isSelected.value);
                    return true;
                }
                return false;
            }, COMMAND_PRIORITY_LOW));
            onInvalidate(unregister);
        });
        watchEffect(()=>{
            const hrElem = editor.getElementByKey(props.nodeKey);
            const isSelectedClassName = editor._config.theme.hrSelected ?? 'selected';
            if (null !== hrElem) if (isSelected.value) addClassNamesToElement(hrElem, isSelectedClassName);
            else removeClassNamesFromElement(hrElem, isSelectedClassName);
        });
    }
});
class HorizontalRuleNode extends DecoratorNode {
    static getType() {
        return 'horizontalrule';
    }
    static clone(node) {
        return new HorizontalRuleNode(node.__key);
    }
    static importJSON(serializedNode) {
        return $createHorizontalRuleNode().updateFromJSON(serializedNode);
    }
    static importDOM() {
        return {
            hr: ()=>({
                    conversion: $convertHorizontalRuleElement,
                    priority: 0
                })
        };
    }
    decorate() {
        return h(HorizontalRuleComponent, {
            nodeKey: this.__key
        });
    }
}
function $convertHorizontalRuleElement() {
    return {
        node: $createHorizontalRuleNode()
    };
}
function $createHorizontalRuleNode() {
    return $applyNodeReplacement(new HorizontalRuleNode());
}
function $isHorizontalRuleNode(node) {
    return node instanceof HorizontalRuleNode;
}
export { $createHorizontalRuleNode, $isHorizontalRuleNode, HorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND };