Repository: content-block-editor

A prototype using Monaco Editor to demonstrate how we could highlight content blocks within publishing apps.

• GitHub: content-block-editor
• Ownership: #govuk-publishing-content-modelling-dev owns the repo. #govuk-publishing-content-modelling-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

1. Clone the repo

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

4. Access the Example editor

5. Run tests

   Unit tests

   npm run test
   

   E2E tests (using Playwright)

   npm run e2e-test
   

Overview

The editor 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 editor on a textarea, add the data-module="content-block-highlight" attribute:

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

Then initialise the Javascript:

import { ContentBlockEditor } from "content-block-editor";

ContentBlockEditor.initAll();

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.