ФреймворкJavaScript

Формула: LaTeX в строке

Отрисовывает строчные формулы (LaTeX) с помощью KaTeX. Включается сочетанием Cmd/Ctrl+Shift+E — оборачивает выделенный текст или формулу, введённую в поле поповера, в `<span data-latex="...">`. Формула — это и есть атрибут `data-latex`: разметка KaTeX выводится из него, удаляется при сохранении и создаётся заново при каждой отрисовке блока (загрузка, вставка, отмена). Поверхности только для чтения, которые никогда не монтируют редактор, — `blocksToHtml` и `<BlokView>` — показывают исходный текст формулы; передайте запись `inlineRenderers`, чтобы формулы отрисовывались и там.

Импорт

TypeScript

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

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

TypeScript

// Stored as HTML inside the block's text field. The data-latex attribute is
// the formula; the span's text is normalized to that same source on save, so
// nothing derived from KaTeX's rendering is persisted (which is why plain-text
// previews and search indexes read the formula, not its rendered fragments).
// '<span data-latex="E = mc^2">E = mc^2</span>'

JSON

// Render the math on a DOM-free view surface by plugging KaTeX in:
//   blocksToHtml(data, {
//     inlineRenderers: {
//       span: ({ attrs }) => attrs['data-latex'] === undefined
//         ? undefined
//         : katex.renderToString(attrs['data-latex'], { throwOnError: false }),
//     },
//   })
{
  "type": "paragraph",
  "data": {
    "text": "Einstein wrote <span data-latex=\"E = mc^2\">E = mc^2</span>"
  }
}

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

TypeScript

import { Blok } from '@bloklabs/core';
import { Equation, 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,
    equation: Equation,
  },
});