From 8b016c925c150020779510c5b702995ad8240110 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 10 Feb 2023 18:21:12 +0530
Subject: [PATCH] fix: remirror buttons

---
 .../rich-text-editor/toolbar/bold.tsx         | 27 ------------------
 .../rich-text-editor/toolbar/index.tsx        | 27 +++++++++---------
 .../rich-text-editor/toolbar/italic.tsx       | 28 -------------------
 .../rich-text-editor/toolbar/redo.tsx         | 18 ------------
 .../rich-text-editor/toolbar/strike.tsx       | 26 -----------------
 .../rich-text-editor/toolbar/underline.tsx    | 28 -------------------
 .../rich-text-editor/toolbar/undo.tsx         | 21 --------------
 apps/app/styles/editor.css                    | 20 +++++++++++++
 8 files changed, 34 insertions(+), 161 deletions(-)
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/bold.tsx
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/italic.tsx
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/redo.tsx
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/strike.tsx
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/underline.tsx
 delete mode 100644 apps/app/components/rich-text-editor/toolbar/undo.tsx

diff --git a/apps/app/components/rich-text-editor/toolbar/bold.tsx b/apps/app/components/rich-text-editor/toolbar/bold.tsx
deleted file mode 100644
index 59c51b80c08..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/bold.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/rich-text-editor/toolbar/index.tsx b/apps/app/components/rich-text-editor/toolbar/index.tsx
index 1167c8d22cb..de42077cde5 100644
--- a/apps/app/components/rich-text-editor/toolbar/index.tsx
+++ b/apps/app/components/rich-text-editor/toolbar/index.tsx
@@ -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 />
diff --git a/apps/app/components/rich-text-editor/toolbar/italic.tsx b/apps/app/components/rich-text-editor/toolbar/italic.tsx
deleted file mode 100644
index 6d7ab328a87..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/italic.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/rich-text-editor/toolbar/redo.tsx b/apps/app/components/rich-text-editor/toolbar/redo.tsx
deleted file mode 100644
index 6fea794e0c6..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/redo.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/rich-text-editor/toolbar/strike.tsx b/apps/app/components/rich-text-editor/toolbar/strike.tsx
deleted file mode 100644
index 52c22926e04..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/strike.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/rich-text-editor/toolbar/underline.tsx b/apps/app/components/rich-text-editor/toolbar/underline.tsx
deleted file mode 100644
index 955a6a35667..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/underline.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/components/rich-text-editor/toolbar/undo.tsx b/apps/app/components/rich-text-editor/toolbar/undo.tsx
deleted file mode 100644
index 6c35b96aed2..00000000000
--- a/apps/app/components/rich-text-editor/toolbar/undo.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/apps/app/styles/editor.css b/apps/app/styles/editor.css
index 319f3207d0f..4c7f499154f 100644
--- a/apps/app/styles/editor.css
+++ b/apps/app/styles/editor.css
@@ -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 */