@arc-fusion/content-integrations - npm Package Compare versions

Comparing version 0.0.16 to 0.0.17

dist/Story/README.md

@@ -1,1 +0,82 @@
-# PageBuilder Photo Search Component
+# How to add searchable story content to your blocks
+
+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, which is part of the [ArcXP Consumer API](https://docs.arcxp.com/alc?sys_kb_id=ef5a468f47ae9d10d0cba8b5536d4390&id=kb_article_view), 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 Editor UI.
+
+## Requirements
+As a dev dependency, ensure your bundle has `@arc-fusion/cli` that’s version 2.0.9 or higher.
+
+An example feature might look like this:
+
+---
+
+**A Custom Block** - /components/features/global/small-promo.jsx
+ 
+
+```
+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. 
+
+References
+
+**Consumer API** - https://docs.arcxp.com/alc?sys_kb_id=ef5a468f47ae9d10d0cba8b5536d4390&id=kb_article_view

package.json

 {
   "name": "@arc-fusion/content-integrations",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "",
@@ -5,0 +5,0 @@ "scripts": {

src/Story/README.md

@@ -1,1 +0,82 @@
-# PageBuilder Photo Search Component
+# How to add searchable story content to your blocks
+
+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, which is part of the [ArcXP Consumer API](https://docs.arcxp.com/alc?sys_kb_id=ef5a468f47ae9d10d0cba8b5536d4390&id=kb_article_view), 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 Editor UI.
+
+## Requirements
+As a dev dependency, ensure your bundle has `@arc-fusion/cli` that’s version 2.0.9 or higher.
+
+An example feature might look like this:
+
+---
+
+**A Custom Block** - /components/features/global/small-promo.jsx
+ 
+
+```
+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. 
+
+References
+
+**Consumer API** - https://docs.arcxp.com/alc?sys_kb_id=ef5a468f47ae9d10d0cba8b5536d4390&id=kb_article_view

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

482769

increased by1.5%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes