@inkbrick/react 0.0.0-stage → 0.1.0-alpha.0

package/src/formula/FormulaPopover.tsx

@@ -0,0 +1,181 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { MAX_FORMULA_LENGTH } from '@inkbrick/document';
+
+import type { EditorView } from '../editing/EditorView';
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import { useReadOnly } from '../hooks/useReadOnly';
+import { useT } from '../hooks/useT';
+import { Icon } from '../icons/Icon';
+import { FormulaView } from '../math/FormulaView';
+import { applyInlineFormula } from './actions';
+import { LazyFormulaPalette } from './LazyFormulaPalette';
+import { useSnippetInsert } from './snippet';
+import type { FormulaEditorState } from './FormulaController';
+
+const WIDTH = 340;
+
+function close(view: EditorView, state: FormulaEditorState) {
+  view.formula.close();
+  view.placeSelection(
+    { blockId: state.blockId, offset: state.mode === 'edit' ? state.to : state.from },
+    { blockId: state.blockId, offset: state.to },
+  );
+}
+
+function Body({ state }: { state: FormulaEditorState }) {
+  const editor = useEditor();
+  const view = useEditorView();
+  const t = useT();
+  const [draft, setDraft] = useState(state.latex);
+  const [error, setError] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const field = useRef<HTMLTextAreaElement>(null);
+  const [top, setTop] = useState<number | null>(null);
+  const insertSnippet = useSnippetInsert(field, draft, setDraft);
+
+  const settle = useCallback((result: 'ready' | 'error') => setError(result === 'error'), []);
+  const width = Math.min(WIDTH, window.innerWidth - 16);
+
+  useEffect(() => {
+    field.current?.focus();
+    field.current?.select();
+  }, []);
+
+  useLayoutEffect(() => {
+    const height = ref.current?.offsetHeight ?? 0;
+    const below = state.position.y + 8;
+
+    setTop(
+      below + height > window.innerHeight && state.position.top - height - 8 > 0
+        ? state.position.top - height - 8
+        : below,
+    );
+  }, [state.position.y, state.position.top, draft]);
+
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      if (event.target instanceof Node && ref.current?.contains(event.target)) return;
+
+      close(view, state);
+    };
+
+    document.addEventListener('pointerdown', onPointerDown, true);
+
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [view, state]);
+
+  const apply = () => {
+    if (applyInlineFormula(editor, view, state, draft)) view.formula.close();
+  };
+
+  const remove = () => {
+    if (applyInlineFormula(editor, view, state, '')) view.formula.close();
+  };
+
+  return (
+    <div
+      ref={ref}
+      className="formula-popover"
+      data-inkbrick-ui="formula-popover"
+      data-testid="formula-popover"
+      role="dialog"
+      aria-label={t('formula.inline.title')}
+      style={{
+        left: Math.max(8, Math.min(state.position.x - width / 2, window.innerWidth - width - 8)),
+        top: top ?? state.position.y + 8,
+        width,
+      }}
+      onMouseDown={(event) => {
+        if (!(event.target instanceof HTMLTextAreaElement)) event.preventDefault();
+      }}
+    >
+      <textarea
+        ref={field}
+        className="formula-popover__source"
+        data-inkbrick-part="formula-source"
+        aria-label={t('formula.source')}
+        aria-invalid={error || undefined}
+        placeholder={t('formula.placeholder')}
+        spellCheck={false}
+        rows={2}
+        maxLength={MAX_FORMULA_LENGTH}
+        value={draft}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            close(view, state);
+          } else if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            apply();
+          }
+        }}
+      />
+      <div className="formula-popover__preview" data-inkbrick-part="formula-preview">
+        <FormulaView latex={draft} showError onSettled={settle} />
+      </div>
+      <LazyFormulaPalette onInsert={insertSnippet} />
+      <div className="formula-popover__actions" data-inkbrick-part="formula-actions">
+        {state.mode === 'edit' && (
+          <button
+            type="button"
+            data-inkbrick-part="button"
+            data-danger=""
+            data-action="remove"
+            aria-label={t('formula.remove')}
+            title={t('formula.remove')}
+            onClick={remove}
+          >
+            <Icon name="trash" />
+          </button>
+        )}
+        <span className="formula-popover__spacer" />
+        <button
+          type="button"
+          data-inkbrick-part="button"
+          data-action="cancel"
+          onClick={() => close(view, state)}
+        >
+          {t('formula.cancel')}
+        </button>
+        <button
+          type="button"
+          data-inkbrick-part="button"
+          data-primary=""
+          data-action="apply"
+          disabled={state.mode === 'insert' && draft.trim() === ''}
+          onClick={apply}
+        >
+          {t('formula.apply')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function FormulaPopover() {
+  const view = useEditorView();
+  const readOnly = useReadOnly();
+  const state = useSyncExternalStore(
+    view.formula.subscribe,
+    view.formula.getState,
+    view.formula.getState,
+  );
+
+  if (!state.open || readOnly || typeof document === 'undefined') return null;
+
+  return createPortal(
+    <Body key={`${state.mode}:${state.blockId}:${state.from}:${state.to}`} state={state} />,
+    document.body,
+  );
+}

package/src/formula/LazyFormulaPalette.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState, type ComponentType } from 'react';
+
+import type { FormulaPaletteProps } from './FormulaPalette';
+
+type Palette = ComponentType<FormulaPaletteProps>;
+
+let loaded: Palette | undefined;
+let loading: Promise<Palette> | undefined;
+
+/**
+ * Загружает палитру заранее. Палитра (около 300 символов и шаблонов) не нужна для первой отрисовки, но должна
+ * быть готова к первому редактору формулы: иначе Tab из поля кода, нажатый до её появления, уводит фокус из редактора.
+ */
+export function preloadFormulaPalette(): Promise<Palette> {
+  return (loading ??= import('./FormulaPalette').then(
+    (module) => (loaded = module.FormulaPalette),
+  ));
+}
+
+/**
+ * Палитра, загружаемая по требованию. Без React.lazy: Suspense придерживает показ загруженного содержимого
+ * (~300 мс), а палитра должна появиться сразу, как только модуль готов.
+ */
+export function LazyFormulaPalette(props: FormulaPaletteProps) {
+  const [Palette, setPalette] = useState<Palette | undefined>(() => loaded);
+
+  useEffect(() => {
+    if (Palette) return;
+
+    let active = true;
+
+    void preloadFormulaPalette().then((component) => {
+      if (active) setPalette(() => component);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [Palette]);
+
+  return Palette ? <Palette {...props} /> : null;
+}

package/src/formula/actions.ts

@@ -0,0 +1,138 @@
+import { flushSync } from 'react-dom';
+
+import { FORMULA_CHAR, MAX_FORMULA_LENGTH } from '@inkbrick/document';
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import { getOffsetIn, readDocSelection } from '../editing/selection';
+import { isFormattable } from '../toolbar/formatting';
+import type { FormulaEditorState } from './FormulaController';
+
+function anchorOf(rect: DOMRect, fallback: Element | null) {
+  const box =
+    rect.width === 0 && rect.height === 0 && fallback ? fallback.getBoundingClientRect() : rect;
+
+  return { x: box.left + box.width / 2, y: box.bottom, top: box.top };
+}
+
+function selectedLatex(editor: Editor, blockId: string, from: number, to: number): string {
+  const block = editor.store.getBlock(blockId);
+
+  if (!block || from === to) return '';
+
+  const text = block.content.map((node) => node.insert).join('');
+
+  return text.slice(from, to).split(FORMULA_CHAR).join('').trim();
+}
+
+/**
+ * Открывает окошко вставки встроенной формулы на месте выделения (курсора). Выделенный текст становится
+ * заготовкой кода. Возвращает false, если вставлять некуда: выделение вне редактора, из нескольких блоков или в коде.
+ */
+export function openInlineFormula(editor: Editor, view: EditorView): boolean {
+  const root = view.getRoot();
+  const selection = root ? readDocSelection(root) : null;
+
+  if (!selection || selection.from.blockId !== selection.to.blockId) return false;
+
+  if (!isFormattable(editor, selection)) return false;
+
+  const block = editor.store.getBlock(selection.from.blockId);
+
+  if (!block || editor.schema.getBlockSchema(block.flavour)?.inline === false) return false;
+
+  const native = globalThis.getSelection();
+  const rect =
+    native && native.rangeCount > 0 ? native.getRangeAt(0).getBoundingClientRect() : new DOMRect();
+  const { blockId } = selection.from;
+
+  view.toolbar.hide();
+  view.formula.open({
+    mode: 'insert',
+    blockId,
+    from: selection.from.offset,
+    to: selection.to.offset,
+    latex: selectedLatex(editor, blockId, selection.from.offset, selection.to.offset),
+    position: anchorOf(rect, view.getElement(blockId) ?? null),
+  });
+
+  return true;
+}
+
+export function openFormulaAt(view: EditorView, host: Element): boolean {
+  const editable = host.closest<HTMLElement>('.editable[data-id]');
+  const blockId = editable?.dataset.id;
+
+  if (!editable || !blockId) return false;
+
+  const offset = getOffsetIn(editable, host, 0);
+
+  view.toolbar.hide();
+  view.formula.open({
+    mode: 'edit',
+    blockId,
+    from: offset,
+    to: offset + 1,
+    latex: host.getAttribute('data-latex') ?? '',
+    position: anchorOf(host.getBoundingClientRect(), editable),
+  });
+
+  return true;
+}
+
+/**
+ * Применяет результат окошка: вставляет формулу, меняет код существующей или (пустой код при правке) удаляет её.
+ * Курсор ставится сразу после формулы. Возвращает false, если команда отклонена (пустой код при вставке, слишком
+ * длинная формула).
+ */
+export function applyInlineFormula(
+  editor: Editor,
+  view: EditorView,
+  state: FormulaEditorState,
+  latex: string,
+): boolean {
+  const code = latex.trim();
+  const { blockId, from, to } = state;
+
+  if (code.length > MAX_FORMULA_LENGTH) return false;
+
+  if (state.mode === 'insert' && code === '') return false;
+
+  flushSync(() => {
+    if (state.mode === 'insert') {
+      editor.dispatch({ type: 'insertFormula', payload: { blockId, from, to, latex: code } });
+    } else if (code === '') {
+      editor.dispatch({ type: 'deleteText', payload: { blockId, from, to } });
+    } else {
+      editor.dispatch({
+        type: 'setInlineAttributes',
+        payload: {
+          from: { blockId, offset: from },
+          to: { blockId, offset: to },
+          attributes: { formula: code },
+        },
+      });
+    }
+  });
+
+  view.placeCaret(blockId, state.mode === 'edit' && code === '' ? from : Math.min(from, to) + 1);
+
+  return true;
+}
+
+/**
+ * Markdown-шорткат: при вводе закрывающего `$` проверяет, не набрано ли `$код$`. Код не должен быть пустым и
+ * не должен начинаться или кончаться пробелом (так «$5 и $6» остаётся ценой, а не формулой).
+ * `before` — текст блока до курсора; возвращает начало `$` и код формулы.
+ */
+export function matchInlineFormula(before: string): { from: number; latex: string } | null {
+  const start = before.lastIndexOf('$');
+
+  if (start < 0 || before[start - 1] === '\\') return null;
+
+  const latex = before.slice(start + 1);
+
+  if (latex === '' || /^\s|\s$/.test(latex) || latex.includes(FORMULA_CHAR)) return null;
+
+  return { from: start, latex };
+}

package/src/formula/snippet.ts

@@ -0,0 +1,70 @@
+import { useLayoutEffect, useRef, type RefObject } from 'react';
+
+/** Метка места курсора в шаблоне: удаляется при вставке; выделенный текст подставляется на её место. */
+export const CARET = '⌖';
+
+export interface SnippetResult {
+  readonly value: string;
+  readonly caret: number;
+}
+
+/**
+ * Вставляет шаблон в текст поля на место выделения `[start, end)`. Выделенный текст подставляется на место метки `⌖`
+ * (так `x` + «√» даёт `\sqrt{x}`), курсор встаёт на метку (после подставленного текста) или в конец шаблона.
+ */
+export function applySnippet(
+  value: string,
+  start: number,
+  end: number,
+  snippet: string,
+): SnippetResult {
+  const from = Math.max(0, Math.min(start, end, value.length));
+  const to = Math.max(from, Math.min(Math.max(start, end), value.length));
+  const selected = value.slice(from, to);
+  const marker = snippet.indexOf(CARET);
+  const body = snippet.split(CARET).join('');
+
+  if (marker < 0) {
+    return { value: value.slice(0, from) + body + value.slice(to), caret: from + body.length };
+  }
+
+  const before = snippet.slice(0, marker).split(CARET).join('');
+  const after = snippet
+    .slice(marker + 1)
+    .split(CARET)
+    .join('');
+  const inserted = before + selected + after;
+
+  return {
+    value: value.slice(0, from) + inserted + value.slice(to),
+    caret: from + before.length + selected.length,
+  };
+}
+
+export function useSnippetInsert(
+  field: RefObject<HTMLTextAreaElement | null>,
+  value: string,
+  setValue: (value: string) => void,
+) {
+  const caret = useRef<number | null>(null);
+
+  useLayoutEffect(() => {
+    const element = field.current;
+
+    if (caret.current === null || !element) return;
+
+    element.setSelectionRange(caret.current, caret.current);
+    caret.current = null;
+  }, [field, value]);
+
+  return (snippet: string) => {
+    const element = field.current;
+    const start = element?.selectionStart ?? value.length;
+    const end = element?.selectionEnd ?? value.length;
+    const result = applySnippet(value, start, end, snippet);
+
+    caret.current = result.caret;
+    setValue(result.value);
+    element?.focus();
+  };
+}

package/src/formula/symbols.ts

@@ -0,0 +1,264 @@
+import { CARET } from './snippet';
+
+export { CARET };
+
+export type SymbolCategoryId =
+  'functions' | 'structures' | 'greek' | 'operators' | 'relations' | 'arrows' | 'sets';
+
+export interface MathSymbol {
+  readonly label: string;
+  readonly snippet: string;
+  readonly title?: string;
+}
+
+export interface SymbolCategory {
+  readonly id: SymbolCategoryId;
+  readonly icon: string;
+  readonly items: readonly MathSymbol[];
+}
+
+const sym = (label: string, command: string): MathSymbol => ({ label, snippet: `${command} ` });
+
+const greek = (names: readonly [string, string][]): MathSymbol[] =>
+  names.map(([label, name]) => sym(label, `\\${name}`));
+
+const fn = (name: string, label = name): MathSymbol => ({ label, snippet: `\\${name}(${CARET})` });
+
+/**
+ * Палитра математических символов и шаблонов для редактора формул. Это данные: код LaTeX после вставки правится
+ * как обычный текст. Состав подобран из того, что поддерживает Temml/KaTeX.
+ */
+export const SYMBOL_CATEGORIES: readonly SymbolCategory[] = [
+  {
+    id: 'functions',
+    icon: 'sin',
+    items: [
+      fn('sin'),
+      fn('cos'),
+      fn('tan'),
+      fn('cot'),
+      fn('sec'),
+      fn('csc'),
+      fn('arcsin', 'asin'),
+      fn('arccos', 'acos'),
+      fn('arctan', 'atan'),
+      fn('sinh'),
+      fn('cosh'),
+      fn('tanh'),
+      fn('log'),
+      fn('ln'),
+      fn('exp'),
+      { label: 'log₍ₙ₎', snippet: `\\log_{${CARET}}`, title: '\\log_{ }' },
+      { label: 'lim', snippet: `\\lim_{${CARET} \\to \\infty}` },
+      fn('max'),
+      fn('min'),
+      fn('det'),
+      fn('gcd'),
+      fn('arg'),
+      fn('deg'),
+      { label: 'mod', snippet: '\\bmod ' },
+    ],
+  },
+  {
+    id: 'structures',
+    icon: 'a/b',
+    items: [
+      { label: 'a/b', snippet: `\\frac{${CARET}}{ }`, title: '\\frac{ }{ }' },
+      { label: '√', snippet: `\\sqrt{${CARET}}` },
+      { label: 'ⁿ√', snippet: `\\sqrt[n]{${CARET}}` },
+      { label: 'xⁿ', snippet: `^{${CARET}}`, title: '^{ }' },
+      { label: 'xₙ', snippet: `_{${CARET}}`, title: '_{ }' },
+      { label: 'xₙⁿ', snippet: `_{${CARET}}^{ }` },
+      { label: '∑', snippet: `\\sum_{i=1}^{n} ${CARET}`, title: '\\sum_{i=1}^{n}' },
+      { label: '∏', snippet: `\\prod_{i=1}^{n} ${CARET}`, title: '\\prod_{i=1}^{n}' },
+      { label: '∫', snippet: `\\int_{a}^{b} ${CARET} \\, dx`, title: '\\int_{a}^{b} \\, dx' },
+      { label: '∬', snippet: `\\iint ${CARET} \\, dA` },
+      { label: '∮', snippet: `\\oint ${CARET} \\, d\\ell` },
+      { label: 'ⁿ⁄ₖ', snippet: `\\binom{n}{k}` },
+      { label: '(a)', snippet: `\\left( ${CARET} \\right)`, title: '\\left( \\right)' },
+      { label: '[a]', snippet: `\\left[ ${CARET} \\right]`, title: '\\left[ \\right]' },
+      { label: '{a}', snippet: `\\left\\{ ${CARET} \\right\\}`, title: '\\left\\{ \\right\\}' },
+      { label: '|a|', snippet: `\\left| ${CARET} \\right|`, title: '\\left| \\right|' },
+      { label: '‖a‖', snippet: `\\left\\| ${CARET} \\right\\|`, title: '\\left\\| \\right\\|' },
+      { label: '⌊a⌋', snippet: `\\lfloor ${CARET} \\rfloor` },
+      { label: '⌈a⌉', snippet: `\\lceil ${CARET} \\rceil` },
+      { label: 'v⃗', snippet: `\\vec{${CARET}}` },
+      { label: 'ā', snippet: `\\bar{${CARET}}` },
+      { label: 'â', snippet: `\\hat{${CARET}}` },
+      { label: 'ȧ', snippet: `\\dot{${CARET}}` },
+      { label: 'a͞b', snippet: `\\overline{${CARET}}` },
+      {
+        label: '(⋮)',
+        snippet: `\\begin{pmatrix} ${CARET} & \\\\ & \\end{pmatrix}`,
+        title: 'pmatrix',
+      },
+      {
+        label: '[⋮]',
+        snippet: `\\begin{bmatrix} ${CARET} & \\\\ & \\end{bmatrix}`,
+        title: 'bmatrix',
+      },
+      {
+        label: '{⋮',
+        snippet: `\\begin{cases} ${CARET} & \\text{if } \\\\ & \\text{otherwise} \\end{cases}`,
+        title: 'cases',
+      },
+      { label: 'text', snippet: `\\text{${CARET}}` },
+    ],
+  },
+  {
+    id: 'greek',
+    icon: 'αβ',
+    items: [
+      ...greek([
+        ['α', 'alpha'],
+        ['β', 'beta'],
+        ['γ', 'gamma'],
+        ['δ', 'delta'],
+        ['ε', 'epsilon'],
+        ['ζ', 'zeta'],
+        ['η', 'eta'],
+        ['θ', 'theta'],
+        ['ι', 'iota'],
+        ['κ', 'kappa'],
+        ['λ', 'lambda'],
+        ['μ', 'mu'],
+        ['ν', 'nu'],
+        ['ξ', 'xi'],
+        ['π', 'pi'],
+        ['ρ', 'rho'],
+        ['σ', 'sigma'],
+        ['τ', 'tau'],
+        ['υ', 'upsilon'],
+        ['φ', 'phi'],
+        ['χ', 'chi'],
+        ['ψ', 'psi'],
+        ['ω', 'omega'],
+        ['ϵ', 'varepsilon'],
+        ['ϑ', 'vartheta'],
+        ['ϕ', 'varphi'],
+        ['ϱ', 'varrho'],
+        ['ς', 'varsigma'],
+        ['Γ', 'Gamma'],
+        ['Δ', 'Delta'],
+        ['Θ', 'Theta'],
+        ['Λ', 'Lambda'],
+        ['Ξ', 'Xi'],
+        ['Π', 'Pi'],
+        ['Σ', 'Sigma'],
+        ['Φ', 'Phi'],
+        ['Ψ', 'Psi'],
+        ['Ω', 'Omega'],
+      ]),
+    ],
+  },
+  {
+    id: 'operators',
+    icon: '±',
+    items: [
+      sym('±', '\\pm'),
+      sym('∓', '\\mp'),
+      sym('×', '\\times'),
+      sym('÷', '\\div'),
+      sym('·', '\\cdot'),
+      sym('∗', '\\ast'),
+      sym('∘', '\\circ'),
+      sym('⊕', '\\oplus'),
+      sym('⊗', '\\otimes'),
+      sym('∞', '\\infty'),
+      sym('∂', '\\partial'),
+      sym('∇', '\\nabla'),
+      sym('′', "'"),
+      sym('°', '^\\circ'),
+      sym('ℓ', '\\ell'),
+      sym('ℏ', '\\hbar'),
+      sym('…', '\\ldots'),
+      sym('⋯', '\\cdots'),
+      sym('⋮', '\\vdots'),
+      sym('⋱', '\\ddots'),
+      sym('†', '\\dagger'),
+      sym('%', '\\%'),
+      sym('∠', '\\angle'),
+      sym('△', '\\triangle'),
+    ],
+  },
+  {
+    id: 'relations',
+    icon: '≤',
+    items: [
+      sym('≠', '\\neq'),
+      sym('≈', '\\approx'),
+      sym('≡', '\\equiv'),
+      sym('∼', '\\sim'),
+      sym('≃', '\\simeq'),
+      sym('≅', '\\cong'),
+      sym('∝', '\\propto'),
+      sym('≤', '\\leq'),
+      sym('≥', '\\geq'),
+      sym('≪', '\\ll'),
+      sym('≫', '\\gg'),
+      sym('<', '<'),
+      sym('>', '>'),
+      sym('∈', '\\in'),
+      sym('∉', '\\notin'),
+      sym('∋', '\\ni'),
+      sym('⊂', '\\subset'),
+      sym('⊆', '\\subseteq'),
+      sym('⊃', '\\supset'),
+      sym('⊇', '\\supseteq'),
+      sym('∣', '\\mid'),
+      sym('∥', '\\parallel'),
+      sym('⊥', '\\perp'),
+      sym(':=', ':='),
+    ],
+  },
+  {
+    id: 'arrows',
+    icon: '→',
+    items: [
+      sym('→', '\\to'),
+      sym('←', '\\leftarrow'),
+      sym('↔', '\\leftrightarrow'),
+      sym('⇒', '\\Rightarrow'),
+      sym('⇐', '\\Leftarrow'),
+      sym('⇔', '\\Leftrightarrow'),
+      sym('↦', '\\mapsto'),
+      sym('↑', '\\uparrow'),
+      sym('↓', '\\downarrow'),
+      sym('⟶', '\\longrightarrow'),
+      sym('⟹', '\\Longrightarrow'),
+      sym('⇌', '\\rightleftharpoons'),
+      sym('↪', '\\hookrightarrow'),
+      sym('∴', '\\therefore'),
+      sym('∵', '\\because'),
+      sym('↗', '\\nearrow'),
+      sym('↘', '\\searrow'),
+    ],
+  },
+  {
+    id: 'sets',
+    icon: 'ℝ',
+    items: [
+      sym('∅', '\\emptyset'),
+      sym('ℕ', '\\mathbb{N}'),
+      sym('ℤ', '\\mathbb{Z}'),
+      sym('ℚ', '\\mathbb{Q}'),
+      sym('ℝ', '\\mathbb{R}'),
+      sym('ℂ', '\\mathbb{C}'),
+      sym('∪', '\\cup'),
+      sym('∩', '\\cap'),
+      sym('∖', '\\setminus'),
+      sym('∀', '\\forall'),
+      sym('∃', '\\exists'),
+      sym('∄', '\\nexists'),
+      sym('¬', '\\neg'),
+      sym('∧', '\\land'),
+      sym('∨', '\\lor'),
+      sym('⊤', '\\top'),
+      sym('⊢', '\\vdash'),
+      sym('⊨', '\\models'),
+      sym('ℵ', '\\aleph'),
+      sym('𝒫', '\\mathcal{P}'),
+      sym('𝔼', '\\mathbb{E}'),
+    ],
+  },
+];