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

package/src/editing/beforeInput.ts

@@ -0,0 +1,276 @@
+import type { CaretResult, Editor } from '@inkbrick/engine';
+
+import { availableSlashItems } from '../slash/items';
+import type { SlashMenuItem } from '../slash/types';
+import { matchInlineFormula } from '../formula/actions';
+import { deleteForwardAtEnd } from './deleteAtBoundary';
+import type { EditorView } from './EditorView';
+import type { InputActions } from './inputActions';
+import { readDocSelection } from './selection';
+
+const FORMAT_BY_INPUT_TYPE: Record<string, string> = {
+  formatBold: 'bold',
+  formatItalic: 'italic',
+  formatUnderline: 'underline',
+  formatStrikeThrough: 'strike',
+};
+
+function matchShortcut(prefix: string) {
+  if (/^#{1,6}$/.test(prefix)) {
+    return { flavour: 'block:heading', props: { level: prefix.length } };
+  }
+  if (prefix === '>') return { flavour: 'block:quote', props: {} };
+  if (prefix === '```') return { flavour: 'block:code', props: {} };
+  if (prefix === '---') return { flavour: 'block:divider', props: {} };
+  if (prefix === '$$') return { flavour: 'block:formula', props: {} };
+  if (/^[-*+]$/.test(prefix)) return { flavour: 'block:list', props: { type: 'bullet' } };
+  if (/^\d+\.$/.test(prefix)) return { flavour: 'block:list', props: { type: 'ordered' } };
+  if (prefix === '[]') return { flavour: 'block:list', props: { type: 'todo', checked: false } };
+  return null;
+}
+
+/**
+ * Превращает `beforeinput` в команды движка: ввод, Enter, удаление (символ, слово, строка), история и формат из
+ * системного меню, Markdown-шорткаты, `$формула$` и открытие slash-меню. Событие уже отменено вызывающим кодом.
+ */
+export function applyBeforeInput(
+  event: InputEvent,
+  root: HTMLElement,
+  editor: Editor,
+  view: EditorView,
+  slashItems: readonly SlashMenuItem[],
+  actions: InputActions,
+): void {
+  const {
+    exec,
+    run,
+    syncSlash,
+    blockText,
+    deleteSelection,
+    replaceSelection,
+    toggleFormat,
+    undo,
+    redo,
+  } = actions;
+  const selection = readDocSelection(root);
+
+  if (!selection) return;
+
+  const { from, collapsed } = selection;
+  const type = event.inputType;
+  const block = editor.store.getBlock(from.blockId);
+  const text = blockText(from.blockId);
+
+  switch (type) {
+    case 'insertText':
+    case 'insertReplacementText': {
+      const data = event.data ?? event.dataTransfer?.getData('text/plain') ?? '';
+
+      if (!data) return;
+
+      if (data === '$' && collapsed && block && block.flavour !== 'block:code') {
+        const formula = matchInlineFormula(text.slice(0, from.offset));
+
+        if (
+          formula &&
+          editor.can('insertFormula', {
+            blockId: from.blockId,
+            from: formula.from,
+            to: from.offset,
+            latex: formula.latex,
+          })
+        ) {
+          run(() =>
+            exec<CaretResult>({
+              type: 'insertFormula',
+              payload: {
+                blockId: from.blockId,
+                from: formula.from,
+                to: from.offset,
+                latex: formula.latex,
+              },
+            }),
+          );
+          return;
+        }
+      }
+
+      if (data === ' ' && collapsed && block?.flavour === 'block:paragraph') {
+        const shortcut = matchShortcut(text.slice(0, from.offset));
+
+        if (shortcut) {
+          run(() =>
+            editor.batch(() => {
+              exec({
+                type: 'deleteText',
+                payload: { blockId: from.blockId, from: 0, to: from.offset },
+              });
+
+              return exec<CaretResult>({
+                type: 'convertBlock',
+                payload: { blockId: from.blockId, ...shortcut, offset: 0 },
+              });
+            }),
+          );
+          return;
+        }
+      }
+
+      const opensSlash =
+        data === '/' &&
+        collapsed &&
+        !!block &&
+        block.flavour !== 'block:code' &&
+        editor.schema.getBlockSchema(block.flavour)?.inline !== false &&
+        (from.offset === 0 || /\s/.test(text[from.offset - 1])) &&
+        availableSlashItems(editor, slashItems, from.blockId).length > 0;
+
+      run(() => replaceSelection(selection, data));
+
+      if (opensSlash) {
+        view.slash.open(from.blockId, from.offset);
+        syncSlash();
+      }
+
+      return;
+    }
+
+    case 'insertParagraph':
+      run(() =>
+        editor.batch(() => {
+          const caret = collapsed
+            ? { blockId: from.blockId, offset: from.offset }
+            : deleteSelection(selection);
+
+          return caret
+            ? exec<CaretResult>({
+                type: 'splitBlock',
+                payload: { blockId: caret.blockId, offset: caret.offset },
+              })
+            : undefined;
+        }),
+      );
+      return;
+
+    case 'insertLineBreak':
+      run(() => replaceSelection(selection, '\n'));
+      return;
+
+    case 'deleteContentBackward':
+      run(() =>
+        collapsed
+          ? exec<CaretResult>({
+              type: 'deleteBackward',
+              payload: { blockId: from.blockId, offset: from.offset },
+            })
+          : deleteSelection(selection),
+      );
+      return;
+
+    case 'deleteContentForward':
+      run(() => {
+        if (!collapsed) return deleteSelection(selection);
+
+        if (from.offset < text.length) {
+          return exec<CaretResult>({
+            type: 'deleteText',
+            payload: { blockId: from.blockId, from: from.offset, to: from.offset + 1 },
+          });
+        }
+
+        return deleteForwardAtEnd(editor, from.blockId);
+      });
+      return;
+
+    case 'deleteWordBackward':
+      run(() => {
+        if (!collapsed) return deleteSelection(selection);
+
+        // Как в браузерах и Word: слово вместе с пробелами после него (пробел перед словом остаётся).
+        const start = text.slice(0, from.offset).replace(/(\S+\s*|\s+)$/, '').length;
+
+        return start < from.offset
+          ? exec<CaretResult>({
+              type: 'deleteText',
+              payload: { blockId: from.blockId, from: start, to: from.offset },
+            })
+          : exec<CaretResult>({
+              type: 'deleteBackward',
+              payload: { blockId: from.blockId, offset: from.offset },
+            });
+      });
+      return;
+
+    case 'deleteWordForward':
+      run(() => {
+        if (!collapsed) return deleteSelection(selection);
+
+        const rest = text.slice(from.offset);
+        const length = rest.length - rest.replace(/^(\s*[^\s]+|\s+)/, '').length;
+
+        return length > 0
+          ? exec<CaretResult>({
+              type: 'deleteText',
+              payload: { blockId: from.blockId, from: from.offset, to: from.offset + length },
+            })
+          : undefined;
+      });
+      return;
+
+    case 'deleteSoftLineBackward':
+    case 'deleteHardLineBackward':
+      run(() => {
+        if (!collapsed) return deleteSelection(selection);
+
+        return from.offset > 0
+          ? exec<CaretResult>({
+              type: 'deleteText',
+              payload: { blockId: from.blockId, from: 0, to: from.offset },
+            })
+          : undefined;
+      });
+      return;
+
+    case 'deleteSoftLineForward':
+    case 'deleteHardLineForward':
+      run(() => {
+        if (!collapsed) return deleteSelection(selection);
+
+        return from.offset < text.length
+          ? exec<CaretResult>({
+              type: 'deleteText',
+              payload: { blockId: from.blockId, from: from.offset, to: text.length },
+            })
+          : undefined;
+      });
+      return;
+
+    case 'deleteByCut':
+    case 'deleteByDrag':
+    case 'deleteContent':
+      if (!collapsed) run(() => deleteSelection(selection));
+      return;
+
+    case 'historyUndo':
+      undo();
+      return;
+
+    case 'historyRedo':
+      redo();
+      return;
+
+    case 'formatBold':
+    case 'formatItalic':
+    case 'formatUnderline':
+    case 'formatStrikeThrough':
+      toggleFormat(FORMAT_BY_INPUT_TYPE[type]);
+      return;
+
+    default:
+      /*
+       * insertFromPaste обрабатывается в useClipboard; drop и всё неизвестное блокируем,
+       * чтобы DOM не разошёлся с моделью.
+       */
+      return;
+  }
+}

