phx-react
Version:
PHX REACT
97 lines • 3.37 kB
JavaScript
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
import { mergeRegister } from '@lexical/utils';
import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
import * as React from 'react';
import { useCallback, useEffect } from 'react';
function PageBreakComponent({ nodeKey }) {
const [editor] = useLexicalComposerContext();
const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
const onDelete = useCallback((event) => {
event.preventDefault();
if (isSelected && $isNodeSelection($getSelection())) {
const node = $getNodeByKey(nodeKey);
if ($isPageBreakNode(node)) {
node.remove();
return true;
}
}
return false;
}, [isSelected, nodeKey]);
useEffect(() => mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
const pbElem = editor.getElementByKey(nodeKey);
if (event.target === pbElem) {
if (!event.shiftKey) {
clearSelection();
}
setSelected(!isSelected);
return true;
}
return false;
}, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW)), [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
useEffect(() => {
const pbElem = editor.getElementByKey(nodeKey);
if (pbElem !== null) {
pbElem.className = isSelected ? 'selected' : '';
}
}, [editor, isSelected, nodeKey]);
return null;
}
export class PageBreakNode extends DecoratorNode {
static getType() {
return 'page-break';
}
static clone(node) {
return new PageBreakNode(node.__key);
}
static importJSON() {
return $createPageBreakNode();
}
static importDOM() {
return {
figure: (domNode) => {
const tp = domNode.getAttribute('type');
if (tp !== this.getType())
return null;
return {
conversion: convertPageBreakElement,
priority: COMMAND_PRIORITY_HIGH,
};
},
};
}
exportJSON() {
return {
type: this.getType(),
version: 1,
};
}
createDOM() {
const el = document.createElement('figure');
el.style.pageBreakAfter = 'always';
el.setAttribute('type', this.getType());
return el;
}
getTextContent() {
return '\n';
}
isInline() {
return false;
}
updateDOM() {
return false;
}
decorate() {
return React.createElement(PageBreakComponent, { nodeKey: this.__key });
}
}
function convertPageBreakElement() {
return { node: $createPageBreakNode() };
}
export function $createPageBreakNode() {
return new PageBreakNode();
}
export function $isPageBreakNode(node) {
return node instanceof PageBreakNode;
}
//# sourceMappingURL=index.js.map