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

package/src/block-handle/DefaultBlockHandle.tsx

@@ -0,0 +1,71 @@
+import { useT } from '../hooks/useT';
+import { Icon } from '../icons/Icon';
+import type { BlockHandleProps } from './types';
+
+const HANDLE_WIDTH = 52;
+
+export function DefaultBlockHandle({
+  blockId,
+  position,
+  canAdd,
+  dragging,
+  menuOpen,
+  onAdd,
+  onOpenMenu,
+  gripProps,
+}: BlockHandleProps) {
+  const t = useT();
+  const left = position.x - HANDLE_WIDTH;
+
+  return (
+    <div
+      className="inkbrick-block-handle"
+      data-inkbrick-ui="block-handle"
+      data-testid="block-handle"
+      data-block={blockId}
+      data-inkbrick-block-ui
+      // Слева от текста нет места (узкий экран): ручка ложится поверх текста отдельной плашкой.
+      data-compact={left < 2 || undefined}
+      style={{
+        left: Math.max(2, left),
+        top: position.y,
+        pointerEvents: dragging ? 'none' : undefined,
+      }}
+      // Не уводим фокус и выделение из редактора.
+      onMouseDown={(event) => event.preventDefault()}
+    >
+      <button
+        type="button"
+        className="inkbrick-block-handle__button"
+        data-inkbrick-part="button"
+        aria-label={t('handle.add')}
+        title={t('handle.add')}
+        data-action="add"
+        disabled={!canAdd}
+        onClick={onAdd}
+      >
+        <Icon name="plus" />
+      </button>
+      <button
+        type="button"
+        className="inkbrick-block-handle__button inkbrick-block-handle__grip"
+        data-inkbrick-part="grip"
+        data-active={menuOpen || undefined}
+        aria-label={t('handle.grip')}
+        title={t('handle.grip')}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        data-action="grip"
+        {...gripProps}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            onOpenMenu();
+          }
+        }}
+      >
+        <Icon name="grip" />
+      </button>
+    </div>
+  );
+}

