FrameworkJavaScript

Marker: highlight text with colour

Applies text colour or background colour to selected text. It uses <mark style="color:..."> or <mark style="background-color:...">.

Click the toolbar button to open the colour panel. It lists recently used colours first, then the Text color and Background sections. Each section has a Default swatch and nine presets. The Default swatch removes that colour.

Every colour is normalised to a CSS custom property (var(--blok-color-<name>-<text|bg>)), so themes can restyle it.

The picker offers only the nine presets. Any other CSS colour applied programmatically is snapped to the perceptually nearest preset. There is no distance threshold.

Three kinds of value pass through untouched.

A value already written as var(...).
A value the colour parser cannot read, such as the CSS named colour rebeccapurple.
The default page background colours.

Raw colours can sit on <mark> elements, for example when pasted from another editor. On load they are rewritten to the nearest preset var. So arbitrary hex values are not preserved.

Cmd/Ctrl+Shift+H does not open the picker. It re-applies the last colour picked in this session straight to the selection. On first use that is a yellow highlight (var(--blok-color-yellow-bg)). It does nothing when the selection is collapsed.

Import

TypeScript

import { Marker } from '@bloklabs/core/tools';

Save Data

TypeScript

// A colour mark on a run of the block's text field. A preset is saved by name.
// Text colour:       { "text": "red text", "marks": { "color": "red" } }
// Background colour: { "text": "highlighted text", "marks": { "background": "yellow" } }

JSON

{
  "type": "paragraph",
  "data": {
    "text": [{ "text": "highlighted text", "marks": { "background": "yellow" } }]
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Marker, Paragraph } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    // Paragraph is the default block and is not bundled with the core —
    // without it the editor starts with an "unsupported block" stub.
    paragraph: Paragraph,
    marker: Marker,
  },
});