link

src/pages/editor/components/sidebar/instructions/LinkInput.tsx

@@ -1,37 +1,107 @@
+import { useState } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import Input from "@/components/Input";
+import Button from "@/components/Button";
+import {
+    Link,
+    ArrowCircleRight,
+    ArrowCircleLeft,
+    DocumentText,
+    ArrowLeft,
+    ArrowRight,
+    Add,
+} from "iconsax-react";
+import { clx } from "@/helpers/utils";
+
+type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastPrev";
 
 const LinkInput = () => {
-    return (
-        <div className="space-y-4">
-            <div>
-                <Input
-                    label="آدرس لینک"
-                    placeholder="https://example.com"
-                    onEnter={() => {
-                        const input = document.querySelector('input[placeholder="https://example.com"]') as HTMLInputElement;
-                        if (input?.value) {
+    const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link");
+    const [linkUrl, setLinkUrl] = useState("");
+    const [linkTitle, setLinkTitle] = useState("");
+
+    const linkTypes: Array<{ type: LinkType; icon: React.ReactNode; label: string }> = [
+        { type: "link", icon: <Link size={20} color="black" />, label: "لینک" },
+        { type: "nextPage", icon: <ArrowCircleRight size={20} color="black" />, label: "صفحه بعدی" },
+        { type: "prevPage", icon: <ArrowCircleLeft size={20} color="black" />, label: "صفحه قبلی" },
+        { type: "page", icon: <DocumentText size={20} color="black" />, label: "صفحه" },
+        { type: "firstPage", icon: <ArrowLeft size={20} color="black" />, label: "اولین صفحه" },
+        { type: "lastPrev", icon: <ArrowRight size={20} color="black" />, label: "آخرین قبلی" },
+    ];
+
+    const handleAddLink = () => {
+        if (linkUrl.trim()) {
             const newLink = {
                 id: `link-${Date.now()}`,
                 type: "link" as ToolType,
                 x: 100,
                 y: 100,
-                                text: input.value,
-                                linkUrl: input.value,
+                text: linkTitle.trim() || linkUrl,
+                linkUrl: linkUrl,
                 fontSize: 24,
                 fill: "#0000ff",
+                fontWeight: "normal",
             };
             const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
             addObject(newLink);
             setSelectedObjectId(newLink.id);
             setTool("select");
-                            input.value = "";
+            setLinkUrl("");
+            setLinkTitle("");
         }
-                    }}
+    };
+
+    return (
+        <div className="space-y-6">
+            <h2 className="text-lg font-semibold text-right">لینک ها</h2>
+
+            <div className="grid grid-cols-2 gap-3">
+                {linkTypes.map((item) => {
+                    const isSelected = selectedLinkType === item.type;
+                    return (
+                        <button
+                            key={item.type}
+                            onClick={() => setSelectedLinkType(item.type)}
+                            className={clx(
+                                "flex flex-col items-center justify-center gap-2 p-4 rounded-xl bg-gray-50 border transition-colors shadow-sm",
+                                isSelected
+                                    ? "border-black border-2"
+                                    : "border-gray-200 hover:border-gray-300"
+                            )}
+                        >
+                            {item.icon}
+                            <span className="text-xs text-black">{item.label}</span>
+                        </button>
+                    );
+                })}
+            </div>
+
+            <div className="space-y-4">
+                <div className="space-y-2">
+                    <h3 className="text-sm font-medium text-right">عنوان لینک</h3>
+                    <Input
+                        value={linkTitle}
+                        onChange={(e) => setLinkTitle(e.target.value)}
+                        placeholder="عنوان لینک"
                     />
                 </div>
-            <div className="text-sm text-gray-600">
-                <p>آدرس لینک را وارد کنید و Enter بزنید</p>
+                <div className="space-y-2">
+                    <h3 className="text-sm font-medium text-right">لینک</h3>
+                    <Input
+                        value={linkUrl}
+                        onChange={(e) => setLinkUrl(e.target.value)}
+                        placeholder="https://example.com"
+                        onEnter={handleAddLink}
+                    />
+                </div>
+                <Button
+                    onClick={handleAddLink}
+                    disabled={!linkUrl.trim()}
+                    className="w-full"
+                    leftIcon={<Add size={20} color="white" />}
+                >
+                    افزودن
+                </Button>
             </div>
         </div>
     );

src/pages/editor/components/sidebar/instructions/index.ts

@@ -10,4 +10,3 @@ export { default as LineInstruction } from "./LineInstruction";
 export { default as ArrowInstruction } from "./ArrowInstruction";
 export { default as StickerInstruction } from "./StickerInstruction";
 export { default as GridInstruction } from "./GridInstruction";
-

src/pages/editor/components/sidebar/settings/LinkSettings.tsx

@@ -1,7 +1,14 @@
 import type { EditorObject } from "../../../store/editorStore";
 import Input from "@/components/Input";
+import Select from "@/components/Select";
 import ColorPicker from "@/components/ColorPicker";
 
+const fontWeightOptions = [
+    { label: "Bold", value: "bold" },
+    { label: "Normal", value: "normal" },
+    { label: "Light", value: "300" },
+];
+
 type LinkSettingsProps = {
     selectedObject: EditorObject;
     onUpdate: (id: string, updates: Partial<EditorObject>) => void;
@@ -21,6 +28,13 @@ const LinkSettings = ({ selectedObject, onUpdate }: LinkSettingsProps) => {
                 value={selectedObject.text || ""}
                 onChange={(e) => onUpdate(selectedObject.id, { text: e.target.value })}
             />
+            <div className="flex gap-2">
+                <Select
+                    label="وزن فونت"
+                    items={fontWeightOptions}
+                    value={selectedObject.fontWeight || "normal"}
+                    onChange={(e) => onUpdate(selectedObject.id, { fontWeight: e.target.value })}
+                />
                 <Input
                     label="اندازه فونت"
                     type="number"
@@ -31,6 +45,7 @@ const LinkSettings = ({ selectedObject, onUpdate }: LinkSettingsProps) => {
                         })
                     }
                 />
+            </div>
             <ColorPicker
                 label="رنگ متن"
                 value={selectedObject.fill || "#0000ff"}

src/pages/editor/components/tools/LinkShape.tsx

@@ -1,8 +1,17 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useMemo } from "react";
 import { Text } from "react-konva";
 import Konva from "konva";
 import type { ShapeProps } from "./types";
 
+const getFontWeight = (fontWeight?: string): string => {
+    const weightMap: Record<string, string> = {
+        bold: "bold",
+        normal: "normal",
+        "300": "300",
+    };
+    return weightMap[fontWeight || "normal"] || "normal";
+};
+
 const LinkShape = ({
     obj,
     isSelected,
@@ -12,6 +21,7 @@ const LinkShape = ({
     draggable,
 }: ShapeProps) => {
     const shapeRef = useRef<Konva.Text>(null);
+    const fontWeight = useMemo(() => getFontWeight(obj.fontWeight), [obj.fontWeight]);
 
     useEffect(() => {
         if (isSelected && shapeRef.current && transformerRef.current) {
@@ -29,13 +39,13 @@ const LinkShape = ({
             fontSize={obj.fontSize || 24}
             fill={obj.fill || "#0000ff"}
             fontFamily="irancell"
+            fontStyle={fontWeight}
             underline={true}
             rotation={obj.rotation || 0}
             draggable={draggable}
             onClick={() => {
-                if (shapeRef.current && obj.linkUrl) {
-                    window.open(obj.linkUrl, "_blank");
-                }
+                // در حالت editor، لینک‌ها قابل کلیک نیستند
+                // این قابلیت در viewer اضافه خواهد شد
                 if (shapeRef.current) {
                     onSelect(obj.id, shapeRef.current);
                 }
@@ -68,4 +78,3 @@ const LinkShape = ({
 };
 
 export default LinkShape;
-