Фреймворк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

// Stored as HTML inside the block's text field.
// Text colour:       '<mark style="color: var(--blok-color-red-text); background-color: transparent;">red text</mark>'
// Background colour: '<mark style="background-color: var(--blok-color-yellow-bg);">highlighted text</mark>'

JSON

{
  "type": "paragraph",
  "data": {
    "text": "<mark style=\"background-color: var(--blok-color-yellow-bg);\">highlighted text</mark>"
  }
}

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

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