ФреймворкJavaScript

Маркер: подсветка текста цветом

Применяет к выделенному тексту цвет текста или цвет фона. Используется <mark style="color:..."> или <mark style="background-color:...">.

Нажмите кнопку на панели инструментов, чтобы открыть палитру. Сначала в ней идут недавно использованные цвета, затем разделы «Цвет текста» и «Фон». В каждом разделе есть образец «По умолчанию» и девять готовых цветов. Образец «По умолчанию» убирает этот цвет.

Каждый цвет нормализуется в CSS-переменную (var(--blok-color-<name>-<text|bg>)), чтобы темы могли его переопределить.

Палитра предлагает только девять предустановленных цветов. Любой другой CSS-цвет, применённый программно, притягивается к перцептивно ближайшему из них. Порога расстояния нет.

Без изменений проходят только три вида значений.

Значения, уже записанные как var(...).
Значения, которые парсер цвета прочитать не может, например именованный CSS-цвет rebeccapurple.
Цвета фона страницы по умолчанию.

Сырые цвета могут стоять на элементах <mark>, например вставленных из другого редактора. При загрузке они переписываются в ближайшую предустановленную переменную. Поэтому произвольные hex-значения не сохраняются.

Cmd/Ctrl+Shift+H палитру не открывает. Это сочетание сразу применяет к выделению последний выбранный в этой сессии цвет. При первом использовании это жёлтая подсветка (var(--blok-color-yellow-bg)). Когда выделение схлопнуто, оно ничего не делает.

Импорт

TypeScript

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

Формат данных

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" } }]
  }
}

Пример использования

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,
  },
});