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

package/src/toolbar/ToolbarController.ts

@@ -0,0 +1,100 @@
+import type { RangeFormats } from '@inkbrick/engine';
+
+import type { DocSelection } from '../editing/selection';
+import type { ToolbarPanel } from './types';
+
+export interface ToolbarState {
+  readonly visible: boolean;
+  readonly position: { readonly x: number; readonly y: number } | null;
+  readonly formats: RangeFormats | null;
+  readonly range: DocSelection | null;
+  readonly linkOpen: boolean;
+  readonly panel: ToolbarPanel | null;
+}
+
+const HIDDEN: ToolbarState = Object.freeze({
+  visible: false,
+  position: null,
+  formats: null,
+  range: null,
+  linkOpen: false,
+  panel: null,
+});
+
+function sameFormats(a: RangeFormats | null, b: RangeFormats | null): boolean {
+  return (
+    a === b ||
+    (!!a &&
+      !!b &&
+      a.bold === b.bold &&
+      a.italic === b.italic &&
+      a.underline === b.underline &&
+      a.strike === b.strike &&
+      a.code === b.code &&
+      a.link === b.link &&
+      a.color === b.color &&
+      a.backgroundColor === b.backgroundColor &&
+      a.align === b.align)
+  );
+}
+
+export class ToolbarController {
+  private state: ToolbarState = HIDDEN;
+
+  private readonly listeners = new Set<() => void>();
+
+  getState = (): ToolbarState => this.state;
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  show(range: DocSelection, formats: RangeFormats, position: { x: number; y: number }): void {
+    const prev = this.state;
+    const same =
+      prev.visible &&
+      sameFormats(prev.formats, formats) &&
+      prev.position?.x === position.x &&
+      prev.position?.y === position.y &&
+      prev.range?.from.blockId === range.from.blockId &&
+      prev.range?.from.offset === range.from.offset &&
+      prev.range?.to.blockId === range.to.blockId &&
+      prev.range?.to.offset === range.to.offset;
+
+    if (!same) this.set({ ...prev, visible: true, position, formats, range });
+  }
+
+  hide(): void {
+    if (this.state.visible) this.set(HIDDEN);
+  }
+
+  openLink(): void {
+    if (this.state.visible && !this.state.linkOpen) {
+      this.set({ ...this.state, linkOpen: true, panel: null });
+    }
+  }
+
+  togglePanel(panel: ToolbarPanel): void {
+    if (!this.state.visible || this.state.linkOpen) return;
+
+    this.set({ ...this.state, panel: this.state.panel === panel ? null : panel });
+  }
+
+  closePanel(): void {
+    if (this.state.panel) this.set({ ...this.state, panel: null });
+  }
+
+  closeLink(): void {
+    if (this.state.linkOpen) this.set({ ...this.state, linkOpen: false });
+  }
+
+  private set(state: ToolbarState): void {
+    this.state = state;
+
+    for (const listener of [...this.listeners]) listener();
+  }
+}

package/src/toolbar/ToolbarHost.tsx

@@ -0,0 +1,81 @@
+import { createPortal } from 'react-dom';
+import { useSyncExternalStore } from 'react';
+
+import { useEditor } from '../hooks/useEditor';
+import { useEditorView } from '../hooks/useEditorView';
+import { useReadOnly } from '../hooks/useReadOnly';
+import { openInlineFormula } from '../formula/actions';
+import { useEditorUI } from '../ui/EditorUIContext';
+import { DefaultToolbar } from './DefaultToolbar';
+import { setLinkInSelection, toggleFormatInSelection } from './formatting';
+import { setAlignInSelection, setColorInSelection } from './rich';
+import { syncToolbar } from './syncToolbar';
+
+export function ToolbarHost() {
+  const editor = useEditor();
+  const view = useEditorView();
+  const { slots } = useEditorUI();
+  const readOnly = useReadOnly();
+  const state = useSyncExternalStore(
+    view.toolbar.subscribe,
+    view.toolbar.getState,
+    view.toolbar.getState,
+  );
+
+  if (slots.Toolbar === null || readOnly) return null;
+
+  if (
+    !state.visible ||
+    !state.position ||
+    !state.formats ||
+    !state.range ||
+    typeof document === 'undefined'
+  ) {
+    return null;
+  }
+
+  const Toolbar = slots.Toolbar ?? DefaultToolbar;
+  const range = state.range;
+
+  return createPortal(
+    <Toolbar
+      formats={state.formats}
+      position={state.position}
+      linkOpen={state.linkOpen}
+      panel={state.panel}
+      onToggle={(format) => {
+        toggleFormatInSelection(editor, view, range, format);
+        syncToolbar(editor, view);
+      }}
+      onOpenLink={() => view.toolbar.openLink()}
+      onApplyLink={(url) => {
+        if (!setLinkInSelection(editor, view, range, url)) return false;
+
+        view.toolbar.closeLink();
+        syncToolbar(editor, view);
+
+        return true;
+      }}
+      onTogglePanel={(panel) => view.toolbar.togglePanel(panel)}
+      onApplyColor={(kind, value) => {
+        setColorInSelection(editor, view, range, kind, value);
+        view.toolbar.closePanel();
+        syncToolbar(editor, view);
+      }}
+      onAlign={(align) => {
+        setAlignInSelection(editor, view, range, align);
+        syncToolbar(editor, view);
+      }}
+      onInsertFormula={() => {
+        view.placeSelection(range.from, range.to);
+        openInlineFormula(editor, view);
+      }}
+      onCancelLink={() => {
+        view.toolbar.closeLink();
+        view.placeSelection(range.from, range.to);
+        syncToolbar(editor, view);
+      }}
+    />,
+    document.body,
+  );
+}

