diff --git a/src/pages/editor/components/sidebar/instructions/LinkInput.tsx b/src/pages/editor/components/sidebar/instructions/LinkInput.tsx index e136e4c..09894c5 100644 --- a/src/pages/editor/components/sidebar/instructions/LinkInput.tsx +++ b/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> = { + nextPage: "page://next", + prevPage: "page://prev", + firstPage: "page://first", + lastPrev: "page://last", }; const LinkInput = () => { const [selectedLinkType, setSelectedLinkType] = useState("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()) { - const newLink = { - id: `link-${Date.now()}`, - type: "link" as ToolType, - x: 100, - y: 100, - 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"); - setLinkUrl(""); - setLinkTitle(""); - } + if (!resolvedLinkUrl) return; + + const newLink = { + id: `link-${Date.now()}`, + type: "link" as ToolType, + x: 100, + y: 100, + text: linkTitle.trim() || defaultLinkText, + linkUrl: resolvedLinkUrl, + fontSize: 24, + fill: "#0000ff", + fontWeight: "normal", + }; + const { addObject, setSelectedObjectId, setTool } = useEditorStore.getState(); + addObject(newLink); + setSelectedObjectId(newLink.id); + setTool("select"); + setLinkUrl(""); + setLinkTitle(""); + setTargetPageNumber(""); }; return ( @@ -99,18 +138,31 @@ const LinkInput = () => { placeholder="عنوان لینک" /> -
-

لینک

- setLinkUrl(e.target.value)} - placeholder="https://example.com" - onEnter={handleAddLink} - /> -
+ {selectedLinkType === "link" ? ( +
+

لینک

+ setLinkUrl(e.target.value)} + placeholder="https://example.com" + onEnter={handleAddLink} + /> +
+ ) : null} + {selectedLinkType === "page" ? ( +
+

انتخاب صفحه

+