sanity-plugin-pte-interpolation 1.0.1 → 1.1.1

package/README.md

@@ -2,6 +2,8 @@
 
 [![npm version](https://img.shields.io/npm/v/sanity-plugin-pte-interpolation.svg?style=flat-square)](https://www.npmjs.com/package/sanity-plugin-pte-interpolation)
 
+![Demo](https://raw.githubusercontent.com/jordanl17/sanity-pte-interpolation/main/.github/assets/demo.png)
+
 Sanity Studio schema helper that adds dynamic variable picker inline blocks to the [Portable Text Editor](https://www.sanity.io/docs/portable-text-editor). Editors can insert named variables (like `{firstName}` or `{email}`) directly into rich text content, which are then resolved to real values at render time.
 
 Part of [sanity-pte-interpolation](https://github.com/jordanl17/sanity-pte-interpolation). For rendering the variables in React, see [`pte-interpolation-react`](https://www.npmjs.com/package/pte-interpolation-react).
@@ -85,6 +87,16 @@ import {InterpolatedPortableText} from 'pte-interpolation-react'
 />
 ```
 
+For framework-agnostic use cases - plain string output, variable key extraction, server-side rendering, or any non-React environment - use [`pte-interpolation-core`](https://www.npmjs.com/package/pte-interpolation-core) directly:
+
+```ts
+import {interpolateToString, extractVariableKeys} from 'pte-interpolation-core'
+
+const keys = extractVariableKeys(blocks) // ['firstName', 'email']
+const text = interpolateToString(blocks, {firstName: 'Jo', email: 'jo@example.com'})
+// "Hello, Jo! Your email is jo@example.com."
+```
+
 ## Data Shape
 
 Variables are stored as inline objects within Portable Text blocks:
@@ -125,7 +137,7 @@ interface InterpolationVariable {
 
 ### `VARIABLE_TYPE_PREFIX`
 
-The constant `'pteInterpolationVariable'` — the `_type` string used for variable inline blocks in stored Portable Text. Exported for advanced use cases.
+The constant `'pteInterpolationVariable'` - the `_type` string used for variable inline blocks in stored Portable Text. Exported for advanced use cases.
 
 ## License
 

package/dist/index.cjs

@@ -1,14 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var icons = require("@sanity/icons"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui");
+var icons = require("@sanity/icons"), sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), react = require("react");
 function VariableKeyField(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
 }
 function createVariableKeyInput(variables) {
+  const options = variables.map((variable) => ({
+    value: variable.id,
+    name: variable.name,
+    description: variable.description
+  }));
   return function(props) {
-    const selectedVariable = variables.find((variable) => variable.id === props.value);
+    const autocompleteId = react.useId(), selectedVariable = variables.find((variable) => variable.id === props.value), handleChange = react.useCallback(
+      (selectedValue) => {
+        props.onChange(selectedValue ? sanity.set(selectedValue) : sanity.unset());
+      },
+      [props]
+    ), filterOption = react.useCallback((query, option) => option.name.toLowerCase().includes(query.toLowerCase()), []), renderOption = react.useCallback((option) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Card, { as: "button", padding: 3, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: option.name }),
+      option.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 0, muted: !0, children: option.description }) })
+    ] }), []), renderValue = react.useCallback((_value, option) => option ? option.name : options.find((candidate) => candidate.value === _value)?.name ?? _value, []);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      props.renderDefault(props),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Autocomplete,
+        {
+          id: autocompleteId,
+          options,
+          value: typeof props.value == "string" ? props.value : void 0,
+          onChange: handleChange,
+          filterOption,
+          renderOption,
+          renderValue,
+          openButton: !0,
+          icon: icons.SearchIcon,
+          placeholder: "Search variables...",
+          fontSize: 1,
+          padding: 3
+        }
+      ),
       selectedVariable?.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, muted: !0, children: selectedVariable.description }) })
     ] });
   };
@@ -37,12 +66,6 @@ function interpolationVariables(variables, block) {
         name: "variableKey",
         title: "Variable",
         type: "string",
-        options: {
-          list: variables.map((variable) => ({
-            title: variable.name,
-            value: variable.id
-          }))
-        },
         validation: (rule) => rule.required(),
         components: {
           field: VariableKeyField,

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {Box, Text} from '@sanity/ui'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  return function VariableKeyInput(props: InputProps) {\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    return (\n      <>\n        {props.renderDefault(props)}\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        options: {\n          list: variables.map((variable) => ({\n            title: variable.name,\n            value: variable.id,\n          })),\n        },\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":["jsx","Fragment","jsxs","Box","Text","defineArrayMember","TagIcon","defineField"],"mappings":";;;AAIO,SAAS,iBAAiB,OAAmB;AAClD,SAAOA,2BAAAA,IAAAC,WAAAA,UAAA,EAAG,gBAAM,SAAA,CAAS;AAC3B;AAEO,SAAS,uBAAuB,WAAoC;AACzE,SAAO,SAA0B,OAAmB;AAClD,UAAM,mBAAmB,UAAU,KAAK,CAAC,aAAa,SAAS,OAAO,MAAM,KAAK;AAEjF,WACEC,2BAAAA,KAAAD,qBAAA,EACG,UAAA;AAAA,MAAA,MAAM,cAAc,KAAK;AAAA,MACzB,kBAAkB,eACjBD,+BAACG,GAAAA,KAAA,EAAI,WAAW,GACd,UAAAH,2BAAAA,IAACI,GAAAA,MAAA,EAAK,MAAM,GAAG,OAAK,IACjB,UAAA,iBAAiB,aACpB,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEO,SAAS,0BAA0B,WAAoC;AAC5E,SAAO,SAA6B,OAAmB;AAErD,UAAM,cADQ,MAAM,OACO,aACrB,WAAW,UAAU,KAAK,CAAC,cAAc,UAAU,OAAO,WAAW;AAE3E,WAAO,MAAM,cAAc;AAAA,MACzB,GAAG;AAAA,MACH,eAAe,MACbJ,2BAAAA,IAACG,QAAA,EAAI,SAAS,GACZ,UAAAH,2BAAAA,IAACI,SAAA,EAAK,MAAM,GAAG,QAAO,UACnB,UAAA,UAAU,QAAQ,eAAe,mBACpC,EAAA,CACF;AAAA,IAAA,CAEH;AAAA,EACH;AACF;AClCO,MAAM,uBAAuB;AAG7B,SAAS,uBACd,WACA,OACA;AACA,QAAM,eAAeC,OAAAA,kBAAkB;AAAA,IACrC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAMC,MAAAA;AAAAA,IACN,SAAS;AAAA,MACP,OAAO,EAAC,OAAO,EAAA;AAAA,IAAC;AAAA,IAElB,QAAQ;AAAA,MACNC,mBAAY;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,MAAM,UAAU,IAAI,CAAC,cAAc;AAAA,YACjC,OAAO,SAAS;AAAA,YAChB,OAAO,SAAS;AAAA,UAAA,EAChB;AAAA,QAAA;AAAA,QAEJ,YAAY,CAAC,SAAS,KAAK,SAAA;AAAA,QAC3B,YAAY;AAAA,UACV,OAAO;AAAA,UACP,OAAO,uBAAuB,SAAS;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IAAA;AAAA,IAEH,YAAY;AAAA,MACV,aAAa,0BAA0B,SAAS;AAAA,IAAA;AAAA,EAClD,CACD,GAEK,YAAY,SAASF,OAAAA,kBAAkB,EAAC,MAAM,SAAQ;AAE5D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI,CAAC,GAAK,UAA+B,MAAM,CAAA,GAAK,YAAY;AAAA,EAAA;AAEpE;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {SearchIcon} from '@sanity/icons'\nimport {Autocomplete, Box, Card, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={typeof props.value === 'string' ? props.value : undefined}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n        />\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":["jsx","Fragment","useId","useCallback","set","unset","jsxs","Card","Text","Box","Autocomplete","SearchIcon","defineArrayMember","TagIcon","defineField"],"mappings":"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"}

package/dist/index.d.cts

@@ -107,11 +107,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: StringOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: StringComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -130,11 +130,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: NumberOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: NumberComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -152,11 +152,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: BooleanOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: BooleanComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -175,14 +175,14 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       groups?: FieldGroupDefinition[] | undefined
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: ObjectOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields: FieldDefinition[]
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: ObjectOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: ObjectComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -200,20 +200,69 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: BlockOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?:
         | {
             block?: ComponentType<BlockProps>
           }
         | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
       styles?: BlockStyleDefinition[] | undefined
       lists?: BlockListDefinition[] | undefined
       marks?: BlockMarksDefinition | undefined
     }
+  | {
+      of: unknown[]
+      type: 'image'
+      name?: string | undefined
+      validation?:
+        | (ValidationBuilder<ImageRule, ImageValue> &
+            (
+              | false
+              | Rule
+              | SchemaValidationValue[]
+              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
+            ))
+        | undefined
+      readOnly?: ConditionalProperty
+      title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: ImageOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      fields?: FieldDefinition[] | undefined
+      fieldsets?: FieldsetDefinition[] | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: ImageComponents | undefined
+      renderMembers?: ObjectRenderMembersCallback | undefined
+      deprecated?: DeprecatedProperty | undefined
+    }
+  | {
+      of: unknown[]
+      type: 'text'
+      name?: string | undefined
+      validation?:
+        | (ValidationBuilder<TextRule, string> &
+            (
+              | false
+              | Rule
+              | SchemaValidationValue[]
+              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
+            ))
+        | undefined
+      readOnly?: ConditionalProperty
+      placeholder?: string | undefined
+      rows?: number | undefined
+      title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: TextOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: TextComponents | undefined
+      deprecated?: DeprecatedProperty | undefined
+    }
   | {
       of: unknown[]
       type: 'array'
@@ -229,11 +278,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: ArrayOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: (ArrayOfObjectsComponents | ArrayOfPrimitivesComponents) | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -252,11 +301,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: DateOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DateComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -275,11 +324,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: DatetimeOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DatetimeComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -298,14 +347,14 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       groups?: FieldGroupDefinition[] | undefined
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: DocumentOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields: FieldDefinition[]
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: DocumentOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DocumentComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
       liveEdit?: boolean | undefined
       orderings?: SortOrdering[] | undefined
@@ -334,14 +383,14 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: FileOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields?: ObjectDefinition['fields'] | undefined
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: FileOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: FileComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -359,36 +408,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: GeopointOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: GeopointComponents | undefined
       icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
-    }
-  | {
-      of: unknown[]
-      type: 'image'
-      name?: string | undefined
-      validation?:
-        | (ValidationBuilder<ImageRule, ImageValue> &
-            (
-              | false
-              | Rule
-              | SchemaValidationValue[]
-              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
-            ))
-        | undefined
-      readOnly?: ConditionalProperty
-      title?: string | undefined
+      options?: GeopointOptions | undefined
       description?: (string | React.JSX.Element) | undefined
-      fields?: FieldDefinition[] | undefined
-      fieldsets?: FieldsetDefinition[] | undefined
-      options?: ImageOptions | undefined
       initialValue?: InitialValueProperty<any, any>
-      components?: ImageComponents | undefined
-      renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
+      components?: GeopointComponents | undefined
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -406,13 +430,13 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      to: ReferenceTo
+      icon?: ReactNode | ComponentType
       options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: ReferenceComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
-      to: ReferenceTo
       weak?: boolean | undefined
     }
   | {
@@ -422,12 +446,6 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: ReferenceOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: CrossDatasetReferenceComponents | undefined
-      icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
       to: {
         type: string
         title?: string
@@ -439,6 +457,12 @@ export declare function interpolationVariables(
           mapWith?: string
         }[]
       }[]
+      icon?: ReactNode | ComponentType
+      options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: CrossDatasetReferenceComponents | undefined
+      deprecated?: DeprecatedProperty | undefined
       weak?: boolean | undefined
       dataset: string
       studioUrl?: ((document: {id: string; type?: string}) => string | null) | undefined
@@ -452,17 +476,17 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: ReferenceOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
       to: {
         type: string
         title?: string
         icon?: ComponentType
         preview?: PreviewConfig
       }[]
+      icon?: ReactNode | ComponentType
+      options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      deprecated?: DeprecatedProperty | undefined
       weak?: boolean | undefined
       studioUrl?: string | ((document: {id: string; type?: string}) => string | null) | undefined
       resourceType: string
@@ -483,35 +507,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: SlugOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: SlugComponents | undefined
       icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
-    }
-  | {
-      of: unknown[]
-      type: 'text'
-      name?: string | undefined
-      validation?:
-        | (ValidationBuilder<TextRule, string> &
-            (
-              | false
-              | Rule
-              | SchemaValidationValue[]
-              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
-            ))
-        | undefined
-      readOnly?: ConditionalProperty
-      placeholder?: string | undefined
-      rows?: number | undefined
-      title?: string | undefined
+      options?: SlugOptions | undefined
       description?: (string | React.JSX.Element) | undefined
-      options?: TextOptions | undefined
       initialValue?: InitialValueProperty<any, any>
-      components?: TextComponents | undefined
-      icon?: ReactNode | ComponentType
+      components?: SlugComponents | undefined
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -530,11 +530,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: UrlOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: UrlComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -553,11 +553,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: EmailOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: EmailComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -567,9 +567,10 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: unknown
       description?: (string | React.JSX.Element) | undefined
       preview?: PreviewConfig | undefined
-      options?: unknown
       initialValue?: InitialValueProperty<any, any>
       components?:
         | {
@@ -583,7 +584,6 @@ export declare function interpolationVariables(
             preview?: ComponentType<any>
           }
         | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
 

package/dist/index.d.ts

@@ -107,11 +107,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: StringOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: StringComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -130,11 +130,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: NumberOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: NumberComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -152,11 +152,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: BooleanOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: BooleanComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -175,14 +175,14 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       groups?: FieldGroupDefinition[] | undefined
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: ObjectOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields: FieldDefinition[]
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: ObjectOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: ObjectComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -200,20 +200,69 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: BlockOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?:
         | {
             block?: ComponentType<BlockProps>
           }
         | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
       styles?: BlockStyleDefinition[] | undefined
       lists?: BlockListDefinition[] | undefined
       marks?: BlockMarksDefinition | undefined
     }
+  | {
+      of: unknown[]
+      type: 'image'
+      name?: string | undefined
+      validation?:
+        | (ValidationBuilder<ImageRule, ImageValue> &
+            (
+              | false
+              | Rule
+              | SchemaValidationValue[]
+              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
+            ))
+        | undefined
+      readOnly?: ConditionalProperty
+      title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: ImageOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      fields?: FieldDefinition[] | undefined
+      fieldsets?: FieldsetDefinition[] | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: ImageComponents | undefined
+      renderMembers?: ObjectRenderMembersCallback | undefined
+      deprecated?: DeprecatedProperty | undefined
+    }
+  | {
+      of: unknown[]
+      type: 'text'
+      name?: string | undefined
+      validation?:
+        | (ValidationBuilder<TextRule, string> &
+            (
+              | false
+              | Rule
+              | SchemaValidationValue[]
+              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
+            ))
+        | undefined
+      readOnly?: ConditionalProperty
+      placeholder?: string | undefined
+      rows?: number | undefined
+      title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: TextOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: TextComponents | undefined
+      deprecated?: DeprecatedProperty | undefined
+    }
   | {
       of: unknown[]
       type: 'array'
@@ -229,11 +278,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: ArrayOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: (ArrayOfObjectsComponents | ArrayOfPrimitivesComponents) | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -252,11 +301,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: DateOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DateComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -275,11 +324,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: DatetimeOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DatetimeComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -298,14 +347,14 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       groups?: FieldGroupDefinition[] | undefined
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: DocumentOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields: FieldDefinition[]
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: DocumentOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: DocumentComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
       liveEdit?: boolean | undefined
       orderings?: SortOrdering[] | undefined
@@ -334,14 +383,14 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: FileOptions | undefined
       description?: (string | React.JSX.Element) | undefined
       fields?: ObjectDefinition['fields'] | undefined
       fieldsets?: FieldsetDefinition[] | undefined
-      options?: FileOptions | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: FileComponents | undefined
       renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -359,36 +408,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: GeopointOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: GeopointComponents | undefined
       icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
-    }
-  | {
-      of: unknown[]
-      type: 'image'
-      name?: string | undefined
-      validation?:
-        | (ValidationBuilder<ImageRule, ImageValue> &
-            (
-              | false
-              | Rule
-              | SchemaValidationValue[]
-              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
-            ))
-        | undefined
-      readOnly?: ConditionalProperty
-      title?: string | undefined
+      options?: GeopointOptions | undefined
       description?: (string | React.JSX.Element) | undefined
-      fields?: FieldDefinition[] | undefined
-      fieldsets?: FieldsetDefinition[] | undefined
-      options?: ImageOptions | undefined
       initialValue?: InitialValueProperty<any, any>
-      components?: ImageComponents | undefined
-      renderMembers?: ObjectRenderMembersCallback | undefined
-      icon?: ReactNode | ComponentType
+      components?: GeopointComponents | undefined
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -406,13 +430,13 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      to: ReferenceTo
+      icon?: ReactNode | ComponentType
       options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: ReferenceComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
-      to: ReferenceTo
       weak?: boolean | undefined
     }
   | {
@@ -422,12 +446,6 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: ReferenceOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: CrossDatasetReferenceComponents | undefined
-      icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
       to: {
         type: string
         title?: string
@@ -439,6 +457,12 @@ export declare function interpolationVariables(
           mapWith?: string
         }[]
       }[]
+      icon?: ReactNode | ComponentType
+      options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      components?: CrossDatasetReferenceComponents | undefined
+      deprecated?: DeprecatedProperty | undefined
       weak?: boolean | undefined
       dataset: string
       studioUrl?: ((document: {id: string; type?: string}) => string | null) | undefined
@@ -452,17 +476,17 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: ReferenceOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
       to: {
         type: string
         title?: string
         icon?: ComponentType
         preview?: PreviewConfig
       }[]
+      icon?: ReactNode | ComponentType
+      options?: ReferenceOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
+      initialValue?: InitialValueProperty<any, any>
+      deprecated?: DeprecatedProperty | undefined
       weak?: boolean | undefined
       studioUrl?: string | ((document: {id: string; type?: string}) => string | null) | undefined
       resourceType: string
@@ -483,35 +507,11 @@ export declare function interpolationVariables(
         | undefined
       readOnly?: ConditionalProperty
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
-      options?: SlugOptions | undefined
-      initialValue?: InitialValueProperty<any, any>
-      components?: SlugComponents | undefined
       icon?: ReactNode | ComponentType
-      deprecated?: DeprecatedProperty | undefined
-    }
-  | {
-      of: unknown[]
-      type: 'text'
-      name?: string | undefined
-      validation?:
-        | (ValidationBuilder<TextRule, string> &
-            (
-              | false
-              | Rule
-              | SchemaValidationValue[]
-              | ((rule: Rule, context?: ValidationContext) => SchemaValidationValue)
-            ))
-        | undefined
-      readOnly?: ConditionalProperty
-      placeholder?: string | undefined
-      rows?: number | undefined
-      title?: string | undefined
+      options?: SlugOptions | undefined
       description?: (string | React.JSX.Element) | undefined
-      options?: TextOptions | undefined
       initialValue?: InitialValueProperty<any, any>
-      components?: TextComponents | undefined
-      icon?: ReactNode | ComponentType
+      components?: SlugComponents | undefined
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -530,11 +530,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: UrlOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: UrlComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -553,11 +553,11 @@ export declare function interpolationVariables(
       readOnly?: ConditionalProperty
       placeholder?: string | undefined
       title?: string | undefined
-      description?: (string | React.JSX.Element) | undefined
+      icon?: ReactNode | ComponentType
       options?: EmailOptions | undefined
+      description?: (string | React.JSX.Element) | undefined
       initialValue?: InitialValueProperty<any, any>
       components?: EmailComponents | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
   | {
@@ -567,9 +567,10 @@ export declare function interpolationVariables(
       validation?: SchemaValidationValue
       readOnly?: ConditionalProperty
       title?: string | undefined
+      icon?: ReactNode | ComponentType
+      options?: unknown
       description?: (string | React.JSX.Element) | undefined
       preview?: PreviewConfig | undefined
-      options?: unknown
       initialValue?: InitialValueProperty<any, any>
       components?:
         | {
@@ -583,7 +584,6 @@ export declare function interpolationVariables(
             preview?: ComponentType<any>
           }
         | undefined
-      icon?: ReactNode | ComponentType
       deprecated?: DeprecatedProperty | undefined
     }
 

package/dist/index.js

@@ -1,15 +1,45 @@
-import { TagIcon } from "@sanity/icons";
-import { defineArrayMember, defineField } from "sanity";
+import { SearchIcon, TagIcon } from "@sanity/icons";
+import { set, unset, defineArrayMember, defineField } from "sanity";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Box, Text } from "@sanity/ui";
+import { Box, Text, Card, Autocomplete } from "@sanity/ui";
+import { useId, useCallback } from "react";
 function VariableKeyField(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: props.children });
 }
 function createVariableKeyInput(variables) {
+  const options = variables.map((variable) => ({
+    value: variable.id,
+    name: variable.name,
+    description: variable.description
+  }));
   return function(props) {
-    const selectedVariable = variables.find((variable) => variable.id === props.value);
+    const autocompleteId = useId(), selectedVariable = variables.find((variable) => variable.id === props.value), handleChange = useCallback(
+      (selectedValue) => {
+        props.onChange(selectedValue ? set(selectedValue) : unset());
+      },
+      [props]
+    ), filterOption = useCallback((query, option) => option.name.toLowerCase().includes(query.toLowerCase()), []), renderOption = useCallback((option) => /* @__PURE__ */ jsxs(Card, { as: "button", padding: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: option.name }),
+      option.description && /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Text, { size: 0, muted: !0, children: option.description }) })
+    ] }), []), renderValue = useCallback((_value, option) => option ? option.name : options.find((candidate) => candidate.value === _value)?.name ?? _value, []);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      props.renderDefault(props),
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          id: autocompleteId,
+          options,
+          value: typeof props.value == "string" ? props.value : void 0,
+          onChange: handleChange,
+          filterOption,
+          renderOption,
+          renderValue,
+          openButton: !0,
+          icon: SearchIcon,
+          placeholder: "Search variables...",
+          fontSize: 1,
+          padding: 3
+        }
+      ),
       selectedVariable?.description && /* @__PURE__ */ jsx(Box, { marginTop: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: selectedVariable.description }) })
     ] });
   };
@@ -38,12 +68,6 @@ function interpolationVariables(variables, block) {
         name: "variableKey",
         title: "Variable",
         type: "string",
-        options: {
-          list: variables.map((variable) => ({
-            title: variable.name,
-            value: variable.id
-          }))
-        },
         validation: (rule) => rule.required(),
         components: {
           field: VariableKeyField,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {Box, Text} from '@sanity/ui'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  return function VariableKeyInput(props: InputProps) {\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    return (\n      <>\n        {props.renderDefault(props)}\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        options: {\n          list: variables.map((variable) => ({\n            title: variable.name,\n            value: variable.id,\n          })),\n        },\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":[],"mappings":";;;;AAIO,SAAS,iBAAiB,OAAmB;AAClD,SAAO,oBAAA,UAAA,EAAG,gBAAM,SAAA,CAAS;AAC3B;AAEO,SAAS,uBAAuB,WAAoC;AACzE,SAAO,SAA0B,OAAmB;AAClD,UAAM,mBAAmB,UAAU,KAAK,CAAC,aAAa,SAAS,OAAO,MAAM,KAAK;AAEjF,WACE,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,MAAM,cAAc,KAAK;AAAA,MACzB,kBAAkB,eACjB,oBAAC,KAAA,EAAI,WAAW,GACd,UAAA,oBAAC,MAAA,EAAK,MAAM,GAAG,OAAK,IACjB,UAAA,iBAAiB,aACpB,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEO,SAAS,0BAA0B,WAAoC;AAC5E,SAAO,SAA6B,OAAmB;AAErD,UAAM,cADQ,MAAM,OACO,aACrB,WAAW,UAAU,KAAK,CAAC,cAAc,UAAU,OAAO,WAAW;AAE3E,WAAO,MAAM,cAAc;AAAA,MACzB,GAAG;AAAA,MACH,eAAe,MACb,oBAAC,KAAA,EAAI,SAAS,GACZ,UAAA,oBAAC,MAAA,EAAK,MAAM,GAAG,QAAO,UACnB,UAAA,UAAU,QAAQ,eAAe,mBACpC,EAAA,CACF;AAAA,IAAA,CAEH;AAAA,EACH;AACF;AClCO,MAAM,uBAAuB;AAG7B,SAAS,uBACd,WACA,OACA;AACA,QAAM,eAAe,kBAAkB;AAAA,IACrC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,MACP,OAAO,EAAC,OAAO,EAAA;AAAA,IAAC;AAAA,IAElB,QAAQ;AAAA,MACN,YAAY;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,MAAM,UAAU,IAAI,CAAC,cAAc;AAAA,YACjC,OAAO,SAAS;AAAA,YAChB,OAAO,SAAS;AAAA,UAAA,EAChB;AAAA,QAAA;AAAA,QAEJ,YAAY,CAAC,SAAS,KAAK,SAAA;AAAA,QAC3B,YAAY;AAAA,UACV,OAAO;AAAA,UACP,OAAO,uBAAuB,SAAS;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IAAA;AAAA,IAEH,YAAY;AAAA,MACV,aAAa,0BAA0B,SAAS;AAAA,IAAA;AAAA,EAClD,CACD,GAEK,YAAY,SAAS,kBAAkB,EAAC,MAAM,SAAQ;AAE5D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI,CAAC,GAAK,UAA+B,MAAM,CAAA,GAAK,YAAY;AAAA,EAAA;AAEpE;"}
+{"version":3,"file":"index.js","sources":["../src/components/VariableInlineBlock.tsx","../src/interpolationVariables.ts"],"sourcesContent":["import {SearchIcon} from '@sanity/icons'\nimport {Autocomplete, Box, Card, Text} from '@sanity/ui'\nimport {useCallback, useId} from 'react'\nimport {set, unset} from 'sanity'\nimport type {BlockProps, FieldProps, InputProps} from 'sanity'\nimport type {InterpolationVariable} from '../types'\n\ninterface VariableOption {\n  value: string\n  name: string\n  description?: string\n}\n\nexport function VariableKeyField(props: FieldProps) {\n  return <>{props.children}</>\n}\n\nexport function createVariableKeyInput(variables: InterpolationVariable[]) {\n  const options: VariableOption[] = variables.map((variable) => ({\n    value: variable.id,\n    name: variable.name,\n    description: variable.description,\n  }))\n\n  return function VariableKeyInput(props: InputProps) {\n    const autocompleteId = useId()\n    const selectedVariable = variables.find((variable) => variable.id === props.value)\n\n    const handleChange = useCallback(\n      (selectedValue: string) => {\n        props.onChange(selectedValue ? set(selectedValue) : unset())\n      },\n      [props],\n    )\n\n    const filterOption = useCallback((query: string, option: VariableOption) => {\n      return option.name.toLowerCase().includes(query.toLowerCase())\n    }, [])\n\n    const renderOption = useCallback((option: VariableOption) => {\n      return (\n        <Card as=\"button\" padding={3}>\n          <Text size={1} weight=\"medium\">\n            {option.name}\n          </Text>\n          {option.description && (\n            <Box marginTop={2}>\n              <Text size={0} muted>\n                {option.description}\n              </Text>\n            </Box>\n          )}\n        </Card>\n      )\n    }, [])\n\n    const renderValue = useCallback((_value: string, option?: VariableOption) => {\n      if (option) return option.name\n      const matchedOption = options.find((candidate) => candidate.value === _value)\n      return matchedOption?.name ?? _value\n    }, [])\n\n    return (\n      <>\n        <Autocomplete\n          id={autocompleteId}\n          options={options}\n          value={typeof props.value === 'string' ? props.value : undefined}\n          onChange={handleChange}\n          filterOption={filterOption}\n          renderOption={renderOption}\n          renderValue={renderValue}\n          openButton\n          icon={SearchIcon}\n          placeholder=\"Search variables...\"\n          fontSize={1}\n          padding={3}\n        />\n        {selectedVariable?.description && (\n          <Box marginTop={2}>\n            <Text size={1} muted>\n              {selectedVariable.description}\n            </Text>\n          </Box>\n        )}\n      </>\n    )\n  }\n}\n\nexport function createVariableInlineBlock(variables: InterpolationVariable[]) {\n  return function VariableInlineBlock(props: BlockProps) {\n    const value = props.value as {variableKey?: string}\n    const variableKey = value?.variableKey\n    const variable = variables.find((candidate) => candidate.id === variableKey)\n\n    return props.renderDefault({\n      ...props,\n      renderPreview: () => (\n        <Box padding={2}>\n          <Text size={0} weight=\"medium\">\n            {variable?.name ?? variableKey ?? 'Select variable'}\n          </Text>\n        </Box>\n      ),\n    })\n  }\n}\n","import {TagIcon} from '@sanity/icons'\nimport {defineArrayMember, defineField} from 'sanity'\nimport {\n  createVariableInlineBlock,\n  createVariableKeyInput,\n  VariableKeyField,\n} from './components/VariableInlineBlock'\nimport type {InterpolationVariable} from './types'\n\n/** @public */\nexport const VARIABLE_TYPE_PREFIX = 'pteInterpolationVariable'\n\n/** @public */\nexport function interpolationVariables(\n  variables: InterpolationVariable[],\n  block?: ReturnType<typeof defineArrayMember>,\n) {\n  const variableType = defineArrayMember({\n    type: 'object',\n    name: VARIABLE_TYPE_PREFIX,\n    title: 'Variable',\n    icon: TagIcon,\n    options: {\n      modal: {width: 0},\n    },\n    fields: [\n      defineField({\n        name: 'variableKey',\n        title: 'Variable',\n        type: 'string',\n        validation: (rule) => rule.required(),\n        components: {\n          field: VariableKeyField,\n          input: createVariableKeyInput(variables),\n        },\n      }),\n    ],\n    components: {\n      inlineBlock: createVariableInlineBlock(variables),\n    },\n  })\n\n  const baseBlock = block ?? defineArrayMember({type: 'block'})\n\n  return {\n    ...baseBlock,\n    of: [...((baseBlock as {of?: unknown[]}).of ?? []), variableType],\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-pte-interpolation",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Sanity Studio plugin for interpolating values into Portable Text Editor fields",

package/src/__tests__/VariableInlineBlock.test.tsx

@@ -4,6 +4,15 @@ import {createVariableInlineBlock, createVariableKeyInput} from '../components/V
 import type {BlockProps, InputProps} from 'sanity'
 import type {InterpolationVariable} from '../types'
 
+vi.mock('react', async () => {
+  const actual = await vi.importActual('react')
+  return {
+    ...actual,
+    useId: () => 'test-autocomplete-id',
+    useCallback: (callback: unknown) => callback,
+  }
+})
+
 const testVariables: InterpolationVariable[] = [
   {id: 'firstName', name: 'First name', description: 'First name of the recipient'},
   {id: 'email', name: 'Email address'},
@@ -19,6 +28,21 @@ function findTextInElement(element: unknown): string[] {
   return findTextInElement(children)
 }
 
+function findPropInElement(element: unknown, propName: string): unknown {
+  if (!element || typeof element !== 'object') return undefined
+  const el = element as {props?: Record<string, unknown>}
+  if (!el.props) return undefined
+  if (propName in el.props) return el.props[propName]
+  const {children} = el.props
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const found = findPropInElement(child, propName)
+      if (found !== undefined) return found
+    }
+  }
+  return findPropInElement(children, propName)
+}
+
 describe('createVariableInlineBlock', () => {
   function captureRenderPreview(variableKey: string | undefined): ReactElement | undefined {
     const VariableInlineBlock = createVariableInlineBlock(testVariables)
@@ -54,7 +78,7 @@ describe('createVariableKeyInput', () => {
     const VariableKeyInput = createVariableKeyInput(testVariables)
     return VariableKeyInput({
       value,
-      renderDefault: vi.fn(() => null),
+      onChange: vi.fn(),
     } as unknown as InputProps) as ReactElement
   }
 
@@ -63,10 +87,22 @@ describe('createVariableKeyInput', () => {
   })
 
   it('does not include description when the selected variable has none', () => {
-    expect(findTextInElement(renderInput('email'))).toHaveLength(0)
+    const element = renderInput('email')
+    const allText = findTextInElement(element)
+    const textsOutsideAutocomplete = allText.filter((text) => text !== 'Search variables...')
+    expect(textsOutsideAutocomplete).toHaveLength(0)
   })
 
   it('does not include description when no variable is selected', () => {
-    expect(findTextInElement(renderInput(undefined))).toHaveLength(0)
+    const element = renderInput(undefined)
+    const allText = findTextInElement(element)
+    const textsOutsideAutocomplete = allText.filter((text) => text !== 'Search variables...')
+    expect(textsOutsideAutocomplete).toHaveLength(0)
+  })
+
+  it('renders a search placeholder', () => {
+    const element = renderInput(undefined)
+    const placeholder = findPropInElement(element, 'placeholder')
+    expect(placeholder).toBe('Search variables...')
   })
 })

package/src/__tests__/interpolationVariables.test.ts

@@ -39,7 +39,7 @@ describe('interpolationVariables', () => {
     expect(ofArray[0].icon).toBeDefined()
   })
 
-  it('should have a variableKey string field with options.list matching the provided variables', () => {
+  it('should have a variableKey string field without options.list', () => {
     const result = interpolationVariables(testVariables)
     const ofArray = result.of as Array<{fields?: Array<Record<string, unknown>>}>
     const fields = ofArray[0].fields
@@ -48,13 +48,8 @@ describe('interpolationVariables', () => {
     expect(fields?.[0]).toMatchObject({
       name: 'variableKey',
       type: 'string',
-      options: {
-        list: [
-          {title: 'First name', value: 'firstName'},
-          {title: 'Email address', value: 'email'},
-        ],
-      },
     })
+    expect((fields?.[0] as Record<string, unknown>)?.options).toBeUndefined()
   })
 
   it('should set required validation on the variableKey field', () => {

package/src/components/VariableInlineBlock.tsx

@@ -1,18 +1,81 @@
-import {Box, Text} from '@sanity/ui'
+import {SearchIcon} from '@sanity/icons'
+import {Autocomplete, Box, Card, Text} from '@sanity/ui'
+import {useCallback, useId} from 'react'
+import {set, unset} from 'sanity'
 import type {BlockProps, FieldProps, InputProps} from 'sanity'
 import type {InterpolationVariable} from '../types'
 
+interface VariableOption {
+  value: string
+  name: string
+  description?: string
+}
+
 export function VariableKeyField(props: FieldProps) {
   return <>{props.children}</>
 }
 
 export function createVariableKeyInput(variables: InterpolationVariable[]) {
+  const options: VariableOption[] = variables.map((variable) => ({
+    value: variable.id,
+    name: variable.name,
+    description: variable.description,
+  }))
+
   return function VariableKeyInput(props: InputProps) {
+    const autocompleteId = useId()
     const selectedVariable = variables.find((variable) => variable.id === props.value)
 
+    const handleChange = useCallback(
+      (selectedValue: string) => {
+        props.onChange(selectedValue ? set(selectedValue) : unset())
+      },
+      [props],
+    )
+
+    const filterOption = useCallback((query: string, option: VariableOption) => {
+      return option.name.toLowerCase().includes(query.toLowerCase())
+    }, [])
+
+    const renderOption = useCallback((option: VariableOption) => {
+      return (
+        <Card as="button" padding={3}>
+          <Text size={1} weight="medium">
+            {option.name}
+          </Text>
+          {option.description && (
+            <Box marginTop={2}>
+              <Text size={0} muted>
+                {option.description}
+              </Text>
+            </Box>
+          )}
+        </Card>
+      )
+    }, [])
+
+    const renderValue = useCallback((_value: string, option?: VariableOption) => {
+      if (option) return option.name
+      const matchedOption = options.find((candidate) => candidate.value === _value)
+      return matchedOption?.name ?? _value
+    }, [])
+
     return (
       <>
-        {props.renderDefault(props)}
+        <Autocomplete
+          id={autocompleteId}
+          options={options}
+          value={typeof props.value === 'string' ? props.value : undefined}
+          onChange={handleChange}
+          filterOption={filterOption}
+          renderOption={renderOption}
+          renderValue={renderValue}
+          openButton
+          icon={SearchIcon}
+          placeholder="Search variables..."
+          fontSize={1}
+          padding={3}
+        />
         {selectedVariable?.description && (
           <Box marginTop={2}>
             <Text size={1} muted>

package/src/interpolationVariables.ts

@@ -28,12 +28,6 @@ export function interpolationVariables(
         name: 'variableKey',
         title: 'Variable',
         type: 'string',
-        options: {
-          list: variables.map((variable) => ({
-            title: variable.name,
-            value: variable.id,
-          })),
-        },
         validation: (rule) => rule.required(),
         components: {
           field: VariableKeyField,