rework menu, underlines and input

renardeinside · Nov 23, 2024 · bd2d292 · bd2d292
1 parent b111e34
commit bd2d292
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 14 deletions.
diff --git 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
@@ -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
@@ -1,26 +1,46 @@
 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,
   Underline,
 } 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,18 +76,28 @@ 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}
               variant="ghost"
               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
@@ -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
@@ -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"