package/src/editing/deleteAtBoundary.ts

@@ -0,0 +1,16 @@
+import type { CaretResult, Editor } from '@inkbrick/engine';
+
+/**
+ * Delete в конце блока: склеивает следующий блок с этим. Перед блоком без текста (картинка, разделитель)
+ * ничего не делает — так его не удалить случайно.
+ */
+export function deleteForwardAtEnd(editor: Editor, blockId: string): CaretResult | undefined {
+  const next = editor.document.getNextSibling(blockId);
+
+  if (!next || editor.schema.getBlockSchema(next.flavour)?.inline === false) return undefined;
+
+  return editor.dispatch({
+    type: 'deleteBackward',
+    payload: { blockId: next.id, offset: 0 },
+  }) as CaretResult | undefined;
+}

package/src/editing/inputActions.ts

@@ -0,0 +1,109 @@
+import { flushSync } from 'react-dom';
+
+import type { CaretResult, Editor, EditorIntent } from '@inkbrick/engine';
+
+import { syncSlashMenu } from '../slash/syncSlashMenu';
+import type { SlashMenuItem } from '../slash/types';
+import { toggleFormatInSelection } from '../toolbar/formatting';
+import type { EditorView } from './EditorView';
+import { readDocSelection, type DocSelection } from './selection';
+
+export interface InputActions {
+  exec<T>(intent: EditorIntent): T | undefined;
+  run(action: () => CaretResult | undefined): void;
+  syncSlash(): void;
+  blockText(blockId: string): string;
+  deleteSelection(selection: DocSelection): CaretResult | undefined;
+  insertAt(blockId: string, offset: number, text: string): CaretResult | undefined;
+  replaceSelection(selection: DocSelection, text: string): CaretResult | undefined;
+  toggleFormat(format: string): void;
+  undo(): void;
+  redo(): void;
+}
+
+export function createInputActions(
+  editor: Editor,
+  view: EditorView,
+  root: HTMLElement,
+  slashItems: readonly SlashMenuItem[],
+): InputActions {
+  const exec = <T>(intent: EditorIntent) => editor.dispatch(intent) as T | undefined;
+
+  const run = (action: () => CaretResult | undefined) => {
+    let caret: CaretResult | undefined;
+
+    flushSync(() => {
+      caret = action();
+    });
+
+    if (caret) view.placeCaret(caret.blockId, caret.offset);
+
+    syncSlash();
+  };
+
+  const syncSlash = () => syncSlashMenu(editor, view, slashItems);
+
+  const blockText = (blockId: string) => {
+    const block = editor.store.getBlock(blockId);
+    return block ? editor.engine.inline.toPlainText(block.content) : '';
+  };
+
+  const isSingleBlock = (selection: DocSelection) =>
+    selection.from.blockId === selection.to.blockId;
+
+  const deleteSelection = (selection: DocSelection) =>
+    isSingleBlock(selection)
+      ? exec<CaretResult>({
+          type: 'deleteText',
+          payload: {
+            blockId: selection.from.blockId,
+            from: selection.from.offset,
+            to: selection.to.offset,
+          },
+        })
+      : exec<CaretResult>({
+          type: 'deleteRange',
+          payload: { from: selection.from, to: selection.to },
+        });
+
+  const insertAt = (blockId: string, offset: number, text: string) =>
+    exec<CaretResult>({
+      type: 'replaceText',
+      payload: { blockId, from: offset, to: offset, text },
+    });
+
+  const replaceSelection = (selection: DocSelection, text: string) => {
+    // Обычный ввод идёт без batch: иначе набор подряд не сливается в один шаг undo.
+    if (selection.collapsed) {
+      return insertAt(selection.from.blockId, selection.from.offset, text);
+    }
+
+    return editor.batch(() => {
+      const caret = deleteSelection(selection);
+
+      return caret ? insertAt(caret.blockId, caret.offset, text) : undefined;
+    });
+  };
+
+  const toggleFormat = (format: string) => {
+    const selection = readDocSelection(root);
+
+    if (selection) toggleFormatInSelection(editor, view, selection, format);
+  };
+
+  const undo = () => run(() => editor.undo()?.caret);
+  const redo = () => run(() => editor.redo()?.caret);
+
+  return {
+    exec,
+    run,
+    syncSlash,
+    blockText,
+    deleteSelection,
+    insertAt,
+    replaceSelection,
+    toggleFormat,
+    undo,
+    redo,
+  };
+}

