Repository: content-block-picker

A javascript tool for working with content blocks within publishing apps. (In development.)

GitHub: content-block-picker
Ownership: #govuk-publishing-content-reuse-dev owns the repo. #govuk-publishing-content-reuse-automations receives automated alerts for this repo.
Category: Utilities

README

A lightweight, drop-in textarea highlighter for highlighting content blocks within publishing apps.

Local development

Clone the repo
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Access the Demo Picker
Run tests

Unit tests
```
npm run test
```
E2E tests (using Playwright)
```
npm run e2e-test
```

Overview

The picker can be used as a “drop-in” replacement for textareas, allowing Content Block embed codes from Content Block Manager to be highlighted.

It works by overlaying a transparent textarea on top of a styled <div> that contains the highlighted content. This ensures that standard textarea behaviour is maintained while providing visual highlighting.

Usage

To initialise the picker on a textarea, simply instantiate a new ContentBlockPicker specifying the following:

baseUrl : This is the URL of the Content Block Manager API.
textarea : This is an HTMLTextArea element where users enter document body content.
insertButton : This is the button users will click to view the list of available blocks.
embedPreviewDelayMs : (optional) This is the artificial delay between a user hovering over an embed and the preview being displayed.

For example:

<button id="insert-content-block-button">Insert block</button>

<textarea class="my-textarea"></textarea>

<script>
  new ContentBlockPicker({
    baseUrl: "<%= Plek.find('content-block-manager') %>)",
    textarea: document.querySelector(".my-textarea"),
    insertButton: document.getElementById("insert-content-block-button"),
  });
</script>

The picker can show editors the content blocks available to them so they don’t need to know an embed code up front.

Clicking the button opens an overlay that fetches the blocks from GET {baseUrl}/api/blocks and lists each one by title, with its available formats nested underneath. The list is loaded fresh each time it is opened (so it always reflects the current state of the blocks) and is dismissed by pressing Escape, clicking the list, or clicking anywhere outside it.

Each textarea is wired to its own button, so multiple editors can appear on the same page. The attribute is optional — omit it and the picker behaves exactly as before.

Demo

You can see a demo of the work so far here

Future work

In future, we’d like to provide previews of the content blocks when the user hovers over an embed code.

Release Process

This package is published to npm at https://www.npmjs.com/package/content-block-picker. In order to trigger a new release we simply need to:

Bump the version number in the package.json file.

This can be done with the npm version command, e.g. npm version minor or npm version 2.1.3.
Commit and merge this change to main.

Observing the usual PR process.
Run the ‘Publish to NPM’ action in GitHub Actions.

Navigate to https://github.com/alphagov/content-block-picker/actions/workflows/publish-to-npm.yml and run a new workflow.