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

package/src/icons/ICONS_LICENSE.md

@@ -0,0 +1,50 @@
+# Иконки
+
+Файл `lucide.ts` сгенерирован из иконок [Lucide](https://lucide.dev). Часть из них унаследована от проекта Feather,
+поэтому ниже приведён полный текст лицензии Lucide (ISC и MIT для Feather).
+
+```text
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+The following Lucide icons are derived from the Feather project:
+
+airplay, alert-circle, alert-octagon, alert-triangle, aperture, arrow-down-circle, arrow-down-left, arrow-down-right, arrow-down, arrow-left-circle, arrow-left, arrow-right-circle, arrow-right, arrow-up-circle, arrow-up-left, arrow-up-right, arrow-up, at-sign, calendar, cast, check, chevron-down, chevron-left, chevron-right, chevron-up, chevrons-down, chevrons-left, chevrons-right, chevrons-up, circle, clipboard, clock, code, columns, command, compass, corner-down-left, corner-down-right, corner-left-down, corner-left-up, corner-right-down, corner-right-up, corner-up-left, corner-up-right, crosshair, database, divide-circle, divide-square, dollar-sign, download, external-link, feather, frown, hash, headphones, help-circle, info, italic, key, layout, life-buoy, link-2, link, loader, lock, log-in, log-out, maximize, meh, minimize, minimize-2, minus-circle, minus-square, minus, monitor, moon, more-horizontal, more-vertical, move, music, navigation-2, navigation, octagon, pause-circle, percent, plus-circle, plus-square, plus, power, radio, rss, search, server, share, shopping-bag, sidebar, smartphone, smile, square, table-2, tablet, target, terminal, trash-2, trash, triangle, tv, type, upload, x-circle, x-octagon, x-square, x, zoom-in, zoom-out
+
+The MIT License (MIT) (for the icons listed above)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/src/icons/Icon.tsx

@@ -0,0 +1,41 @@
+import type { SVGProps } from 'react';
+
+import { ICON_SHAPES, type IconName } from './lucide';
+
+export type { IconName };
+
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name' | 'children'> {
+  readonly name: IconName;
+}
+
+/**
+ * Иконка из набора Lucide (ISC). Рисуется текущим цветом текста; размер задаётся CSS (`--inkbrick-icon-size`
+ * или `width`/`height` у `[data-inkbrick-icon]`). Годится и для пользовательских пунктов slash-меню и меню блока.
+ */
+export function Icon({ name, ...props }: IconProps) {
+  const shapes = ICON_SHAPES[name];
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      data-inkbrick-icon={name}
+      {...props}
+    >
+      {shapes.map(([tag, attributes], index) => {
+        const Shape = tag as 'path';
+
+        return <Shape key={index} {...attributes} />;
+      })}
+    </svg>
+  );
+}

package/src/icons/lucide.ts

@@ -0,0 +1,234 @@
+// Файл сгенерирован из иконок Lucide (https://lucide.dev, лицензия ISC — см. ICONS_LICENSE.md). Не правьте вручную.
+export type IconShape = readonly [tag: string, attributes: Readonly<Record<string, string>>];
+
+export const ICON_SHAPES = {
+  bold: [['path', { d: 'M6 12h9a4 4 0 010 8H7a1 1 0 01-1-1V5a1 1 0 011-1h7a4 4 0 010 8' }]],
+  italic: [
+    ['line', { x1: '19', x2: '10', y1: '4', y2: '4' }],
+    ['line', { x1: '14', x2: '5', y1: '20', y2: '20' }],
+    ['line', { x1: '15', x2: '9', y1: '4', y2: '20' }],
+  ],
+  underline: [
+    ['path', { d: 'M6 4v6a6 6 0 0 0 12 0V4' }],
+    ['line', { x1: '4', x2: '20', y1: '20', y2: '20' }],
+  ],
+  strike: [
+    ['path', { d: 'M16 4H9a3 3 0 0 0-2.83 4' }],
+    ['path', { d: 'M14 12a4 4 0 0 1 0 8H6' }],
+    ['line', { x1: '4', x2: '20', y1: '12', y2: '12' }],
+  ],
+  code: [
+    ['path', { d: 'm18 16 4-4-4-4' }],
+    ['path', { d: 'm6 8-4 4 4 4' }],
+    ['path', { d: 'm14.5 4-5 16' }],
+  ],
+  link: [
+    ['path', { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }],
+    ['path', { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }],
+  ],
+  unlink: [
+    [
+      'path',
+      {
+        d: 'm18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71',
+      },
+    ],
+    [
+      'path',
+      { d: 'm5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71' },
+    ],
+    ['line', { x1: '8', x2: '8', y1: '2', y2: '5' }],
+    ['line', { x1: '2', x2: '5', y1: '8', y2: '8' }],
+    ['line', { x1: '16', x2: '16', y1: '19', y2: '22' }],
+    ['line', { x1: '19', x2: '22', y1: '16', y2: '16' }],
+  ],
+  check: [['path', { d: 'M20 6 9 17l-5-5' }]],
+  x: [
+    ['path', { d: 'M18 6 6 18' }],
+    ['path', { d: 'm6 6 12 12' }],
+  ],
+  plus: [
+    ['path', { d: 'M5 12h14' }],
+    ['path', { d: 'M12 5v14' }],
+  ],
+  grip: [
+    ['circle', { cx: '9', cy: '12', r: '1' }],
+    ['circle', { cx: '9', cy: '5', r: '1' }],
+    ['circle', { cx: '9', cy: '19', r: '1' }],
+    ['circle', { cx: '15', cy: '12', r: '1' }],
+    ['circle', { cx: '15', cy: '5', r: '1' }],
+    ['circle', { cx: '15', cy: '19', r: '1' }],
+  ],
+  trash: [
+    ['path', { d: 'M10 11v6' }],
+    ['path', { d: 'M14 11v6' }],
+    ['path', { d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' }],
+    ['path', { d: 'M3 6h18' }],
+    ['path', { d: 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' }],
+  ],
+  copy: [
+    ['rect', { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' }],
+    ['path', { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' }],
+  ],
+  'arrow-up': [
+    ['path', { d: 'm5 12 7-7 7 7' }],
+    ['path', { d: 'M12 19V5' }],
+  ],
+  'arrow-down': [
+    ['path', { d: 'M12 5v14' }],
+    ['path', { d: 'm19 12-7 7-7-7' }],
+  ],
+  'chevron-down': [['path', { d: 'm6 9 6 6 6-6' }]],
+  text: [
+    ['path', { d: 'M13 4v16' }],
+    ['path', { d: 'M17 4v16' }],
+    ['path', { d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13' }],
+  ],
+  'heading-1': [
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+    ['path', { d: 'M12 18V6' }],
+    ['path', { d: 'm17 12 3-2v8' }],
+  ],
+  'heading-2': [
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+    ['path', { d: 'M12 18V6' }],
+    ['path', { d: 'M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1' }],
+  ],
+  'heading-3': [
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+    ['path', { d: 'M12 18V6' }],
+    ['path', { d: 'M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2' }],
+    ['path', { d: 'M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2' }],
+  ],
+  'heading-4': [
+    ['path', { d: 'M12 18V6' }],
+    ['path', { d: 'M17 10v3a1 1 0 0 0 1 1h3' }],
+    ['path', { d: 'M21 10v8' }],
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+  ],
+  'heading-5': [
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+    ['path', { d: 'M12 18V6' }],
+    ['path', { d: 'M17 13v-3h4' }],
+    ['path', { d: 'M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17' }],
+  ],
+  'heading-6': [
+    ['path', { d: 'M4 12h8' }],
+    ['path', { d: 'M4 18V6' }],
+    ['path', { d: 'M12 18V6' }],
+    ['circle', { cx: '19', cy: '16', r: '2' }],
+    ['path', { d: 'M20 10c-2 2-3 3.5-3 6' }],
+  ],
+  list: [
+    ['path', { d: 'M3 5h.01' }],
+    ['path', { d: 'M3 12h.01' }],
+    ['path', { d: 'M3 19h.01' }],
+    ['path', { d: 'M8 5h13' }],
+    ['path', { d: 'M8 12h13' }],
+    ['path', { d: 'M8 19h13' }],
+  ],
+  'list-ordered': [
+    ['path', { d: 'M11 5h10' }],
+    ['path', { d: 'M11 12h10' }],
+    ['path', { d: 'M11 19h10' }],
+    ['path', { d: 'M4 4h1v5' }],
+    ['path', { d: 'M4 9h2' }],
+    ['path', { d: 'M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02' }],
+  ],
+  'list-todo': [
+    ['path', { d: 'M13 5h8' }],
+    ['path', { d: 'M13 12h8' }],
+    ['path', { d: 'M13 19h8' }],
+    ['path', { d: 'm3 17 2 2 4-4' }],
+    ['path', { d: 'm3 7 2 2 4-4' }],
+  ],
+  quote: [
+    ['path', { d: 'M17 5H3' }],
+    ['path', { d: 'M21 12H8' }],
+    ['path', { d: 'M21 19H8' }],
+    ['path', { d: 'M3 12v7' }],
+  ],
+  divider: [['path', { d: 'M5 12h14' }]],
+  info: [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['path', { d: 'M12 16v-4' }],
+    ['path', { d: 'M12 8h.01' }],
+  ],
+  warning: [
+    ['path', { d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' }],
+    ['path', { d: 'M12 9v4' }],
+    ['path', { d: 'M12 17h.01' }],
+  ],
+  success: [
+    ['circle', { cx: '12', cy: '12', r: '10' }],
+    ['path', { d: 'm16 9-5.5 5.5L8 12' }],
+  ],
+  danger: [
+    ['path', { d: 'm15 9-6 6' }],
+    [
+      'path',
+      {
+        d: 'M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z',
+      },
+    ],
+    ['path', { d: 'm9 9 6 6' }],
+  ],
+  image: [
+    ['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }],
+    ['circle', { cx: '9', cy: '9', r: '2' }],
+    ['path', { d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' }],
+  ],
+  replace: [
+    ['path', { d: 'M14 4a1 1 0 0 1 1-1' }],
+    ['path', { d: 'M15 10a1 1 0 0 1-1-1' }],
+    ['path', { d: 'M21 4a1 1 0 0 0-1-1' }],
+    ['path', { d: 'M21 9a1 1 0 0 1-1 1' }],
+    ['path', { d: 'm3 7 3 3 3-3' }],
+    ['path', { d: 'M6 10V5a2 2 0 0 1 2-2h2' }],
+    ['rect', { x: '3', y: '14', width: '7', height: '7', rx: '1' }],
+  ],
+  'align-left': [
+    ['path', { d: 'M21 5H3' }],
+    ['path', { d: 'M15 12H3' }],
+    ['path', { d: 'M17 19H3' }],
+  ],
+  'align-center': [
+    ['path', { d: 'M21 5H3' }],
+    ['path', { d: 'M17 12H7' }],
+    ['path', { d: 'M19 19H5' }],
+  ],
+  'align-right': [
+    ['path', { d: 'M21 5H3' }],
+    ['path', { d: 'M21 12H9' }],
+    ['path', { d: 'M21 19H7' }],
+  ],
+  'align-justify': [
+    ['path', { d: 'M3 5h18' }],
+    ['path', { d: 'M3 12h18' }],
+    ['path', { d: 'M3 19h18' }],
+  ],
+  baseline: [
+    ['path', { d: 'M4 20h16' }],
+    ['path', { d: 'm6 16 6-12 6 12' }],
+    ['path', { d: 'M8 12h8' }],
+  ],
+  highlighter: [
+    ['path', { d: 'm9 11-6 6v3h9l3-3' }],
+    ['path', { d: 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4' }],
+  ],
+  sigma: [
+    [
+      'path',
+      {
+        d: 'M18 7V5a1 1 0 0 0-1-1H6.5a.5.5 0 0 0-.4.8l4.5 6a2 2 0 0 1 0 2.4l-4.5 6a.5.5 0 0 0 .4.8H17a1 1 0 0 0 1-1v-2',
+      },
+    ],
+  ],
+} as const satisfies Record<string, readonly IconShape[]>;
+
+export type IconName = keyof typeof ICON_SHAPES;

package/src/images/ImageError.ts

@@ -0,0 +1,39 @@
+import type { MessageKey } from '../i18n/en';
+import type { MessageParams, TFunction } from '../i18n/translate';
+
+export type ImageErrorCode = 'type' | 'size' | 'uploadAddress' | 'read';
+
+/**
+ * Ошибка добавления картинки. `message` — английский текст для разработчика (попадает в `onError` и консоль);
+ * в интерфейсе ошибка показывается переведённой по `code`.
+ */
+export class ImageError extends Error {
+  constructor(
+    readonly code: ImageErrorCode,
+    message: string,
+    readonly params?: MessageParams,
+  ) {
+    super(message);
+    this.name = 'ImageError';
+  }
+}
+
+export interface ImageErrorInfo {
+  readonly message: string;
+  readonly code?: ImageErrorCode;
+  readonly params?: MessageParams;
+}
+
+export function toImageErrorInfo(error: unknown): ImageErrorInfo {
+  if (error instanceof ImageError) {
+    return { message: error.message, code: error.code, params: error.params };
+  }
+
+  return { message: error instanceof Error ? error.message : '' };
+}
+
+export function formatImageError(info: ImageErrorInfo, t: TFunction): string {
+  if (info.code) return t(`image.error.${info.code}` as MessageKey, info.params);
+
+  return info.message || t('image.error.generic');
+}

package/src/images/UploadTracker.ts

@@ -0,0 +1,49 @@
+import type { ImageErrorInfo } from './ImageError';
+
+/**
+ * Какие блоки-картинки сейчас загружаются и какие ошибки загрузки показать. Состояние живёт здесь, а не в
+ * компоненте: пока файл обрабатывается, выбор файла заменяется индикатором и локальное состояние пропало бы.
+ */
+export class UploadTracker {
+  private readonly active = new Set<string>();
+
+  private readonly errors = new Map<string, ImageErrorInfo>();
+
+  private readonly listeners = new Set<() => void>();
+
+  has = (blockId: string): boolean => this.active.has(blockId);
+
+  errorOf = (blockId: string): string | undefined => this.errors.get(blockId)?.message;
+
+  errorDetailsOf = (blockId: string): ImageErrorInfo | undefined => this.errors.get(blockId);
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.listeners.add(listener);
+
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  start(blockId: string): void {
+    this.errors.delete(blockId);
+    this.active.add(blockId);
+    this.notify();
+  }
+
+  finish(blockId: string, error?: string | ImageErrorInfo): void {
+    const changed = this.active.delete(blockId);
+
+    if (error) this.errors.set(blockId, typeof error === 'string' ? { message: error } : error);
+
+    if (changed || error) this.notify();
+  }
+
+  clearError(blockId: string): void {
+    if (this.errors.delete(blockId)) this.notify();
+  }
+
+  private notify(): void {
+    for (const listener of [...this.listeners]) listener();
+  }
+}

package/src/images/insertImages.ts

@@ -0,0 +1,142 @@
+import { flushSync } from 'react-dom';
+
+import { createId } from '@inkbrick/document';
+import type { CaretResult, Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import { toImageErrorInfo } from './ImageError';
+import type { ImageOptions } from './types';
+import { isAcceptedImage, uploadImage } from './upload';
+
+export function topLevelBlockId(editor: Editor, blockId: string): string {
+  let current = editor.store.getBlock(blockId);
+
+  while (current?.parentId) {
+    const parent = editor.store.getBlock(current.parentId);
+
+    if (!parent || parent.flavour === 'block:note' || !parent.parentId) break;
+
+    current = parent;
+  }
+
+  return current?.id ?? blockId;
+}
+
+const altFromName = (file: File) => file.name.replace(/\.[^.]+$/, '').slice(0, 200);
+
+function report(options: ImageOptions, error: unknown, file: File): void {
+  if (options.onError) options.onError(error, file);
+  else console.error('[@inkbrick/react] Could not add the image:', error);
+}
+
+export async function fillImageBlock(
+  editor: Editor,
+  view: EditorView,
+  options: ImageOptions,
+  blockId: string,
+  file: File,
+  mergeKey?: string,
+): Promise<boolean> {
+  view.uploads.start(blockId);
+
+  try {
+    const src = await uploadImage(file, options);
+
+    flushSync(() => {
+      editor.dispatch({
+        type: 'setBlockProps',
+        payload: { blockId, props: { src, alt: altFromName(file) }, mergeKey },
+      });
+    });
+
+    view.uploads.finish(blockId);
+
+    return true;
+  } catch (error) {
+    view.uploads.finish(blockId, toImageErrorInfo(error));
+    report(options, error, file);
+    return false;
+  }
+}
+
+/**
+ * Вставляет картинки из файлов (вставка, перетаскивание) после блока `afterId`. Блок появляется сразу
+ * (с индикатором загрузки); если загрузка не удалась, пустой блок убирается. Пустой параграф заменяется картинкой.
+ * Возвращает false, если среди файлов нет подходящих изображений.
+ */
+export function insertImageFiles(
+  editor: Editor,
+  view: EditorView,
+  options: ImageOptions,
+  files: readonly File[],
+  afterId: string,
+): boolean {
+  const images = files.filter((file) => isAcceptedImage(file, options));
+
+  if (images.length === 0 || editor.readOnly) return false;
+
+  let anchor = topLevelBlockId(editor, afterId);
+  let caret: CaretResult | undefined;
+
+  const mergeKey = `images:${createId()}`;
+  const created: Array<{ id: string; file: File }> = [];
+
+  flushSync(() => {
+    editor.batch(
+      () => {
+        for (const file of images) {
+          const target = editor.store.getBlock(anchor);
+          const alt = altFromName(file);
+
+          // Пустой параграф заменяется картинкой (и под ней появляется параграф для продолжения).
+          const emptyParagraph =
+            target?.flavour === 'block:paragraph' &&
+            target.content.length === 0 &&
+            target.children.length === 0;
+
+          if (emptyParagraph) {
+            caret = editor.dispatch({
+              type: 'convertBlock',
+              payload: { blockId: anchor, flavour: 'block:image', props: { alt } },
+            }) as CaretResult | undefined;
+            created.push({ id: anchor, file });
+          } else {
+            const inserted = editor.dispatch({
+              type: 'insertBlock',
+              payload: { flavour: 'block:image', afterId: anchor, props: { alt } },
+            }) as CaretResult | undefined;
+
+            if (!inserted) continue;
+
+            created.push({ id: inserted.blockId, file });
+            anchor = inserted.blockId;
+
+            if (!editor.document.getNextSibling(anchor)) {
+              caret = editor.dispatch({
+                type: 'insertBlock',
+                payload: { flavour: 'block:paragraph', afterId: anchor },
+              }) as CaretResult | undefined;
+            } else {
+              caret = { blockId: editor.document.getNextSibling(anchor)!.id, offset: 0 };
+            }
+          }
+        }
+      },
+      { mergeKey },
+    );
+  });
+
+  if (caret) view.placeCaret(caret.blockId, caret.offset);
+
+  for (const { id, file } of created) {
+    void fillImageBlock(editor, view, options, id, file, mergeKey).then((ok) => {
+      if (!ok && (editor.store.getBlock(id)?.props.src ?? '') === '') {
+        flushSync(() => {
+          editor.execute('delete-block', { id });
+        });
+      }
+    });
+  }
+
+  return true;
+}

package/src/images/types.ts

@@ -0,0 +1,22 @@
+export const DEFAULT_IMAGE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/avif',
+] as const;
+
+export const DEFAULT_MAX_INLINE_BYTES = 1_500_000;
+
+export interface ImageOptions {
+  /**
+   * Загружает файл и возвращает адрес картинки (http(s) или относительный). Без него картинки
+   * встраиваются в документ как data:-адреса (до `maxInlineBytes`).
+   */
+  readonly upload?: (file: File) => Promise<string>;
+  /** Предел размера для встраивания data:-картинки, байт (по умолчанию 1,5 МБ). */
+  readonly maxInlineBytes?: number;
+  /** Допустимые MIME-типы (по умолчанию PNG, JPEG, GIF, WebP, AVIF). SVG не поддерживается. */
+  readonly acceptedTypes?: readonly string[];
+  readonly onError?: (error: unknown, file: File) => void;
+}

package/src/images/upload.ts

@@ -0,0 +1,62 @@
+import { isSafeImageUrl } from '@inkbrick/document';
+
+import { ImageError } from './ImageError';
+import { DEFAULT_IMAGE_TYPES, DEFAULT_MAX_INLINE_BYTES, type ImageOptions } from './types';
+
+export function isAcceptedImage(file: { type: string }, options: ImageOptions): boolean {
+  return (options.acceptedTypes ?? DEFAULT_IMAGE_TYPES).includes(file.type.toLowerCase());
+}
+
+function readAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new ImageError('read', 'Could not read the file'));
+    reader.readAsDataURL(file);
+  });
+}
+
+export async function uploadImage(file: File, options: ImageOptions): Promise<string> {
+  if (!isAcceptedImage(file, options)) {
+    const type = file.type || 'unknown';
+
+    throw new ImageError('type', `Unsupported image type "${type}"`, { type });
+  }
+
+  let url: string;
+
+  if (options.upload) {
+    url = await options.upload(file);
+  } else {
+    const limit = options.maxInlineBytes ?? DEFAULT_MAX_INLINE_BYTES;
+
+    if (file.size > limit) {
+      const size = Math.round(limit / 1024);
+
+      throw new ImageError(
+        'size',
+        `The image is larger than ${size} KB. Provide "images.upload" to store larger images.`,
+        { size },
+      );
+    }
+
+    url = await readAsDataUrl(file);
+  }
+
+  if (!isSafeImageUrl(url))
+    throw new ImageError('uploadAddress', 'The upload returned an unsupported image address');
+
+  return url;
+}
+
+export function normalizeImageUrl(input: string): string | null {
+  const value = input.trim();
+
+  if (value === '') return null;
+
+  const candidate =
+    /^[a-z][a-z0-9+.-]*:/i.test(value) || value.startsWith('/') ? value : `https://${value}`;
+
+  return isSafeImageUrl(candidate) ? candidate : null;
+}