Skip to content

Commit

Permalink
[1346] Move the Save button to the right of the toolbar
Browse files Browse the repository at this point in the history 
Bug: #1346
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
  • Loading branch information
@pcdavid
pcdavid committed Nov 8, 2022
1 parent 4bc3d1f commit 6567452
Showing 1 changed file with 109 additions and 98 deletions.
207 changes: 109 additions & 98 deletions packages/forms/frontend/sirius-components-forms/src/richtexteditor/ToolbarPlugin.tsx
View file
Expand Up @@ -55,9 +55,16 @@ export interface ToolbarPluginProps {
const useToolbarStyles = makeStyles((theme) => ({
paper: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
borderBottom: `1px solid ${theme.palette.divider}`,
flexWrap: 'wrap',
},
formattingActions: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
divider: {
margin: theme.spacing(1, 0.5),
},
Expand Down Expand Up @@ -188,107 +195,111 @@ export const ToolbarPlugin = ({ readOnly, onSave }: ToolbarPluginProps) => {
const classes = useToolbarStyles({});
return (
<Paper elevation={0} className={classes.paper}>
<StyledToggleButtonGroup size="small" value={toggled} onChange={(_, newStyles) => updateButtons(newStyles)}>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'paragraph'}
key={'paragraph'}
onClick={() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createParagraphNode());
<div className={classes.formattingActions}>
<StyledToggleButtonGroup size="small" value={toggled} onChange={(_, newStyles) => updateButtons(newStyles)}>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'paragraph'}
key={'paragraph'}
onClick={() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createParagraphNode());
}
});
}}>
<SubjectIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'header1'}
key={'header1'}
onClick={() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createHeadingNode('h1'));
}
});
}}>
<TitleIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'bullet-list'}
key={'bullet-list'}
onClick={() => {
if (blockType !== 'ul') {
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, null);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND, null);
}
});
}}>
<SubjectIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'header1'}
key={'header1'}
onClick={() => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
$wrapNodes(selection, () => $createHeadingNode('h1'));
}}>
<FormatListBulletedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'number-list'}
key={'number-list'}
onClick={() => {
if (blockType !== 'ol') {
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, null);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND, null);
}
});
}}>
<TitleIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'bullet-list'}
key={'bullet-list'}
onClick={() => {
if (blockType !== 'ul') {
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, null);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND, null);
}
}}>
<FormatListBulletedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'number-list'}
key={'number-list'}
onClick={() => {
if (blockType !== 'ol') {
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, null);
} else {
editor.dispatchCommand(REMOVE_LIST_COMMAND, null);
}
}}>
<FormatListNumberedIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
<Divider flexItem orientation="vertical" className={classes.divider} />
}}>
<FormatListNumberedIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
<Divider flexItem orientation="vertical" className={classes.divider} />
<StyledToggleButtonGroup size="small" value={toggled} onChange={(_, newStyles) => updateButtons(newStyles)}>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'bold'}
key={'bold'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}>
<FormatBoldIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
value={'italic'}
key={'italic'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}>
<FormatItalicIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'underline'}
key={'underline'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}>
<FormatUnderlinedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'code'}
key={'code'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}>
<CodeIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'strikethrough'}
key={'strikethrough'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}>
<StrikethroughSIcon fontSize="small" />
</ToggleButton>
</StyledToggleButtonGroup>
</div>
<StyledToggleButtonGroup size="small" value={toggled} onChange={(_, newStyles) => updateButtons(newStyles)}>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'bold'}
key={'bold'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}>
<FormatBoldIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
value={'italic'}
key={'italic'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}>
<FormatItalicIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'underline'}
key={'underline'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}>
<FormatUnderlinedIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'code'}
key={'code'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}>
<CodeIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
value={'strikethrough'}
key={'strikethrough'}
onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}>
<StrikethroughSIcon fontSize="small" />
</ToggleButton>
<ToggleButton
classes={{ root: classes.button }}
disabled={readOnly}
Expand Down

0 comments on commit 6567452

Please sign in to comment.