table tools style fix

ibastawisi · Sep 29, 2024 · a2e7ce0 · a2e7ce0
1 parent 079fed3
commit a2e7ce0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/src/editor/plugins/ToolbarPlugin/Dialogs/TableDialog.tsx b/src/editor/plugins/ToolbarPlugin/Dialogs/TableDialog.tsx
@@ -7,10 +7,12 @@ import { useTheme } from '@mui/material/styles';
 import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, IconButton, Switch, TextField, useMediaQuery } from '@mui/material';
 import { Remove, Add } from '@mui/icons-material';
 
+const initialFormData = { rows: '3', columns: '3', includeHeaders: true };
+
 function TableDialog({ editor }: { editor: LexicalEditor }) {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
-  const [formData, setFormData] = useState({ rows: '3', columns: '3', includeHeaders: true });
+  const [formData, setFormData] = useState(initialFormData);
 
   const setRows = (rows: number) => {
     setFormData({ ...formData, rows: Math.max(1, rows).toString() });
@@ -30,7 +32,7 @@ function TableDialog({ editor }: { editor: LexicalEditor }) {
 
   const closeDialog = () => {
     editor.dispatchCommand(SET_DIALOGS_COMMAND, { table: { open: false } })
-    setFormData({ rows: '3', columns: '3', includeHeaders: true });
+    setFormData(initialFormData);
   }
 
   const handleClose = () => {
@@ -59,7 +61,7 @@ function TableDialog({ editor }: { editor: LexicalEditor }) {
           <TextField type="number" size="small" sx={{ mx: 1 }} value={formData.columns} onChange={e => setColumns(+e.target.value)} label="Columns" name="columns" autoComplete="columns" autoFocus />
           <IconButton onClick={() => setColumns(+formData.columns + 1)}><Add /></IconButton>
         </FormControl>
-        <FormControlLabel sx={{ display: 'flex', justifyContent: 'center', my: 2 }} control={<Switch checked={formData.includeHeaders} onChange={setIncludeHeaders} />} label="Include Headers" />
+        <FormControlLabel sx={{ display: 'flex', mb: 1 }} control={<Switch checked={formData.includeHeaders} onChange={setIncludeHeaders} />} label="Include Headers" />
       </Box>
     </DialogContent>
     <DialogActions>

diff --git a/src/editor/plugins/ToolbarPlugin/Tools/TableTools.tsx b/src/editor/plugins/ToolbarPlugin/Tools/TableTools.tsx
@@ -106,11 +106,11 @@ const RemoveColumnHeader = () => <SvgIcon viewBox='0 -960 960 960' sx={{ transfo
   <path d="M120-280v-400h720v400H120Zm80-80h560v-240H200v240Zm0 0v-240 240Z" />
 </SvgIcon>;
 
-const AddRowHeader = () => <SvgIcon viewBox='0 -960 960 960'>
+const AddRowHeader = () => <SvgIcon viewBox='0 -960 960 960' sx={{ transform: 'rotate(45deg)' }}>
   <path d="m272-104-38-38-42 42q-19 19-46.5 19.5T100-100q-19-19-19-46t19-46l42-42-38-40 554-554q12-12 29-12t29 12l112 112q12 12 12 29t-12 29L272-104Zm172-396L216-274l58 58 226-228-56-56Z" />
 </SvgIcon>;
 
-const AddColumnHeader = () => <SvgIcon viewBox='0 -960 960 960'>
+const AddColumnHeader = () => <SvgIcon viewBox='0 -960 960 960' sx={{ transform: 'rotate(-45deg)' }}>
   <path d="m272-104-38-38-42 42q-19 19-46.5 19.5T100-100q-19-19-19-46t19-46l42-42-38-40 554-554q12-12 29-12t29 12l112 112q12 12 12 29t-12 29L272-104Zm172-396L216-274l58 58 226-228-56-56Z" />
 </SvgIcon>;
 
@@ -344,6 +344,15 @@ export default function TableTools({ editor, node }: { editor: LexicalEditor, no
     return tableCellNode.__headerState & TableCellHeaderStates.COLUMN;
   }, [tableCellNode]);
 
+  const getTableRowStriping = useCallback(() => {
+    return editor.getEditorState().read(() => {
+      if (node.isAttached()) {
+        return node.getRowStriping();
+      }
+      return node.__rowStriping;
+    });
+  }, [node]);
+
   const toggleTableRowIsHeader = useCallback(() => {
     if (tableCellNode === null) return;
     editor.update(() => {
@@ -580,6 +589,7 @@ export default function TableTools({ editor, node }: { editor: LexicalEditor, no
           horizontal: 'center',
         }}
         sx={{
+          '& .MuiMenu-paper': { minWidth: 240 },
           '& .MuiBackdrop-root': { userSelect: 'none' },
         }}
       >
@@ -681,10 +691,10 @@ export default function TableTools({ editor, node }: { editor: LexicalEditor, no
         </MenuItem>
         <MenuItem onClick={toggleRowStriping}>
           <ListItemIcon>
-            <Texture />
+            <Texture sx={{ transform: 'rotate(45deg)' }} />
           </ListItemIcon>
           <ListItemText>
-            Toggle row striping
+            {getTableRowStriping() ? 'Remove' : 'Add'} row striping
           </ListItemText>
         </MenuItem>
         <Divider />

diff --git a/src/editor/plugins/ToolbarPlugin/index.tsx b/src/editor/plugins/ToolbarPlugin/index.tsx
@@ -148,6 +148,11 @@ function ToolbarPlugin() {
       } else {
         setSelectedSticky(null);
       }
+    } else if (selection === null) {
+      setBlockType('paragraph');
+      setSelectedNode(null);
+      setSelectedSticky(null);
+      setSelectedTable(null);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps