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

package/src/block-handle/gripGesture.ts

@@ -0,0 +1,108 @@
+import type { BlockDragApi } from './blockDrag';
+
+/** Сколько пикселей мышью нужно протянуть, чтобы клик стал переносом. */
+export const DRAG_THRESHOLD = 5;
+/** Сколько держать палец на хваталке, чтобы начать перенос. */
+export const LONG_PRESS_MS = 350;
+/** Дрожание пальца, которое ещё не считается движением до начала переноса. */
+export const TOUCH_SLOP = 10;
+
+export interface GripGestureOptions {
+  readonly onTap: () => void;
+}
+
+/**
+ * Встроенный жест хваталки поверх публичного API переноса.
+ * Мышь: протягивание дальше порога — перенос, иначе клик. Палец и перо: долгое нажатие — перенос,
+ * короткое касание — клик, сдвиг до долгого нажатия отменяет жест. Возвращает функцию отмены.
+ */
+export function startGripGesture(
+  drag: BlockDragApi,
+  blockId: string,
+  event: PointerEvent,
+  { onTap }: GripGestureOptions,
+): () => void {
+  const touch = event.pointerType === 'touch' || event.pointerType === 'pen';
+  const pointerId = event.pointerId;
+  const startX = event.clientX;
+  const startY = event.clientY;
+  let dragging = false;
+  let aborted = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const begin = () => {
+    if (dragging || aborted) return;
+
+    dragging = true;
+    drag.start(blockId);
+
+    if (touch) navigator.vibrate?.(10);
+  };
+
+  const finish = () => {
+    clearTimeout(timer);
+    document.removeEventListener('pointermove', onMove);
+    document.removeEventListener('pointerup', onUp);
+    document.removeEventListener('pointercancel', onCancel);
+    document.removeEventListener('keydown', onKey);
+  };
+
+  const onMove = (move: PointerEvent) => {
+    if (move.pointerId !== pointerId) return;
+
+    const distance = Math.hypot(move.clientX - startX, move.clientY - startY);
+
+    if (!dragging) {
+      if (touch) {
+        if (distance > TOUCH_SLOP) {
+          aborted = true;
+          finish();
+        }
+
+        return;
+      }
+
+      if (distance > DRAG_THRESHOLD) begin();
+    }
+
+    if (dragging) {
+      move.preventDefault();
+      drag.update(move.clientX, move.clientY);
+    }
+  };
+
+  const onUp = (up: PointerEvent) => {
+    if (up.pointerId !== pointerId) return;
+
+    finish();
+
+    if (dragging) drag.drop();
+    else if (!aborted) onTap();
+  };
+
+  const onCancel = (cancel: PointerEvent) => {
+    if (cancel.pointerId !== pointerId) return;
+
+    abort();
+  };
+
+  const onKey = (key: KeyboardEvent) => {
+    if (key.key === 'Escape') abort();
+  };
+
+  const abort = () => {
+    aborted = true;
+    finish();
+
+    if (dragging) drag.cancel();
+  };
+
+  if (touch) timer = setTimeout(begin, LONG_PRESS_MS);
+
+  document.addEventListener('pointermove', onMove, { passive: false });
+  document.addEventListener('pointerup', onUp);
+  document.addEventListener('pointercancel', onCancel);
+  document.addEventListener('keydown', onKey);
+
+  return abort;
+}

package/src/block-handle/types.ts

