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

package/src/blocks/FormulaBlock.tsx

@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { MAX_FORMULA_LENGTH } from '@inkbrick/document';
+
+import { useT } from '../hooks/useT';
+import { LazyFormulaPalette } from '../formula/LazyFormulaPalette';
+import { useSnippetInsert } from '../formula/snippet';
+import { FormulaView } from '../math/FormulaView';
+import type { BlockViewProps } from '../ui/types';
+
+/**
+ * Формула отдельной строкой. Блок без редактируемого текста («остров»): код LaTeX хранится в `props.latex`,
+ * а правится в собственном поле. Клик по формуле открывает поле; `Ctrl/Cmd+Enter` или потеря фокуса применяют код,
+ * `Esc` отменяет. Пустой блок сразу открывается для ввода.
+ */
+export function FormulaBlock({ block, editor, selected, readOnly }: BlockViewProps) {
+  const t = useT();
+  const latex = typeof block.props.latex === 'string' ? block.props.latex : '';
+  const [editing, setEditing] = useState(latex === '' && !readOnly);
+  const [draft, setDraft] = useState(latex);
+  const [error, setError] = useState<string | null>(null);
+  const field = useRef<HTMLTextAreaElement>(null);
+  const container = useRef<HTMLDivElement>(null);
+  const insertSnippet = useSnippetInsert(field, draft, setDraft);
+  // Escape отменяет ввод, а blur после него не должен сохранить набранное.
+  const cancelled = useRef(false);
+  const born = useRef(Date.now());
+
+  useEffect(() => {
+    if (!editing) setDraft(latex);
+  }, [latex, editing]);
+
+  useEffect(() => {
+    if (!editing) return;
+
+    // После Esc поле удаляется, а blur при удалении шлёт не каждый браузер (Firefox — нет): флаг сбрасываем здесь.
+    cancelled.current = false;
+    // Окно «фокус отняли программно» отсчитывается от установки фокуса, а не от отрисовки: на медленной машине
+    // отрисовка нового блока сама может занять больше этого окна.
+    born.current = Date.now();
+    field.current?.focus();
+
+    // Сразу после создания блока редактор переносит курсор в следующий блок и забирает фокус: возвращаем его в поле.
+    const timer = setTimeout(() => {
+      if (Date.now() - born.current < 300) field.current?.focus();
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [editing]);
+
+  useEffect(() => {
+    if (readOnly) setEditing(false);
+  }, [readOnly]);
+
+  const settle = useCallback((state: 'ready' | 'error', message?: string) => {
+    setError(state === 'error' ? (message ?? '') : null);
+  }, []);
+
+  const commit = () => {
+    if (cancelled.current) {
+      cancelled.current = false;
+      return;
+    }
+
+    // Блок только что создан и пуст: фокус отняли программно (курсор перенесён дальше) — поле остаётся открытым.
+    if (latex === '' && draft === '' && Date.now() - born.current < 300) {
+      setTimeout(() => field.current?.focus(), 0);
+      return;
+    }
+
+    if (draft !== latex) {
+      editor.dispatch({
+        type: 'setBlockProps',
+        payload: { blockId: block.id, props: { latex: draft } },
+      });
+    }
+
+    setEditing(false);
+  };
+
+  const cancel = () => {
+    cancelled.current = true;
+    setDraft(latex);
+    setEditing(false);
+  };
+
+  return (
+    <div
+      className="block block-formula"
+      data-inkbrick-block="formula"
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+      contentEditable={false}
+    >
+      {editing ? (
+        <div
+          ref={container}
+          className="formula-editor"
+          data-inkbrick-part="formula-editor"
+          // Поле закрывается, когда фокус ушёл из редактора целиком; переход на кнопки палитры его не закрывает.
+          onBlur={(event) => {
+            if (
+              event.relatedTarget instanceof Node &&
+              container.current?.contains(event.relatedTarget)
+            )
+              return;
+
+            commit();
+          }}
+        >
+          <textarea
+            ref={field}
+            className="formula-source"
+            data-inkbrick-part="formula-source"
+            aria-label={t('formula.source')}
+            aria-invalid={error !== null || undefined}
+            placeholder={t('formula.placeholder')}
+            spellCheck={false}
+            rows={Math.min(8, Math.max(2, draft.split('\n').length))}
+            maxLength={MAX_FORMULA_LENGTH}
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                cancel();
+                (event.target as HTMLTextAreaElement).blur();
+              } else if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                (event.target as HTMLTextAreaElement).blur();
+              }
+            }}
+          />
+          <div className="formula-preview" data-inkbrick-part="formula-preview">
+            <FormulaView latex={draft} display showError onSettled={settle} />
+          </div>
+          <LazyFormulaPalette onInsert={insertSnippet} />
+          <div className="formula-hint" data-inkbrick-part="formula-hint">
+            {t('formula.hint')}
+          </div>
+        </div>
+      ) : latex === '' ? (
+        <button
+          type="button"
+          className="formula-empty"
+          data-inkbrick-part="formula-empty"
+          disabled={readOnly}
+          onClick={() => setEditing(true)}
+        >
+          {t('formula.empty')}
+        </button>
+      ) : (
+        <div
+          className="formula-display"
+          data-inkbrick-part="formula-display"
+          role={readOnly ? undefined : 'button'}
+          tabIndex={readOnly ? undefined : 0}
+          aria-label={readOnly ? undefined : t('formula.edit')}
+          title={readOnly ? undefined : t('formula.edit')}
+          onClick={() => !readOnly && setEditing(true)}
+          onKeyDown={(event) => {
+            if (!readOnly && (event.key === 'Enter' || event.key === ' ')) {
+              event.preventDefault();
+              setEditing(true);
+            }
+          }}
+        >
+          <FormulaView latex={latex} display showError />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/blocks/HeadingBlock.tsx

@@ -0,0 +1,22 @@
+import { getBlockAlign } from '@inkbrick/document';
+
+import { Editable } from './Editable';
+import type { BlockProps } from './BlockProps';
+
+export function HeadingBlock({ block, selected }: BlockProps) {
+  const level = typeof block.props.level === 'number' ? block.props.level : 1;
+  const align = getBlockAlign(block) ?? 'left';
+
+  return (
+    <div
+      className={`block block-heading level-${level}`}
+      data-inkbrick-block="heading"
+      data-level={level}
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+      data-align={align}
+    >
+      <Editable block={block} />
+    </div>
+  );
+}

package/src/blocks/ImageBlock.tsx

@@ -0,0 +1,362 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+
+import { isSafeImageUrl } from '@inkbrick/document';
+import type { Editor } from '@inkbrick/engine';
+
+import { useEditorView } from '../hooks/useEditorView';
+import { useT } from '../hooks/useT';
+import type { MessageKey } from '../i18n/en';
+import { Icon, type IconName } from '../icons/Icon';
+import { formatImageError } from '../images/ImageError';
+import { fillImageBlock } from '../images/insertImages';
+import { normalizeImageUrl } from '../images/upload';
+import { DEFAULT_IMAGE_TYPES } from '../images/types';
+import { useEditorUI } from '../ui/EditorUIContext';
+import type { BlockViewProps } from '../ui/types';
+
+const WIDTHS = [25, 50, 75, 100];
+const ALIGNS: ReadonlyArray<{ value: string; label: MessageKey; icon: IconName }> = [
+  { value: 'left', label: 'image.align.left', icon: 'align-left' },
+  { value: 'center', label: 'image.align.center', icon: 'align-center' },
+  { value: 'right', label: 'image.align.right', icon: 'align-right' },
+];
+
+const setProps = (editor: Editor, blockId: string, props: Record<string, unknown>) =>
+  editor.dispatch({ type: 'setBlockProps', payload: { blockId, props: props as never } });
+
+/** Поле, которое сохраняется по Enter/потере фокуса, а не на каждую букву (одна запись в истории). */
+function CommitInput({
+  value,
+  label,
+  placeholder,
+  className,
+  part,
+  onCommit,
+}: {
+  value: string;
+  label: string;
+  placeholder: string;
+  className: string;
+  part: string;
+  onCommit: (value: string) => void;
+}) {
+  const [draft, setDraft] = useState(value);
+  // Последнее сохранённое/известное значение: Enter сохраняет и тут же снимает фокус, а blur не должен сохранить второй раз.
+  const saved = useRef(value);
+  const cancelled = useRef(false);
+
+  useEffect(() => {
+    saved.current = value;
+    setDraft(value);
+  }, [value]);
+
+  const commit = () => {
+    if (cancelled.current) {
+      cancelled.current = false;
+      return;
+    }
+
+    if (draft !== saved.current) {
+      saved.current = draft;
+      onCommit(draft);
+    }
+  };
+
+  return (
+    <input
+      className={className}
+      data-inkbrick-part={part}
+      type="text"
+      aria-label={label}
+      placeholder={placeholder}
+      value={draft}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={commit}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          commit();
+          (event.target as HTMLInputElement).blur();
+        } else if (event.key === 'Escape') {
+          cancelled.current = true;
+          setDraft(saved.current);
+          (event.target as HTMLInputElement).blur();
+        }
+      }}
+    />
+  );
+}
+
+function ImagePicker({ blockId, editor }: { blockId: string; editor: Editor }) {
+  const view = useEditorView();
+  const t = useT();
+  const { images } = useEditorUI();
+  const [url, setUrl] = useState('');
+  const [linkError, setLinkError] = useState<MessageKey | null>(null);
+  const uploadError = useSyncExternalStore(
+    view.uploads.subscribe,
+    () => view.uploads.errorDetailsOf(blockId),
+    () => undefined,
+  );
+  const error = linkError ? t(linkError) : uploadError ? formatImageError(uploadError, t) : null;
+  const file = useRef<HTMLInputElement>(null);
+
+  const embed = () => {
+    const normalized = normalizeImageUrl(url);
+
+    if (!normalized) {
+      setLinkError('image.error.invalidLink');
+      return;
+    }
+
+    if (
+      editor.dispatch({
+        type: 'setBlockProps',
+        payload: { blockId, props: { src: normalized } },
+      }) === undefined
+    ) {
+      setLinkError('image.error.unsupportedAddress');
+    }
+  };
+
+  const upload = async (selected: File | undefined) => {
+    if (!selected) return;
+
+    setLinkError(null);
+    await fillImageBlock(editor, view, images, blockId, selected);
+  };
+
+  return (
+    <div className="image-picker" data-inkbrick-part="picker" data-testid="image-picker">
+      <div className="image-picker__row" data-inkbrick-part="picker-row">
+        <input
+          className="image-picker__input"
+          data-inkbrick-part="picker-input"
+          type="text"
+          aria-label={t('image.url.label')}
+          aria-invalid={linkError !== null}
+          placeholder={t('image.url.placeholder')}
+          value={url}
+          onChange={(event) => {
+            setUrl(event.target.value);
+            setLinkError(null);
+            view.uploads.clearError(blockId);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              embed();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="image-picker__button"
+          data-inkbrick-part="picker-button"
+          onClick={embed}
+        >
+          {t('image.embed')}
+        </button>
+        <button
+          type="button"
+          className="image-picker__button"
+          onClick={() => file.current?.click()}
+        >
+          {t('image.upload')}
+        </button>
+        <input
+          ref={file}
+          type="file"
+          hidden
+          data-testid="image-file"
+          accept={(images.acceptedTypes ?? DEFAULT_IMAGE_TYPES).join(',')}
+          onChange={(event) => {
+            void upload(event.target.files?.[0]);
+            event.target.value = '';
+          }}
+        />
+      </div>
+      {error && (
+        <div className="image-picker__error" data-inkbrick-part="picker-error" role="alert">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function ImageBlock({ block, editor, selected, readOnly }: BlockViewProps) {
+  const view = useEditorView();
+  const t = useT();
+  const uploading = useSyncExternalStore(
+    view.uploads.subscribe,
+    () => view.uploads.has(block.id),
+    () => false,
+  );
+
+  const { src, alt, caption } = block.props as { src?: string; alt?: string; caption?: string };
+  const width = typeof block.props.width === 'number' ? block.props.width : 100;
+  const align = typeof block.props.align === 'string' ? block.props.align : 'center';
+  const address = typeof src === 'string' ? src : '';
+
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => setFailed(false), [address]);
+
+  let content;
+
+  if (uploading) {
+    content = (
+      <div className="image-status" data-inkbrick-part="status" data-state="loading" role="status">
+        {t('image.status.uploading')}
+      </div>
+    );
+  } else if (address === '') {
+    content = readOnly ? (
+      <div className="image-status" data-inkbrick-part="status" data-state="empty">
+        {t('image.status.none')}
+      </div>
+    ) : (
+      <ImagePicker blockId={block.id} editor={editor} />
+    );
+  } else if (!isSafeImageUrl(address)) {
+    content = (
+      <div
+        className="image-status image-status--error"
+        data-inkbrick-part="status"
+        data-state="error"
+      >
+        {t('image.status.unsupported')}
+      </div>
+    );
+  } else if (failed) {
+    content = (
+      <div
+        className="image-status image-status--error"
+        data-inkbrick-part="status"
+        data-state="error"
+        role="alert"
+      >
+        {t('image.status.failed')}
+        {!readOnly && (
+          <button
+            type="button"
+            className="image-picker__button"
+            data-inkbrick-part="picker-button"
+            onClick={() => setProps(editor, block.id, { src: '' })}
+          >
+            {t('image.status.retry')}
+          </button>
+        )}
+      </div>
+    );
+  } else {
+    content = (
+      <figure
+        className="image-figure"
+        data-inkbrick-part="figure"
+        data-align={align}
+        style={{ width: `${width}%` }}
+      >
+        <img
+          src={address}
+          alt={alt ?? ''}
+          loading="lazy"
+          decoding="async"
+          draggable={false}
+          data-inkbrick-part="image"
+          referrerPolicy="no-referrer"
+          onError={() => setFailed(true)}
+        />
+
+        {!readOnly && (
+          <div
+            className="image-tools"
+            data-inkbrick-part="tools"
+            role="toolbar"
+            aria-label={t('image.options')}
+          >
+            {ALIGNS.map(({ value, label, icon }) => (
+              <button
+                key={value}
+                type="button"
+                className="image-tools__button"
+                data-inkbrick-part="tool"
+                data-pressed={align === value || undefined}
+                aria-label={t(label)}
+                aria-pressed={align === value}
+                title={t(label)}
+                onClick={() => setProps(editor, block.id, { align: value })}
+              >
+                <Icon name={icon} />
+              </button>
+            ))}
+            <select
+              className="image-tools__select"
+              data-inkbrick-part="width"
+              aria-label={t('image.width')}
+              value={WIDTHS.includes(width) ? width : ''}
+              onChange={(event) =>
+                setProps(editor, block.id, { width: Number(event.target.value) })
+              }
+            >
+              {!WIDTHS.includes(width) && <option value="">{width}%</option>}
+              {WIDTHS.map((w) => (
+                <option key={w} value={w}>
+                  {w}%
+                </option>
+              ))}
+            </select>
+            <CommitInput
+              className="image-tools__alt"
+              part="alt"
+              label={t('image.alt')}
+              placeholder={t('image.alt')}
+              value={alt ?? ''}
+              onCommit={(value) => setProps(editor, block.id, { alt: value })}
+            />
+            <button
+              type="button"
+              className="image-tools__button"
+              data-inkbrick-part="tool"
+              aria-label={t('image.replace')}
+              title={t('image.replace')}
+              onClick={() => setProps(editor, block.id, { src: '' })}
+            >
+              <Icon name="replace" />
+            </button>
+          </div>
+        )}
+
+        {readOnly ? (
+          caption ? (
+            <figcaption className="image-caption" data-inkbrick-part="caption">
+              {caption}
+            </figcaption>
+          ) : null
+        ) : (
+          <CommitInput
+            className="image-caption image-caption--input"
+            part="caption"
+            label={t('image.caption.label')}
+            placeholder={t('image.caption.placeholder')}
+            value={caption ?? ''}
+            onCommit={(value) => setProps(editor, block.id, { caption: value })}
+          />
+        )}
+      </figure>
+    );
+  }
+
+  return (
+    <div
+      className="block block-image"
+      data-inkbrick-block="image"
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+      contentEditable={false}
+    >
+      {content}
+    </div>
+  );
+}

package/src/blocks/ListBlock.tsx

@@ -0,0 +1,86 @@
+import { getBlockAlign } from '@inkbrick/document';
+
+import { BlockChildren } from './BlockChildren';
+import { useBlock } from '../hooks/useBlock';
+import { useChildren } from '../hooks/useChildren';
+import { useEditor } from '../hooks/useEditor';
+import { useT } from '../hooks/useT';
+import { Editable } from './Editable';
+import type { BlockProps } from './BlockProps';
+
+function useOrderedNumber(block: BlockProps['block']): number {
+  const { store } = useEditor();
+  const parent = useBlock(block.parentId ?? '');
+
+  if (!parent) return 1;
+
+  let number = 1;
+
+  for (let i = parent.children.indexOf(block.id) - 1; i >= 0; i--) {
+    const sibling = store.getBlock(parent.children[i]);
+
+    if (sibling?.flavour !== 'block:list' || sibling.props.type !== 'ordered') break;
+
+    number++;
+  }
+
+  return number;
+}
+
+export function ListBlock({ block, selected, readOnly }: BlockProps) {
+  const editor = useEditor();
+  const t = useT();
+  const children = useChildren(block.id);
+  const orderedNumber = useOrderedNumber(block);
+
+  const type = typeof block.props.type === 'string' ? block.props.type : 'bullet';
+
+  return (
+    <div
+      className="block-list-item"
+      data-inkbrick-block="list"
+      data-align={getBlockAlign(block) ?? 'left'}
+      data-block-id={block.id}
+      data-list-type={type}
+      data-checked={type === 'todo' ? block.props.checked === true : undefined}
+      data-selected={selected || undefined}
+    >
+      <div className="block block-list" data-inkbrick-part="row" data-list-type={type}>
+        {type === 'todo' ? (
+          <input
+            className="list-marker list-checkbox"
+            data-inkbrick-part="checkbox"
+            type="checkbox"
+            aria-label={t('block.list.done')}
+            contentEditable={false}
+            disabled={readOnly}
+            checked={block.props.checked === true}
+            onChange={(event) =>
+              editor.dispatch({
+                type: 'setBlockProps',
+                payload: { blockId: block.id, props: { checked: event.target.checked } },
+              })
+            }
+          />
+        ) : (
+          <span
+            className="list-marker"
+            data-inkbrick-part="marker"
+            contentEditable={false}
+            aria-hidden="true"
+          >
+            {type === 'ordered' ? `${orderedNumber}.` : '•'}
+          </span>
+        )}
+
+        <Editable block={block} />
+      </div>
+
+      {children.length > 0 && (
+        <div className="block-nested-children" data-inkbrick-part="children">
+          <BlockChildren id={block.id} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/blocks/NoteBlock.tsx

@@ -0,0 +1,10 @@
+import { BlockChildren } from './BlockChildren';
+import type { BlockProps } from './BlockProps';
+
+export function NoteBlock({ block }: BlockProps) {
+  return (
+    <section className="page-content" data-inkbrick-block="note" data-block-id={block.id}>
+      <BlockChildren id={block.id} />
+    </section>
+  );
+}

package/src/blocks/PageBlock.tsx

@@ -0,0 +1,10 @@
+import { BlockChildren } from './BlockChildren';
+import type { BlockProps } from './BlockProps';
+
+export function PageBlock({ block }: BlockProps) {
+  return (
+    <div className="page" data-inkbrick-block="page" data-block-id={block.id}>
+      <BlockChildren id={block.id} />
+    </div>
+  );
+}

package/src/blocks/ParagraphBlock.tsx

@@ -0,0 +1,20 @@
+import { getBlockAlign } from '@inkbrick/document';
+
+import { Editable } from './Editable';
+import type { BlockProps } from './BlockProps';
+
+export function ParagraphBlock({ block, selected }: BlockProps) {
+  const align = getBlockAlign(block) ?? 'left';
+
+  return (
+    <div
+      className="block block-paragraph"
+      data-inkbrick-block="paragraph"
+      data-block-id={block.id}
+      data-selected={selected || undefined}
+      data-align={align}
+    >
+      <Editable block={block} />
+    </div>
+  );
+}