fix(link-editor): update behaviour so that we can save on link collection items

apps/studio/src/components/PageEditor/LinkEditorModal.tsx

@@ -1,4 +1,4 @@
-import { useParams } from "next/navigation"
+import type { IconType } from "react-icons"
 import {
   Box,
   FormControl,
@@ -20,8 +20,12 @@ import {
 import { isEmpty } from "lodash"
 import { z } from "zod"
 
-import type { LinkTypeMapping } from "~/features/editing-experience/components/LinkEditor/constants"
+import type { LinkTypes } from "~/features/editing-experience/components/LinkEditor/constants"
 import { LinkHrefEditor } from "~/features/editing-experience/components/LinkEditor"
+import {
+  LinkEditorContextProvider,
+  useLinkEditor,
+} from "~/features/editing-experience/components/LinkEditor/LinkEditorContext"
 import { useQueryParse } from "~/hooks/useQueryParse"
 import { useZodForm } from "~/lib/form"
 import { getReferenceLink, getResourceIdFromReferenceLink } from "~/utils/link"
@@ -33,6 +37,10 @@ const editSiteSchema = z.object({
   siteId: z.coerce.number(),
 })
 
+const linkSchema = z.object({
+  linkId: z.coerce.string().optional(),
+})
+
 interface PageLinkElementProps {
   value: string
   onChange: (value: string) => void
@@ -68,12 +76,10 @@ const PageLinkElement = ({ value, onChange }: PageLinkElementProps) => {
   )
 }
 
-interface LinkEditorModalContentProps {
-  linkText?: string
-  linkHref?: string
-  onSave: (linkText: string, linkHref: string) => void
-  linkTypes: LinkTypeMapping
-}
+type LinkEditorModalContentProps = Pick<
+  LinkEditorModalProps,
+  "linkText" | "linkHref" | "linkTypes" | "onSave"
+>
 
 const LinkEditorModalContent = ({
   linkText,
@@ -84,7 +90,6 @@ const LinkEditorModalContent = ({
   const {
     handleSubmit,
     setValue,
-    watch,
     register,
     formState: { errors },
   } = useZodForm({
@@ -99,7 +104,7 @@ const LinkEditorModalContent = ({
       linkText,
       linkHref,
     },
-    reValidateMode: "onBlur",
+    reValidateMode: "onChange",
   })
 
   const isEditingLink = !!linkText && !!linkHref
@@ -110,13 +115,12 @@ const LinkEditorModalContent = ({
     ({ linkText, linkHref }) => !!linkHref && onSave(linkText, linkHref),
   )
 
-  const { siteId } = useQueryParse(editSiteSchema)
   // TODO: This needs to be refactored urgently
   // This is a hacky way of seeing what to render
   // and ties the link editor to the url path.
   // we should instead just pass the component directly rather than using slots
 
-  const { linkId } = useParams()
+  const { linkId } = useQueryParse(linkSchema)
 
   return (
     <ModalContent>
@@ -153,33 +157,20 @@ const LinkEditorModalContent = ({
           )}
 
           <Box>
-            <LinkHrefEditor
+            <LinkEditorContextProvider
               linkTypes={linkTypes}
-              value={watch("linkHref") ?? ""}
-              onChange={(value) => setValue("linkHref", value)}
-              label="Link destination"
-              description="When this is clicked, open:"
-              isRequired
-              isInvalid={!!errors.linkHref}
-              pageLinkElement={
-                <PageLinkElement
-                  value={watch("linkHref") ?? ""}
-                  onChange={(value) => setValue("linkHref", value)}
-                />
-              }
-              fileLinkElement={
-                <FileAttachment
-                  siteId={siteId}
-                  setHref={(linkHref) => {
-                    setValue("linkHref", linkHref)
-                  }}
-                />
-              }
-            />
-
-            {errors.linkHref?.message && (
-              <FormErrorMessage>{errors.linkHref.message}</FormErrorMessage>
-            )}
+              linkHref={linkHref ?? ""}
+              onChange={(href) => setValue("linkHref", href)}
+              error={errors.linkHref?.message}
+            >
+              <ModalLinkEditor
+                onChange={(value) => setValue("linkHref", value)}
+              />
+
+              {errors.linkHref?.message && (
+                <FormErrorMessage>{errors.linkHref.message}</FormErrorMessage>
+              )}
+            </LinkEditorContextProvider>
           </Box>
         </ModalBody>
 
@@ -206,7 +197,13 @@ interface LinkEditorModalProps {
   onSave: (linkText: string, linkHref: string) => void
   isOpen: boolean
   onClose: () => void
-  linkTypes: LinkTypeMapping
+  linkTypes: Record<
+    string,
+    {
+      icon: IconType
+      label: Capitalize<LinkTypes>
+    }
+  >
 }
 export const LinkEditorModal = ({
   isOpen,
@@ -232,3 +229,34 @@ export const LinkEditorModal = ({
     )}
   </Modal>
 )
+
+const ModalLinkEditor = ({
+  onChange,
+}: {
+  onChange: (value: string) => void
+}) => {
+  const { error, curHref, setHref } = useLinkEditor()
+  const { siteId } = useQueryParse(editSiteSchema)
+  const handleChange = (value: string) => {
+    onChange(value)
+    setHref(value)
+  }
+
+  return (
+    <LinkHrefEditor
+      label="Link destination"
+      description="When this is clicked, open:"
+      isRequired
+      isInvalid={!!error}
+      pageLinkElement={
+        <PageLinkElement value={curHref} onChange={handleChange} />
+      }
+      fileLinkElement={
+        <FileAttachment
+          siteId={siteId}
+          setHref={(href) => handleChange(href ?? "")}
+        />
+      }
+    />
+  )
+}

apps/studio/src/features/editing-experience/components/LinkEditor/LinkEditorContext.tsx

@@ -0,0 +1,63 @@
+import type { PropsWithChildren } from "react"
+import { createContext, useContext, useState } from "react"
+
+import type {
+  LinkTypeMapping,
+  LinkTypes,
+} from "~/features/editing-experience/components/LinkEditor/constants"
+import { LINK_TYPES } from "~/features/editing-experience/components/LinkEditor/constants"
+
+export type LinkEditorContextReturn = ReturnType<typeof useLinkEditorContext>
+const LinkEditorContext = createContext<LinkEditorContextReturn | undefined>(
+  undefined,
+)
+
+interface UseLinkEditorContextProps {
+  linkHref: string
+  linkTypes: Partial<LinkTypeMapping>
+  error?: string
+  onChange: (value: string) => void
+}
+const useLinkEditorContext = ({
+  linkHref,
+  linkTypes,
+  error,
+  onChange,
+}: UseLinkEditorContextProps) => {
+  const [curType, setCurType] = useState<LinkTypes>(LINK_TYPES.Page)
+  const [curHref, setHref] = useState(linkHref)
+
+  return {
+    linkTypes,
+    curHref,
+    setHref: (value: string) => {
+      onChange(value)
+      setHref(value)
+    },
+    error,
+    curType,
+    setCurType,
+  }
+}
+
+export const LinkEditorContextProvider = ({
+  children,
+  ...passthroughProps
+}: PropsWithChildren<UseLinkEditorContextProps>) => {
+  const values = useLinkEditorContext(passthroughProps)
+  return (
+    <LinkEditorContext.Provider value={values}>
+      {children}
+    </LinkEditorContext.Provider>
+  )
+}
+
+export const useLinkEditor = () => {
+  const context = useContext(LinkEditorContext)
+  if (!context) {
+    throw new Error(
+      `useLinkEditor must be used within a LinkEditorContextProvider component`,
+    )
+  }
+  return context
+}

apps/studio/src/features/editing-experience/components/LinkEditor/LinkEditorRadioGroup.tsx

@@ -0,0 +1,90 @@
+import type { UseRadioProps } from "@chakra-ui/react"
+import type { PropsWithChildren } from "react"
+import {
+  Box,
+  HStack,
+  Icon,
+  Text,
+  useRadio,
+  useRadioGroup,
+} from "@chakra-ui/react"
+
+import type { LinkTypes } from "./constants"
+import { LINK_TYPES } from "./constants"
+import { useLinkEditor } from "./LinkEditorContext"
+
+const LinkTypeRadioCard = ({
+  children,
+  ...rest
+}: PropsWithChildren<UseRadioProps>) => {
+  const { getInputProps, getRadioProps } = useRadio(rest)
+
+  return (
+    <Box
+      as="label"
+      _first={{
+        "> div": {
+          borderLeftRadius: "base",
+        },
+      }}
+      _last={{
+        "> div": {
+          borderRightRadius: "base",
+        },
+      }}
+    >
+      <input {...getInputProps()} />
+
+      <Box
+        {...getRadioProps()}
+        cursor="pointer"
+        border="1px solid"
+        borderColor="base.divider.strong"
+        bgColor="utility.ui"
+        px="1rem"
+        py="0.5rem"
+        mx={0}
+        _checked={{
+          bgColor: "interaction.muted.main.active",
+          color: "interaction.main.default",
+          borderColor: "interaction.main.default",
+        }}
+        textTransform="none"
+        fontWeight={500}
+        lineHeight="1.25rem"
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+export const LinkEditorRadioGroup = () => {
+  const { linkTypes, setCurType } = useLinkEditor()
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name: "link-type",
+    defaultValue: LINK_TYPES.Page,
+    // NOTE: This is a safe cast because we map over the `linkTypes` below
+    // so each time we are using the `linkType`
+    onChange: (value) => setCurType(value as LinkTypes),
+  })
+
+  return (
+    <HStack {...getRootProps()} spacing={0}>
+      {Object.entries(linkTypes).map(([key, props]) => {
+        if (!props) return null
+        const { icon, label } = props
+        const radio = getRadioProps({ value: key })
+
+        return (
+          <LinkTypeRadioCard key={key} {...radio}>
+            <HStack spacing={2}>
+              <Icon as={icon} fontSize="1.25rem" />
+              <Text textStyle="subhead-2">{label}</Text>
+            </HStack>
+          </LinkTypeRadioCard>
+        )
+      })}
+    </HStack>
+  )
+}