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
|
// buttons
|
||||||
import { RedoButton } from "./redo";
|
import {
|
||||||
import { UndoButton } from "./undo";
|
ToggleBoldButton,
|
||||||
// formats
|
ToggleItalicButton,
|
||||||
import { BoldButton } from "./bold";
|
ToggleUnderlineButton,
|
||||||
import { ItalicButton } from "./italic";
|
ToggleStrikeButton,
|
||||||
import { UnderlineButton } from "./underline";
|
RedoButton,
|
||||||
import { StrikeButton } from "./strike";
|
UndoButton,
|
||||||
|
} from "@remirror/react";
|
||||||
// headings
|
// headings
|
||||||
import HeadingControls from "./heading-controls";
|
import HeadingControls from "./heading-controls";
|
||||||
// list
|
// list
|
||||||
@ -15,17 +16,17 @@ import { UnorderedListButton } from "./unordered-list";
|
|||||||
export const RichTextToolbar: React.FC = () => (
|
export const RichTextToolbar: React.FC = () => (
|
||||||
<div className="flex items-center gap-y-2 divide-x">
|
<div className="flex items-center gap-y-2 divide-x">
|
||||||
<div className="flex items-center gap-x-1 px-2">
|
<div className="flex items-center gap-x-1 px-2">
|
||||||
<UndoButton />
|
|
||||||
<RedoButton />
|
<RedoButton />
|
||||||
|
<UndoButton />
|
||||||
</div>
|
</div>
|
||||||
<div className="px-2">
|
<div className="px-2">
|
||||||
<HeadingControls />
|
<HeadingControls />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-1 px-2">
|
<div className="flex items-center gap-x-1 px-2">
|
||||||
<BoldButton />
|
<ToggleBoldButton />
|
||||||
<ItalicButton />
|
<ToggleItalicButton />
|
||||||
<UnderlineButton />
|
<ToggleUnderlineButton />
|
||||||
<StrikeButton />
|
<ToggleStrikeButton />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-x-1 px-2">
|
<div className="flex items-center gap-x-1 px-2">
|
||||||
<OrderedListButton />
|
<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;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
/* end link styling */
|
/* 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