A prototype using [Monaco Editor](https://microsoft.github.io/monaco-editor/) to demonstrate how we could highlight content blocks within publishing apps.
npm install content-block-editorA prototype using Monaco Editor to demonstrate how we could highlight content blocks within publishing apps.
1. Clone the repo
1. Install dependencies:
``bash`
npm install
1. Run the development server:
`bash`
npm run dev
1. Access the Example editor
1. Run tests
### Unit tests
`bash`
npm run test
### E2E tests (using Playwright)
`bash`
npm run e2e-test
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
You can see a demo of the work so far here