@@ -0,0 +1,65 @@
+import type {
+  CSSProperties,
+  MouseEvent as ReactMouseEvent,
+  ReactNode,
+  PointerEvent as ReactPointerEvent,
+} from 'react';
+
+import type { BaseBlock } from '@inkbrick/document';
+
+import type { DropIndicatorRect, DropPosition } from './BlockHandleController';
+
+/**
+ * Props встроенного жеста для элемента-«хваталки»: клик открывает меню, протягивание мышью
+ * или долгое нажатие пальцем переносит блок. Свой DnD может их не вешать (см. `useBlockDrag`).
+ */
+export interface GripProps {
+  readonly onPointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+  /** Долгое нажатие пальцем не должно открывать системное контекстное меню. */
+  readonly onContextMenu: (event: ReactMouseEvent<HTMLElement>) => void;
+  /** `touch-action: none`: палец на хваталке не прокручивает страницу. */
+  readonly style: CSSProperties;
+  readonly 'data-inkbrick-grip': '';
+}
+
+export interface BlockHandleProps {
+  readonly blockId: string;
+  /** Левый верхний угол блока в координатах окна (для position: fixed). */
+  readonly position: { readonly x: number; readonly y: number };
+  readonly canAdd: boolean;
+  readonly dragging: boolean;
+  readonly menuOpen: boolean;
+  readonly onAdd: () => void;
+  /** Открывает меню действий (например, по клавиатуре). Обычный клик по «хваталке» открывает его сам. */
+  readonly onOpenMenu: () => void;
+  /**
+   * Повесьте на элемент-«хваталку»: клик открывает меню, протягивание мышью или долгое нажатие пальцем
+   * переносит блок. Для своего DnD не вешайте их, а вызовите `onOpenMenu` по клику и `useBlockDrag()` для переноса.
+   */
+  readonly gripProps: GripProps;
+}
+
+export interface DropIndicatorProps {
+  readonly blockId: string;
+  readonly targetId: string;
+  readonly position: DropPosition;
+  /** Где рисовать линию, в координатах окна (для position: fixed). */
+  readonly indicator: DropIndicatorRect;
+}
+
+export interface BlockMenuAction {
+  readonly id: string;
+  readonly title: string;
+  readonly icon?: ReactNode;
+  readonly disabled?: boolean;
+  readonly danger?: boolean;
+  readonly run: () => void;
+}
+
+export interface BlockMenuProps {
+  readonly block: BaseBlock;
+  readonly position: { readonly x: number; readonly y: number };
+  readonly actions: readonly BlockMenuAction[];
+  readonly turnInto: readonly BlockMenuAction[];
+  readonly onClose: () => void;
+}

package/src/block-handle/useBlockDrag.ts

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react';
+
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import type { DragState } from './BlockHandleController';
+import { getBlockDrag, type BlockDragApi } from './blockDrag';
+
+/**
+ * API перетаскивания блоков текущего редактора: на нём строится своя система DnD
+ * (dnd-kit, pragmatic-drag-and-drop и т. п.). Объект стабилен между рендерами.
+ * Работает внутри `<EditorProvider>`, в том числе в компоненте `slots.BlockHandle`.
+ */
+export function useBlockDrag(): BlockDragApi {
+  return getBlockDrag(useEditor(), useEditorView());
+}
+
+export function useBlockDragState(): DragState | null {
+  const drag = useBlockDrag();
+
+  return useSyncExternalStore(drag.subscribe, drag.getState, drag.getState);
+}

package/src/block-handle/useBlockHandles.ts