package/src/toolbar/formatting.ts

@@ -0,0 +1,75 @@
+import { flushSync } from 'react-dom';
+
+import { normalizeLinkUrl } from '@inkbrick/document';
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import type { DocSelection } from '../editing/selection';
+
+const isSingleBlock = (selection: DocSelection) => selection.from.blockId === selection.to.blockId;
+
+export function isFormattable(editor: Editor, selection: DocSelection): boolean {
+  return !(
+    isSingleBlock(selection) &&
+    editor.store.getBlock(selection.from.blockId)?.flavour === 'block:code'
+  );
+}
+
+export function toggleFormatInSelection(
+  editor: Editor,
+  view: EditorView,
+  selection: DocSelection,
+  format: string,
+): void {
+  if (selection.collapsed || !isFormattable(editor, selection)) return;
+
+  flushSync(() => {
+    if (isSingleBlock(selection)) {
+      editor.dispatch({
+        type: 'toggleFormat',
+        payload: {
+          blockId: selection.from.blockId,
+          from: selection.from.offset,
+          to: selection.to.offset,
+          format,
+        },
+      });
+    } else {
+      editor.dispatch({
+        type: 'toggleFormatRange',
+        payload: { from: selection.from, to: selection.to, format },
+      });
+    }
+  });
+
+  view.placeSelection(selection.from, selection.to);
+}
+
+/**
+ * Ставит или снимает ссылку на выделении. Ввод нормализуется («example.com» → https://example.com);
+ * null или пустая строка снимают ссылку. Возвращает false, если адрес небезопасен — документ не меняется.
+ */
+export function setLinkInSelection(
+  editor: Editor,
+  view: EditorView,
+  selection: DocSelection,
+  input: string | null,
+): boolean {
+  if (selection.collapsed || !isFormattable(editor, selection)) return false;
+
+  const remove = input === null || input.trim() === '';
+  const link = remove ? undefined : (normalizeLinkUrl(input) ?? null);
+
+  if (link === null) return false;
+
+  flushSync(() => {
+    editor.dispatch({
+      type: 'setInlineAttributes',
+      payload: { from: selection.from, to: selection.to, attributes: { link } },
+    });
+  });
+
+  view.placeSelection(selection.from, selection.to);
+
+  return true;
+}

package/src/toolbar/rich.ts

@@ -0,0 +1,58 @@
+import { flushSync } from 'react-dom';
+
+import type { Alignment } from '@inkbrick/document';
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import type { DocSelection } from '../editing/selection';
+import { isFormattable } from './formatting';
+
+/**
+ * Ставит или снимает цвет текста (`color`) или подсветки (`backgroundColor`) на выделении. Значение — имя цвета
+ * палитры; `null` снимает цвет. Возвращает false, если применять не к чему (свёрнутое выделение, код).
+ */
+export function setColorInSelection(
+  editor: Editor,
+  view: EditorView,
+  selection: DocSelection,
+  kind: 'color' | 'backgroundColor',
+  value: string | null,
+): boolean {
+  if (selection.collapsed || !isFormattable(editor, selection)) return false;
+
+  const payload = {
+    from: selection.from,
+    to: selection.to,
+    attributes: { [kind]: value ?? undefined },
+  };
+
+  if (!editor.can('setInlineAttributes', payload)) return false;
+
+  flushSync(() => {
+    editor.dispatch({ type: 'setInlineAttributes', payload });
+  });
+
+  view.placeSelection(selection.from, selection.to);
+
+  return true;
+}
+
+export function setAlignInSelection(
+  editor: Editor,
+  view: EditorView,
+  selection: DocSelection,
+  align: Alignment,
+): boolean {
+  if (!editor.can('setAlign', { from: selection.from, to: selection.to, align })) return false;
+
+  flushSync(() => {
+    editor.dispatch({
+      type: 'setAlign',
+      payload: { from: selection.from, to: selection.to, align },
+    });
+  });
+
+  view.placeSelection(selection.from, selection.to);
+
+  return true;
+}

package/src/toolbar/syncToolbar.ts

@@ -0,0 +1,39 @@
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import { readDocSelection } from '../editing/selection';
+import { isFormattable } from './formatting';
+
+export function syncToolbar(editor: Editor, view: EditorView): void {
+  const state = view.toolbar.getState();
+
+  if (state.linkOpen) return;
+
+  const root = view.getRoot();
+  const selection = root ? readDocSelection(root) : null;
+  const native = globalThis.getSelection();
+
+  if (
+    view.pointerDown ||
+    !selection ||
+    selection.collapsed ||
+    !isFormattable(editor, selection) ||
+    !native ||
+    native.rangeCount === 0
+  ) {
+    view.toolbar.hide();
+    return;
+  }
+
+  const rect = native.getRangeAt(0).getBoundingClientRect();
+
+  if (rect.width === 0 && rect.height === 0) {
+    view.toolbar.hide();
+    return;
+  }
+
+  view.toolbar.show(selection, editor.formatsAt(selection.from, selection.to), {
+    x: rect.left + rect.width / 2,
+    y: rect.top,
+  });
+}

package/src/toolbar/types.ts

@@ -0,0 +1,21 @@
+import type { Alignment } from '@inkbrick/document';
+import type { RangeFormats } from '@inkbrick/engine';
+
+export type InlineFormat = 'bold' | 'italic' | 'underline' | 'strike' | 'code';
+
+export type ToolbarPanel = 'color' | 'highlight';
+
+export interface ToolbarProps {
+  readonly formats: RangeFormats;
+  readonly position: { readonly x: number; readonly y: number };
+  readonly linkOpen: boolean;
+  readonly onToggle: (format: InlineFormat) => void;
+  readonly onOpenLink: () => void;
+  readonly onApplyLink: (url: string | null) => boolean;
+  readonly onCancelLink: () => void;
+  readonly panel: ToolbarPanel | null;
+  readonly onTogglePanel: (panel: ToolbarPanel) => void;
+  readonly onApplyColor: (kind: 'color' | 'backgroundColor', value: string | null) => void;
+  readonly onAlign: (align: Alignment) => void;
+  readonly onInsertFormula: () => void;
+}

package/src/ui/EditorUIContext.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+import { highlightCode } from '../code/highlight';
+import { temmlRenderer } from '../math/renderer';
+import { defaultT } from '../i18n/translate';
+import { defaultKeymap } from '../keymap/defaultKeymap';
+import { defaultSlashItems } from '../slash/defaultSlashItems';
+import type { EditorUIConfig } from './types';
+
+export const EMPTY_UI_CONFIG: EditorUIConfig = Object.freeze({
+  components: Object.freeze({}),
+  slots: Object.freeze({}),
+  slashItems: defaultSlashItems,
+  keymap: defaultKeymap,
+  highlighter: highlightCode,
+  formulaRenderer: temmlRenderer,
+  locale: 'en',
+  t: defaultT,
+  images: Object.freeze({}),
+});
+
+export const EditorUIContext = createContext<EditorUIConfig>(EMPTY_UI_CONFIG);
+
+export function useEditorUI(): EditorUIConfig {
+  return useContext(EditorUIContext);
+}

package/src/ui/presentation.ts

