From bd2d2927ff3005c7f301bd19b8d22e94c051ac50 Mon Sep 17 00:00:00 2001
From: renardeinside <polarpersonal@gmail.com>
Date: Sat, 23 Nov 2024 23:51:49 +0100
Subject: [PATCH] rework menu, underlines and input

---
 package.json                    |  1 +
 src/components/Editor.tsx       |  2 +-
 src/components/EditorMenu.tsx   | 56 +++++++++++++++++++++++++--------
 src/components/ui/separator.tsx | 29 +++++++++++++++++
 yarn.lock                       |  7 +++++
 5 files changed, 81 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ui/separator.tsx

diff --git a/package.json b/package.json
index b058924..b9fc2c1 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@tailwindcss/typography": "^0.5.15",
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index ef406f4..440b61a 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -39,7 +39,7 @@ const Editor = () => {
       {loaded ? (
         editor && (
           <div className="flex px-8 pt-4 justify-center">
-            <EditorContent editor={editor} className="w-4/5" />
+            <EditorContent editor={editor} className="w-3/5" />
             <EditorMenu editor={editor} />
           </div>
         )
diff --git a/src/components/EditorMenu.tsx b/src/components/EditorMenu.tsx
index 68a645d..ed187ee 100644
--- a/src/components/EditorMenu.tsx
+++ b/src/components/EditorMenu.tsx
@@ -1,14 +1,11 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
   Bold,
-  Edit3,
   Italic,
   Link,
   Strikethrough,
@@ -16,11 +13,34 @@ import {
 } from "lucide-react";
 import { Editor } from "@tiptap/core";
 import LinkInput from "./LinkInput";
+import { Separator } from "@/components/ui/separator";
 
 export default function EditorMenu({ editor }: { editor: Editor }) {
-  const [isOpen, setIsOpen] = useState(false);
   const [openLinkInput, setOpenLinkInput] = useState(false);
 
+  const alignOptions = [
+    {
+      icon: AlignLeft,
+      title: "Align Left",
+      action: () => editor.chain().focus().setTextAlign("left").run(),
+    },
+    {
+      icon: AlignCenter,
+      title: "Align Center",
+      action: () => editor.chain().focus().setTextAlign("center").run(),
+    },
+    {
+      icon: AlignRight,
+      title: "Align Right",
+      action: () => editor.chain().focus().setTextAlign("right").run(),
+    },
+    {
+      icon: AlignJustify,
+      title: "Align Justify",
+      action: () => editor.chain().focus().setTextAlign("justify").run(),
+    },
+  ];
+
   const formatOptions = [
     {
       icon: Bold,
@@ -56,6 +76,20 @@ export default function EditorMenu({ editor }: { editor: Editor }) {
       )}
       <div className="fixed bottom-4 right-4 z-50">
         <div className="flex flex-col">
+          {alignOptions.map((option) => (
+            <Button
+              key={option.title}
+              variant="ghost"
+              size="icon"
+              className="h-10 w-10 rounded-sm"
+              title={option.title}
+              onClick={option.action}
+            >
+              <option.icon className="h-4 w-4" />
+              <span className="sr-only">{option.title}</span>
+            </Button>
+          ))}
+          <Separator />
           {formatOptions.map((option) => (
             <Button
               key={option.title}
@@ -63,11 +97,7 @@ export default function EditorMenu({ editor }: { editor: Editor }) {
               size="icon"
               className="h-10 w-10 rounded-sm"
               title={option.title}
-              onClick={() => {
-                option.action();
-                editor.view.dom.focus();
-                editor.commands.focus();
-              }}
+              onClick={option.action}
             >
               <option.icon className="h-4 w-4" />
               <span className="sr-only">{option.title}</span>
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..6d7f122
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/yarn.lock b/yarn.lock
index 70e1065..5559d8b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -675,6 +675,13 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-separator@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.1.0.tgz#ee0f4d86003b0e3ea7bc6ccab01ea0adee32663e"
+  integrity sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+
 "@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz"