Content Block Picker

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

Local development

1. Clone the repo

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Access the Demo Picker

5. 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, add the data-module="content-block-highlight" attribute:

<textarea data-module="content-block-highlight"></textarea>

Then initialise the Javascript:

import { ContentBlockPicker } from "content-block-picker";

ContentBlockPicker.initAll({
  baseUrl: "http://content-block-manager.dev.gov.uk",
});
// or
ContentBlockPicker.initAll({
  baseUrl: "http://content-block-manager.dev.gov.uk",
  embedPreviewDelayMs: 500,
});

Listing available blocks

The picker can show editors the content blocks available to them so they don't need to know an embed code up front. Add a trigger button and point the textarea at it with the data-cbp-insert-block-button attribute, set to the button's id:

<button id="insert-content-block-button">Insert block</button>
<textarea
  data-module="content-block-highlight"
  data-cbp-insert-block-button="insert-content-block-button"
></textarea>

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.