Content Block Editor

A prototype using Monaco Editor to demonstrate how we could highlight 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, and (in future) provide contextual information about the blocks.

Currently, all that the application does is highlight blocks like so:

In future, we'd like to:

• [ ] Add contextual information (using registerInlayHintsProvider)
• [x] Add information about a block on hover (using registerHoverProvider)
• [x] Highlight invalid / not found blocks
• [ ] Add autocompletion (using registerCompletionItemProvider)

Additionally, we can quite easily provide Markdown highlighting using see the Markdown example here, but we need to test the basic principle with users first.

A (very rough) prototype containing much of these features can be found in the Prototype directory. The most interesting stuff can be found in the monaco.js file

Demo

You can see a demo of the work so far here