phx-react
Version:
PHX REACT
114 lines • 5.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ExcalidrawComponent;
const tslib_1 = require("tslib");
const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
const useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
const utils_1 = require("@lexical/utils");
const lexical_1 = require("lexical");
const react_1 = require("react");
const React = tslib_1.__importStar(require("react"));
const ImageResizer_1 = tslib_1.__importDefault(require("../../ui/ImageResizer"));
const ExcalidrawImage_1 = tslib_1.__importDefault(require("./ExcalidrawImage"));
const ExcalidrawModal_1 = tslib_1.__importDefault(require("./ExcalidrawModal"));
const _1 = require(".");
function ExcalidrawComponent({ data, nodeKey }) {
const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
const [isModalOpen, setModalOpen] = (0, react_1.useState)(data === '[]' && editor.isEditable());
const imageContainerRef = (0, react_1.useRef)(null);
const buttonRef = (0, react_1.useRef)(null);
const [isSelected, setSelected, clearSelection] = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey);
const [isResizing, setIsResizing] = (0, react_1.useState)(false);
const onDelete = (0, react_1.useCallback)((event) => {
if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
event.preventDefault();
editor.update(() => {
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
if ((0, _1.$isExcalidrawNode)(node)) {
node.remove();
}
});
}
return false;
}, [editor, isSelected, nodeKey]);
// Set editor to readOnly if excalidraw is open to prevent unwanted changes
(0, react_1.useEffect)(() => {
if (isModalOpen) {
editor.setEditable(false);
}
else {
editor.setEditable(true);
}
}, [isModalOpen, editor]);
(0, react_1.useEffect)(() => (0, utils_1.mergeRegister)(editor.registerCommand(lexical_1.CLICK_COMMAND, (event) => {
const buttonElem = buttonRef.current;
const eventTarget = event.target;
if (isResizing) {
return true;
}
if (buttonElem !== null && buttonElem.contains(eventTarget)) {
if (!event.shiftKey) {
clearSelection();
}
setSelected(!isSelected);
if (event.detail > 1) {
setModalOpen(true);
}
return true;
}
return false;
}, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW)), [clearSelection, editor, isSelected, isResizing, onDelete, setSelected]);
const deleteNode = (0, react_1.useCallback)(() => {
setModalOpen(false);
return editor.update(() => {
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
if ((0, _1.$isExcalidrawNode)(node)) {
node.remove();
}
});
}, [editor, nodeKey]);
const setData = (els, aps, fls) => {
if (!editor.isEditable()) {
return;
}
return editor.update(() => {
const node = (0, lexical_1.$getNodeByKey)(nodeKey);
if ((0, _1.$isExcalidrawNode)(node)) {
if (els.length > 0 || Object.keys(fls).length > 0) {
node.setData(JSON.stringify({
appState: aps,
elements: els,
files: fls,
}));
}
else {
node.remove();
}
}
});
};
const onResizeStart = () => {
setIsResizing(true);
};
const onResizeEnd = () => {
// Delay hiding the resize bars for click case
setTimeout(() => {
setIsResizing(false);
}, 200);
};
const openModal = (0, react_1.useCallback)(() => {
setModalOpen(true);
}, []);
const { appState = {}, elements = [], files = {} } = (0, react_1.useMemo)(() => JSON.parse(data), [data]);
return (React.createElement(React.Fragment, null,
React.createElement(ExcalidrawModal_1.default, { closeOnClickOutside: false, initialAppState: appState, initialElements: elements, initialFiles: files, isShown: isModalOpen, onClose: () => setModalOpen(false), onDelete: deleteNode, onSave: (els, aps, fls) => {
editor.setEditable(true);
setData(els, aps, fls);
setModalOpen(false);
} }),
elements.length > 0 && (React.createElement("button", { ref: buttonRef, className: `excalidraw-button ${isSelected ? 'selected' : ''}`, type: 'button' },
React.createElement(ExcalidrawImage_1.default, { appState: appState, className: 'image', elements: elements, files: files, imageContainerRef: imageContainerRef }),
isSelected && (React.createElement("div", { className: 'image-edit-button', onClick: openModal, onMouseDown: (event) => event.preventDefault(), role: 'button', tabIndex: 0 })),
(isSelected || isResizing) && (React.createElement(ImageResizer_1.default, { editor: editor, imageRef: imageContainerRef, onResizeEnd: onResizeEnd, onResizeStart: onResizeStart }))))));
}
//# sourceMappingURL=ExcalidrawComponent.js.map