Skip to main content

How to Enable Integrated Story Search Experience for PageBuilder Editor

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 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 hook to override custom field values. Let's first define a sample component that uses searchableField.

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:

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 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

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 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. The input to the searchableField 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.

In this section: