update in link

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

@@ -1,7 +1,8 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, type ComponentType } from "react";
 import { useEditorStore, type ToolType } from "@/pages/editor/store/editorStore";
 import Input from "@/components/Input";
 import Button from "@/components/Button";
+import Select from "@/components/Select";
 import {
     Link,
     ArrowCircleRight,
@@ -17,20 +18,29 @@ type LinkType = "link" | "nextPage" | "prevPage" | "page" | "firstPage" | "lastP
 
 const linkTypesConfig: Record<
     LinkType,
-    { icon: React.ComponentType<{ size?: number; color?: string }>; label: string }
+    { icon: ComponentType<{ size?: number; color?: string }>; label: string }
 > = {
     link: { icon: Link, label: "لینک" },
     nextPage: { icon: ArrowCircleRight, label: "صفحه بعدی" },
     prevPage: { icon: ArrowCircleLeft, label: "صفحه قبلی" },
     page: { icon: DocumentText, label: "صفحه" },
     firstPage: { icon: ArrowLeft, label: "اولین صفحه" },
-    lastPrev: { icon: ArrowRight, label: "آخرین قبلی" },
+    lastPrev: { icon: ArrowRight, label: "آخرین صفحه" },
+};
+
+const internalLinkUrls: Partial<Record<LinkType, string>> = {
+    nextPage: "page://next",
+    prevPage: "page://prev",
+    firstPage: "page://first",
+    lastPrev: "page://last",
 };
 
 const LinkInput = () => {
     const [selectedLinkType, setSelectedLinkType] = useState<LinkType>("link");
     const [linkUrl, setLinkUrl] = useState("");
     const [linkTitle, setLinkTitle] = useState("");
+    const [targetPageNumber, setTargetPageNumber] = useState("");
+    const pages = useEditorStore((state) => state.pages);
 
     const linkTypes = useMemo(
         () =>
@@ -42,26 +52,55 @@ const LinkInput = () => {
         []
     );
 
+    const pageOptions = useMemo(
+        () =>
+            pages.map((page, index) => ({
+                value: String(index + 1),
+                label: page.name || `صفحه ${index + 1}`,
+            })),
+        [pages]
+    );
+
+    const selectedLinkConfig = linkTypesConfig[selectedLinkType];
+    const selectedPage = targetPageNumber
+        ? pageOptions.find((page) => page.value === targetPageNumber)
+        : undefined;
+    const resolvedLinkUrl =
+        selectedLinkType === "link"
+            ? linkUrl.trim()
+            : internalLinkUrls[selectedLinkType] ?? (targetPageNumber ? `page://${targetPageNumber}` : "");
+    const defaultLinkText =
+        selectedLinkType === "link"
+            ? resolvedLinkUrl
+            : selectedLinkType === "page"
+                ? selectedPage?.label || selectedLinkConfig.label
+                : selectedLinkConfig.label;
+    const isAddDisabled =
+        selectedLinkType === "link"
+            ? !linkUrl.trim()
+            : selectedLinkType === "page" && !targetPageNumber;
+
     const handleAddLink = () => {
-        if (linkUrl.trim()) {
+        if (!resolvedLinkUrl) return;
-            const newLink = {
+
-                id: `link-${Date.now()}`,
+        const newLink = {
-                type: "link" as ToolType,
+            id: `link-${Date.now()}`,
-                x: 100,
+            type: "link" as ToolType,
-                y: 100,
+            x: 100,
-                text: linkTitle.trim() || linkUrl,
+            y: 100,
-                linkUrl: linkUrl,
+            text: linkTitle.trim() || defaultLinkText,
-                fontSize: 24,
+            linkUrl: resolvedLinkUrl,
-                fill: "#0000ff",
+            fontSize: 24,
-                fontWeight: "normal",
+            fill: "#0000ff",
-            };
+            fontWeight: "normal",
-            const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
+        };
-            addObject(newLink);
+        const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState();
-            setSelectedObjectId(newLink.id);
+        addObject(newLink);
-            setTool("select");
+        setSelectedObjectId(newLink.id);
-            setLinkUrl("");
+        setTool("select");
-            setLinkTitle("");
+        setLinkUrl("");
-        }
+        setLinkTitle("");
+        setTargetPageNumber("");
     };
 
     return (
@@ -99,18 +138,31 @@ const LinkInput = () => {
                         placeholder="عنوان لینک"
                     />
                 </div>
-                <div className="space-y-2">
+                {selectedLinkType === "link" ? (
-                    <h3 className="text-sm font-medium text-right">لینک</h3>
+                    <div className="space-y-2">
-                    <Input
+                        <h3 className="text-sm font-medium text-right">لینک</h3>
-                        value={linkUrl}
+                        <Input
-                        onChange={(e) => setLinkUrl(e.target.value)}
+                            value={linkUrl}
-                        placeholder="https://example.com"
+                            onChange={(e) => setLinkUrl(e.target.value)}
-                        onEnter={handleAddLink}
+                            placeholder="https://example.com"
-                    />
+                            onEnter={handleAddLink}
-                </div>
+                        />
+                    </div>
+                ) : null}
+                {selectedLinkType === "page" ? (
+                    <div className="space-y-2">
+                        <h3 className="text-sm font-medium text-right">انتخاب صفحه</h3>
+                        <Select
+                            value={targetPageNumber}
+                            onChange={(e) => setTargetPageNumber(e.target.value)}
+                            placeholder="صفحه مقصد را انتخاب کنید"
+                            items={pageOptions}
+                        />
+                    </div>
+                ) : null}
                 <Button
                     onClick={handleAddLink}
-                    disabled={!linkUrl.trim()}
+                    disabled={isAddDisabled}
                     className="w-full"
                     leftIcon={<Add size={20} color="white" />}
                 >