@@ -0,0 +1,125 @@
+import { useEffect, type RefObject } from 'react';
+
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import { blockAtPoint, blockElement, hasHandle, probePoint, rowRect } from './geometry';
+
+/**
+ * Следит за указателем: показывает ручку у блока под курсором (в том числе в полосе слева от текста),
+ * на сенсорном экране — у блока, которого коснулись; закрывает меню по клику снаружи/Esc/прокрутке
+ * и скрывает ручку при наборе текста. Перетаскивание запускается из ручки (см. BlockHandleHost).
+ */
+export function useBlockHandles(ref: RefObject<HTMLElement | null>, enabled: boolean) {
+  const editor = useEditor();
+  const view = useEditorView();
+
+  useEffect(() => {
+    const root = ref.current;
+
+    if (!root || !enabled) return;
+
+    const showAt = (event: PointerEvent) => {
+      const probe = probePoint(view, event.clientX, event.clientY);
+
+      if (!probe) {
+        view.blocks.setHover(null);
+        return;
+      }
+
+      const blockId = blockAtPoint(editor, view, probe.x, probe.y);
+
+      if (!blockId) return;
+
+      const wrapper = blockElement(view, blockId);
+      const row = rowRect(view, blockId);
+
+      if (wrapper && row) {
+        view.blocks.setHover({
+          blockId,
+          x: Math.round(wrapper.getBoundingClientRect().left),
+          y: Math.round(row.top),
+        });
+      }
+    };
+
+    const onUiTarget = (event: Event) =>
+      event.target instanceof Element && !!event.target.closest('[data-inkbrick-block-ui]');
+
+    const onMove = (event: PointerEvent) => {
+      const { menu, drag } = view.blocks.getState();
+
+      // Палец «наводится» только касанием (см. onPointerUp); движение пальца — это прокрутка.
+      if (event.pointerType === 'touch') return;
+
+      if (drag || menu || view.pointerDown) return;
+
+      if (onUiTarget(event)) return;
+
+      showAt(event);
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+      if (event.pointerType === 'mouse' || onUiTarget(event)) return;
+
+      const { menu, drag } = view.blocks.getState();
+
+      if (!drag && !menu) showAt(event);
+    };
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (onUiTarget(event)) return;
+
+      view.blocks.closeMenu();
+    };
+
+    const hide = (event: Event) => {
+      // Прокрутка самого меню (оно может не помещаться в окно) не должна его закрывать.
+      if (onUiTarget(event)) return;
+      // Автопрокрутка при переносе: элемент-хваталка (в том числе у стороннего DnD) должен остаться.
+      if (view.blocks.getState().drag) return;
+
+      view.blocks.setHover(null);
+      view.blocks.closeMenu();
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') view.blocks.closeMenu();
+
+      if (view.blocks.getState().hover && !event.metaKey && !event.ctrlKey)
+        view.blocks.setHover(null);
+    };
+
+    const onLeave = (event: PointerEvent) => {
+      // Палец «уходит» со страницы после каждого касания — ручка должна остаться.
+      if (event.pointerType === 'touch') return;
+      if (!event.relatedTarget) view.blocks.setHover(null);
+    };
+
+    // Блок исчез из документа (удалён, undo) — ручка и меню не должны остаться висеть.
+    const unsubscribe = editor.store.subscribe(() => {
+      const { hover, menu } = view.blocks.getState();
+
+      if (hover && !hasHandle(editor, hover.blockId)) view.blocks.setHover(null);
+      if (menu && !hasHandle(editor, menu.blockId)) view.blocks.closeMenu();
+    });
+
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('pointerup', onPointerUp);
+    document.addEventListener('pointerout', onLeave);
+    document.addEventListener('keydown', onKeyDown);
+    window.addEventListener('scroll', hide, true);
+
+    return () => {
+      unsubscribe();
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('pointerup', onPointerUp);
+      document.removeEventListener('pointerout', onLeave);
+      document.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('scroll', hide, true);
+      view.blocks.setHover(null);
+      view.blocks.closeMenu();
+    };
+  }, [editor, view, ref, enabled]);
+}

package/src/blocks/BlockChildren.tsx

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+
+import { DocumentRendererContext } from '../renderer/DocumentRenderer';
+import { useChildren } from '../hooks/useChildren';
+
+import type { BlockId } from '@inkbrick/document';
+
+/**
+ * Выводит дочерние блоки `id` — для пользовательских компонентов-контейнеров. Как именно (все сразу или только
+ * видимые), решает рендерер документа (`<DocumentView renderer>`).
+ */
+export function BlockChildren({ id }: { readonly id: BlockId }) {
+  const children = useChildren(id);
+  const { ChildList } = useContext(DocumentRendererContext);
+
+  return <ChildList parentId={id} ids={children} />;
+}

package/src/blocks/BlockProps.ts

@@ -0,0 +1,5 @@
+import type { BlockViewProps } from '../ui/types';
+
+/** Props встроенных компонентов; пользовательским компонентам доступны также `editor`, `selected` и `readOnly`. */
+export type BlockProps = Pick<BlockViewProps, 'block'> &
+  Partial<Pick<BlockViewProps, 'selected' | 'readOnly'>>;

package/src/blocks/CalloutBlock.tsx

@@ -0,0 +1,61 @@
+import { CALLOUT_TONES, getBlockAlign } from '@inkbrick/document';
+
+import { useT } from '../hooks/useT';
+import { Icon, type IconName } from '../icons/Icon';
+
+import { Editable } from './Editable';
+import type { BlockViewProps } from '../ui/types';
+
+const ICONS: Record<(typeof CALLOUT_TONES)[number], IconName> = {
+  info: 'info',
+  warning: 'warning',
+  success: 'success',
+  danger: 'danger',
+};
+
+type Tone = (typeof CALLOUT_TONES)[number];
+
+const isTone = (value: unknown): value is Tone => CALLOUT_TONES.includes(value as Tone);
+
+export function CalloutBlock({ block, editor, selected, readOnly }: BlockViewProps) {
+  const t = useT();
+  const tone: Tone = isTone(block.props.tone) ? block.props.tone : 'info';
+  const icon =
+    typeof block.props.icon === 'string' && block.props.icon !== '' ? (
+      block.props.icon
+    ) : (
+      <Icon name={ICONS[tone]} />
+    );
+
+  const nextTone = CALLOUT_TONES[(CALLOUT_TONES.indexOf(tone) + 1) % CALLOUT_TONES.length];
+
+  return (
+    <div
+      className="block block-callout"
+      data-inkbrick-block="callout"
+      data-align={getBlockAlign(block) ?? 'left'}
+      data-tone={tone}
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+    >
+      <button
+        type="button"
+        className="callout-icon"
+        data-inkbrick-part="icon"
+        contentEditable={false}
+        disabled={readOnly}
+        aria-label={t('block.callout.label', { tone: t(`block.callout.tone.${tone}`) })}
+        title={t('block.callout.change')}
+        onClick={() =>
+          editor.dispatch({
+            type: 'setBlockProps',
+            payload: { blockId: block.id, props: { tone: nextTone } },
+          })
+        }
+      >
+        {icon}
+      </button>
+      <Editable block={block} />
+    </div>
+  );
+}

