Skip to content

refine editor toolbar appearance #347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 28, 2023
Merged

refine editor toolbar appearance #347

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 80 additions & 77 deletions ui/src/components/nodes/Rich.tsx
View file
Open in desktop
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