# How to Enable Integrated Story Search Experience for PageBuilder Editor

Source: https://docs.arcxp.com/en/products/pagebuilder/pagebuilder-editor/how-to-enable-integrated-story-search-experience-for-pagebuilder-editor.html

There are times when an editor would like to curate a page to add a Story block and not have to leave the editor screen to select which story to add. A common way to enable this functionality is to create a custom field that allows the editor to enter a story ID or story URL. However, it can be burdensome to search Composer and then copy/paste the ID or URL back into the custom field.

A convenient way to integrate the search with Composer is to use the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) hook. This hook can be applied to block elements to tell the PageBuilder Editor that users should be able to search Composer for a replacement story.

## Creating a Searchable Story

The Composer story search functionality is enabled whenever a Story block element uses the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) hook to override custom field values. Let’s first define a sample component that uses [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/).

The component’s parent element must include a style of position: relative for proper button placement in the PageBuilder Editor UI.

## Requirements

- As a dev dependency, ensure your bundle has `@arc-fusion/cli` that’s version 2.0.9 or higher.

## A Custom Block - /components/features/global/small-promo.jsx

An example feature might look like this:

```javascript
import React from "react"
import PropTypes from "@arc-fusion/prop-types"
import { useEditableContent } from "fusion:content"

const SmallPromo = ({}) => {
  const { searchableField } = useEditableContent()
  return (<div {...searchableField('itemContentConfig', 'story', { contentSource: 'story-search' })} >)
}

SmallPromo.propTypes = {
  customFields: PropTypes.shape({
    itemContentConfig: PropTypes.contentConfig("ans-item").tag({
      group: "Configure Content",
      label: "Display Content Info",
    })
  })
}

export default SmallPromo
```

The values for the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) component hook maps to the following:

- **Param 1**: This maps to the component’s custom field ID associated with the contentConfig.
- **Param 2**: The type of content integration to associate with the contentConfig. In this case the value `story` will allow the component to show the story search integration.
- **Param 3**: An object, which at this time only takes a `contentSource` prop. The value should be the name of the content source for the editor preview to display the story.

## A Content Source - /content/sources/story-search.js

```javascript
const resolve = function resolve(key) {
  const website = key["arc-site"] || "east-coast-herald";
  return `/content/v4/stories/?_id=${key._id}&website=${website}`;
};

module.exports = {
  resolve,
  schemaName: "ans-item",
  params: { _id: "text", website_url: "text" },
  searchable: "story",
};
```

The **key take-aways** from this are to make sure your content source:

- Pulls a single story, not a feed.
- Uses the parameter `searchable: "story"` in the export parameters.

This feature applies the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) hook to a top level component, which allows the PageBuilder Editor to replace the desired custom fields with the content provided by the [Content API](https://dev.arcxp.com/api/public-content-retrieval/content-api/). The input to the [searchableField](https://dev.arcxp.com/pagebuilder-engine/developer-docs/consumer-api/) hook is an Object that contains a mapping of custom fields to the desired values from Composer. In this example, when a story is selected, the story `_id` custom field will be replaced with the value of the story’s ID.