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

package/src/editing/selection.ts

@@ -0,0 +1,262 @@
+export interface DocPoint {
+  blockId: string;
+  offset: number;
+}
+
+export interface DocSelection {
+  from: DocPoint;
+  to: DocPoint;
+  collapsed: boolean;
+}
+
+const EDITABLE = '.editable[data-id]';
+/** Блоки без текста (картинка, разделитель, неизвестный блок) — нередактируемые «острова» со своим id. */
+const ISLAND = '[data-block-id][contenteditable="false"]';
+
+export function getOffsetIn(editable: HTMLElement, node: Node, offset: number): number {
+  const range = globalThis.document.createRange();
+
+  range.selectNodeContents(editable);
+  range.setEnd(node, offset);
+
+  return range.toString().length;
+}
+
+function editableOf(node: Node): HTMLElement | null {
+  const element = node.nodeType === Node.ELEMENT_NODE ? (node as Element) : node.parentElement;
+
+  return element?.closest<HTMLElement>(EDITABLE) ?? null;
+}
+
+function textLength(editable: HTMLElement): number {
+  return editable.textContent?.length ?? 0;
+}
+
+function leafPoint(el: HTMLElement, where: 'start' | 'end'): DocPoint {
+  return el.matches(ISLAND)
+    ? { blockId: el.getAttribute('data-block-id')!, offset: 0 }
+    : { blockId: el.dataset.id!, offset: where === 'start' ? 0 : textLength(el) };
+}
+
+/**
+ * Точка вне текстовых блоков (на контейнере, у маркера списка и т.п.) переводится
+ * в ближайшую позицию текста: вперёд — в начало следующего блока, назад — в конец предыдущего.
+ */
+function resolveContainerPoint(
+  root: HTMLElement,
+  node: Node,
+  offset: number,
+  bias: 'forward' | 'backward',
+  includeIslands: boolean,
+): DocPoint | null {
+  /*
+   * Граница непустого выделения может приходиться на блок без текста: иначе картинку или разделитель
+   * в начале/конце документа нельзя было бы выделить, скопировать и удалить. Курсор (свёрнутое выделение) —
+   * всегда в текст.
+   */
+  const editables = [
+    ...root.querySelectorAll<HTMLElement>(includeIslands ? `${EDITABLE}, ${ISLAND}` : EDITABLE),
+  ];
+
+  if (editables.length === 0) return null;
+
+  const probe = globalThis.document.createRange();
+  probe.setStart(node, offset);
+  probe.collapse(true);
+
+  let previous: HTMLElement | null = null;
+
+  for (const editable of editables) {
+    if (probe.comparePoint(editable, 0) >= 0) {
+      if (bias === 'forward') return leafPoint(editable, 'start');
+      break;
+    }
+
+    previous = editable;
+  }
+
+  if (bias === 'backward')
+    return previous ? leafPoint(previous, 'end') : leafPoint(editables[0], 'start');
+
+  return leafPoint(editables[editables.length - 1], 'end');
+}
+
+function resolvePoint(
+  root: HTMLElement,
+  node: Node,
+  offset: number,
+  bias: 'forward' | 'backward',
+  includeIslands: boolean,
+): DocPoint | null {
+  const editable = editableOf(node);
+
+  if (editable && root.contains(editable)) {
+    return { blockId: editable.dataset.id!, offset: getOffsetIn(editable, node, offset) };
+  }
+
+  return resolveContainerPoint(root, node, offset, bias, includeIslands);
+}
+
+export function readDocSelection(root: HTMLElement): DocSelection | null {
+  const selection = globalThis.getSelection();
+
+  if (!selection || selection.rangeCount === 0) return null;
+
+  const range = selection.getRangeAt(0);
+
+  if (!root.contains(range.commonAncestorContainer)) return null;
+
+  const from = resolvePoint(
+    root,
+    range.startContainer,
+    range.startOffset,
+    'forward',
+    !range.collapsed,
+  );
+  let to = range.collapsed
+    ? from
+    : resolvePoint(root, range.endContainer, range.endOffset, 'backward', true);
+
+  if (!from || !to) return null;
+
+  // Выделение «всего документа» (Ctrl+A) включает и крайние блоки без текста.
+  const remembered = fullSelections.get(root);
+
+  if (remembered && !range.collapsed && sameRange(remembered, range)) {
+    const leaves = root.querySelectorAll<HTMLElement>(`${EDITABLE}, ${ISLAND}`);
+
+    return {
+      from: leafPoint(leaves[0], 'start'),
+      to: leafPoint(leaves[leaves.length - 1], 'end'),
+      collapsed: false,
+    };
+  }
+
+  // Выделение целиком вне текста могло «вывернуться» (from позже to) — считаем его курсором.
+  if (
+    from.blockId === to.blockId ? from.offset > to.offset : isAfter(root, from.blockId, to.blockId)
+  ) {
+    to = from;
+  }
+
+  return {
+    from,
+    to,
+    collapsed: from.blockId === to.blockId && from.offset === to.offset,
+  };
+}
+
+function isAfter(root: HTMLElement, a: string, b: string): boolean {
+  const elementA = root.querySelector(`.editable[data-id="${CSS.escape(a)}"]`);
+  const elementB = root.querySelector(`.editable[data-id="${CSS.escape(b)}"]`);
+
+  if (!elementA || !elementB) return false;
+
+  return !!(elementA.compareDocumentPosition(elementB) & Node.DOCUMENT_POSITION_PRECEDING);
+}
+
+function outsideFormula(node: Node, offset: number): { node: Node; offset: number } {
+  const host = node.parentElement?.closest('[data-inkbrick-formula]');
+  const parent = host?.parentNode;
+
+  if (!host || !parent) return { node, offset };
+
+  const index = Array.prototype.indexOf.call(parent.childNodes, host) as number;
+
+  return { node: parent, offset: offset === 0 ? index : index + 1 };
+}
+
+function findPoint(editable: HTMLElement, offset: number): { node: Node; offset: number } | null {
+  const walker = globalThis.document.createTreeWalker(editable, NodeFilter.SHOW_TEXT);
+
+  let remaining = offset;
+  let node = walker.nextNode();
+
+  while (node) {
+    const length = node.textContent?.length ?? 0;
+
+    if (remaining <= length) {
+      return outsideFormula(node, remaining);
+    }
+
+    remaining -= length;
+    node = walker.nextNode();
+  }
+
+  return null;
+}
+
+/**
+ * Выделения, которые установил `selectAllText` (по одному на корень). Пока выделение браузера совпадает с запомненным,
+ * оно считается выделением всего документа — вместе с блоками без текста в начале и в конце, которые
+ * DOM-выделением не охватить: браузер сводит концы выделения к допустимым позициям каретки.
+ */
+const fullSelections = new WeakMap<HTMLElement, Range>();
+
+function sameRange(a: Range, b: Range): boolean {
+  return (
+    a.startContainer === b.startContainer &&
+    a.startOffset === b.startOffset &&
+    a.endContainer === b.endContainer &&
+    a.endOffset === b.endOffset
+  );
+}
+
+/**
+ * Выделяет весь документ (Ctrl/Cmd+A), включая блоки без текста. Нативный Ctrl+A схлопывается в каретку,
+ * если документ начинается с нередактируемого элемента (значок callout, маркер списка), поэтому выделение
+ * строим сами. false — в документе нечего выделять.
+ */
+export function selectAllText(root: HTMLElement): boolean {
+  const editables = root.querySelectorAll<HTMLElement>(EDITABLE);
+
+  if (editables.length === 0) {
+    if (!root.querySelector(ISLAND)) return false;
+
+    const selection = globalThis.getSelection();
+    const range = globalThis.document.createRange();
+
+    range.selectNodeContents(root);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    return true;
+  }
+
+  setDomSelection(
+    editables[0],
+    0,
+    editables[editables.length - 1],
+    textLength(editables[editables.length - 1]),
+  );
+
+  const selection = globalThis.getSelection();
+
+  if (selection && selection.rangeCount > 0)
+    fullSelections.set(root, selection.getRangeAt(0).cloneRange());
+
+  return true;
+}
+
+export function setDomSelection(
+  start: HTMLElement,
+  startOffset: number,
+  end: HTMLElement = start,
+  endOffset: number = startOffset,
+): void {
+  const selection = globalThis.getSelection();
+
+  if (!selection) return;
+
+  const range = globalThis.document.createRange();
+  const from = findPoint(start, startOffset);
+  const to = start === end && startOffset === endOffset ? from : findPoint(end, endOffset);
+
+  if (from) range.setStart(from.node, from.offset);
+  else range.setStart(start, 0);
+
+  if (to) range.setEnd(to.node, to.offset);
+  else range.setEnd(end, 0);
+
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/editing/useEditorInput.ts

@@ -0,0 +1,223 @@
+import { useEffect, type RefObject } from 'react';
+
+import type { CaretResult } from '@inkbrick/engine';
+
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import { syncToolbar } from '../toolbar/syncToolbar';
+import { openFormulaAt } from '../formula/actions';
+import { handleKeyDown } from '../keymap/keymap';
+import { useEditorUI } from '../ui/EditorUIContext';
+import { applyBeforeInput } from './beforeInput';
+import { createInputActions } from './inputActions';
+import { readDocSelection } from './selection';
+
+const NAVIGATION_KEYS = new Set([
+  'ArrowLeft',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowDown',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+]);
+
+function diffText(before: string, after: string) {
+  let start = 0;
+  while (start < before.length && start < after.length && before[start] === after[start]) start++;
+
+  let endBefore = before.length;
+  let endAfter = after.length;
+  while (endBefore > start && endAfter > start && before[endBefore - 1] === after[endAfter - 1]) {
+    endBefore--;
+    endAfter--;
+  }
+
+  return { from: start, to: endBefore, text: after.slice(start, endAfter) };
+}
+
+/** События из полей ввода и кнопок внутри пользовательских компонентов редактор не перехватывает. */
+function isForeignControl(target: EventTarget | null): boolean {
+  return (
+    target instanceof Element &&
+    target.closest('input, textarea, select, button, [data-inkbrick-ignore-input]') !== null
+  );
+}
+
+/**
+ * Подключает ввод к корню документа. Все изменения текста перехватываются на beforeinput,
+ * превращаются в intent'ы движка, а выделение возвращается после перерисовки.
+ * Выделение может охватывать несколько блоков.
+ */
+export function useEditorInput(ref: RefObject<HTMLElement | null>, enabled = true) {
+  const editor = useEditor();
+  const view = useEditorView();
+  const { slashItems, keymap } = useEditorUI();
+
+  useEffect(() => {
+    const root = ref.current;
+
+    if (!root || !enabled) return;
+
+    let composing = false;
+
+    const actions = createInputActions(editor, view, root, slashItems);
+    const { exec, run, syncSlash, blockText, replaceSelection, toggleFormat, undo, redo } = actions;
+
+    const onBeforeInput = (event: InputEvent) => {
+      if (isForeignControl(event.target)) return;
+
+      // Во время IME-композиции браузер сам меняет DOM; модель синхронизируется на compositionend.
+      if (composing || event.isComposing) return;
+
+      event.preventDefault();
+
+      applyBeforeInput(event, root, editor, view, slashItems, actions);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isForeignControl(event.target)) return;
+
+      const handled = handleKeyDown(keymap, {
+        editor,
+        view,
+        root,
+        event,
+        slashItems,
+        selection: () => readDocSelection(root),
+        exec,
+        run,
+        replaceSelection,
+        undo,
+        redo,
+        toggleFormat,
+      });
+
+      // Перемещение курсора — граница шага undo: следующий набор текста начнёт новый шаг.
+      if (!handled && NAVIGATION_KEYS.has(event.key)) editor.sealHistory();
+    };
+
+    /** Блок, в котором стоит каретка. Цель событий композиции — корень (contenteditable), а не блок. */
+    const editableAtCaret = () => {
+      const node = document.getSelection()?.anchorNode ?? null;
+      const element = node instanceof Element ? node : node?.parentElement;
+      const editable = element?.closest<HTMLElement>('.editable[data-id]');
+
+      return editable && root.contains(editable) ? editable : null;
+    };
+
+    // Блок, где началась композиция: к её концу каретка у некоторых клавиатур уже может быть в другом месте.
+    let compositionBlock: HTMLElement | null = null;
+
+    const onCompositionStart = () => {
+      composing = true;
+      compositionBlock = editableAtCaret();
+      // Набираемое слово ещё не в модели, и блок считается пустым: атрибут прячет подсказку поверх текста.
+      compositionBlock?.setAttribute('data-composing', '');
+    };
+
+    /*
+     * Клавиатуры телефонов набирают почти всё композицией: слово живёт только в DOM до compositionend,
+     * поэтому здесь его нужно обязательно перенести в модель — иначе следующая перерисовка его сотрёт.
+     */
+    const onCompositionEnd = () => {
+      composing = false;
+
+      const started = compositionBlock?.isConnected ? compositionBlock : null;
+      const element = started ?? editableAtCaret();
+      const blockId = element?.dataset.id;
+
+      compositionBlock?.removeAttribute('data-composing');
+      compositionBlock = null;
+
+      if (!element || !blockId) return;
+
+      const { from, to, text } = diffText(blockText(blockId), element.textContent ?? '');
+
+      if (from === to && text === '') return;
+
+      run(() => exec<CaretResult>({ type: 'replaceText', payload: { blockId, from, to, text } }));
+    };
+
+    const prevent = (event: Event) => event.preventDefault();
+    const sealHistory = () => editor.sealHistory();
+    const closeSlash = () => view.slash.close();
+    const onPointerDown = () => {
+      view.pointerDown = true;
+      view.toolbar.closeLink();
+      view.toolbar.hide();
+    };
+    const onPointerUp = () => {
+      if (!view.pointerDown) return;
+
+      view.pointerDown = false;
+      // Выделение окончательно установится после mouseup.
+      setTimeout(() => syncToolbar(editor, view), 0);
+    };
+    const onClick = (event: MouseEvent) => {
+      const formula =
+        event.target instanceof Element ? event.target.closest('[data-inkbrick-formula]') : null;
+
+      if (formula && root.contains(formula)) {
+        event.preventDefault();
+        openFormulaAt(view, formula);
+        return;
+      }
+
+      if (!(event.ctrlKey || event.metaKey) || !(event.target instanceof Element)) return;
+
+      const anchor = event.target.closest<HTMLAnchorElement>('a[href]');
+
+      if (anchor && root.contains(anchor)) {
+        event.preventDefault();
+        window.open(anchor.href, '_blank', 'noopener,noreferrer');
+      }
+    };
+    const onSelectionChange = () => {
+      if (view.slash.getState().open) syncSlash();
+      syncToolbar(editor, view);
+    };
+    const syncIfOpen = () => {
+      if (view.slash.getState().open) syncSlash();
+      if (view.toolbar.getState().visible) syncToolbar(editor, view);
+    };
+
+    root.addEventListener('beforeinput', onBeforeInput);
+    root.addEventListener('keydown', onKeyDown);
+    root.addEventListener('compositionstart', onCompositionStart);
+    root.addEventListener('compositionend', onCompositionEnd);
+    root.addEventListener('drop', prevent);
+    root.addEventListener('pointerdown', sealHistory);
+    root.addEventListener('focusout', sealHistory);
+    root.addEventListener('pointerdown', closeSlash);
+    root.addEventListener('focusout', closeSlash);
+    root.addEventListener('pointerdown', onPointerDown);
+    root.addEventListener('click', onClick);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointercancel', onPointerUp);
+    document.addEventListener('selectionchange', onSelectionChange);
+    window.addEventListener('scroll', syncIfOpen, true);
+
+    return () => {
+      root.removeEventListener('beforeinput', onBeforeInput);
+      root.removeEventListener('keydown', onKeyDown);
+      root.removeEventListener('compositionstart', onCompositionStart);
+      root.removeEventListener('compositionend', onCompositionEnd);
+      root.removeEventListener('drop', prevent);
+      root.removeEventListener('pointerdown', sealHistory);
+      root.removeEventListener('focusout', sealHistory);
+      root.removeEventListener('pointerdown', closeSlash);
+      root.removeEventListener('focusout', closeSlash);
+      root.removeEventListener('pointerdown', onPointerDown);
+      root.removeEventListener('click', onClick);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointercancel', onPointerUp);
+      document.removeEventListener('selectionchange', onSelectionChange);
+      window.removeEventListener('scroll', syncIfOpen, true);
+      compositionBlock?.removeAttribute('data-composing');
+      view.slash.close();
+      view.toolbar.hide();
+    };
+  }, [editor, view, ref, slashItems, keymap, enabled]);
+}

package/src/editing/useSelectionState.ts

@@ -0,0 +1,46 @@
+import { useEffect, type RefObject } from 'react';
+
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import { readDocSelection } from './selection';
+
+export function useSelectionState(ref: RefObject<HTMLElement | null>) {
+  const editor = useEditor();
+  const view = useEditorView();
+
+  useEffect(() => {
+    const root = ref.current;
+
+    if (!root) return;
+
+    const update = () => {
+      const selection = readDocSelection(root);
+
+      view.selection.set(
+        selection && !selection.collapsed ? editor.blocksBetween(selection.from, selection.to) : [],
+      );
+      const caret = selection?.collapsed ? selection.from.blockId : null;
+
+      view.caret.set(caret);
+      editor.controllers.setFocusedBlock(caret);
+      view.viewport.setEdges(
+        !selection
+          ? []
+          : selection.collapsed
+            ? [selection.from.blockId]
+            : [selection.from.blockId, selection.to.blockId],
+      );
+    };
+
+    document.addEventListener('selectionchange', update);
+    update();
+
+    return () => {
+      document.removeEventListener('selectionchange', update);
+      view.selection.set([]);
+      view.caret.set(null);
+      view.viewport.setEdges([]);
+      editor.controllers.setFocusedBlock(null);
+    };
+  }, [editor, view, ref]);
+}

package/src/formula/FormulaController.ts

@@ -0,0 +1,51 @@
+export type FormulaEditorMode = 'insert' | 'edit';
+
+export interface FormulaEditorState {
+  readonly open: boolean;
+  readonly mode: FormulaEditorMode;
+  readonly blockId: string;
+  readonly from: number;
+  readonly to: number;
+  readonly latex: string;
+  readonly position: { readonly x: number; readonly y: number; readonly top: number };
+}
+
+const CLOSED: FormulaEditorState = Object.freeze({
+  open: false,
+  mode: 'insert',
+  blockId: '',
+  from: 0,
+  to: 0,
+  latex: '',
+  position: { x: 0, y: 0, top: 0 },
+});
+
+export class FormulaController {
+  private state: FormulaEditorState = CLOSED;
+
+  private readonly listeners = new Set<() => void>();
+
+  getState = (): FormulaEditorState => this.state;
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  open(state: Omit<FormulaEditorState, 'open'>): void {
+    this.set({ ...state, open: true });
+  }
+
+  close(): void {
+    if (this.state.open) this.set(CLOSED);
+  }
+
+  private set(state: FormulaEditorState): void {
+    this.state = state;
+
+    for (const listener of [...this.listeners]) listener();
+  }
+}

package/src/formula/FormulaPalette.tsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+
+import type { MessageKey } from '../i18n/en';
+import { useT } from '../hooks/useT';
+import { CARET } from './snippet';
+import { SYMBOL_CATEGORIES, type SymbolCategoryId } from './symbols';
+
+export interface FormulaPaletteProps {
+  readonly onInsert: (snippet: string) => void;
+}
+
+/**
+ * Палитра математических символов и шаблонов: вкладки по категориям (функции, структуры, греческие буквы, операторы,
+ * отношения, стрелки, множества) и сетка кнопок. Нажатие вставляет код LaTeX в поле формулы; фокус из поля не уходит.
+ * Атрибуты: `data-inkbrick-part="formula-palette"`, `formula-palette-tabs`, `formula-palette-grid`, `formula-symbol`.
+ */
+export function FormulaPalette({ onInsert }: FormulaPaletteProps) {
+  const t = useT();
+  const [active, setActive] = useState<SymbolCategoryId>('functions');
+  const category = SYMBOL_CATEGORIES.find((item) => item.id === active) ?? SYMBOL_CATEGORIES[0];
+  const name = (id: SymbolCategoryId) => t(`formula.palette.${id}` as MessageKey);
+
+  return (
+    <div
+      className="formula-palette"
+      data-inkbrick-part="formula-palette"
+      role="group"
+      aria-label={t('formula.palette.label')}
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      <div
+        className="formula-palette__tabs"
+        data-inkbrick-part="formula-palette-tabs"
+        role="tablist"
+      >
+        {SYMBOL_CATEGORIES.map((item) => (
+          <button
+            key={item.id}
+            type="button"
+            role="tab"
+            data-inkbrick-part="formula-palette-tab"
+            data-category={item.id}
+            data-active={item.id === active || undefined}
+            aria-selected={item.id === active}
+            aria-label={name(item.id)}
+            title={name(item.id)}
+            onClick={() => setActive(item.id)}
+          >
+            {item.icon}
+          </button>
+        ))}
+      </div>
+      <div
+        className="formula-palette__grid"
+        data-inkbrick-part="formula-palette-grid"
+        role="tabpanel"
+        aria-label={name(category.id)}
+      >
+        {category.items.map((item) => {
+          const code = item.title ?? item.snippet.split(CARET).join('').trim();
+
+          return (
+            <button
+              key={item.snippet}
+              type="button"
+              data-inkbrick-part="formula-symbol"
+              data-snippet={item.snippet}
+              aria-label={code}
+              title={code}
+              onClick={() => onInsert(item.snippet)}
+            >
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}