Shorthand Composer Element

Description

This component is inteneded to be added to pages within PB Admin and used for custom powerup settings in Composer.

Instructions

1. Install this component into your Fusion application
2. Create a new feature in your app, import this component and return it:

import React from 'react';
import Shorthand from '@imi-shared/shorthand-composer';

const ShorthandComposer = () => (
  <Shorthand />
);

ShorthandComposer.label = 'Shorthand Composer';

export default ShorthandComposer;

3. On a page in PB Admin, add this feature and publish. This component will now be available on the page you published.

Usage

Each setting for iFrame URL should contain the page url, along with a hash #EDIT, #VIEW or #SEARCH For example, if the URI for your page is shorthand, the 3 shorthand urls will be:

• http://localhost/pf/shorthand/?_website=the-national#SEARCH
• http://localhost/pf/shorthand/?_website=the-national#VIEW
• http://localhost/pf/shorthand/?_website=the-national#EDIT

The component will extract the hash key, along with the query parameteres that composer appends. It will then serve up the required edit/search/view user interface, in order for editors to add a shorthand element to an article.

To test them out, you can use this powerup testing tool.