package/src/editing/renderCode.ts

@@ -0,0 +1,69 @@
+import type { HighlightToken } from '../code/types';
+
+const TOKEN_TYPE = /^[a-z][a-z0-9-]{0,31}$/;
+
+/**
+ * Приводит токены подсветчика к безопасному виду: границы внутри текста, без пересечений и пустых токенов,
+ * тип — короткое имя из строчных букв, цифр и дефисов (он попадает в атрибут разметки). Порядок не важен.
+ */
+export function normalizeTokens(
+  tokens: readonly HighlightToken[],
+  length: number,
+): HighlightToken[] {
+  const valid = tokens
+    .filter(
+      (token) =>
+        Number.isInteger(token.from) &&
+        Number.isInteger(token.to) &&
+        token.from >= 0 &&
+        token.to <= length &&
+        token.from < token.to &&
+        TOKEN_TYPE.test(token.type),
+    )
+    .sort((a, b) => a.from - b.from || b.to - a.to);
+
+  const result: HighlightToken[] = [];
+  let end = 0;
+
+  for (const token of valid) {
+    if (token.from >= end) {
+      result.push(token);
+      end = token.to;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Рисует текст блока кода с подсветкой: токены становятся `<span data-inkbrick-token="тип">`, остальное — текстовые узлы.
+ * Текст в DOM всегда равен тексту модели (подсветка только оборачивает его), поэтому смещения курсора и выделения
+ * считаются как обычно. Как и в `renderInline`, пустой блок и завершающий перевод строки получают `<br>`.
+ */
+export function renderCode(
+  root: HTMLElement,
+  text: string,
+  tokens: readonly HighlightToken[],
+): void {
+  const doc = globalThis.document;
+  const fragment = doc.createDocumentFragment();
+  let position = 0;
+
+  for (const token of normalizeTokens(tokens, text.length)) {
+    if (token.from > position)
+      fragment.appendChild(doc.createTextNode(text.slice(position, token.from)));
+
+    const span = doc.createElement('span');
+
+    span.setAttribute('data-inkbrick-token', token.type);
+    span.textContent = text.slice(token.from, token.to);
+    fragment.appendChild(span);
+    position = token.to;
+  }
+
+  if (position < text.length) fragment.appendChild(doc.createTextNode(text.slice(position)));
+
+  if (text === '' || text.endsWith('\n')) fragment.appendChild(doc.createElement('br'));
+
+  root.replaceChildren(fragment);
+}

package/src/editing/renderInline.ts

@@ -0,0 +1,144 @@
+import {
+  FORMULA_CHAR,
+  isColorName,
+  isSafeUrl,
+  safeCssColor,
+  type InlineNode,
+  type TextAttributes,
+} from '@inkbrick/document';
+
+import { ensureMathStyles, mountFormula, type FormulaRenderer } from '../math/renderer';
+
+export interface RenderInlineOptions {
+  readonly formulaRenderer?: FormulaRenderer | null;
+}
+
+function wrap(node: Node, tag: keyof HTMLElementTagNameMap): HTMLElement {
+  const element = globalThis.document.createElement(tag);
+  element.appendChild(node);
+  return element;
+}
+
+/**
+ * Встроенная формула — нередактируемый «объект» из одного символа. Сама формула рисуется в теневом корне: так её
+ * внутренний текст (MathML) не попадает в `Range.toString()` и `textContent`, и смещения курсора остаются равными
+ * смещениям модели (объект занимает ровно один символ — `FORMULA_CHAR` в обычном DOM).
+ */
+function renderFormulaAtom(latex: string, options: RenderInlineOptions): HTMLElement {
+  const doc = globalThis.document;
+  const host = doc.createElement('span');
+
+  host.setAttribute('data-inkbrick-formula', '');
+  host.setAttribute('data-inkbrick-part', 'formula-inline');
+  host.setAttribute('data-latex', latex);
+  host.setAttribute('contenteditable', 'false');
+  host.textContent = FORMULA_CHAR;
+
+  const view = doc.createElement('span');
+
+  view.setAttribute('part', 'math');
+
+  try {
+    const shadow = host.attachShadow({ mode: 'open' });
+
+    ensureMathStyles(shadow);
+    shadow.appendChild(view);
+  } catch {
+    // Теневой DOM недоступен: исходный код показывает CSS (`[data-state='fallback']::after`), смещения не меняются.
+    host.setAttribute('data-state', 'fallback');
+
+    return host;
+  }
+
+  mountFormula(view, latex, {
+    display: false,
+    renderer: options.formulaRenderer ?? null,
+    onSettled: (state) => host.setAttribute('data-state', state),
+  });
+  host.setAttribute('data-state', view.getAttribute('data-state') ?? 'loading');
+
+  return host;
+}
+
+function renderNode(
+  insert: string,
+  attributes: TextAttributes | undefined,
+  options: RenderInlineOptions,
+): Node {
+  let node: Node;
+
+  if (typeof attributes?.formula === 'string') {
+    const fragment = globalThis.document.createDocumentFragment();
+
+    for (let i = 0; i < insert.length; i++)
+      fragment.appendChild(renderFormulaAtom(attributes.formula, options));
+
+    node = fragment;
+  } else {
+    node = globalThis.document.createTextNode(insert);
+  }
+
+  if (!attributes) return node;
+
+  if (attributes.code) node = wrap(node, 'code');
+  if (attributes.bold) node = wrap(node, 'strong');
+  if (attributes.italic) node = wrap(node, 'em');
+  if (attributes.underline) node = wrap(node, 'u');
+  if (attributes.strike) node = wrap(node, 's');
+
+  if (typeof attributes.link === 'string' && isSafeUrl(attributes.link)) {
+    const anchor = wrap(node, 'a') as HTMLAnchorElement;
+    anchor.href = attributes.link.trim();
+    anchor.rel = 'noopener noreferrer';
+    anchor.target = '_blank';
+    node = anchor;
+  }
+
+  const color = attributes.color;
+  const background = attributes.backgroundColor;
+  const safeColor = isColorName(color) ? null : safeCssColor(color);
+  const safeBackground = isColorName(background) ? null : safeCssColor(background);
+
+  if (isColorName(color) || isColorName(background) || safeColor || safeBackground) {
+    const span = wrap(node, 'span');
+
+    if (isColorName(color)) span.setAttribute('data-inkbrick-color', color);
+    else if (safeColor) span.style.color = safeColor;
+
+    if (isColorName(background)) span.setAttribute('data-inkbrick-bg', background);
+    else if (safeBackground) span.style.backgroundColor = safeBackground;
+
+    node = span;
+  }
+
+  return node;
+}
+
+/**
+ * Перерисовывает содержимое блока из модели. Содержимое contenteditable
+ * намеренно рисуется императивно, а не через React: браузер может менять DOM
+ * (например, при IME-вводе), и React не должен с этим конфликтовать.
+ */
+export function renderInline(
+  root: HTMLElement,
+  nodes: readonly InlineNode[],
+  options: RenderInlineOptions = {},
+): void {
+  const fragment = globalThis.document.createDocumentFragment();
+
+  for (const { insert, attributes } of nodes) {
+    if (insert.length > 0) fragment.appendChild(renderNode(insert, attributes, options));
+  }
+
+  /*
+   * <br> нужен в двух случаях: пустой блок (иначе в нём нельзя поставить курсор)
+   * и завершающий перевод строки в white-space: pre-wrap (виден только с <br> после него).
+   * На смещения текста <br> не влияет: Range.toString() его игнорирует.
+   */
+  const text = nodes.map((node) => node.insert).join('');
+  if (text === '' || text.endsWith('\n')) {
+    fragment.appendChild(globalThis.document.createElement('br'));
+  }
+
+  root.replaceChildren(fragment);
+}