package/src/block-handle/DefaultBlockMenu.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { useT } from '../hooks/useT';
+import type { BlockMenuAction, BlockMenuProps } from './types';
+
+export function DefaultBlockMenu({ position, actions, turnInto, onClose }: BlockMenuProps) {
+  const t = useT();
+  const ref = useRef<HTMLDivElement>(null);
+  const [flip, setFlip] = useState(false);
+
+  const entries: BlockMenuAction[] = [...actions, ...turnInto].filter((entry) => !entry.disabled);
+
+  useEffect(() => {
+    ref.current
+      ?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])')
+      ?.focus();
+  }, []);
+
+  useLayoutEffect(() => {
+    const menu = ref.current;
+
+    if (menu)
+      setFlip(
+        position.y + menu.offsetHeight > window.innerHeight && position.y - menu.offsetHeight > 0,
+      );
+  }, [position.y]);
+
+  const move = (delta: number) => {
+    const items = [
+      ...(ref.current?.querySelectorAll<HTMLElement>(
+        '[role="menuitem"]:not([aria-disabled="true"])',
+      ) ?? []),
+    ];
+    const index = items.indexOf(document.activeElement as HTMLElement);
+
+    items[(index + delta + items.length) % items.length]?.focus();
+  };
+
+  const renderItem = (action: BlockMenuAction) => (
+    <div
+      key={action.id}
+      role="menuitem"
+      tabIndex={action.disabled ? -1 : 0}
+      aria-disabled={action.disabled || undefined}
+      data-action={action.id}
+      data-inkbrick-part="item"
+      data-disabled={action.disabled || undefined}
+      data-danger={action.danger || undefined}
+      className={`inkbrick-block-menu__item${action.danger ? ' inkbrick-block-menu__item--danger' : ''}`}
+      onClick={() => !action.disabled && action.run()}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          if (!action.disabled) action.run();
+        }
+      }}
+    >
+      {action.icon !== undefined && (
+        <span className="inkbrick-block-menu__icon" data-inkbrick-part="icon">
+          {action.icon}
+        </span>
+      )}
+      {action.title}
+    </div>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="inkbrick-block-menu"
+      data-inkbrick-ui="block-menu"
+      role="menu"
+      aria-label={t('menu.label')}
+      data-testid="block-menu"
+      data-inkbrick-block-ui
+      style={{
+        left: Math.max(
+          8,
+          Math.min(position.x, window.innerWidth - (ref.current?.offsetWidth ?? 232) - 8),
+        ),
+        top: flip ? Math.max(8, position.y - (ref.current?.offsetHeight ?? 0) - 32) : position.y,
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault();
+          move(1);
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault();
+          move(-1);
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          onClose();
+        }
+      }}
+    >
+      {actions.map(renderItem)}
+
+      {turnInto.length > 0 && (
+        <>
+          <div className="inkbrick-block-menu__label" data-inkbrick-part="label" role="separator">
+            {t('menu.turnInto')}
+          </div>
+          {turnInto.map(renderItem)}
+        </>
+      )}
+
+      {entries.length === 0 && (
+        <div className="inkbrick-block-menu__label" data-inkbrick-part="label">
+          {t('menu.empty')}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/block-handle/DropIndicatorHost.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useEditorView } from '../hooks/useEditorView';
+import { useReadOnly } from '../hooks/useReadOnly';
+import { useEditorUI } from '../ui/EditorUIContext';
+import { blockElement } from './geometry';
+import type { DropIndicatorProps } from './types';
+import { useBlockDragState } from './useBlockDrag';
+
+export function DefaultDropIndicator({ indicator, position }: DropIndicatorProps) {
+  return (
+    <div
+      className="inkbrick-drop-indicator"
+      data-inkbrick-ui="drop-indicator"
+      data-testid="drop-indicator"
+      data-position={position}
+      style={{ left: indicator.left, top: indicator.top, width: indicator.width }}
+    />
+  );
+}
+
+/**
+ * Линия вставки и затемнение переносимого блока. Рисуется по состоянию API переноса,
+ * поэтому работает и со встроенным перетаскиванием, и со своим (`useBlockDrag`), даже без ручек.
+ */
+export function DropIndicatorHost() {
+  const view = useEditorView();
+  const { slots } = useEditorUI();
+  const readOnly = useReadOnly();
+  const drag = useBlockDragState();
+  const draggedId = drag?.blockId;
+
+  useEffect(() => {
+    if (!draggedId) return;
+
+    const element = blockElement(view, draggedId);
+
+    element?.setAttribute('data-inkbrick-dragging', 'true');
+
+    return () => element?.removeAttribute('data-inkbrick-dragging');
+  }, [draggedId, view]);
+
+  if (readOnly || slots.DropIndicator === null || typeof document === 'undefined') return null;
+  if (!drag?.indicator || !drag.targetId || !drag.position) return null;
+
+  const Indicator = slots.DropIndicator ?? DefaultDropIndicator;
+
+  return createPortal(
+    <Indicator
+      blockId={drag.blockId}
+      targetId={drag.targetId}
+      position={drag.position}
+      indicator={drag.indicator}
+    />,
+    document.body,
+  );
+}

package/src/block-handle/actions.tsx

@@ -0,0 +1,146 @@
+import { flushSync } from 'react-dom';
+
+import type { CaretResult, Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import type { TFunction } from '../i18n/translate';
+import { Icon } from '../icons/Icon';
+import { availableSlashItems } from '../slash/items';
+import type { SlashMenuItem } from '../slash/types';
+import { syncSlashMenu } from '../slash/syncSlashMenu';
+import { iconByName } from '../controllers/adapters';
+import type { BlockMenuAction } from './types';
+
+const isCaret = (value: unknown): value is CaretResult =>
+  typeof value === 'object' && value !== null && 'blockId' in value && 'offset' in value;
+
+export function performBlockAction(view: EditorView, action: () => unknown): void {
+  let result: unknown;
+
+  flushSync(() => {
+    result = action();
+  });
+
+  view.blocks.closeMenu();
+
+  if (isCaret(result) && view.getElement(result.blockId)) {
+    view.placeCaret(result.blockId, result.offset);
+  } else {
+    view.getRoot()?.focus({ preventScroll: true });
+  }
+}
+
+export function buildBlockActions(
+  editor: Editor,
+  view: EditorView,
+  blockId: string,
+  slashItems: readonly SlashMenuItem[],
+  t: TFunction,
+): { actions: BlockMenuAction[]; turnInto: BlockMenuAction[] } {
+  const previous = editor.document.getPreviousSibling(blockId);
+  const next = editor.document.getNextSibling(blockId);
+  const perform = (fn: () => unknown) => () => performBlockAction(view, fn);
+
+  const moveUp = previous && { blockId, targetId: previous.id, position: 'before' as const };
+  const moveDown = next && { blockId, targetId: next.id, position: 'after' as const };
+
+  const block = editor.store.getBlock(blockId);
+  const controller = block && editor.controllers.get(block.flavour);
+  const own = (controller?.menuItems ?? []).map<BlockMenuAction>((item) => {
+    const context = editor.controllers.contextOf(block!);
+
+    return {
+      id: item.id,
+      title: item.title,
+      icon: iconByName(item.icon),
+      danger: item.danger,
+      disabled: item.isDisabled ? item.isDisabled(context) : context.readOnly,
+      run: perform(() => item.run(context)),
+    };
+  });
+
+  const actions: BlockMenuAction[] = [
+    ...own,
+    {
+      id: 'duplicate',
+      title: t('menu.duplicate'),
+      icon: <Icon name="copy" />,
+      disabled: !editor.can('duplicateBlock', { blockId }),
+      run: perform(() => editor.dispatch({ type: 'duplicateBlock', payload: { blockId } })),
+    },
+    {
+      id: 'move-up',
+      title: t('menu.moveUp'),
+      icon: <Icon name="arrow-up" />,
+      disabled: !moveUp || !editor.can('moveBlock', moveUp),
+      run: perform(() => moveUp && editor.dispatch({ type: 'moveBlock', payload: moveUp })),
+    },
+    {
+      id: 'move-down',
+      title: t('menu.moveDown'),
+      icon: <Icon name="arrow-down" />,
+      disabled: !moveDown || !editor.can('moveBlock', moveDown),
+      run: perform(() => moveDown && editor.dispatch({ type: 'moveBlock', payload: moveDown })),
+    },
+    {
+      id: 'delete',
+      title: t('menu.delete'),
+      icon: <Icon name="trash" />,
+      danger: true,
+      run: perform(() => editor.execute('delete-block', { id: blockId })),
+    },
+  ];
+
+  const turnInto = availableSlashItems(editor, slashItems, blockId)
+    .filter((item) =>
+      editor.can('convertBlock', { blockId, flavour: item.flavour, props: item.props }),
+    )
+    .map<BlockMenuAction>((item) => ({
+      id: item.id,
+      title: item.title,
+      icon: item.icon,
+      run: perform(() =>
+        editor.dispatch({
+          type: 'convertBlock',
+          payload: { blockId, flavour: item.flavour, props: item.props as never },
+        }),
+      ),
+    }));
+
+  return { actions, turnInto };
+}
+
+export function addBlockBelow(
+  editor: Editor,
+  view: EditorView,
+  blockId: string,
+  slashItems: readonly SlashMenuItem[],
+): void {
+  const block = editor.store.getBlock(blockId);
+  const parent = block?.parentId ? editor.store.getBlock(block.parentId) : undefined;
+
+  if (!block || !parent) return;
+
+  // Рядом с вложенным блоком вставляем блок того же типа: параграф «провалился» бы внутрь списка.
+  const nested = parent.flavour !== 'block:note';
+  const payload = {
+    flavour: nested ? block.flavour : 'block:paragraph',
+    afterId: blockId,
+    props: nested ? (block.props as never) : undefined,
+    content: [{ insert: '/' }],
+  };
+
+  let caret: CaretResult | undefined;
+
+  flushSync(() => {
+    caret = editor.dispatch({ type: 'insertBlock', payload }) as CaretResult | undefined;
+  });
+
+  view.blocks.setHover(null);
+
+  if (!caret) return;
+
+  view.placeCaret(caret.blockId, 1);
+  view.slash.open(caret.blockId, 0);
+  syncSlashMenu(editor, view, slashItems);
+}

package/src/block-handle/blockDrag.ts

@@ -0,0 +1,215 @@
+import { flushSync } from 'react-dom';
+
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import type { DragState, DropIndicatorRect, DropPosition } from './BlockHandleController';
+import { blockAtPoint, blockElement, probePoint, rowRect } from './geometry';
+
+export interface BlockDropTarget {
+  readonly targetId: string;
+  readonly position: DropPosition;
+  readonly indicator: DropIndicatorRect;
+}
+
+export interface BlockRects {
+  /** Строка самого блока (его текст), без вложенных блоков. */
+  readonly row: DOMRect;
+  /** Весь блок вместе с вложенными блоками. */
+  readonly box: DOMRect;
+}
+
+/**
+ * Всё, что нужно своей системе перетаскивания блоков (dnd-kit, pragmatic-drag-and-drop, своя на pointer events):
+ * геометрия, проверка цели, линия вставки и сам перенос. Встроенное перетаскивание построено на этом же API.
+ *
+ * Обычный порядок: `start(blockId)` → на каждое движение `update(x, y)` → `drop()` или `cancel()`.
+ */
+export interface BlockDragApi {
+  /** Блок с ручкой под точкой окна; точку в полосе слева от текста прижимает к тексту. */
+  blockAtPoint(x: number, y: number): string | null;
+  blockRects(blockId: string): BlockRects | null;
+  /** Можно ли перенести блок `blockId` перед/после `targetId` (схема, вложенность, глубина). */
+  canMove(blockId: string, targetId: string, position: DropPosition): boolean;
+  /** Допустимое место вставки под точкой окна для блока `blockId`; верхняя половина строки — «перед». */
+  dropTargetAt(blockId: string, x: number, y: number): BlockDropTarget | null;
+
+  start(blockId: string): void;
+  /** Задаёт текущее место вставки (или убирает его) и рисует линию. Цель, которую движок не примет, отбрасывается. */
+  setTarget(target: BlockDropTarget | null): void;
+  /** Удобная связка `dropTargetAt` + `setTarget` с автопрокруткой у края окна. Возвращает найденную цель. */
+  update(x: number, y: number): BlockDropTarget | null;
+  /** Завершает перенос: применяет его к текущей цели одним шагом undo. `true`, если блок перенесён. */
+  drop(): boolean;
+  cancel(): void;
+
+  /** Переносит блок сразу, без жеста (например, из своего DnD без линии вставки). Один шаг undo. */
+  move(blockId: string, targetId: string, position: DropPosition): boolean;
+  autoScroll(clientY: number): void;
+
+  getState(): DragState | null;
+  subscribe(listener: () => void): () => void;
+}
+
+const EDGE = 56;
+
+const cache = new WeakMap<EditorView, BlockDragApi>();
+
+export function getBlockDrag(editor: Editor, view: EditorView): BlockDragApi {
+  let api = cache.get(view);
+
+  if (!api) {
+    api = createBlockDrag(editor, view);
+    cache.set(view, api);
+  }
+
+  return api;
+}
+
+function createBlockDrag(editor: Editor, view: EditorView): BlockDragApi {
+  const controller = view.blocks;
+
+  const markBody = (on: boolean) => {
+    if (typeof document === 'undefined') return;
+
+    document.body.classList.toggle('inkbrick-dragging', on);
+
+    if (on) document.body.setAttribute('data-inkbrick-dragging', '');
+    else document.body.removeAttribute('data-inkbrick-dragging');
+  };
+
+  const canMove = (blockId: string, targetId: string, position: DropPosition) =>
+    blockId !== targetId && editor.can('moveBlock', { blockId, targetId, position });
+
+  const blockRects = (blockId: string): BlockRects | null => {
+    const wrapper = blockElement(view, blockId);
+    const row = rowRect(view, blockId);
+
+    return wrapper && row ? { row, box: wrapper.getBoundingClientRect() } : null;
+  };
+
+  const api: BlockDragApi = {
+    blockAtPoint(x, y) {
+      const probe = probePoint(view, x, y);
+
+      return probe ? blockAtPoint(editor, view, probe.x, probe.y) : null;
+    },
+
+    blockRects,
+    canMove,
+
+    dropTargetAt(blockId, x, y) {
+      const targetId = api.blockAtPoint(x, y);
+      const rects = targetId ? blockRects(targetId) : null;
+
+      if (!targetId || !rects) return null;
+
+      const { row, box } = rects;
+      const position: DropPosition = y < row.top + row.height / 2 ? 'before' : 'after';
+
+      if (!canMove(blockId, targetId, position)) return null;
+
+      return {
+        targetId,
+        position,
+        // «После» — после всего поддерева цели (вместе с вложенными блоками).
+        indicator: {
+          left: box.left,
+          width: box.width,
+          top: position === 'before' ? row.top - 1 : box.bottom + 1,
+        },
+      };
+    },
+
+    start(blockId) {
+      controller.startDrag(blockId);
+      markBody(true);
+    },
+
+    setTarget(target) {
+      const drag = controller.getState().drag;
+
+      if (!drag) return;
+
+      if (!target || !canMove(drag.blockId, target.targetId, target.position)) {
+        controller.updateDrag({ targetId: null, position: null, indicator: null });
+        return;
+      }
+
+      controller.updateDrag({
+        targetId: target.targetId,
+        position: target.position,
+        indicator: target.indicator,
+      });
+    },
+
+    update(x, y) {
+      const drag = controller.getState().drag;
+
+      if (!drag) return null;
+
+      api.autoScroll(y);
+
+      const target = api.dropTargetAt(drag.blockId, x, y);
+
+      api.setTarget(target);
+
+      return target;
+    },
+
+    drop() {
+      const drag = controller.getState().drag;
+
+      controller.endDrag();
+      markBody(false);
+
+      if (!drag?.targetId || !drag.position) return false;
+
+      return api.move(drag.blockId, drag.targetId, drag.position);
+    },
+
+    cancel() {
+      controller.endDrag();
+      markBody(false);
+    },
+
+    move(blockId, targetId, position) {
+      if (!canMove(blockId, targetId, position)) return false;
+
+      const payload = { blockId, targetId, position };
+
+      // Синхронно обновляем DOM: сразу после переноса можно мерить блоки на новых местах.
+      flushSync(() => {
+        editor.dispatch({ type: 'moveBlock', payload });
+      });
+
+      controller.setHover(null);
+
+      return true;
+    },
+
+    autoScroll(clientY) {
+      if (typeof window === 'undefined') return;
+
+      if (clientY < EDGE) window.scrollBy(0, -14);
+      else if (clientY > window.innerHeight - EDGE) window.scrollBy(0, 14);
+    },
+
+    getState: () => controller.getState().drag,
+
+    subscribe: (listener) => {
+      let last = controller.getState().drag;
+
+      return controller.subscribe(() => {
+        const next = controller.getState().drag;
+
+        if (next !== last) {
+          last = next;
+          listener();
+        }
+      });
+    },
+  };
+
+  return api;
+}

package/src/block-handle/geometry.ts

@@ -0,0 +1,64 @@
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+
+/** Ширина полосы слева от текста, в которой ручка остаётся видимой. */
+export const GUTTER = 72;
+
+export function hasHandle(editor: Editor, blockId: string): boolean {
+  const block = editor.store.getBlock(blockId);
+  const parent = block?.parentId ? editor.store.getBlock(block.parentId) : undefined;
+
+  return !!parent?.parentId;
+}
+
+export function blockElement(view: EditorView, blockId: string): HTMLElement | null {
+  return (
+    view.getRoot()?.querySelector<HTMLElement>(`[data-block-id="${CSS.escape(blockId)}"]`) ?? null
+  );
+}
+
+export function blockAtPoint(
+  editor: Editor,
+  view: EditorView,
+  x: number,
+  y: number,
+): string | null {
+  const root = view.getRoot();
+  const hit = root ? document.elementFromPoint(x, y) : null;
+
+  if (!root || !hit || !root.contains(hit)) return null;
+
+  let node: Element | null = hit.closest('[data-block-id]');
+
+  while (node && root.contains(node)) {
+    const id = node.getAttribute('data-block-id')!;
+
+    if (hasHandle(editor, id)) return id;
+
+    node = node.parentElement?.closest('[data-block-id]') ?? null;
+  }
+
+  return null;
+}
+
+/** Точка в колонке редактора: прижимает x к тексту, чтобы блок находился и при наведении в полосу слева. */
+export function probePoint(
+  view: EditorView,
+  x: number,
+  y: number,
+): { x: number; y: number } | null {
+  const root = view.getRoot();
+
+  if (!root) return null;
+
+  const rect = root.getBoundingClientRect();
+
+  if (x < rect.left - GUTTER || x > rect.right || y < rect.top || y > rect.bottom) return null;
+
+  return { x: Math.min(Math.max(x, rect.left + 12), rect.right - 12), y };
+}
+
+export function rowRect(view: EditorView, blockId: string): DOMRect | null {
+  return (view.getElement(blockId) ?? blockElement(view, blockId))?.getBoundingClientRect() ?? null;
+}