package/src/blocks/CodeBlock.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useT } from '../hooks/useT';
+import { Icon } from '../icons/Icon';
+import { Editable } from './Editable';
+import type { BlockViewProps } from '../ui/types';
+
+/**
+ * Языки в выпадающем списке. Редактор хранит только `language`; подсветку делает `highlighter` провайдера
+ * (по умолчанию встроенный — он знает эти языки и их псевдонимы).
+ */
+export const CODE_LANGUAGES = [
+  'plain',
+  'typescript',
+  'javascript',
+  'json',
+  'html',
+  'css',
+  'python',
+  'bash',
+  'sql',
+  'go',
+  'rust',
+  'java',
+  'c',
+  'cpp',
+  'markdown',
+  'yaml',
+] as const;
+
+export function CodeBlock({ block, editor, selected, readOnly }: BlockViewProps) {
+  const t = useT();
+  const language = typeof block.props.language === 'string' ? block.props.language : 'plain';
+  const languages = CODE_LANGUAGES.includes(language as (typeof CODE_LANGUAGES)[number])
+    ? CODE_LANGUAGES
+    : [...CODE_LANGUAGES, language];
+
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  const copy = () => {
+    const text = block.content.map((node) => node.insert).join('');
+
+    void navigator.clipboard?.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <div
+      className="block block-code"
+      data-inkbrick-block="code"
+      data-block-id={block.id}
+      data-language={language}
+      data-selected={selected || undefined}
+    >
+      <div className="code-toolbar" data-inkbrick-part="toolbar" contentEditable={false}>
+        <select
+          className="code-language"
+          data-inkbrick-part="language"
+          aria-label={t('block.code.language')}
+          disabled={readOnly}
+          value={language}
+          onChange={(event) =>
+            editor.dispatch({
+              type: 'setBlockProps',
+              payload: { blockId: block.id, props: { language: event.target.value } },
+            })
+          }
+        >
+          {languages.map((name) => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          className="code-copy"
+          data-inkbrick-part="copy"
+          data-state={copied ? 'copied' : undefined}
+          aria-label={copied ? t('block.code.copied') : t('block.code.copy')}
+          title={copied ? t('block.code.copied') : t('block.code.copy')}
+          onClick={copy}
+        >
+          <Icon name={copied ? 'check' : 'copy'} />
+        </button>
+      </div>
+      <Editable block={block} />
+    </div>
+  );
+}

package/src/blocks/DividerBlock.tsx

@@ -0,0 +1,15 @@
+import type { BlockProps } from './BlockProps';
+
+export function DividerBlock({ block, selected }: BlockProps) {
+  return (
+    <div
+      className="block block-divider"
+      data-inkbrick-block="divider"
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+      contentEditable={false}
+    >
+      <hr data-inkbrick-part="rule" />
+    </div>
+  );
+}

package/src/blocks/Editable.tsx

@@ -0,0 +1,84 @@
+import { useLayoutEffect, useRef, useSyncExternalStore } from 'react';
+
+import type { BaseBlock } from '@inkbrick/document';
+
+import { renderCode } from '../editing/renderCode';
+import { renderInline } from '../editing/renderInline';
+import { useEditorView } from '../hooks/useEditorView';
+import { useReadOnly } from '../hooks/useReadOnly';
+import { useT } from '../hooks/useT';
+import { useEditorUI } from '../ui/EditorUIContext';
+
+export interface EditableProps {
+  readonly block: BaseBlock;
+  /**
+   * Собственная подсказка пустого блока (показывается всегда, пока блок пуст). Не нужна: по умолчанию редактор
+   * сам показывает одну общую подсказку («Нажмите / …») в пустом блоке, где стоит каретка.
+   */
+  readonly placeholder?: string;
+}
+
+/**
+ * Текст блока. Сам по себе не является contenteditable: редактируемым элементом
+ * служит корень `<DocumentView>`, благодаря чему выделение может охватывать несколько блоков.
+ * Содержимое рисуется из `block.content`, а ввод обрабатывается корнем через движок.
+ *
+ * Атрибуты для стилизации: `data-empty`, `data-focused` (каретка в этом блоке), `data-hint` (текст общей
+ * подсказки; есть только там, где работает slash-меню), `data-placeholder` (своя подсказка, если задана).
+ */
+export function Editable({ block, placeholder }: EditableProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const view = useEditorView();
+  const t = useT();
+  const readOnly = useReadOnly();
+  const { slashItems, highlighter, formulaRenderer } = useEditorUI();
+  const focused = useSyncExternalStore(
+    view.caret.subscribe,
+    () => view.caret.has(block.id),
+    () => false,
+  );
+
+  useLayoutEffect(() => view.register(block.id, ref.current!), [view, block.id]);
+
+  const isCode = block.flavour === 'block:code';
+  const language = typeof block.props.language === 'string' ? block.props.language : 'plain';
+
+  useLayoutEffect(() => {
+    const plain = block.content.every((node) => !node.attributes);
+
+    // Код — простой текст: подсветка только оборачивает его в <span data-inkbrick-token>, не меняя символов.
+    if (isCode && highlighter && plain) {
+      const text = block.content.map((node) => node.insert).join('');
+      let tokens: ReturnType<typeof highlighter> = [];
+
+      try {
+        tokens = highlighter(text, language);
+      } catch (error) {
+        // Ошибка подсветчика (в том числе чужого) не должна ронять редактор: показываем текст без подсветки.
+        console.error('[@inkbrick/react] The code highlighter failed:', error);
+      }
+
+      renderCode(ref.current!, text, tokens);
+    } else {
+      renderInline(ref.current!, block.content, { formulaRenderer });
+    }
+  }, [block.content, isCode, language, highlighter, formulaRenderer]);
+
+  const isEmpty = block.content.every((node) => node.insert.length === 0);
+
+  // Подсказка про «/» уместна там, где меню открывается: не в режиме чтения, не в коде и если меню не отключено.
+  const hinted = !readOnly && slashItems.length > 0 && block.flavour !== 'block:code';
+
+  return (
+    <div
+      ref={ref}
+      className="editable"
+      data-inkbrick-part="content"
+      data-id={block.id}
+      data-empty={isEmpty}
+      data-focused={focused || undefined}
+      data-hint={hinted ? t('editor.hint') : undefined}
+      data-placeholder={placeholder}
+    />
+  );
+}