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

package/src/slash/applySlashItem.ts

@@ -0,0 +1,57 @@
+import { flushSync } from 'react-dom';
+
+import type { BlockProps } from '@inkbrick/document';
+import type { CaretResult, Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import { readDocSelection } from '../editing/selection';
+import type { SlashMenuItem } from './types';
+
+/**
+ * Применяет пункт меню: удаляет «/запрос» и превращает блок в выбранный тип —
+ * одним шагом undo. Если превращение невозможно, текст остаётся нетронутым.
+ */
+export function applySlashItem(editor: Editor, view: EditorView, item: SlashMenuItem): void {
+  const state = view.slash.getState();
+
+  if (!state.open || !state.blockId) return;
+
+  const { blockId, slashOffset } = state;
+  const root = view.getRoot();
+  const selection = root ? readDocSelection(root) : null;
+  const end =
+    selection?.collapsed && selection.from.blockId === blockId
+      ? selection.from.offset
+      : slashOffset + 1 + state.query.length;
+
+  view.slash.close();
+
+  let caret: CaretResult | undefined;
+
+  try {
+    flushSync(() => {
+      caret = editor.batch(() => {
+        editor.dispatch({ type: 'deleteText', payload: { blockId, from: slashOffset, to: end } });
+
+        const result = editor.dispatch({
+          type: 'convertBlock',
+          payload: {
+            blockId,
+            flavour: item.flavour,
+            props: item.props as BlockProps | undefined,
+            offset: slashOffset,
+          },
+        }) as CaretResult | undefined;
+
+        if (!result) throw new Error('convert-failed');
+
+        return result;
+      });
+    });
+  } catch (error) {
+    if (!(error instanceof Error) || error.message !== 'convert-failed') throw error;
+    return;
+  }
+
+  if (caret) view.placeCaret(caret.blockId, caret.offset);
+}

package/src/slash/defaultSlashItems.tsx

@@ -0,0 +1,186 @@
+import { Icon } from '../icons/Icon';
+import type { TFunction } from '../i18n/translate';
+import type { MessageKey } from '../i18n/en';
+import type { SlashMenuItem } from './types';
+
+export const defaultSlashItems: readonly SlashMenuItem[] = Object.freeze([
+  {
+    id: 'text',
+    title: 'Text',
+    description: 'Plain paragraph',
+    keywords: ['paragraph', 'p'],
+    icon: <Icon name="text" />,
+    flavour: 'block:paragraph',
+  },
+  {
+    id: 'heading-1',
+    title: 'Heading 1',
+    description: 'Large section heading',
+    keywords: ['h1', 'title'],
+    icon: <Icon name="heading-1" />,
+    flavour: 'block:heading',
+    props: { level: 1 },
+  },
+  {
+    id: 'heading-2',
+    title: 'Heading 2',
+    description: 'Medium section heading',
+    keywords: ['h2', 'subtitle'],
+    icon: <Icon name="heading-2" />,
+    flavour: 'block:heading',
+    props: { level: 2 },
+  },
+  {
+    id: 'heading-3',
+    title: 'Heading 3',
+    description: 'Small section heading',
+    keywords: ['h3'],
+    icon: <Icon name="heading-3" />,
+    flavour: 'block:heading',
+    props: { level: 3 },
+  },
+  {
+    id: 'heading-4',
+    title: 'Heading 4',
+    description: 'Subsection heading',
+    keywords: ['h4'],
+    icon: <Icon name="heading-4" />,
+    flavour: 'block:heading',
+    props: { level: 4 },
+  },
+  {
+    id: 'heading-5',
+    title: 'Heading 5',
+    description: 'Minor subsection heading',
+    keywords: ['h5'],
+    icon: <Icon name="heading-5" />,
+    flavour: 'block:heading',
+    props: { level: 5 },
+  },
+  {
+    id: 'heading-6',
+    title: 'Heading 6',
+    description: 'Smallest heading',
+    keywords: ['h6'],
+    icon: <Icon name="heading-6" />,
+    flavour: 'block:heading',
+    props: { level: 6 },
+  },
+  {
+    id: 'bullet-list',
+    title: 'Bulleted list',
+    description: 'Simple bulleted list',
+    keywords: ['ul', 'unordered', 'list'],
+    icon: <Icon name="list" />,
+    flavour: 'block:list',
+    props: { type: 'bullet' },
+  },
+  {
+    id: 'numbered-list',
+    title: 'Numbered list',
+    description: 'List with numbering',
+    keywords: ['ol', 'ordered', 'list'],
+    icon: <Icon name="list-ordered" />,
+    flavour: 'block:list',
+    props: { type: 'ordered' },
+  },
+  {
+    id: 'todo-list',
+    title: 'To-do list',
+    description: 'Track tasks with checkboxes',
+    keywords: ['todo', 'task', 'checkbox', 'check'],
+    icon: <Icon name="list-todo" />,
+    flavour: 'block:list',
+    props: { type: 'todo', checked: false },
+  },
+  {
+    id: 'quote',
+    title: 'Quote',
+    description: 'Capture a quote',
+    keywords: ['blockquote', 'citation'],
+    icon: <Icon name="quote" />,
+    flavour: 'block:quote',
+  },
+  {
+    id: 'code',
+    title: 'Code',
+    description: 'Code snippet with monospace font',
+    keywords: ['snippet', 'pre', 'program'],
+    icon: <Icon name="code" />,
+    flavour: 'block:code',
+  },
+  {
+    id: 'callout',
+    title: 'Callout',
+    description: 'Highlight important information',
+    keywords: ['info', 'note', 'warning', 'tip', 'alert'],
+    icon: <Icon name="info" />,
+    flavour: 'block:callout',
+  },
+  {
+    id: 'image',
+    title: 'Image',
+    description: 'Upload or embed an image',
+    keywords: ['picture', 'photo', 'img', 'upload'],
+    icon: <Icon name="image" />,
+    flavour: 'block:image',
+  },
+  {
+    id: 'formula',
+    title: 'Formula',
+    description: 'Display a LaTeX formula',
+    keywords: ['math', 'equation', 'latex', 'tex'],
+    icon: <Icon name="sigma" />,
+    flavour: 'block:formula',
+  },
+  {
+    id: 'divider',
+    title: 'Divider',
+    description: 'Visually separate sections',
+    keywords: ['hr', 'line', 'separator', 'rule'],
+    icon: <Icon name="divider" />,
+    flavour: 'block:divider',
+  },
+] satisfies SlashMenuItem[]);
+
+const messageKey = (id: string, part: 'title' | 'description' | 'keywords') =>
+  `slash.item.${id}.${part}` as MessageKey;
+
+const splitKeywords = (value: string) =>
+  value
+    .split(',')
+    .map((word) => word.trim())
+    .filter(Boolean);
+
+export function localizeSlashItems(t: TFunction): readonly SlashMenuItem[] {
+  return defaultSlashItems.map((item) => ({
+    ...item,
+    title: t(messageKey(item.id, 'title')),
+    description: t(messageKey(item.id, 'description')),
+    // Английские слова остаются в поиске: «h1», «todo» и т. п. работают на любом языке.
+    keywords: [
+      ...new Set([...(item.keywords ?? []), ...splitKeywords(t(messageKey(item.id, 'keywords')))]),
+    ],
+  }));
+}
+
+/**
+ * Итоговый список пунктов: `false` — меню выключено; массив — пункты приложения
+ * дополняют стандартные (одинаковый id заменяет стандартный пункт).
+ */
+export function resolveSlashItems(
+  custom: readonly SlashMenuItem[] | false | undefined,
+  t?: TFunction,
+): readonly SlashMenuItem[] {
+  if (custom === false) return [];
+
+  const defaults = t ? localizeSlashItems(t) : defaultSlashItems;
+
+  if (!custom || custom.length === 0) return defaults;
+
+  const overrides = new Map(custom.map((item) => [item.id, item]));
+  const merged = defaults.map((item) => overrides.get(item.id) ?? item);
+  const extra = custom.filter((item) => !defaultSlashItems.some((d) => d.id === item.id));
+
+  return [...merged, ...extra];
+}

package/src/slash/filter.ts

@@ -0,0 +1,29 @@
+import type { SlashMenuItem } from './types';
+
+function score(item: SlashMenuItem, query: string): number {
+  const title = item.title.toLowerCase();
+  const words = [
+    title,
+    ...title.split(/\s+/),
+    ...(item.keywords ?? []).map((k) => k.toLowerCase()),
+    item.id.toLowerCase(),
+  ];
+
+  if (title.startsWith(query)) return 4;
+  if (words.some((w) => w.startsWith(query))) return 3;
+  if (words.some((w) => w.includes(query))) return 1;
+
+  return 0;
+}
+
+export function filterSlashItems(items: readonly SlashMenuItem[], query: string): SlashMenuItem[] {
+  const q = query.trim().toLowerCase();
+
+  if (q === '') return [...items];
+
+  return items
+    .map((item, index) => ({ item, index, score: score(item, q) }))
+    .filter((entry) => entry.score > 0)
+    .sort((a, b) => b.score - a.score || a.index - b.index)
+    .map((entry) => entry.item);
+}

package/src/slash/items.ts

@@ -0,0 +1,30 @@
+import type { Editor } from '@inkbrick/engine';
+
+import { filterSlashItems } from './filter';
+import type { SlashMenuItem } from './types';
+
+export function availableSlashItems(
+  editor: Editor,
+  items: readonly SlashMenuItem[],
+  blockId: string,
+): SlashMenuItem[] {
+  const block = editor.store.getBlock(blockId);
+  const parent = block?.parentId ? editor.store.getBlock(block.parentId) : undefined;
+
+  if (!block || !parent) return [];
+
+  return items.filter(
+    (item) =>
+      editor.schema.hasBlock(item.flavour) &&
+      editor.schema.validateRelation(parent.flavour, item.flavour),
+  );
+}
+
+export function visibleSlashItems(
+  editor: Editor,
+  items: readonly SlashMenuItem[],
+  blockId: string,
+  query: string,
+): SlashMenuItem[] {
+  return filterSlashItems(availableSlashItems(editor, items, blockId), query);
+}

package/src/slash/syncSlashMenu.ts

@@ -0,0 +1,67 @@
+import type { Editor } from '@inkbrick/engine';
+
+import type { EditorView } from '../editing/EditorView';
+import { readDocSelection } from '../editing/selection';
+import { visibleSlashItems } from './items';
+import type { SlashMenuItem } from './types';
+
+function caretPosition(view: EditorView, blockId: string): { x: number; y: number } | null {
+  const selection = globalThis.getSelection();
+  const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+  const rect = range?.getClientRects()[0];
+
+  if (rect && (rect.width > 0 || rect.height > 0)) return { x: rect.left, y: rect.bottom };
+
+  const element = view.getElement(blockId);
+
+  if (!element) return null;
+
+  const box = element.getBoundingClientRect();
+
+  return { x: box.left, y: box.bottom };
+}
+
+/**
+ * Сверяет меню с текущим состоянием документа и выделением: обновляет запрос и позицию
+ * или закрывает меню, если каретка ушла от «/» или «/» удалён.
+ */
+export function syncSlashMenu(
+  editor: Editor,
+  view: EditorView,
+  items: readonly SlashMenuItem[],
+): void {
+  const state = view.slash.getState();
+
+  if (!state.open || !state.blockId) return;
+
+  const root = view.getRoot();
+  const selection = root ? readDocSelection(root) : null;
+  const block = editor.store.getBlock(state.blockId);
+  const text = block ? editor.engine.inline.toPlainText(block.content) : '';
+
+  if (
+    !selection ||
+    !selection.collapsed ||
+    selection.from.blockId !== state.blockId ||
+    selection.from.offset <= state.slashOffset ||
+    text[state.slashOffset] !== '/'
+  ) {
+    view.slash.close();
+    return;
+  }
+
+  const query = text.slice(state.slashOffset + 1, selection.from.offset);
+  const visible = visibleSlashItems(editor, items, state.blockId, query);
+
+  if (visible.length === 0 && /\s$/.test(query)) {
+    view.slash.close();
+    return;
+  }
+
+  view.slash.update({
+    query,
+    activeIndex:
+      query !== state.query ? 0 : Math.min(state.activeIndex, Math.max(visible.length - 1, 0)),
+    position: caretPosition(view, state.blockId),
+  });
+}

package/src/slash/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface SlashMenuItem {
+  readonly id: string;
+  readonly title: string;
+  readonly description?: string;
+  readonly keywords?: readonly string[];
+  readonly icon?: ReactNode;
+  readonly flavour: string;
+  readonly props?: Readonly<Record<string, unknown>>;
+}
+
+export interface SlashMenuProps {
+  readonly items: readonly SlashMenuItem[];
+  readonly query: string;
+  readonly activeIndex: number;
+  readonly position: { readonly x: number; readonly y: number };
+  readonly onSelect: (item: SlashMenuItem) => void;
+  readonly onHover: (index: number) => void;
+  readonly onClose: () => void;
+}

package/src/toolbar/DefaultToolbar.tsx

@@ -0,0 +1,281 @@
+import { useEffect, useLayoutEffect, useRef, useState, type FormEvent } from 'react';
+
+import { ALIGNMENTS, COLOR_NAMES, isColorName, type Alignment } from '@inkbrick/document';
+
+import { useT } from '../hooks/useT';
+import { Icon, type IconName } from '../icons/Icon';
+import type { InlineFormat, ToolbarPanel, ToolbarProps } from './types';
+
+const BUTTONS: readonly { format: InlineFormat; icon: IconName }[] = [
+  { format: 'bold', icon: 'bold' },
+  { format: 'italic', icon: 'italic' },
+  { format: 'underline', icon: 'underline' },
+  { format: 'strike', icon: 'strike' },
+  { format: 'code', icon: 'code' },
+];
+
+const ALIGN_ICONS: Record<Alignment, IconName> = {
+  left: 'align-left',
+  center: 'align-center',
+  right: 'align-right',
+  justify: 'align-justify',
+};
+
+const PANELS: readonly { panel: ToolbarPanel; icon: IconName }[] = [
+  { panel: 'color', icon: 'baseline' },
+  { panel: 'highlight', icon: 'highlighter' },
+];
+
+export function DefaultToolbar({
+  formats,
+  position,
+  linkOpen,
+  panel,
+  onToggle,
+  onOpenLink,
+  onApplyLink,
+  onCancelLink,
+  onTogglePanel,
+  onApplyColor,
+  onAlign,
+  onInsertFormula,
+}: ToolbarProps) {
+  const t = useT();
+  const input = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState('');
+  const [invalid, setInvalid] = useState(false);
+  const [below, setBelow] = useState(false);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    if (!linkOpen) return;
+
+    setValue(formats.link ?? '');
+    setInvalid(false);
+    input.current?.focus();
+    input.current?.select();
+  }, [linkOpen]);
+
+  /*
+   * У верхнего края окна показываем под выделением. На сенсорных экранах — всегда под ним: сверху системное
+   * меню выделения («Копировать», «Вставить») закрыло бы toolbar.
+   */
+  useLayoutEffect(() => {
+    const coarse = window.matchMedia?.('(pointer: coarse)').matches ?? false;
+
+    setBelow(coarse || position.y - (ref.current?.offsetHeight ?? 40) - 12 < 0);
+    setWidth(ref.current?.offsetWidth ?? 0);
+  }, [position.x, position.y, linkOpen, panel]);
+
+  const left = Math.max(8, Math.min(position.x - width / 2, window.innerWidth - width - 8));
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+
+    if (!onApplyLink(value)) setInvalid(true);
+  };
+
+  const colorKind = panel === 'highlight' ? 'backgroundColor' : 'color';
+  const currentColor = panel === 'highlight' ? formats.backgroundColor : formats.color;
+
+  return (
+    <div
+      ref={ref}
+      className="inkbrick-toolbar"
+      role="toolbar"
+      aria-label={t('toolbar.label')}
+      data-inkbrick-ui="toolbar"
+      data-placement={below ? 'below' : 'above'}
+      data-testid="toolbar"
+      style={{
+        left,
+        top: position.y,
+        transform: below ? 'translateY(28px)' : 'translateY(calc(-100% - 8px))',
+      }}
+      onMouseDown={(event) => {
+        if (event.target !== input.current) event.preventDefault();
+      }}
+    >
+      {linkOpen ? (
+        <form className="inkbrick-toolbar__link" data-inkbrick-part="link-form" onSubmit={submit}>
+          <input
+            ref={input}
+            data-inkbrick-part="input"
+            data-invalid={invalid || undefined}
+            type="text"
+            aria-label={t('toolbar.link.url')}
+            aria-invalid={invalid}
+            placeholder={t('toolbar.link.placeholder')}
+            value={value}
+            onChange={(event) => {
+              setValue(event.target.value);
+              setInvalid(false);
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                onCancelLink();
+              }
+            }}
+          />
+          <button
+            type="submit"
+            className="inkbrick-toolbar__button"
+            data-inkbrick-part="button"
+            aria-label={t('toolbar.link.apply')}
+            title={t('toolbar.link.apply')}
+          >
+            <Icon name="check" />
+          </button>
+          {formats.link && (
+            <button
+              type="button"
+              className="inkbrick-toolbar__button"
+              data-inkbrick-part="button"
+              aria-label={t('toolbar.link.remove')}
+              title={t('toolbar.link.remove')}
+              onClick={() => onApplyLink(null)}
+            >
+              <Icon name="unlink" />
+            </button>
+          )}
+        </form>
+      ) : (
+        <>
+          {BUTTONS.map(({ format, icon }) => (
+            <button
+              key={format}
+              type="button"
+              className="inkbrick-toolbar__button"
+              data-inkbrick-part="button"
+              data-format={format}
+              data-pressed={formats[format] || undefined}
+              aria-label={t(`toolbar.${format}.label`)}
+              aria-pressed={formats[format]}
+              title={t(`toolbar.${format}.title`)}
+              onClick={() => onToggle(format)}
+            >
+              <Icon name={icon} />
+            </button>
+          ))}
+          <span
+            className="inkbrick-toolbar__separator"
+            data-inkbrick-part="separator"
+            role="separator"
+          />
+          <button
+            type="button"
+            className="inkbrick-toolbar__button"
+            data-inkbrick-part="button"
+            data-format="link"
+            data-pressed={formats.link !== undefined || undefined}
+            aria-label={t('toolbar.link.label')}
+            aria-pressed={formats.link !== undefined}
+            title={t('toolbar.link.title')}
+            onClick={onOpenLink}
+          >
+            <Icon name="link" />
+          </button>
+          <button
+            type="button"
+            className="inkbrick-toolbar__button"
+            data-inkbrick-part="button"
+            data-format="formula"
+            aria-label={t('toolbar.formula.label')}
+            title={t('toolbar.formula.title')}
+            onClick={onInsertFormula}
+          >
+            <Icon name="sigma" />
+          </button>
+          <span
+            className="inkbrick-toolbar__separator"
+            data-inkbrick-part="separator"
+            role="separator"
+          />
+          {PANELS.map(({ panel: name, icon }) => {
+            const current = name === 'color' ? formats.color : formats.backgroundColor;
+
+            return (
+              <button
+                key={name}
+                type="button"
+                className="inkbrick-toolbar__button"
+                data-inkbrick-part="button"
+                data-format={name}
+                data-pressed={panel === name || undefined}
+                data-current-color={isColorName(current) ? current : undefined}
+                aria-label={t(`toolbar.${name}.label`)}
+                aria-haspopup="true"
+                aria-expanded={panel === name}
+                title={t(`toolbar.${name}.title`)}
+                onClick={() => onTogglePanel(name)}
+              >
+                <Icon name={icon} />
+                <span className="inkbrick-toolbar__indicator" data-inkbrick-part="indicator" />
+              </button>
+            );
+          })}
+          <span
+            className="inkbrick-toolbar__separator"
+            data-inkbrick-part="separator"
+            role="separator"
+          />
+          {ALIGNMENTS.map((align) => (
+            <button
+              key={align}
+              type="button"
+              className="inkbrick-toolbar__button"
+              data-inkbrick-part="button"
+              data-format={`align-${align}`}
+              data-pressed={formats.align === align || undefined}
+              aria-label={t(`toolbar.align.${align}.label`)}
+              aria-pressed={formats.align === align}
+              title={t(`toolbar.align.${align}.title`)}
+              onClick={() => onAlign(align)}
+            >
+              <Icon name={ALIGN_ICONS[align]} />
+            </button>
+          ))}
+          {panel && (
+            <div
+              className="inkbrick-toolbar__panel"
+              data-inkbrick-part="panel"
+              data-kind={panel}
+              role="group"
+              aria-label={t(`toolbar.${panel}.label`)}
+            >
+              <button
+                type="button"
+                data-inkbrick-part="swatch"
+                data-color=""
+                data-pressed={currentColor === undefined || undefined}
+                aria-label={t(
+                  panel === 'color' ? 'toolbar.color.default' : 'toolbar.highlight.none',
+                )}
+                title={t(panel === 'color' ? 'toolbar.color.default' : 'toolbar.highlight.none')}
+                onClick={() => onApplyColor(colorKind, null)}
+              >
+                <Icon name="x" />
+              </button>
+              {COLOR_NAMES.map((name) => (
+                <button
+                  key={name}
+                  type="button"
+                  data-inkbrick-part="swatch"
+                  data-color={name}
+                  data-pressed={currentColor === name || undefined}
+                  aria-label={t(`color.${name}`)}
+                  title={t(`color.${name}`)}
+                  onClick={() => onApplyColor(colorKind, name)}
+                >
+                  {panel === 'color' ? 'A' : null}
+                </button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}