mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: remirror buttons (#267)
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
a403c0c346
commit
af22dc9c58
@ -1,27 +0,0 @@
|
||||
import { useCommands, useActive } from "@remirror/react";
|
||||
|
||||
export const BoldButton = () => {
|
||||
const { toggleBold, focus } = useCommands();
|
||||
const active = useActive();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
toggleBold();
|
||||
focus();
|
||||
}}
|
||||
className={`${active.bold() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="18"
|
||||
width="18"
|
||||
viewBox="0 0 48 48"
|
||||
fill="black"
|
||||
>
|
||||
<path d="M14 36V8h11.4q3.3 0 5.725 2.1t2.425 5.3q0 1.9-1.05 3.5t-2.8 2.45v.3q2.15.7 3.475 2.5 1.325 1.8 1.325 4.05 0 3.4-2.625 5.6Q29.25 36 25.75 36Zm4.3-16.15h6.8q1.75 0 3.025-1.15t1.275-2.9q0-1.75-1.275-2.925Q26.85 11.7 25.1 11.7h-6.8Zm0 12.35h7.2q1.9 0 3.3-1.25t1.4-3.15q0-1.85-1.4-3.1t-3.3-1.25h-7.2Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,11 +1,12 @@
|
||||
// history
|
||||
import { RedoButton } from "./redo";
|
||||
import { UndoButton } from "./undo";
|
||||
// formats
|
||||
import { BoldButton } from "./bold";
|
||||
import { ItalicButton } from "./italic";
|
||||
import { UnderlineButton } from "./underline";
|
||||
import { StrikeButton } from "./strike";
|
||||
// buttons
|
||||
import {
|
||||
ToggleBoldButton,
|
||||
ToggleItalicButton,
|
||||
ToggleUnderlineButton,
|
||||
ToggleStrikeButton,
|
||||
RedoButton,
|
||||
UndoButton,
|
||||
} from "@remirror/react";
|
||||
// headings
|
||||
import HeadingControls from "./heading-controls";
|
||||
// list
|
||||
@ -15,17 +16,17 @@ import { UnorderedListButton } from "./unordered-list";
|
||||
export const RichTextToolbar: React.FC = () => (
|
||||
<div className="flex items-center gap-y-2 divide-x">
|
||||
<div className="flex items-center gap-x-1 px-2">
|
||||
<UndoButton />
|
||||
<RedoButton />
|
||||
<UndoButton />
|
||||
</div>
|
||||
<div className="px-2">
|
||||
<HeadingControls />
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1 px-2">
|
||||
<BoldButton />
|
||||
<ItalicButton />
|
||||
<UnderlineButton />
|
||||
<StrikeButton />
|
||||
<ToggleBoldButton />
|
||||
<ToggleItalicButton />
|
||||
<ToggleUnderlineButton />
|
||||
<ToggleStrikeButton />
|
||||
</div>
|
||||
<div className="flex items-center gap-x-1 px-2">
|
||||
<OrderedListButton />
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
import { useCommands, useActive } from "@remirror/react";
|
||||
|
||||
export const ItalicButton = () => {
|
||||
const { toggleItalic, focus } = useCommands();
|
||||
|
||||
const active = useActive();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
toggleItalic();
|
||||
focus();
|
||||
}}
|
||||
className={`${active.italic() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="18"
|
||||
width="18"
|
||||
viewBox="0 0 48 48"
|
||||
fill="black"
|
||||
>
|
||||
<path d="M10 40v-5h6.85l8.9-22H18V8h20v5h-6.85l-8.9 22H30v5Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,18 +0,0 @@
|
||||
import { useCommands } from "@remirror/react";
|
||||
|
||||
export const RedoButton = () => {
|
||||
const { redo } = useCommands();
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
redo();
|
||||
}}
|
||||
className="rounded p-1 hover:bg-gray-100"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 48 48">
|
||||
<path d="M19.6 38q-4.75 0-8.175-3.2Q8 31.6 8 26.9t3.425-7.9q3.425-3.2 8.175-3.2h14.7l-5.7-5.7L30.7 8l9.3 9.3-9.3 9.3-2.1-2.1 5.7-5.7H19.55q-3.5 0-6.025 2.325Q11 23.45 11 26.9t2.525 5.775Q16.05 35 19.55 35H34v3Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,26 +0,0 @@
|
||||
import { useCommands, useActive } from "@remirror/react";
|
||||
|
||||
export const StrikeButton = () => {
|
||||
const { toggleStrike } = useCommands();
|
||||
|
||||
const active = useActive();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleStrike}
|
||||
className={`${active.strike() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
fill="currentColor"
|
||||
className="bi bi-type-strikethrough"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z" />{" "}
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,28 +0,0 @@
|
||||
import { useCommands, useActive } from "@remirror/react";
|
||||
|
||||
export const UnderlineButton = () => {
|
||||
const { toggleUnderline, focus } = useCommands();
|
||||
|
||||
const active = useActive();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
toggleUnderline();
|
||||
focus();
|
||||
}}
|
||||
className={`${active.underline() ? "bg-gray-200" : "hover:bg-gray-100"} rounded p-1`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
fill="black"
|
||||
viewBox="0 0 48 48"
|
||||
>
|
||||
<path d="M10 42v-3h28v3Zm14-8q-5.05 0-8.525-3.45Q12 27.1 12 22.1V6h4v16.2q0 3.3 2.3 5.55T24 30q3.4 0 5.7-2.25Q32 25.5 32 22.2V6h4v16.1q0 5-3.475 8.45Q29.05 34 24 34Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -1,21 +0,0 @@
|
||||
import { useCommands } from "@remirror/react";
|
||||
|
||||
// icons
|
||||
|
||||
export const UndoButton = () => {
|
||||
const { undo } = useCommands();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
undo();
|
||||
}}
|
||||
className="rounded p-1 hover:bg-gray-100"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 48 48">
|
||||
<path d="M14 38v-3h14.45q3.5 0 6.025-2.325Q37 30.35 37 26.9t-2.525-5.775Q31.95 18.8 28.45 18.8H13.7l5.7 5.7-2.1 2.1L8 17.3 17.3 8l2.1 2.1-5.7 5.7h14.7q4.75 0 8.175 3.2Q40 22.2 40 26.9t-3.425 7.9Q33.15 38 28.4 38Z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@ -419,3 +419,23 @@ img.ProseMirror-separator {
|
||||
text-decoration: underline;
|
||||
}
|
||||
/* end link styling */
|
||||
|
||||
/* format buttons styling */
|
||||
.MuiButtonBase-root {
|
||||
border: none !important;
|
||||
border-radius: 0.25rem !important;
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
|
||||
.MuiButtonBase-root:hover {
|
||||
background-color: rgb(229 231 235);
|
||||
}
|
||||
|
||||
.MuiButtonBase-root svg {
|
||||
fill: #000 !important;
|
||||
}
|
||||
|
||||
.MuiButtonBase-root.Mui-selected {
|
||||
background-color: rgb(229 231 235) !important;
|
||||
}
|
||||
/* end format buttons styling */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user