@@ -0,0 +1,24 @@
+import type { CodeHighlighter } from '../code/types';
+import type { FormulaRenderer } from '../math/renderer';
+import type { SlashMenuItem } from '../slash/types';
+import type { BlockComponentRegistry, EditorSlots } from './types';
+
+/**
+ * Визуальный слой редактора одним объектом: представления блоков, элементы оболочки (меню, toolbar, ручки),
+ * пункты slash-меню, подсветка кода и отрисовка формул. Модель документа и команды от него не зависят, поэтому
+ * дизайн-систему можно подключить к любому редактору: `<EditorProvider presentation={myDesignSystem}>`.
+ *
+ * Отдельные props провайдера (`components`, `slots`, …) уточняют presentation: `components` и `slots`
+ * сливаются с ним (одинаковый ключ — из prop), остальное заменяется целиком.
+ */
+export interface EditorPresentation {
+  readonly components?: BlockComponentRegistry;
+  readonly slots?: EditorSlots;
+  readonly slashItems?: readonly SlashMenuItem[] | false;
+  readonly highlighter?: CodeHighlighter | false;
+  readonly formulaRenderer?: FormulaRenderer | false;
+}
+
+export function definePresentation<T extends EditorPresentation>(presentation: T): T {
+  return presentation;
+}

package/src/ui/types.ts

@@ -0,0 +1,70 @@
+import type { ComponentType, ReactNode } from 'react';
+
+import type { BaseBlock } from '@inkbrick/document';
+import type { BlockController, Editor } from '@inkbrick/engine';
+
+import type { ImageOptions } from '../images/types';
+import type { SlashMenuItem, SlashMenuProps } from '../slash/types';
+import type { BlockHandleProps, BlockMenuProps, DropIndicatorProps } from '../block-handle/types';
+import type { CodeHighlighter } from '../code/types';
+import type { FormulaRenderer } from '../math/renderer';
+import type { TFunction } from '../i18n/translate';
+import type { KeyBinding } from '../keymap/types';
+import type { ToolbarProps } from '../toolbar/types';
+
+/**
+ * Props, которые получает React-представление блока.
+ *
+ * Блок нельзя изменять напрямую: все изменения документа идут через
+ * `editor.dispatch(...)`. Для редактируемого текста используйте компонент
+ * `<Editable block={block} placeholder="…" />` — он подключает ввод, выделение и
+ * клавиатурные действия редактора. Дочерние блоки выводит `<BlockChildren id={block.id} />`.
+ */
+export interface BlockViewProps<TBlock extends BaseBlock = BaseBlock> {
+  readonly block: TBlock;
+  readonly editor: Editor;
+  readonly selected: boolean;
+  readonly readOnly: boolean;
+  /**
+   * Контроллер типа блока (`defineBlock({ controller })`), если есть. Удобнее хук `useBlockController(block)`:
+   * его `execute`/`can` сами подставляют `blockId`.
+   */
+  readonly controller?: BlockController<any>;
+}
+
+export type BlockComponent<TBlock extends BaseBlock = BaseBlock> = ComponentType<
+  BlockViewProps<TBlock>
+>;
+
+export type BlockComponentRegistry = Readonly<Partial<Record<string, BlockComponent>>>;
+
+export interface UnknownBlockViewProps extends BlockViewProps {
+  /** Уже выведенные дочерние блоки (данные не теряются, даже если тип блока неизвестен). */
+  readonly children?: ReactNode;
+}
+
+export interface EditorSlots {
+  readonly UnknownBlock?: ComponentType<UnknownBlockViewProps>;
+  readonly SlashMenu?: ComponentType<SlashMenuProps>;
+  readonly Toolbar?: ComponentType<ToolbarProps> | null;
+  /**
+   * Ручка слева от блока («+» и хваталка для переноса); `null` отключает ручки, меню и встроенное перетаскивание.
+   * Свой DnD подключается через `useBlockDrag()` — в своей ручке или в любом компоненте внутри `<EditorProvider>`.
+   */
+  readonly BlockHandle?: ComponentType<BlockHandleProps> | null;
+  readonly BlockMenu?: ComponentType<BlockMenuProps>;
+  readonly DropIndicator?: ComponentType<DropIndicatorProps> | null;
+}
+
+export interface EditorUIConfig {
+  readonly components: BlockComponentRegistry;
+  readonly slots: EditorSlots;
+  readonly slashItems: readonly SlashMenuItem[];
+  readonly highlighter: CodeHighlighter | null;
+  readonly formulaRenderer: FormulaRenderer | null;
+  readonly locale: string;
+  readonly t: TFunction;
+  readonly keymap: readonly KeyBinding[];
+  readonly images: ImageOptions;
+  readonly readOnly?: boolean;
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.