Skip to content

Commit

Permalink
refine editor toolbar appearance (#347)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lihebi
lihebi authored Jun 28, 2023
1 parent 0668828 commit 39d3843
Showing 1 changed file with 80 additions and 77 deletions.
157 changes: 80 additions & 77 deletions ui/src/components/nodes/Rich.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,11 @@ import Ansi from "ansi-to-react";

import Box from "@mui/material/Box";
import InputBase from "@mui/material/InputBase";
import CircularProgress from "@mui/material/CircularProgress";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
import PlayArrowIcon from "@mui/icons-material/PlayArrow";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import CircleIcon from "@mui/icons-material/Circle";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import Grid from "@mui/material/Grid";
import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
import DeleteIcon from "@mui/icons-material/Delete";
import ViewComfyIcon from "@mui/icons-material/ViewComfy";
import RectangleIcon from "@mui/icons-material/Rectangle";
import DisabledByDefaultIcon from "@mui/icons-material/DisabledByDefault";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import FormatColorResetIcon from "@mui/icons-material/FormatColorReset";

import {
BoldExtension,
Expand Down Expand Up @@ -99,6 +89,11 @@ import {
useUpdateReason,
FloatingWrapper,
useMention,
ToggleBoldButton,
ToggleItalicButton,
ToggleUnderlineButton,
ToggleCodeButton,
ToggleStrikeButton,
} from "@remirror/react";
import { FloatingToolbar, useExtensionEvent } from "@remirror/react";
import { TableExtension } from "@remirror/extension-react-tables";
Expand Down Expand Up @@ -260,7 +255,7 @@ function useUpdatePositionerOnMove() {
return;
}

const FloatingLinkToolbar = ({ children }) => {
const EditorToolbar = () => {
const {
isEditing,
linkPositioner,
Expand All @@ -280,50 +275,69 @@ const FloatingLinkToolbar = ({ children }) => {
clickEdit();
}, [clickEdit]);

const linkEditButtons = activeLink ? (
<CommandButtonGroup>
<CommandButton
commandName="updateLink"
aria-label="Edit link"
onSelect={handleClickEdit}
icon="pencilLine"
enabled
/>
<CommandButton
commandName="removeLink"
aria-label="Remove link"
onSelect={onRemove}
icon="linkUnlink"
enabled
/>
</CommandButtonGroup>
) : (
<CommandButtonGroup>
<CommandButton
commandName="updateLink"
aria-label="Add link"
onSelect={handleClickEdit}
icon="link"
enabled
/>
</CommandButtonGroup>
);

return (
<>
{!isEditing && (
// By default, MUI's Popper creates a Portal, which is a ROOT html
// elements that prevents paning on reactflow canvas. Therefore, we
// disable the portal behavior.
<FloatingToolbar disablePortal>
{linkEditButtons}
{children}
</FloatingToolbar>
)}
{!isEditing && empty && (
<FloatingToolbar positioner={linkPositioner} disablePortal>
{linkEditButtons}
{children}
<FloatingToolbar
disablePortal
sx={{
button: {
padding: 0,
border: "none",
borderRadius: "5px",
marginLeft: "5px",
},
paddingX: "4px",
border: "2px solid grey",
borderRadius: "5px",
alignItems: "center",
backgroundColor: "white",
}}
>
<ToggleBoldButton />
<ToggleItalicButton />
<ToggleUnderlineButton />
<ToggleStrikeButton />
<ToggleCodeButton />
{activeLink && (
<CommandButton
commandName="updateLink"
aria-label="Edit link"
onSelect={handleClickEdit}
icon="pencilLine"
enabled
/>
)}
{activeLink && (
<CommandButton
commandName="removeLink"
aria-label="Remove link"
onSelect={onRemove}
icon="linkUnlink"
enabled
/>
)}
{!activeLink && (
<CommandButton
commandName="updateLink"
aria-label="Add link"
onSelect={handleClickEdit}
icon="link"
enabled
/>
)}
<SetHighlightButton color="lightpink" />
<SetHighlightButton color="yellow" />
<SetHighlightButton color="lightgreen" />
<SetHighlightButton color="lightcyan" />
<SetHighlightButton />

{/* <TextAlignmentButtonGroup /> */}
{/* <IndentationButtonGroup /> */}
{/* <BaselineButtonGroup /> */}
</FloatingToolbar>
)}

Expand Down Expand Up @@ -384,14 +398,24 @@ export const SetHighlightButton: React.FC<
<CommandButton
{...props}
commandName="setHighlight"
label={color ? "Highlight" : "Un-Highlight"}
label={color ? "Highlight" : "Clear Highlight"}
enabled={enabled}
onSelect={handleSelect}
icon={
<IconBase viewBox="0 0 24 24">
color === null ? <DisabledByDefaultIcon /> :{" "}
<RectangleIcon sx={{ color }} />
</IconBase>
color ? (
<Box
sx={{
backgroundColor: color,
paddingX: "4px",
borderRadius: "4px",
lineHeight: 1.2,
}}
>
A
</Box>
) : (
<FormatColorResetIcon />
)
}
/>
);
Expand Down Expand Up @@ -616,28 +640,7 @@ const MyEditor = ({
]}
/>

{!isGuest && (
<FloatingLinkToolbar>
<FormattingButtonGroup />
<VerticalDivider />
<CommandButtonGroup>
{/* <HeadingLevelButtonGroup /> */}

{/* <ListButtonGroup /> */}
<SetHighlightButton color="lightpink" />
<SetHighlightButton color="yellow" />
<SetHighlightButton color="lightgreen" />
<SetHighlightButton color="lightcyan" />
<SetHighlightButton />
</CommandButtonGroup>
{/* <FormattingButtonGroup /> */}
{/* <DecreaseIndentButton /> */}
{/* <IncreaseIndentButton /> */}
{/* <TextAlignmentButtonGroup /> */}
{/* <IndentationButtonGroup /> */}
{/* <BaselineButtonGroup /> */}
</FloatingLinkToolbar>
)}
{!isGuest && <EditorToolbar />}

{/* <Menu /> */}
</Remirror>
Expand Down

0 comments on commit 39d3843

Please sign in to comment.