edytor 1.0.0-rc.3 → 2.0.0

package/dist/collaboration/history/HistoryPanel.svelte

@@ -1,554 +0,0 @@
-<script module lang="ts">
-	import type { VersionChange } from './diff.js';
-	import type { JSONDoc } from '../../utils/json.js';
-	import type { HistoryVersion } from './client.js';
-	import type { HistoryPanelProps } from './panel.js';
-
-	/** No change highlighted. */
-	const NONE: ReadonlyMap<string, VersionChange> = new Map();
-</script>
-
-<script lang="ts">
-	import { untrack } from 'svelte';
-	import Edytor from '../../components/Edytor.svelte';
-	import { HistoryRequestError } from './client.js';
-	import { versionDiff } from './diff.js';
-	import { versionHighlightsPlugin } from './versionHighlights.js';
-	import { labelsWith } from '../../labels.js';
-	import { optionAttributes } from '../../plugins/chrome.js';
-
-	let {
-		client,
-		document: live,
-		plugins = [],
-		defaultPlugins = true,
-		readonly = false,
-		highlight = $bindable(true),
-		locale,
-		labels: labelOverrides,
-		class: className,
-		previewClass,
-		version: versionRow,
-		item: itemRow,
-		onRestore,
-		onUndo,
-		onError
-	}: HistoryPanelProps = $props();
-
-	const labels = $derived(labelsWith('history', labelOverrides));
-
-	/** The versions, newest first (`null` while the first list loads). */
-	let versions = $state.raw<HistoryVersion[] | null>(null);
-	let selected = $state<string | null>(null);
-	/** The selected version's JSON, once read (`null` while it loads or when it is gone). */
-	let shown = $state.raw<JSONDoc | null>(null);
-	let reading = $state(false);
-	/** The live document as JSON, read again at each of its commits. */
-	let current = $state.raw<JSONDoc | null>(null);
-	let busy = $state(false);
-	/** A restore this panel applied, which Undo restore can take back. */
-	let undoable = $state(false);
-	/** The last outcome, announced (`aria-live`). */
-	let status = $state('');
-	let failed = $state(false);
-	/** The request serial: an older answer never replaces a newer one. */
-	let serial = 0;
-
-	$effect(() => {
-		const document = live;
-		if (!document) {
-			current = null;
-			return;
-		}
-		current = document.toJSON();
-		return document.onChange(() => (current = document.toJSON()));
-	});
-
-	const diff = $derived(shown && current ? versionDiff(shown, current) : null);
-	const changes = $derived(highlight && diff ? diff.changes : NONE);
-	/** What the preview renders: the version, with the blocks added since when highlighting. */
-	const previewValue = $derived(shown && (highlight && diff ? diff.preview : shown));
-	/** The preview remounts when what it renders changes (`value` is read once). */
-	const previewSource = $derived(previewValue && JSON.stringify(previewValue));
-	const previewPlugins = $derived([versionHighlightsPlugin(() => changes), ...plugins]);
-
-	const fail = (error: unknown) => {
-		failed = true;
-		status =
-			error instanceof HistoryRequestError && (error.status === 401 || error.status === 403)
-				? labels.denied
-				: labels.failed;
-		onError?.(error);
-	};
-
-	/** List the versions again; keeps the selection when it is still listed, else selects the newest. */
-	export const refresh = async () => {
-		try {
-			const listed = await client.list();
-			versions = listed;
-			if (selected === null || !listed.some((entry) => entry.key === selected)) {
-				void select(listed[0]?.key ?? null);
-			}
-		} catch (error) {
-			versions = versions ?? [];
-			fail(error);
-		}
-	};
-
-	/** Preview the version `key` (`null`: none). */
-	export const select = async (key: string | null) => {
-		selected = key;
-		shown = null;
-		failed = false;
-		status = '';
-		const mine = ++serial;
-		if (key === null) return;
-		reading = true;
-		try {
-			const json = await client.read(key);
-			if (mine !== serial) return;
-			shown = json;
-			if (json === null) {
-				failed = true;
-				status = labels.unavailable;
-			}
-		} catch (error) {
-			if (mine === serial) fail(error);
-		} finally {
-			if (mine === serial) reading = false;
-		}
-	};
-
-	const restore = async () => {
-		if (selected === null || busy) return;
-		busy = true;
-		failed = false;
-		status = labels.restoring;
-		try {
-			const result = await client.restore(selected);
-			if (result.status === 'applied') undoable = true;
-			// A version gone since it was listed: list again, then say so.
-			if (result.status === 'refused') await refresh();
-			failed = result.status === 'refused';
-			status =
-				result.status === 'applied'
-					? labels.restored
-					: result.status === 'noop'
-						? labels.unchanged
-						: labels.unavailable;
-			onRestore?.(result);
-		} catch (error) {
-			fail(error);
-		} finally {
-			busy = false;
-		}
-	};
-
-	const undo = async () => {
-		if (busy) return;
-		busy = true;
-		failed = false;
-		try {
-			const result = await client.undo();
-			undoable = false;
-			status = result.status === 'applied' ? labels.undone : labels.nothingToUndo;
-			onUndo?.(result);
-		} catch (error) {
-			fail(error);
-		} finally {
-			busy = false;
-		}
-	};
-
-	// The first list, and a new one for a new client.
-	$effect(() => {
-		void client;
-		untrack(() => void refresh());
-	});
-
-	/** A date of the room's calendar (`YYYY-MM-DD`), written in `locale`. */
-	const dateOf = (entry: HistoryVersion) => {
-		const day = new Date(`${entry.date}T00:00:00Z`);
-		if (Number.isNaN(day.getTime())) return entry.date;
-		return new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeZone: 'UTC' }).format(day);
-	};
-	const titleOf = (entry: HistoryVersion) =>
-		`${dateOf(entry)} · ${entry.slot === 'am' ? labels.morning : labels.evening}`;
-	const timeOf = (entry: HistoryVersion) => {
-		const at = new Date(entry.at);
-		return Number.isNaN(at.getTime())
-			? ''
-			: new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }).format(at);
-	};
-	const editorsOf = (entry: HistoryVersion) => {
-		if (entry.editors.length === 0 && !entry.more) return labels.noEditors;
-		const more = entry.more ? ` ${labels.moreEditors(entry.more)}` : '';
-		return `${entry.editors.join(', ')}${more}`;
-	};
-
-	const selectedEntry = $derived(versions?.find((entry) => entry.key === selected) ?? null);
-
-	/** The panel's own prefix: its rows' ids are page-unique. */
-	const uid = $props.id();
-	/** The row of `entry` at `index`: an option, the list's one tab stop when it is selected (else the first). */
-	const optionOf = (entry: HistoryVersion, index: number) => {
-		const isSelected = entry.key === selected;
-		return optionAttributes(
-			`${uid}-version-${index}`,
-			'option',
-			isSelected,
-			{ tabindex: isSelected || (selected === null && index === 0) ? 0 : -1 },
-			false
-		);
-	};
-
-	/** The listbox's keys: the arrows, Home and End move the selection and the focus. */
-	const onListKey = (event: KeyboardEvent) => {
-		if (!versions?.length) return;
-		const at = versions.findIndex((entry) => entry.key === selected);
-		const next =
-			event.key === 'ArrowDown'
-				? Math.min(versions.length - 1, at + 1)
-				: event.key === 'ArrowUp'
-					? Math.max(0, at - 1)
-					: event.key === 'Home'
-						? 0
-						: event.key === 'End'
-							? versions.length - 1
-							: null;
-		if (next === null) return;
-		event.preventDefault();
-		const key = versions[next]!.key;
-		if (key !== selected) void select(key);
-		const list = event.currentTarget as HTMLElement;
-		(list.querySelectorAll('[role="option"]')[next] as HTMLElement | undefined)?.focus();
-	};
-</script>
-
-<section data-edytor-history class={className} aria-label={labels.title}>
-	<div data-edytor-history-body>
-		<div data-edytor-history-preview>
-			<header data-edytor-history-header>
-				<h2 data-edytor-history-title>
-					{selectedEntry ? titleOf(selectedEntry) : labels.title}
-				</h2>
-				{#if diff}
-					<div data-edytor-history-legend>
-						<label data-edytor-history-toggle>
-							<input type="checkbox" bind:checked={highlight} />
-							{labels.highlight}
-						</label>
-						{#if highlight}
-							{#if diff.added + diff.removed + diff.changed === 0}
-								<span data-edytor-history-count="same">{labels.same}</span>
-							{/if}
-							{#if diff.added}
-								<span data-edytor-history-count="added">{labels.added(diff.added)}</span>
-							{/if}
-							{#if diff.removed}
-								<span data-edytor-history-count="removed">{labels.removed(diff.removed)}</span>
-							{/if}
-							{#if diff.changed}
-								<span data-edytor-history-count="changed">{labels.changed(diff.changed)}</span>
-							{/if}
-						{/if}
-					</div>
-				{/if}
-			</header>
-			<div data-edytor-history-page aria-busy={reading}>
-				{#if previewValue}
-					{#key previewSource}
-						<Edytor
-							readonly
-							value={previewValue}
-							plugins={previewPlugins}
-							{defaultPlugins}
-							blockHandles={false}
-							class={previewClass}
-							aria-label={labels.preview}
-						/>
-					{/key}
-				{:else}
-					<p data-edytor-history-placeholder>
-						{reading || versions === null ? labels.loading : labels.choose}
-					</p>
-				{/if}
-			</div>
-		</div>
-		<aside data-edytor-history-side>
-			<h3 data-edytor-history-heading>{labels.versions}</h3>
-			{#if versions === null}
-				<p data-edytor-history-placeholder>{labels.loading}</p>
-			{:else if versions.length === 0}
-				<p data-edytor-history-placeholder>{labels.empty}</p>
-			{:else}
-				<ul
-					data-edytor-history-list
-					role="listbox"
-					aria-label={labels.versions}
-					onkeydown={onListKey}
-				>
-					{#each versions as entry, index (entry.key)}
-						{@const isSelected = entry.key === selected}
-						{@const option = optionOf(entry, index)}
-						{@const preview = () => void select(entry.key)}
-						<li role="presentation">
-							{#if itemRow}
-								{@render itemRow({
-									item: entry,
-									version: entry,
-									id: option.id,
-									label: titleOf(entry),
-									selected: isSelected,
-									run: preview,
-									select: preview,
-									option
-								})}
-							{:else}
-								<button
-									type="button"
-									{...option}
-									data-edytor-history-version={entry.key}
-									onclick={preview}
-								>
-									{#if versionRow}
-										{@render versionRow(entry, { selected: isSelected })}
-									{:else}
-										<span data-edytor-history-version-title>{titleOf(entry)}</span>
-										<span data-edytor-history-version-editors>{editorsOf(entry)}</span>
-										<span data-edytor-history-version-time>
-											{labels.saved}
-											<time datetime={new Date(entry.at).toISOString()}>{timeOf(entry)}</time>
-										</span>
-									{/if}
-								</button>
-							{/if}
-						</li>
-					{/each}
-				</ul>
-			{/if}
-			<footer data-edytor-history-actions>
-				<p
-					data-edytor-history-status
-					role="status"
-					aria-live="polite"
-					data-failed={failed || undefined}
-				>
-					{status}
-				</p>
-				{#if !readonly}
-					<div data-edytor-history-buttons>
-						{#if undoable}
-							<button
-								type="button"
-								data-edytor-history-undo
-								disabled={busy}
-								onclick={() => void undo()}
-							>
-								{labels.undo}
-							</button>
-						{/if}
-						<button
-							type="button"
-							data-edytor-history-restore
-							disabled={busy || selected === null || shown === null}
-							onclick={() => void restore()}
-						>
-							{busy ? labels.restoring : labels.restore}
-						</button>
-					</div>
-				{/if}
-			</footer>
-		</aside>
-	</div>
-</section>
-
-<style>
-	[data-edytor-history] {
-		container-type: inline-size;
-		height: 100%;
-		min-height: 0;
-		color: inherit;
-		font: inherit;
-	}
-	/* The grid inside the container, so its own width can reshape it. */
-	[data-edytor-history-body] {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) var(--edytor-history-side-width, 260px);
-		height: 100%;
-		min-height: 0;
-	}
-	[data-edytor-history-preview] {
-		display: flex;
-		flex-direction: column;
-		min-width: 0;
-		min-height: 0;
-	}
-	[data-edytor-history-header] {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: baseline;
-		gap: 8px 16px;
-		padding: 12px 16px;
-		border-bottom: 1px solid var(--edytor-history-border, rgb(55 53 47 / 0.09));
-	}
-	[data-edytor-history-title] {
-		margin: 0;
-		font-size: 14px;
-		font-weight: 600;
-	}
-	[data-edytor-history-legend] {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px 12px;
-		font-size: 12px;
-		color: var(--edytor-history-muted, rgb(55 53 47 / 0.8));
-	}
-	[data-edytor-history-toggle] {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		cursor: pointer;
-	}
-	[data-edytor-history-count]::before {
-		content: '';
-		display: inline-block;
-		width: 8px;
-		height: 8px;
-		margin-inline-end: 4px;
-		border-radius: 2px;
-		background: currentColor;
-		vertical-align: baseline;
-	}
-	[data-edytor-history-count='same']::before {
-		display: none;
-	}
-	[data-edytor-history-count='added']::before {
-		background: var(--edytor-version-added-bar, rgb(68 131 97));
-	}
-	[data-edytor-history-count='removed']::before {
-		background: var(--edytor-version-removed-bar, rgb(212 76 71));
-	}
-	[data-edytor-history-count='changed']::before {
-		background: var(--edytor-version-changed-bar, rgb(203 145 47));
-	}
-	[data-edytor-history-page] {
-		position: relative;
-		flex: 1;
-		min-height: 0;
-		overflow: auto;
-		padding: 16px 24px;
-	}
-	[data-edytor-history-side] {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-		border-inline-start: 1px solid var(--edytor-history-border, rgb(55 53 47 / 0.09));
-		background: var(--edytor-history-side, rgb(251 251 250));
-	}
-	[data-edytor-history-heading] {
-		margin: 0;
-		padding: 12px 12px 6px;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--edytor-history-muted, rgb(55 53 47 / 0.8));
-	}
-	[data-edytor-history-placeholder] {
-		margin: 0;
-		padding: 8px 12px;
-		font-size: 13px;
-		color: var(--edytor-history-muted, rgb(55 53 47 / 0.8));
-	}
-	[data-edytor-history-list] {
-		flex: 1;
-		min-height: 0;
-		overflow: auto;
-		margin: 0;
-		padding: 0 6px 6px;
-		list-style: none;
-	}
-	[data-edytor-history-list] button {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		width: 100%;
-		padding: 6px 8px;
-		border: 0;
-		border-radius: 6px;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		text-align: start;
-		cursor: pointer;
-	}
-	[data-edytor-history-list] button:hover {
-		background: var(--edytor-history-hover, rgb(55 53 47 / 0.06));
-	}
-	[data-edytor-history-list] button[aria-selected='true'] {
-		background: var(--edytor-history-selected, rgb(35 131 226 / 0.14));
-	}
-	[data-edytor-history-version-title] {
-		font-size: 14px;
-		font-weight: 500;
-	}
-	[data-edytor-history-version-editors],
-	[data-edytor-history-version-time] {
-		font-size: 12px;
-		color: var(--edytor-history-muted, rgb(55 53 47 / 0.8));
-		overflow-wrap: anywhere;
-	}
-	[data-edytor-history-actions] {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		padding: 12px;
-		border-top: 1px solid var(--edytor-history-border, rgb(55 53 47 / 0.09));
-	}
-	[data-edytor-history-status] {
-		margin: 0;
-		min-height: 1em;
-		font-size: 12px;
-		color: var(--edytor-history-muted, rgb(55 53 47 / 0.8));
-	}
-	[data-edytor-history-status][data-failed] {
-		color: var(--edytor-history-error, rgb(190 56 52));
-	}
-	[data-edytor-history-buttons] {
-		display: flex;
-		justify-content: flex-end;
-		gap: 8px;
-	}
-	[data-edytor-history-buttons] button {
-		padding: 6px 12px;
-		border: 1px solid var(--edytor-history-border, rgb(55 53 47 / 0.16));
-		border-radius: 6px;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		font-size: 14px;
-		cursor: pointer;
-	}
-	[data-edytor-history-restore] {
-		border-color: transparent !important;
-		background: var(--edytor-history-accent, rgb(11 110 203)) !important;
-		color: white !important;
-		font-weight: 500;
-	}
-	[data-edytor-history-buttons] button:disabled {
-		opacity: 0.5;
-		cursor: default;
-	}
-	@container (max-width: 640px) {
-		[data-edytor-history-body] {
-			grid-template-columns: minmax(0, 1fr);
-			grid-template-rows: auto minmax(0, 1fr);
-		}
-		[data-edytor-history-side] {
-			order: -1;
-			max-height: min(45vh, 320px);
-			border-inline-start: 0;
-			border-bottom: 1px solid var(--edytor-history-border, rgb(55 53 47 / 0.09));
-		}
-	}
-</style>

package/dist/collaboration/history/HistoryPanel.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { HistoryPanelProps } from './panel.js';
-declare const HistoryPanel: import("svelte").Component<HistoryPanelProps, {
-    /** List the versions again; keeps the selection when it is still listed, else selects the newest. */ refresh: () => Promise<void>;
-    /** Preview the version `key` (`null`: none). */ select: (key: string | null) => Promise<void>;
-}, "highlight">;
-type HistoryPanel = ReturnType<typeof HistoryPanel>;
-export default HistoryPanel;

package/dist/collaboration/history/panel.d.ts

@@ -1,61 +0,0 @@
-/**
- * The version history panel's props and words (`HistoryPanel.svelte`).
- */
-import type { Snippet } from 'svelte';
-import type { EdytorDocument } from '../../crdt/document.js';
-import type { Plugin } from '../../plugins.js';
-import type { HistoryClient, HistoryRestoreResult, HistoryUndoResult, HistoryVersion } from './client.js';
-import { type HistoryPanelLabels, type PartialLabels } from '../../labels.js';
-import type { MenuItemPayload } from '../../plugins/chrome.js';
-export type { HistoryPanelLabels };
-/** The panel's English words: the label dictionary's `history` section (`englishLabels.history`). */
-export declare const defaultHistoryLabels: HistoryPanelLabels;
-/**
- * One row of the versions list, for an `item` snippet: the row shape every
- * menu shares (`item` is the version, `label` its date and slot, `run` and
- * `select` preview it), with the version again. Spread `option` on the
- * row's focusable element (its `role="option"`, id, `aria-selected` and the
- * list's one tab stop): the list's arrows, Home and End walk those rows.
- */
-export type HistoryVersionItem = MenuItemPayload<HistoryVersion> & {
-    /** The version (the same as `item`). */
-    version: HistoryVersion;
-};
-export type HistoryPanelProps = {
-    /** Where the versions come from: `createHistoryClient(…)`, or any object with `list`, `read`, `restore` and `undo`. */
-    client: HistoryClient;
-    /** The live document the preview is compared with. Without it, no change is highlighted. */
-    document?: EdytorDocument;
-    /** The preview's plugins: the ones the live view uses, so every kind renders as it does there. */
-    plugins?: Plugin[];
-    /** Whether the preview adds the default plugins, as `<Edytor defaultPlugins>`. */
-    defaultPlugins?: boolean;
-    /** Hide Restore and Undo restore (a reader). */
-    readonly?: boolean;
-    /** Highlight the blocks added, removed and changed since the version (bindable). */
-    highlight?: boolean;
-    /** The locale dates and times are written in (default the browser's). */
-    locale?: string | string[];
-    /** Replace any of the panel's words. */
-    labels?: PartialLabels<'history'>;
-    /** The panel's class. */
-    class?: string;
-    /** The preview editor's class (your theme's, such as `edytor-notion`). */
-    previewClass?: string;
-    /** A version's row content, in place of its date, editors and time. */
-    version?: Snippet<[HistoryVersion, {
-        selected: boolean;
-    }]>;
-    /**
-     * Replace a version's whole row (the list item's content): one object
-     * argument, the shape every menu's rows share. Spread its `option` on
-     * the row's button. Takes precedence over `version`.
-     */
-    item?: Snippet<[HistoryVersionItem]>;
-    /** After a restore the room answered. */
-    onRestore?: (result: HistoryRestoreResult) => void;
-    /** After an undo the room answered. */
-    onUndo?: (result: HistoryUndoResult) => void;
-    /** A request failed (the panel shows `labels.denied` or `labels.failed`). */
-    onError?: (error: unknown) => void;
-};

package/dist/collaboration/history/panel.js

@@ -1,3 +0,0 @@
-import { englishLabels } from '../../labels.js';
-/** The panel's English words: the label dictionary's `history` section (`englishLabels.history`). */
-export const defaultHistoryLabels = englishLabels.history;

package/dist/components/SuggestionRanges.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { Edytor } from '../edytor.svelte.js';
-	import type { SuggestionRange } from '../session/suggestions.svelte.js';
-	import { rangeRects, type RemoteSelectionRect } from '../collaboration/remoteSelection.js';
-
-	let { edytor }: { edytor: Edytor } = $props();
-
-	/**
-	 * The text a `replace` suggestion removes when accepted, marked in the
-	 * overlay (never inside the host): its rects, once per frame.
-	 */
-	let rects: RemoteSelectionRect[] = $state([]);
-
-	onMount(() => {
-		const off = edytor.overlay.add((origin) => {
-			const next = edytor.suggestions.list.flatMap(({ at }) => {
-				if (!('replace' in at) || Array.isArray(at.replace)) return [];
-				const { anchor, focus } = at.replace as SuggestionRange;
-				const [a, b] = [anchor, focus].map(edytor.selection.resolveTextAnchor);
-				return a && b ? rangeRects(edytor, a, b, origin) : [];
-			});
-			if (next.length || rects.length) return () => (rects = next);
-		});
-		return off;
-	});
-	$effect(() => {
-		void edytor.suggestions.revision;
-		edytor.overlay.invalidate();
-	});
-</script>
-
-<div data-edytor-suggestion-ranges contenteditable="false" aria-hidden="true">
-	{#each rects as rect, index (index)}
-		<span
-			data-edytor-suggestion-range
-			style:left={`${rect.left}px`}
-			style:top={`${rect.top}px`}
-			style:width={`${rect.width}px`}
-			style:height={`${rect.height}px`}
-		></span>
-	{/each}
-</div>
-
-<style>
-	[data-edytor-suggestion-ranges] {
-		position: absolute;
-		left: 0;
-		top: 0;
-		pointer-events: none;
-		z-index: 19;
-	}
-	[data-edytor-suggestion-range] {
-		position: absolute;
-		background: var(--edytor-suggestion-removed, rgb(235 87 87 / 0.18));
-		border-bottom: 1px solid var(--edytor-suggestion-removed-line, rgb(235 87 87 / 0.6));
-	}
-</style>

package/dist/components/SuggestionRanges.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Edytor } from '../edytor.svelte.js';
-type $$ComponentProps = {
-    edytor: Edytor;
-};
-declare const SuggestionRanges: import("svelte").Component<$$ComponentProps, {}, "">;
-type SuggestionRanges = ReturnType<typeof SuggestionRanges>;
-export default SuggestionRanges;