|
|
|
|
@ -33,6 +33,7 @@ import { $createCodeNode, $isCodeNode, getDefaultCodeLanguage, getCodeLanguages
|
|
|
|
|
import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
|
|
|
|
|
import DropDown, { DropDownItem } from './../ui/DropDown';
|
|
|
|
|
import DropdownColorPicker from '../ui/DropdownColorPicker';
|
|
|
|
|
import { INSERT_TABLE_COMMAND } from '@lexical/table';
|
|
|
|
|
import {
|
|
|
|
|
// INSERT_IMAGE_COMMAND,
|
|
|
|
|
InsertImageDialog,
|
|
|
|
|
@ -765,6 +766,54 @@ export default function ToolbarPlugin() {
|
|
|
|
|
editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
|
|
|
|
|
}, [editor]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const [showTableGrid, setShowTableGrid] = useState(false);
|
|
|
|
|
const [hoverRows, setHoverRows] = useState(0);
|
|
|
|
|
const [hoverCols, setHoverCols] = useState(0);
|
|
|
|
|
// Insert table function
|
|
|
|
|
const insertTable = (rows, cols) => {
|
|
|
|
|
editor.dispatchCommand(INSERT_TABLE_COMMAND, { rows, columns: cols });
|
|
|
|
|
setHoverRows(0);
|
|
|
|
|
setHoverCols(0);
|
|
|
|
|
setShowTableGrid(false);
|
|
|
|
|
};
|
|
|
|
|
// Generate grid for table selection
|
|
|
|
|
const renderTableGrid = () => {
|
|
|
|
|
const gridSize = 6;
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="absolute z-50 bg-white border rounded shadow-lg p-2 min-w-36"
|
|
|
|
|
onMouseLeave={() => {
|
|
|
|
|
setHoverRows(0);
|
|
|
|
|
setHoverCols(0);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="grid grid-cols-6 gap-1">
|
|
|
|
|
{[...Array(gridSize)].map((_, rowIndex) =>
|
|
|
|
|
[...Array(gridSize)].map((_, colIndex) => (
|
|
|
|
|
<div
|
|
|
|
|
key={`${rowIndex}-${colIndex}`}
|
|
|
|
|
className={`w-4 h-4 border border-solid border-gray-300
|
|
|
|
|
${rowIndex < hoverRows && colIndex < hoverCols
|
|
|
|
|
? 'bg-blue-200'
|
|
|
|
|
: 'bg-white hover:bg-blue-100'}
|
|
|
|
|
`}
|
|
|
|
|
onMouseEnter={() => {
|
|
|
|
|
setHoverRows(rowIndex + 1);
|
|
|
|
|
setHoverCols(colIndex + 1);
|
|
|
|
|
}}
|
|
|
|
|
onClick={() => insertTable(rowIndex + 1, colIndex + 1)}
|
|
|
|
|
/>
|
|
|
|
|
))
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="text-center mt-2 text-sm text-gray-600">
|
|
|
|
|
{hoverRows} × {hoverCols} Table
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='toolbar sticky top-[-10px] z-10' ref={toolbarRef}>
|
|
|
|
|
<button type='button'
|
|
|
|
|
@ -889,6 +938,15 @@ export default function ToolbarPlugin() {
|
|
|
|
|
/>
|
|
|
|
|
<Divider />
|
|
|
|
|
<ElementFormatDropdown disabled={!isEditable} value={elementFormat} editor={editor} isRTL={isRTL} />
|
|
|
|
|
{/* Table Insertion */}
|
|
|
|
|
<DropDown
|
|
|
|
|
disabled={!isEditable}
|
|
|
|
|
buttonClassName="toolbar-item spaced"
|
|
|
|
|
// buttonLabel="Table"
|
|
|
|
|
buttonAriaLabel="Insert specialized editor node"
|
|
|
|
|
buttonIconClassName="icon table">
|
|
|
|
|
{renderTableGrid()}
|
|
|
|
|
</DropDown>
|
|
|
|
|
<Divider />
|
|
|
|
|
<DropDown
|
|
|
|
|
disabled={!isEditable}
|
|
|
|
|
|
lyt