{"_id":"@aliameur/sanity-plugin-link-field","_rev":"3-b26bc5b40c58eab734c4835e4a5db22d","name":"@aliameur/sanity-plugin-link-field","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@aliameur/sanity-plugin-link-field","version":"0.0.1","keywords":["sanity","sanity-plugin","links","portable-text"],"license":"MIT","_id":"@aliameur/sanity-plugin-link-field@0.0.1","maintainers":[{"name":"aliameur","email":"aliameur169@gmail.com"}],"homepage":"https://github.com/aliameur/sanity-plugin-link-field#readme","bugs":{"url":"https://github.com/aliameur/sanity-plugin-link-field/issues"},"dist":{"shasum":"209a898563e4ba65e23b9b917fcb6c613202258b","tarball":"https://registry.npmjs.org/@aliameur/sanity-plugin-link-field/-/sanity-plugin-link-field-0.0.1.tgz","fileCount":38,"integrity":"sha512-9lRQpGUHcGUOLH5wGl3qf/exJLjA2AMwjLO8W5gVqNHyD3gGMHV7ZQcnwdKnr04vaBrB29VOjN3TjPsGELWyfg==","signatures":[{"sig":"MEYCIQCwDnMZ4/HxGZ9xVqzzgMRCndGgQwinbpXlo+wZCSC08AIhANzmDfYNziT0ZPygExgTNyBVGQiQ6tGwP4qOyMjA3mdv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175237},"main":"./dist/index.js","type":"commonjs","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","source":"./src/index.ts","default":"./dist/index.js"},"./helpers":{"import":"./dist/helpers.mjs","source":"./src/helpers.ts","default":"./dist/helpers.js"},"./component":{"import":"./dist/component.mjs","source":"./src/component.ts","default":"./dist/component.js"},"./package.json":"./package.json"},"gitHead":"a2627ac42a926ec748a5db014a60098483115730","scripts":{"lint":"eslint .","build":"plugin-kit verify-package --silent && pkg-utils build --strict --check --clean","watch":"pkg-utils watch --strict","format":"prettier --write --cache --ignore-unknown .","prepare":"lefthook install","fix:lint":"eslint src/ --fix --quiet","fix:format":"prettier --write .","link-watch":"plugin-kit link-watch","check:types":"tsc --pretty --noEmit","check:format":"prettier --check .","prepublishOnly":"npm run build"},"_npmUser":{"name":"aliameur","email":"aliameur169@gmail.com"},"repository":{"url":"git+https://github.com/aliameur/sanity-plugin-link-field.git","type":"git"},"_npmVersion":"10.9.0","description":"A fork of sanity-plugin-link-field","directories":{},"lint-staged":{"*.js":"eslint --cache --fix"},"sideEffects":false,"_nodeVersion":"22.10.0","dependencies":{"@sanity/ui":"^2.8.13","lucide-react":"^0.368.0","@sanity/icons":"^2.11.8","styled-components":"^6.1.13","@sanity/incompatible-plugin":"^1.0.4"},"typesVersions":{"*":{"helpers":["./dist/index.d.ts"],"component":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","eslint":"^8.57.1","sanity":"^3.62.3","lefthook":"^1.8.2","prettier":"^3.3.3","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","@commitlint/cli":"^19.5.0","@sanity/pkg-utils":"^6.11.7","@sanity/plugin-kit":"^4.0.18","eslint-plugin-react":"^7.37.2","eslint-config-sanity":"^7.1.3","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","prettier-plugin-packagejson":"^2.5.3","@commitlint/config-conventional":"^19.5.0","@sanity/semantic-release-preset":"^5.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":"^18","sanity":"^3"},"_npmOperationalInternal":{"tmp":"tmp/sanity-plugin-link-field_0.0.1_1730309989800_0.21547900698295974","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@aliameur/sanity-plugin-link-field","version":"0.0.2","keywords":["sanity","sanity-plugin","links","portable-text"],"license":"MIT","_id":"@aliameur/sanity-plugin-link-field@0.0.2","maintainers":[{"name":"aliameur","email":"aliameur169@gmail.com"}],"homepage":"https://github.com/aliameur/sanity-plugin-link-field#readme","bugs":{"url":"https://github.com/aliameur/sanity-plugin-link-field/issues"},"dist":{"shasum":"1d8519c5e71609d264bf3f540ac82d1612abe6ab","tarball":"https://registry.npmjs.org/@aliameur/sanity-plugin-link-field/-/sanity-plugin-link-field-0.0.2.tgz","fileCount":38,"integrity":"sha512-ThOPU3HY6Y6WcR6OJvf8UhbZgWpp1uThsIkXvtcbyTPes8e9LxjoKSpLnuN3cGXZ6hwSv+i8eYSrIAIukhTH2A==","signatures":[{"sig":"MEUCIQC2ve663PmJlpRMinXxJBIosbpcOwbFzO7OYJQXbemeHwIgAPcw9zwM7wznlLf8tQKpgFiRImZobAl+Ta+GeJlI99c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":175312},"main":"./dist/index.js","type":"commonjs","_from":"file:aliameur-sanity-plugin-link-field-0.0.2.tgz","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","source":"./src/index.ts","default":"./dist/index.js"},"./helpers":{"import":"./dist/helpers.mjs","source":"./src/helpers.ts","default":"./dist/helpers.js"},"./component":{"import":"./dist/component.mjs","source":"./src/component.ts","default":"./dist/component.js"},"./package.json":"./package.json"},"scripts":{"lint":"eslint .","build":"plugin-kit verify-package --silent && pkg-utils build --strict --check --clean","watch":"pkg-utils watch --strict","format":"prettier --write --cache --ignore-unknown .","fix:lint":"eslint src/ --fix --quiet","fix:format":"prettier --write .","link-watch":"plugin-kit link-watch","check:types":"tsc --pretty --noEmit","check:format":"prettier --check ."},"_npmUser":{"name":"aliameur","email":"aliameur169@gmail.com"},"_resolved":"/private/var/folders/rp/sz3gy4lj7mdgq680lp7wj5gc0000gn/T/4bafa734cf44b35c0733dad4916fa1f0/aliameur-sanity-plugin-link-field-0.0.2.tgz","_integrity":"sha512-ThOPU3HY6Y6WcR6OJvf8UhbZgWpp1uThsIkXvtcbyTPes8e9LxjoKSpLnuN3cGXZ6hwSv+i8eYSrIAIukhTH2A==","repository":{"url":"git+https://github.com/aliameur/sanity-plugin-link-field.git","type":"git"},"_npmVersion":"10.9.0","description":"A fork of sanity-plugin-link-field","directories":{},"lint-staged":{"*.js":"eslint --cache --fix"},"sideEffects":false,"_nodeVersion":"22.10.0","dependencies":{"@sanity/ui":"^2.8.13","lucide-react":"^0.368.0","@sanity/icons":"^2.11.8","styled-components":"^6.1.13","@sanity/incompatible-plugin":"^1.0.4"},"typesVersions":{"*":{"helpers":["./dist/index.d.ts"],"component":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","eslint":"^8.57.1","sanity":"^3.62.3","lefthook":"^1.8.2","prettier":"^3.3.3","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","@commitlint/cli":"^19.5.0","@sanity/pkg-utils":"^6.11.7","@sanity/plugin-kit":"^4.0.18","eslint-plugin-react":"^7.37.2","eslint-config-sanity":"^7.1.3","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","prettier-plugin-packagejson":"^2.5.3","@commitlint/config-conventional":"^19.5.0","@sanity/semantic-release-preset":"^5.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":"^18","sanity":"^3"},"_npmOperationalInternal":{"tmp":"tmp/sanity-plugin-link-field_0.0.2_1730582206735_0.7098078537967614","host":"s3://npm-registry-packages"}},"0.0.3":{"name":"@aliameur/sanity-plugin-link-field","version":"0.0.3","keywords":["sanity","sanity-plugin","links","portable-text"],"license":"MIT","_id":"@aliameur/sanity-plugin-link-field@0.0.3","maintainers":[{"name":"aliameur","email":"aliameur169@gmail.com"}],"homepage":"https://github.com/aliameur/sanity-plugin-link-field#readme","bugs":{"url":"https://github.com/aliameur/sanity-plugin-link-field/issues"},"dist":{"shasum":"0c96f5ad2e3660e6a51345f7d0520ff78f514b67","tarball":"https://registry.npmjs.org/@aliameur/sanity-plugin-link-field/-/sanity-plugin-link-field-0.0.3.tgz","fileCount":38,"integrity":"sha512-XmlOz+1LvZgpXnjB6f5LmKZrjPN3bhmIFd1qKsF7XyOiwRyaiXtgPy5xl4U89P5T4mOoSAFoALsuI0JmarYl7Q==","signatures":[{"sig":"MEQCID3evbAKUUefjSX/a8Cdw262xTFvX/qEEw73Gaz1xFKAAiBVlgTXX3lchYT2PMz8DbX00nPX9HxiGs7CIVFmXhJpRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174876},"main":"./dist/index.js","type":"commonjs","_from":"file:aliameur-sanity-plugin-link-field-0.0.3.tgz","types":"./dist/index.d.ts","engines":{"node":">=18"},"exports":{".":{"import":"./dist/index.mjs","source":"./src/index.ts","default":"./dist/index.js"},"./helpers":{"import":"./dist/helpers.mjs","source":"./src/helpers.ts","default":"./dist/helpers.js"},"./component":{"import":"./dist/component.mjs","source":"./src/component.ts","default":"./dist/component.js"},"./package.json":"./package.json"},"scripts":{"lint":"eslint .","build":"plugin-kit verify-package --silent && pkg-utils build --strict --check --clean","watch":"pkg-utils watch --strict","format":"prettier --write --cache --ignore-unknown .","fix:lint":"eslint src/ --fix --quiet","fix:format":"prettier --write .","link-watch":"plugin-kit link-watch","check:types":"tsc --pretty --noEmit","check:format":"prettier --check ."},"_npmUser":{"name":"aliameur","email":"aliameur169@gmail.com"},"_resolved":"/private/var/folders/rp/sz3gy4lj7mdgq680lp7wj5gc0000gn/T/db58c0a37c7161831eac58938643d0ea/aliameur-sanity-plugin-link-field-0.0.3.tgz","_integrity":"sha512-XmlOz+1LvZgpXnjB6f5LmKZrjPN3bhmIFd1qKsF7XyOiwRyaiXtgPy5xl4U89P5T4mOoSAFoALsuI0JmarYl7Q==","repository":{"url":"git+https://github.com/aliameur/sanity-plugin-link-field.git","type":"git"},"_npmVersion":"10.9.0","description":"A fork of sanity-plugin-link-field","directories":{},"lint-staged":{"*.js":"eslint --cache --fix"},"sideEffects":false,"_nodeVersion":"22.10.0","dependencies":{"@sanity/ui":"^2.8.13","lucide-react":"^0.368.0","@sanity/icons":"^2.11.8","styled-components":"^6.1.13","@sanity/incompatible-plugin":"^1.0.4"},"typesVersions":{"*":{"helpers":["./dist/index.d.ts"],"component":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","eslint":"^8.57.1","sanity":"^3.62.3","lefthook":"^1.8.2","prettier":"^3.3.3","react-dom":"^18.3.1","typescript":"^5.6.3","@types/react":"^18.3.12","@commitlint/cli":"^19.5.0","@sanity/pkg-utils":"^6.11.7","@sanity/plugin-kit":"^4.0.18","eslint-plugin-react":"^7.37.2","eslint-config-sanity":"^7.1.3","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@typescript-eslint/parser":"^7.18.0","eslint-plugin-react-hooks":"^4.6.2","prettier-plugin-packagejson":"^2.5.3","@commitlint/config-conventional":"^19.5.0","@sanity/semantic-release-preset":"^5.0.0","@typescript-eslint/eslint-plugin":"^7.18.0"},"peerDependencies":{"react":"^18","sanity":"^3"},"_npmOperationalInternal":{"tmp":"tmp/sanity-plugin-link-field_0.0.3_1730583783809_0.20874169358863615","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@aliameur/sanity-plugin-link-field","version":"0.0.4","description":"A fork of sanity-plugin-link-field","keywords":["sanity","sanity-plugin","links","portable-text"],"homepage":"https://github.com/aliameur/sanity-plugin-link-field#readme","bugs":{"url":"https://github.com/aliameur/sanity-plugin-link-field/issues"},"repository":{"type":"git","url":"git+https://github.com/aliameur/sanity-plugin-link-field.git"},"license":"MIT","sideEffects":false,"type":"commonjs","exports":{".":{"source":"./src/index.ts","import":"./dist/index.mjs","default":"./dist/index.js"},"./helpers":{"source":"./src/helpers.ts","import":"./dist/helpers.mjs","default":"./dist/helpers.js"},"./component":{"source":"./src/component.ts","import":"./dist/component.mjs","default":"./dist/component.js"},"./package.json":"./package.json"},"main":"./dist/index.js","types":"./dist/index.d.ts","typesVersions":{"*":{"helpers":["./dist/index.d.ts"],"component":["./dist/index.d.ts"]}},"dependencies":{"@sanity/icons":"^2.11.8","@sanity/incompatible-plugin":"^1.0.4","@sanity/ui":"^2.8.13","lucide-react":"^0.368.0","styled-components":"^6.1.13"},"devDependencies":{"@commitlint/cli":"^19.5.0","@commitlint/config-conventional":"^19.5.0","@sanity/pkg-utils":"^6.11.7","@sanity/plugin-kit":"^4.0.18","@sanity/semantic-release-preset":"^5.0.0","@types/react":"^18.3.12","@typescript-eslint/eslint-plugin":"^7.18.0","@typescript-eslint/parser":"^7.18.0","eslint":"^8.57.1","eslint-config-prettier":"^9.1.0","eslint-config-sanity":"^7.1.3","eslint-plugin-prettier":"^5.2.1","eslint-plugin-react":"^7.37.2","eslint-plugin-react-hooks":"^4.6.2","lefthook":"^1.8.2","prettier":"^3.3.3","prettier-plugin-packagejson":"^2.5.3","react":"^18.3.1","react-dom":"^18.3.1","sanity":"^3.62.3","typescript":"^5.6.3"},"peerDependencies":{"react":"^18","sanity":"^3"},"engines":{"node":">=18"},"lint-staged":{"*.js":"eslint --cache --fix"},"scripts":{"build":"plugin-kit verify-package --silent && pkg-utils build --strict --check --clean","format":"prettier --write --cache --ignore-unknown .","link-watch":"plugin-kit link-watch","lint":"eslint .","watch":"pkg-utils watch --strict","check:types":"tsc --pretty --noEmit","check:format":"prettier --check .","fix:format":"prettier --write .","fix:lint":"eslint src/ --fix --quiet"},"_id":"@aliameur/sanity-plugin-link-field@0.0.4","_integrity":"sha512-TgpF67YFP94cVhYwkkjBXJTnxN1Qc6CEp3bpG9wktfQCMFNdri76zKCshBPyZloVF2tOuGFEtheVA63Gvo7E/w==","_resolved":"/private/var/folders/rp/sz3gy4lj7mdgq680lp7wj5gc0000gn/T/f0f2024c76fa201df99502db99efd85f/aliameur-sanity-plugin-link-field-0.0.4.tgz","_from":"file:aliameur-sanity-plugin-link-field-0.0.4.tgz","_nodeVersion":"22.10.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-TgpF67YFP94cVhYwkkjBXJTnxN1Qc6CEp3bpG9wktfQCMFNdri76zKCshBPyZloVF2tOuGFEtheVA63Gvo7E/w==","shasum":"570f421b74b7a2c3b6504d7b2cb9cfe19ae00512","tarball":"https://registry.npmjs.org/@aliameur/sanity-plugin-link-field/-/sanity-plugin-link-field-0.0.4.tgz","fileCount":38,"unpackedSize":175555,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB2txMiJ5rRKb7K6gP7Ee5/mmcO4NY3pZD9RC3o0O5qgIhAMXs092xE1uTwfZqNCAZfV2q2YI9ctYUaeBSBeeB0sa1"}]},"_npmUser":{"name":"aliameur","email":"aliameur169@gmail.com"},"directories":{},"maintainers":[{"name":"aliameur","email":"aliameur169@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/sanity-plugin-link-field_0.0.4_1730586372782_0.21365497436283865"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-30T17:39:49.680Z","modified":"2024-11-02T22:26:13.161Z","0.0.1":"2024-10-30T17:39:50.020Z","0.0.2":"2024-11-02T21:16:46.993Z","0.0.3":"2024-11-02T21:43:04.213Z","0.0.4":"2024-11-02T22:26:12.976Z"},"bugs":{"url":"https://github.com/aliameur/sanity-plugin-link-field/issues"},"license":"MIT","homepage":"https://github.com/aliameur/sanity-plugin-link-field#readme","keywords":["sanity","sanity-plugin","links","portable-text"],"repository":{"type":"git","url":"git+https://github.com/aliameur/sanity-plugin-link-field.git"},"description":"A fork of sanity-plugin-link-field","maintainers":[{"name":"aliameur","email":"aliameur169@gmail.com"}],"readme":"# 🔗 sanity-plugin-link-field\n\n[![Latest Stable Version](https://img.shields.io/npm/v/sanity-plugin-link-field.svg)](https://www.npmjs.com/package/sanity-plugin-link-field) [![Weekly Downloads](https://img.shields.io/npm/dw/sanity-plugin-link-field?style=flat-square)](https://npm-stat.com/charts.html?package=sanity-plugin-link-field)\n[![License](https://img.shields.io/github/license/winteragency/sanity-plugin-link-field.svg)](https://github.com/winteragency/sanity-plugin-link-field) [![Made by Winter](https://img.shields.io/badge/made%20by-Winter-blue.svg)](https://winteragency.se)\n\nA custom Link field (and associated React component) that allows editors to easily create internal and external links, as well as `mailto` and `tel`-links, all using the same intuitive UI.\n\n<video controls src=\"https://github.com/winteragency/sanity-plugin-link-field/assets/1009069/5948b1d5-514b-4204-ab54-0bd710c6a6bc\"></video>\n\n## 🔌 Installation\n\n```sh\nnpm install sanity-plugin-link-field\n```\n\n## 🗒️ Setup\n\n### 1. Configure the plugin\n\nAdd the plugin to your `sanity.config.ts`:\n\n```ts\n// sanity.config.ts\nimport {defineConfig} from 'sanity'\nimport {linkField} from 'sanity-plugin-link-field'\n\nexport default defineConfig({\n  //...\n  plugins: [linkField()],\n})\n```\n\nThis will enable the new `link` field type. By default, it will allow internal links to point to any document of the type `page`. You can adjust this according to your needs by using the `linkableSchemaTypes` option:\n\n```ts\n// ...\nexport default defineConfig({\n  //...\n  plugins: [\n    linkField({\n      linkableSchemaTypes: ['page', 'product', 'article'],\n    }),\n  ],\n})\n```\n\nIf you set it to an empty array, the internal link option will be hidden entirely for all link fields.\n\n> [!TIP]\n> See [Options](#-options) for all the plugin level options you can set.\n\n### 2. Add the field to your schema\n\nYou can now use the `link` type throughout your schema:\n\n```ts\n// mySchema.ts\nimport {defineField, defineType} from 'sanity'\n\nexport const mySchema = defineType({\n  // ...\n  fields: [\n    // ...\n    defineField({\n      name: 'link',\n      title: 'Link',\n      type: 'link',\n    }),\n  ],\n})\n```\n\nEditors will be able to switch between internal links (using native references in Sanity), external links (for linking to other websites) as well as e-mail (`mailto`) and phone (`tel`) links:\n\nThe link object also includes additional fields for adding custom URL parameters and/or URL fragments to the end of an internal or external link. This can be used to add UTM campaign tracking or link to specific sections of a page, respectively. If you use the provided `Link` component, these will be handled automatically on the frontend.\n\n<img width=\"456\" alt=\"link-field\" src=\"https://github.com/winteragency/sanity-plugin-link-field/assets/1009069/ebbe0f9f-a2e1-4f13-8a7f-9972a5237296\">\n\nYou can also choose to enable an additional input field for setting the link's text/label:\n\n```ts\ndefineField({\n  name: 'link',\n  title: 'Link',\n  type: 'link',\n  options: {\n    enableText: true\n  }\n})\n```\n\n<img width=\"457\" alt=\"Screenshot 2024-04-19 at 15 45 30\" src=\"https://github.com/winteragency/sanity-plugin-link-field/assets/1009069/32a9381c-505f-458e-a07c-185edfb735f7\">\n\n \n> [!TIP]\n> See [Options](#-options) for all the field level options you can set.\n\n### 3. Making a required link field\n\nSince the link field is just an object field internally, the normal `.required()` validator _will not work_. Instead, the plugin includes a helper to properly validate a link field and make it required:\n\n```ts\nimport {requiredLinkField} from 'sanity-plugin-link-field'\n\n// ...\ndefineField({\n  name: 'link',\n  title: 'Link',\n  type: 'link',\n  validation: (rule) => rule.custom((field) => requiredLinkField(field)),\n})\n```\n\n### 4. Rendering links on the frontend\n\n#### Spreading internal links\n\nIn order to render internal links in your frontend, you need to add a projection to your groq query so that the relevant fields (such as the `slug`) are included from the linked documents:\n\n```groq\n*[_type == \"page\" && slug.current == $slug][0] {\n  // ...\n  link {\n    ...,\n    internalLink->{_type,slug,title}\n  },\n}\n```\n\n#### Rendering links\n\nHow you render your links is up to you and will depend on your frontend framework of choice, as well as how you manage slugs/pathnames in your project.\nThis plugin does include a simple React component to render the link correctly regardless of its type:\n\n```tsx\nimport {Link} from 'sanity-plugin-link-field/component'\n\nimport {resolveHref} from '@/lib/sanity/sanity.links'\n\n// ...\n<Link\n  link={link}\n  hrefResolver={({internalLink}) => resolveHref(internalLink?._type, internalLink?.slug?.current)}\n>\n  This is my link\n</Link>\n// ...\n```\n\nNotice the `hrefResolver` property. This is a callback used to resolve the `href` for internal links, and will differ depending on how your project is set up. The example above uses a `resolveHref` function defined elsewhere that will return the correct path depending on the document type and `slug`.\n\nIf a `hrefResolver` is not provided, the component will naively attempt to look at the `slug` property of the linked document and generate a `href` like so: `/${link.internalLink.slug?.current}`. This will of course only work on the off chance that your documents all have a `slug` property (like if you're using [this approach to managing slugs](https://www.simeongriggs.dev/nextjs-sanity-slug-patterns)).\n\nRegardless of how you choose to manage slugs for internal links, the component will automatically handle external links, add `target=\"_blank\"` as needed, and add `mailto:` to e-mail links as well as `tel:` to phone links. For `tel:` links, it will strip any spaces in the phone number since these are not allowed in such links. Additionally, it will render [the link's text label (if enabled)](#field-level), or try and fall back to a good textual representation of the link if one hasn't been passed to the component (using the `children` property).\n\n#### Using `next/link` or similar framework specific components\n\nIf you're using Next.js, you'll want to use `next/link` for routing. In this case, the `Link` component accepts an `as` property:\n\n```tsx\nimport {default as NextLink} from 'next/link'\nimport {Link} from 'sanity-plugin-link-field/component'\n\n// ...\n<Link link={link} as={NextLink}>\n  This is my link\n</Link>\n// ...\n```\n\nTo avoid having to remember to do this every time, you could create a convenience component in your project like so:\n\n```tsx\nimport { default as NextLink } from 'next/link';\nimport { Link as SanityLink, type LinkProps } from 'sanity-plugin-link-field/component';\n\nexport function Link(props: LinkProps) {\n  return <SanityLink as={NextLink} hrefResolver={...} {...props} />;\n}\n```\n\nYou can then use it throughout your project:\n\n```tsx\nimport {Link} from '@/components/Link'\n\n// ...\n<Link link={link}>This is my link</Link>\n// ...\n```\n\n#### Using with TypeScript\n\nThe plugin exports a type called `LinkValue` that you can use for your link fields.\n\n### 5. Using with Portable Text\n\nAs with any other field, the link field can be used in a Portable Text editor by adding it as an annotation, eg:\n\n```ts\ndefineArrayMember({\n  type: 'block',\n  marks: {\n    annotations: [\n      // ...\n      {\n        name: 'link',\n        title: 'Link',\n        type: 'link',\n      },\n    ],\n  },\n})\n```\n\nIn this example, the built-in link annotation in Sanity will be replaced with a much more user-friendly and powerful link selector. If you want to keep the built-in link annotation as well, you can use a different `name`, such as `customLink`, in your own annotation.\n\n<img width=\"504\" alt=\"link-in-portable-text\" src=\"https://github.com/winteragency/sanity-plugin-link-field/assets/1009069/ff302977-80aa-47b6-aff2-92746661032b\">\n\nYou will need to adjust your groq queries to spread internal links:\n\n```groq\ncontent[] {\n  ...,\n  markDefs[]{\n    ...,\n    _type == \"link\" => {\n      ...,\n      internalLink->{_type,slug,title}\n    }\n  }\n}\n```\n\nFinally, you'll need to adjust your frontend rendering logic to handle these links, something along the lines of:\n\n```ts\nmarks: {\n  link: ({ children, value }) => (\n    <Link\n      link={value}\n      hrefResolver={...}\n    >\n      {children}\n    </Link>\n  )\n}\n```\n\n## ⚙️ Advanced\n\n### Custom link types\n\nIn addition to the built-in link types, it's possible to define a set of custom link types for the user to choose from. This can be used to allow users to link to pre-defined routes that do not exist in Sanity, such as hardcoded routes in your frontend application or dynamic routes loaded from an external system.\n\nTo enable this feature, simply define your custom link types using the `customLinkTypes` property when initializing the plugin:\n\n```ts\n// sanity.config.ts\nimport {defineConfig} from 'sanity'\nimport {linkField} from 'sanity-plugin-link-field'\n\nexport default defineConfig({\n  //...\n  plugins: [\n    linkField({\n      customLinkTypes: [\n        {\n          title: 'Archive Page',\n          value: 'archive',\n          icon: OlistIcon,\n          description: 'Link to an archive page.',\n          options: [\n            {\n              title: 'Blog',\n              value: '/blog',\n            },\n            {\n              title: 'News',\n              value: '/news',\n            },\n          ],\n        },\n      ],\n    }),\n  ],\n})\n```\n\nThe \"Archive Page\" type will now show up as an option when editing a link field, and selecting it will present the user with a dropdown menu with the available routes:\n\n<video controls src=\"https://github.com/winteragency/sanity-plugin-link-field/assets/1009069/59e79abf-a2a0-413f-bf80-c08b0f64b72a\"></video>\n\nYou can also provide a callback for the `options` parameter to load the available options dynamically. The callback will receive the current document, the path to the link field being edited, as well as the current user:\n\n```ts\n// ...\ncustomLinkTypes: [\n  // Load movies from external system\n  {\n    title: 'Movie',\n    value: 'movie',\n    icon: FilmIcon,\n    description: 'Link to a movie from the cinema system.',\n    options: async (document, fieldPath, user) => {\n      // Do a fetch request here to get available movies from an API route\n\n      // ...\n\n      return options;\n    }\n]\n```\n\n#### Rendering custom links on the frontend\n\nCustom link objects have the following structure in the schema, where `url` will be the `value` of the user-selected option:\n\n```ts\n{\n  _type: 'link',\n  blank: false,\n  type: 'myType'\n  value: 'myCustomValue'\n}\n```\n\nHow you handle this on the frontend is up to you; you can either pass the `value` directly to your `<a>` as its `href` or do any other processing you like with it; it's just a string value.\n\nIf you're using the built-in `Link` component, it will handle custom links just like external links, and use the `value` as the `href`. It will also add any custom parameters or anchors configured by the user, if enabled.\n\n## 🔧 Options\n\n### Plugin level\n\nWhen configuring the plugin in `sanity.config.ts`, these are the global options you can set. These will affect all link fields throughout your Studio.\n\n| Option | Default Value | Description |\n| ------------- | ------------- | ------------- |\n| linkableSchemaTypes | `['page']` | An array of schema types that should be allowed in internal links. |\n| weakReferences | `false` | Make internal links use [weak references](https://www.sanity.io/docs/reference-type#f45f659e7b28) |\n| referenceFilterOptions | `undefined` | Custom [filter options](https://www.sanity.io/docs/reference-type#1ecd78ab1655) passed to the reference input component for internal links. Use it to filter the documents that should be available for linking, eg. by locale. |\n| descriptions | *See [linkField.tsx](https://github.com/winteragency/sanity-plugin-link-field/blob/main/src/linkField.tsx)* | Override the descriptions of the different subfields. |\n| enableLinkParameters | `true` | Whether the user should be able to set custom URL parameters for internal and external links. |\n| enableAnchorLinks | `true` | Whether the user should be able to set custom anchors (URL fragments) for internal and external links. |\n| customLinkTypes | `[]` | Any custom link types that should be available in the dropdown. This can be used to allow users to link to pre-defined routes that don't exist within Sanity, such as hardcoded routes in the frontend application, or dynamic content that is pulled in from an external system. See [Custom link types](#custom-link-types) |\n\n### Field level\n\nFor each individual link field you add to your schema, you can set these options:\n\n| Option | Default Value | Description |\n| ------------- | ------------- | ------------- |\n| enableText  | `false`  | Whether the link should include an optional field for setting the link text/label. If enabled, this will be available on the resulting link object under the `.text` property. |\n| textLabel  | `Text`  | The label for the text input field, if enabled using the `enableText` option. |\n\n## 🔏 License\n\n[MIT](LICENSE) © [Winter Agency](https://winteragency.se)\n\n## 🧪 Develop & test\n\nThis plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)\nwith default configuration for build & watch scripts.\n\nSee [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)\non how to run this plugin with hotreload in the studio.\n\n### Release new version\n\nRun [\"CI & Release\" workflow](https://github.com/winteragency/sanity-plugin-link-field/actions/workflows/main.yml).\nMake sure to select the main branch and check \"Release new version\".\n\nSemantic release will only release on configured branches, so it is safe to run release on any branch.\n","readmeFilename":"README.md"}