phx-react
Version:
PHX REACT
74 lines • 3.5 kB
JavaScript
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $createTableNodeWithDimensions, INSERT_TABLE_COMMAND, TableNode } from '@lexical/table';
import { $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand, } from 'lexical';
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import * as React from 'react';
import invariant from '../shared/invariant';
import Button from '../ui/Button';
import { DialogActions } from '../ui/Dialog';
import TextInput from '../ui/TextInput';
export const INSERT_NEW_TABLE_COMMAND = createCommand('INSERT_NEW_TABLE_COMMAND');
export const CellContext = createContext({
cellEditorConfig: null,
cellEditorPlugins: null,
set: () => {
// Empty
},
});
export function TableContext({ children }) {
const [contextValue, setContextValue] = useState({
cellEditorConfig: null,
cellEditorPlugins: null,
});
return (React.createElement(CellContext.Provider, { value: useMemo(() => ({
cellEditorConfig: contextValue.cellEditorConfig,
cellEditorPlugins: contextValue.cellEditorPlugins,
set: (cellEditorConfig, cellEditorPlugins) => {
setContextValue({ cellEditorConfig, cellEditorPlugins });
},
}), [contextValue.cellEditorConfig, contextValue.cellEditorPlugins]) }, children));
}
export function InsertTableDialog({ activeEditor, onClose, }) {
const [rows, setRows] = useState('5');
const [columns, setColumns] = useState('5');
const [isDisabled, setIsDisabled] = useState(true);
useEffect(() => {
const row = Number(rows);
const column = Number(columns);
if (row && row > 0 && row <= 500 && column && column > 0 && column <= 50) {
setIsDisabled(false);
}
else {
setIsDisabled(true);
}
}, [rows, columns]);
const onClick = () => {
activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
columns,
rows,
});
onClose();
};
return (React.createElement(React.Fragment, null,
React.createElement(TextInput, { "data-test-id": 'table-modal-rows', label: 'Rows', onChange: setRows, placeholder: '# of rows (1-500)', type: 'number', value: rows }),
React.createElement(TextInput, { "data-test-id": 'table-modal-columns', label: 'Columns', onChange: setColumns, placeholder: '# of columns (1-50)', type: 'number', value: columns }),
React.createElement(DialogActions, { "data-test-id": 'table-model-confirm-insert' },
React.createElement(Button, { disabled: isDisabled, onClick: onClick }, "Confirm"))));
}
export function TablePlugin({ cellEditorConfig, children, }) {
const [editor] = useLexicalComposerContext();
const cellContext = useContext(CellContext);
useEffect(() => {
if (!editor.hasNodes([TableNode])) {
invariant(false, 'TablePlugin: TableNode is not registered on editor');
}
cellContext.set(cellEditorConfig, children);
return editor.registerCommand(INSERT_NEW_TABLE_COMMAND, ({ columns, includeHeaders, rows }) => {
const tableNode = $createTableNodeWithDimensions(Number(rows), Number(columns), includeHeaders);
$insertNodes([tableNode]);
return true;
}, COMMAND_PRIORITY_EDITOR);
}, [cellContext, cellEditorConfig, children, editor]);
return null;
}
//# sourceMappingURL=TablePlugin.js.map