Content Block Editor

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.