edytor 1.0.0-rc.2 → 1.0.0

package/dist/components/Edytor.svelte

@@ -2,7 +2,7 @@
 	// `EdytorClass` alias: the emitted `.svelte.d.ts` also declares `Edytor`
 	// (the component + its bindable instance type) — an unaliased import
 	// collides there (TS2440 for bundler-resolution consumers).
-	import { Edytor as EdytorClass, useEdytor, type Snippets } from '../edytor.svelte.js';
+	import { Edytor as EdytorClass, useEdytor } from '../edytor.svelte.js';
 	import {
 		SyncRefusedError,
 		type Awareness,
@@ -19,43 +19,28 @@
 	} from '../collaboration/awarenessSelection.js';
 	import { createIndexeddbSync, createWebsocketSync } from '../collaboration/providers.js';
 	export { EdytorClass as EdytorContext, useEdytor };
-	import type { Placeholder, Plugin } from '../plugins.js';
+	import type { Plugin } from '../plugins.js';
+	import { brandOf } from '../plugins/brand.js';
 	import type { PartialLabels } from '../labels.js';
-	import {
-		blockHandlesPlugin,
-		createBlockHandlesPlugin,
-		isBlockHandlesPlugin,
-		type BlockHandlesOptions
-	} from '../plugins/blockHandles/blockHandlesPlugin.js';
-	import { isRichTextPlugin, richTextPlugin } from '../plugins/richtext/RichTextPlugin.svelte';
-	import { arrowMovePlugin } from '../plugins/arrowMove/arrowMove.js';
-	import { imagePlugin, isImagePlugin } from '../plugins/image/ImagePlugin.svelte';
-	import {
-		isSuggestionsPlugin,
-		suggestionsPlugin
-	} from '../plugins/suggestions/suggestionsPlugin.js';
+	import { createRichTextPlugin } from '../plugins/richtext/RichTextPlugin.svelte';
+	import { createArrowMovePlugin } from '../plugins/arrowMove/arrowMove.js';
+	import { createImagePlugin } from '../plugins/image/ImagePlugin.svelte';
+	import { createSuggestionsPlugin } from '../plugins/suggestions/suggestionsPlugin.js';
 
 	/**
-	 * The plugins every view has unless it lists its own (or sets
+	 * The plugins every view has unless it lists one of their kind (or sets
 	 * `defaultPlugins={false}`), after the app's so its kinds and keys win:
 	 * block moves, the suggestion UI, the image kind, then rich text.
 	 */
-	const withDefaults = (plugins: Plugin[] = []): Plugin[] => [
-		...plugins,
-		...(plugins.includes(arrowMovePlugin) ? [] : [arrowMovePlugin]),
-		...(plugins.some(isSuggestionsPlugin) ? [] : [suggestionsPlugin]),
-		...(plugins.some(isImagePlugin) ? [] : [imagePlugin]),
-		...(plugins.some(isRichTextPlugin) ? [] : [richTextPlugin])
+	const DEFAULTS = [
+		createArrowMovePlugin(),
+		createSuggestionsPlugin(),
+		createImagePlugin(),
+		createRichTextPlugin()
 	];
-	/**
-	 * The handles: none with `false`, the configured ones (replacing any
-	 * listed) with options, else the listed ones or the default, first.
-	 */
-	const withHandles = (plugins: Plugin[] | undefined, handles: boolean | BlockHandlesOptions) => {
-		const others = plugins?.filter((plugin) => !isBlockHandlesPlugin(plugin));
-		if (handles === false) return others;
-		if (typeof handles === 'object') return [createBlockHandlesPlugin(handles), ...(others ?? [])];
-		return plugins?.some(isBlockHandlesPlugin) ? plugins : [blockHandlesPlugin, ...(plugins ?? [])];
+	const withDefaults = (plugins: Plugin[] = []): Plugin[] => {
+		const listed = new Set(plugins.map(brandOf));
+		return [...plugins, ...DEFAULTS.filter((plugin) => !listed.has(brandOf(plugin)))];
 	};
 	/**
 	 * The sync of a room id no dial can carry (`validRoomId`): no socket, the
@@ -80,10 +65,8 @@
 		children: []
 	};
 
-	export type EdytorProps = Snippets & {
+	export type EdytorProps = {
 		plugins?: Plugin[];
-		/** Show built-in block handles, with optional pointer dragging and activation callback. */
-		blockHandles?: boolean | BlockHandlesOptions;
 		/** Add rich text, arrow moves, the suggestion UI and images unless `plugins` lists them (default `true`). */
 		defaultPlugins?: boolean;
 		class?: string;
@@ -100,7 +83,7 @@
 		document?: EdytorDocument;
 		doc?: YDoc;
 		awareness?: Awareness;
-		/** The local author (id, name, color) of the document this view owns: history lineage and presence. */
+		/** The local author (id, name, color) of the document this view owns: attribution and presence. */
 		actor?: DocumentActor;
 		/**
 		 * What this view shares of its selection with peers (`share`: `'caret'`,
@@ -125,13 +108,12 @@
 		onSelectionChange?: (selection: EdytorSelection) => void;
 		/** The initial content, read once (not bindable): follow edits with `onChange` or `edytor.value`. */
 		value?: JSONDoc;
-		placeholder?: Placeholder;
 		/**
-		 * The words the view says itself, over the English ones: its
-		 * announcements to assistive technology and a suggestion's name. Each
-		 * plugin takes its own `labels`. Read once.
+		 * The words the package shows and says in this view, over the English
+		 * ones: any entry of any section (`editor`, `richText`, `table`…) and
+		 * the commands' slash `keywords` by id. Read once.
 		 */
-		labels?: PartialLabels<'editor'>;
+		labels?: PartialLabels;
 		translate?: 'yes' | 'no';
 		spellcheck?: boolean;
 		autocorrect?: 'on' | 'off';
@@ -195,7 +177,6 @@
 
 	let {
 		plugins: userPlugins,
-		blockHandles,
 		defaultPlugins = true,
 		class: className,
 		'aria-label': ariaLabel,
@@ -223,7 +204,6 @@
 		onChange,
 		onDocChange,
 		onSelectionChange,
-		placeholder,
 		labels,
 		translate = 'no',
 		spellcheck = true,
@@ -231,17 +211,12 @@
 		autocomplete = 'off',
 		autocapitalize = 'none',
 		inputmode,
-		enterkeyhint,
-		...snippets
+		enterkeyhint
 	}: EdytorProps = $props();
 
 	const initialEdytorOptions = untrack(() => ({
-		snippets,
 		readonly,
-		plugins: withHandles(
-			defaultPlugins ? withDefaults(userPlugins) : userPlugins,
-			blockHandles ?? true
-		),
+		plugins: defaultPlugins ? withDefaults(userPlugins) : userPlugins,
 		document: edytorDocument,
 		doc,
 		awareness,
@@ -253,7 +228,6 @@
 		onDocChange,
 		sync: !!sync || room !== undefined,
 		value,
-		placeholder,
 		labels
 	}));
 
@@ -354,25 +328,13 @@
 	$effect(edytor.surface.post);
 	$effect(edytor.projector.post);
 
-	const browserMutationGuardAttributes = $derived({
-		spellcheck,
-		autocorrect,
-		autocomplete,
-		autocapitalize,
-		inputmode,
-		enterkeyhint
-	});
-
 	/**
-	 * The root's browser attributes. Optional hints (`inputmode`,
-	 * `enterkeyhint`) stay absent when unset — emitting a guessed default
-	 * would override the browser/UA's own choice.
+	 * The root's browser hints, several of them unknown to Svelte's element
+	 * types; one left unset is absent (a guessed default would override the
+	 * browser's own choice).
 	 */
-	const editableRootBrowserAttributes = (
-		node: HTMLElement,
-		attributes: typeof browserMutationGuardAttributes
-	) => {
-		const apply = (next: typeof attributes) => {
+	const browserAttributes = (node: HTMLElement, attributes: Record<string, unknown>) => {
+		const apply = (next: Record<string, unknown>) => {
 			for (const [name, value] of Object.entries(next))
 				if (value === undefined) node.removeAttribute(name);
 				else node.setAttribute(name, String(value));
@@ -380,28 +342,25 @@
 		apply(attributes);
 		return { update: apply };
 	};
-
-	const nonNativeEditableBlockChromeSelection = (node: HTMLElement) => {
-		const { selection } = edytor;
-		// `selectstart` is the only event fired before a drag-selection
-		// begins — the guard keeps one from starting on non-editable
-		// chrome (markers, void/island chrome, plugin UI). A press on that
-		// chrome is the press's (`events/onFocus.ts`).
-		node.addEventListener('selectstart', selection.pointer.onSelectStart);
-		return {
-			destroy: () => node.removeEventListener('selectstart', selection.pointer.onSelectStart)
-		};
-	};
 </script>
 
 {#if edytor.synced}
 	<!-- The editing host is focusable (contenteditable): no tabindex of its own. -->
 	<!-- svelte-ignore a11y_aria_activedescendant_has_tabindex -->
+	<!-- `selectstart`, fired before a drag-selection begins, keeps one from starting on
+	non-editable chrome (a press there is the press's: `events/onFocus.ts`). -->
 	<div
 		class={className}
 		use:edytor.attach
-		use:editableRootBrowserAttributes={browserMutationGuardAttributes}
-		use:nonNativeEditableBlockChromeSelection
+		onselectstart={edytor.selection.pointer.onSelectStart}
+		use:browserAttributes={{
+			spellcheck,
+			autocorrect,
+			autocomplete,
+			autocapitalize,
+			inputmode,
+			enterkeyhint
+		}}
 		data-edytor
 		data-edytor-selection={edytor.selection.value.kind === 'blocks' ? 'blocks' : undefined}
 		contenteditable={!readonly}
@@ -418,7 +377,9 @@
 		aria-keyshortcuts={popup?.keys}
 		{translate}
 	>
-		{#each edytor.cells?.rootIds ?? [] as id (id)}<Block {id} />{/each}<span
+		{#each edytor.suggestions.around(edytor.cells?.rootIds ?? []) as kid (kid)}<Block
+				{kid}
+			/>{/each}<span
 			data-edytor-render-anchor
 			contenteditable="false"
 			aria-hidden="true"
@@ -430,24 +391,48 @@
 	<!-- The room's JSON, read-only, while this view's document hydrates. -->
 	<div data-edytor-snapshot style="display: contents">
 		<Snapshot
-			value={snapshot}
-			readonly
-			plugins={userPlugins}
-			{defaultPlugins}
-			{blockHandles}
-			class={className}
-			{placeholder}
-			{labels}
-			aria-label={ariaLabel}
-			aria-labelledby={ariaLabelledby}
-			aria-describedby={ariaDescribedby}
-			{id}
-			{...snippets}
+			{...{
+				value: snapshot,
+				readonly: true,
+				plugins: userPlugins,
+				defaultPlugins,
+				class: className,
+				labels,
+				'aria-label': ariaLabel,
+				'aria-labelledby': ariaLabelledby,
+				'aria-describedby': ariaDescribedby,
+				id
+			}}
 		/>
 	</div>
 {/if}
 
 <style>
+	/*
+	 * Room below the last block, where a press puts the caret in a trailing
+	 * paragraph (`nav.trailing.press`): `--edytor-trailing-space`. No
+	 * specificity, so any rule of the app's sets the padding instead.
+	 */
+	:global(:where([data-edytor])) {
+		padding-block-end: var(--edytor-trailing-space, 2em);
+	}
+	/*
+	 * Long pages, opt-in: the `edytor-long-page` class on the editor or an
+	 * ancestor lets a top-level block off screen skip its rendering (style,
+	 * layout, paint) until it nears the viewport; the browser keeps its DOM,
+	 * selection, find-in-page and accessibility. Until it was rendered once it
+	 * counts as one 32px row (`auto` remembers its real height after). Both
+	 * properties come with the one switch: the remembered height alone makes
+	 * Chromium track every top-level block's size each frame (about 2.5 ms at
+	 * 5,000 blocks), so without the switch neither is set. Only top-level
+	 * blocks: a nested one is skipped with its ancestor. The containment it
+	 * brings (layout, paint) clips what a block paints outside its own box.
+	 * No specificity: an app's own rule wins.
+	 */
+	:global(:where([data-edytor]:is(.edytor-long-page, .edytor-long-page *) > [data-edytor-block])) {
+		content-visibility: auto;
+		contain-intrinsic-block-size: auto 32px;
+	}
 	/*
 	 * A block selection shows as its selected blocks, never as a native range:
 	 * the range a pointer drag across columns still extends under it

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

@@ -1,15 +1,12 @@
-import { Edytor as EdytorClass, useEdytor, type Snippets } from '../edytor.svelte.js';
+import { Edytor as EdytorClass, useEdytor } from '../edytor.svelte.js';
 import { SyncRefusedError, type Awareness, type DocChange, type DocumentActor, type EdytorDocument, type YDoc } from '../crdt/index.js';
 import type { EdytorSync, WebsocketSyncOptions } from '../collaboration/index.js';
 import { type PresenceOptions } from '../collaboration/awarenessSelection.js';
 export { EdytorClass as EdytorContext, useEdytor };
-import type { Placeholder, Plugin } from '../plugins.js';
+import type { Plugin } from '../plugins.js';
 import type { PartialLabels } from '../labels.js';
-import { type BlockHandlesOptions } from '../plugins/blockHandles/blockHandlesPlugin.js';
-export type EdytorProps = Snippets & {
+export type EdytorProps = {
     plugins?: Plugin[];
-    /** Show built-in block handles, with optional pointer dragging and activation callback. */
-    blockHandles?: boolean | BlockHandlesOptions;
     /** Add rich text, arrow moves, the suggestion UI and images unless `plugins` lists them (default `true`). */
     defaultPlugins?: boolean;
     class?: string;
@@ -26,7 +23,7 @@ export type EdytorProps = Snippets & {
     document?: EdytorDocument;
     doc?: YDoc;
     awareness?: Awareness;
-    /** The local author (id, name, color) of the document this view owns: history lineage and presence. */
+    /** The local author (id, name, color) of the document this view owns: attribution and presence. */
     actor?: DocumentActor;
     /**
      * What this view shares of its selection with peers (`share`: `'caret'`,
@@ -51,13 +48,12 @@ export type EdytorProps = Snippets & {
     onSelectionChange?: (selection: EdytorSelection) => void;
     /** The initial content, read once (not bindable): follow edits with `onChange` or `edytor.value`. */
     value?: JSONDoc;
-    placeholder?: Placeholder;
     /**
-     * The words the view says itself, over the English ones: its
-     * announcements to assistive technology and a suggestion's name. Each
-     * plugin takes its own `labels`. Read once.
+     * The words the package shows and says in this view, over the English
+     * ones: any entry of any section (`editor`, `richText`, `table`…) and
+     * the commands' slash `keywords` by id. Read once.
      */
-    labels?: PartialLabels<'editor'>;
+    labels?: PartialLabels;
     translate?: 'yes' | 'no';
     spellcheck?: boolean;
     autocorrect?: 'on' | 'off';

package/dist/components/InlineBlock.svelte

@@ -17,6 +17,8 @@
 
 	const edytor = getContext<Edytor>('edytor');
 	const snippet = $derived(edytor.inlineBlocks.get(part.type)?.snippet);
+	/** A live atom's element registers with its handle; a suggestion's has none. */
+	const attach = (node: HTMLElement) => block?.attach(node);
 	// The snippet's view object: declared values, reactive through the part.
 	const view: InlineBlockView = {
 		get id() {
@@ -37,12 +39,5 @@
 	};
 </script>
 
-{#if snippet}
-	{#if block}
-		<span data-edytor-inline-block use:block.attach>
-			{@render snippet({ block: view })}
-		</span>
-	{:else}
-		<span data-edytor-inline-block>{@render snippet({ block: view })}</span>
-	{/if}
-{/if}
+<!-- `Content` renders only the atoms whose kind has a snippet: the span is the root, no anchor. -->
+<span data-edytor-inline-block use:attach>{@render snippet?.({ block: view })}</span>

package/dist/components/Mark.svelte

@@ -1,10 +1,34 @@
-<script lang="ts">
-	import { getContext } from 'svelte';
+<script module lang="ts">
 	import type { Edytor } from '../edytor.svelte.js';
 	import type { Text } from '../text/text.svelte.js';
 	import type { RenderDelta } from '../surface/cells.js';
+
+	/** Mark `index` of `delta` renders a custom snippet (`CustomMark`), not a tag (`Mark`). */
+	export const customAt = (edytor: Edytor, delta: RenderDelta, index: number) =>
+		Boolean(edytor.marks.get(delta.marks[index]?.[0] ?? '')?.snippet);
+
+	/** The core mark element is registered; a suggestion's ghost mark has no text and is not. */
+	export const registerMark = (
+		edytor: Edytor,
+		text: Text | undefined,
+		node: HTMLElement,
+		name: string | undefined
+	) => {
+		const release = text && edytor.surface.register(node, 'mark', text.parent.id, name);
+		return { destroy: () => release?.() };
+	};
+</script>
+
+<script lang="ts">
+	import { getContext } from 'svelte';
 	import Mark from './Mark.svelte';
+	import CustomMark from './CustomMark.svelte';
 
+	/**
+	 * Mark `index` of `delta` as the element of its tag, around the marks
+	 * after it, then its text. `Text` passes only the marks this view renders
+	 * (a tag or a snippet); a snippet's mark is `CustomMark`.
+	 */
 	let {
 		delta,
 		text,
@@ -17,38 +41,25 @@
 
 	const edytor = getContext<Edytor>('edytor');
 	const mark = $derived(delta.marks[index]);
-	const definition = $derived(edytor.marks.get(mark?.[0]));
-	/** The core mark element is registered; a suggestion's ghost mark has no text and is not. */
-	const register = (node: HTMLElement) => {
-		const release = text && edytor.surface.register(node, 'mark', text.parent.id, mark?.[0]);
-		return { destroy: () => release?.() };
-	};
+	const definition = $derived(edytor.marks.get(mark?.[0] ?? ''));
+	/** Another mark inside this one. */
+	const inner = $derived(index + 1 < delta.marks.length);
+	/** The text, the element's own text node when no mark is inside (no anchor of its own). */
+	const own = $derived(inner ? '' : delta.text);
+	const register = (node: HTMLElement) => registerMark(edytor, text, node, mark?.[0]);
 </script>
 
-{#snippet content()}
-	{#if delta.marks[index + 1]}
-		<Mark index={index + 1} {delta} {text} />
-	{:else}
-		{delta.text}
-	{/if}
-{/snippet}
-
-<!-- One core element per mark: the kind's tag, or a span around a custom snippet. -->
-{#if definition?.snippet || definition?.tag}
-	<svelte:element
-		this={definition.snippet ? 'span' : definition.tag}
-		{...definition.snippet ? {} : definition.attributes?.(mark?.[1])}
-		data-edytor-mark={mark?.[0]}
-		data-edytor-mark-void={definition.void ? '' : undefined}
-		contenteditable={definition.void ? 'false' : undefined}
-		use:register
-	>
-		{#if definition.snippet}
-			{@render definition.snippet({ content, mark: mark?.[1], text: text! })}
-		{:else}
-			{@render content()}
-		{/if}
-	</svelte:element>
-{:else}
-	{@render content()}
-{/if}
+<!-- One core element per mark, the kind's tag (`render.markers`: its text needs no anchor). -->
+<svelte:element
+	this={definition?.tag}
+	{...definition?.attributes?.(mark?.[1])}
+	data-edytor-mark={mark?.[0]}
+	data-edytor-mark-void={definition?.void ? '' : undefined}
+	contenteditable={definition?.void ? 'false' : undefined}
+	use:register
+	>{own}{#if !inner}{:else if customAt(edytor, delta, index + 1)}<CustomMark
+			index={index + 1}
+			{delta}
+			{text}
+		/>{:else}<Mark index={index + 1} {delta} {text} />{/if}</svelte:element
+>

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

@@ -1,5 +1,12 @@
+import type { Edytor } from '../edytor.svelte.js';
 import type { Text } from '../text/text.svelte.js';
 import type { RenderDelta } from '../surface/cells.js';
+/** Mark `index` of `delta` renders a custom snippet (`CustomMark`), not a tag (`Mark`). */
+export declare const customAt: (edytor: Edytor, delta: RenderDelta, index: number) => boolean;
+/** The core mark element is registered; a suggestion's ghost mark has no text and is not. */
+export declare const registerMark: (edytor: Edytor, text: Text | undefined, node: HTMLElement, name: string | undefined) => {
+    destroy: () => void | undefined;
+};
 import Mark from './Mark.svelte';
 type $$ComponentProps = {
     text: Text | undefined;

package/dist/components/Ranges.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	import type { PresencePoint } from '../collaboration/awarenessSelection.js';
+	import type { Edytor } from '../edytor.svelte.js';
+
+	/** A run of text the overlay marks: its ends, and whether it is the current one (`data-current`). */
+	export type MarkedRange = { start: PresencePoint; end: PresencePoint; current?: boolean };
+
+	/** The run of `length` at block offset `offset` of block `id` (none where it is not shown). */
+	export const runOf = (
+		edytor: Edytor,
+		id: string,
+		offset: number,
+		length: number,
+		current?: boolean
+	): MarkedRange[] => {
+		const block = edytor.idToBlock.get(id);
+		const [start, end] = [block?.textAtOffset(offset), block?.textAtOffset(offset + length)];
+		return start && end ? [{ start, end, current }] : [];
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { rangeRects, type RemoteSelectionRect } from '../collaboration/remoteSelection.js';
+
+	/**
+	 * Runs of text marked in the overlay (never inside the host), one
+	 * rectangle per line box, measured once per frame: the find matches, the
+	 * text a `replace` suggestion removes, the comment being written. Each
+	 * rectangle carries `data-edytor-<name>` (`data-current` on the current
+	 * run's); the layer is `z`.
+	 */
+	let {
+		edytor,
+		name,
+		z,
+		ranges
+	}: { edytor: Edytor; name: string; z: number; ranges: () => MarkedRange[] } = $props();
+
+	let rects: (RemoteSelectionRect & { current?: boolean })[] = $state([]);
+
+	onMount(() =>
+		edytor.overlay.add((origin) => {
+			const next = ranges().flatMap(({ start, end, current }) =>
+				rangeRects(edytor, start, end, origin).map((rect) => ({ ...rect, current }))
+			);
+			if (next.length || rects.length) return () => (rects = next);
+		})
+	);
+	// What the runs read changed: the overlay measures again.
+	$effect(() => {
+		void ranges();
+		edytor.overlay.invalidate();
+	});
+</script>
+
+<div data-edytor-ranges={name} contenteditable="false" aria-hidden="true" style:z-index={z}>
+	{#each rects as rect, index (index)}
+		<span
+			{...{ [`data-edytor-${name}`]: '' }}
+			data-current={rect.current || undefined}
+			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-ranges] {
+		position: absolute;
+		left: 0;
+		top: 0;
+		pointer-events: none;
+	}
+	[data-edytor-ranges] > span {
+		position: absolute;
+	}
+	:global([data-edytor-find-match]) {
+		border-radius: 2px;
+		background: var(--edytor-find-match, rgb(255 212 0 / 0.3));
+		mix-blend-mode: multiply;
+	}
+	:global([data-edytor-find-match][data-current]) {
+		background: var(--edytor-find-current, rgb(255 166 0 / 0.55));
+	}
+	:global([data-edytor-suggestion-range]) {
+		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));
+	}
+	:global([data-edytor-comment-draft]) {
+		background: var(--edytor-comment-active, rgb(255 212 0 / 0.42));
+		mix-blend-mode: multiply;
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { PresencePoint } from '../collaboration/awarenessSelection.js';
+import type { Edytor } from '../edytor.svelte.js';
+/** A run of text the overlay marks: its ends, and whether it is the current one (`data-current`). */
+export type MarkedRange = {
+    start: PresencePoint;
+    end: PresencePoint;
+    current?: boolean;
+};
+/** The run of `length` at block offset `offset` of block `id` (none where it is not shown). */
+export declare const runOf: (edytor: Edytor, id: string, offset: number, length: number, current?: boolean) => MarkedRange[];
+type $$ComponentProps = {
+    edytor: Edytor;
+    name: string;
+    z: number;
+    ranges: () => MarkedRange[];
+};
+declare const Ranges: import("svelte").Component<$$ComponentProps, {}, "">;
+type Ranges = ReturnType<typeof Ranges>;
+export default Ranges;

package/dist/components/Suggestion.svelte

@@ -3,6 +3,7 @@
 	import type { Edytor } from '../edytor.svelte.js';
 	import type { Suggestion } from '../session/suggestions.svelte.js';
 	import { previewCells } from '../surface/cells.js';
+	import { editorEnglish, labelsOf } from '../labels.js';
 	import Block from './Block.svelte';
 
 	/**
@@ -28,12 +29,12 @@
 	data-edytor-suggestion={suggestion.id}
 	data-status={suggestion.status}
 	contenteditable="false"
-	aria-label={suggestion.label ?? edytor.labels.suggestion}
+	aria-label={suggestion.label ?? labelsOf(edytor, 'editor', editorEnglish).suggestion}
 	role="group"
 	use:edytor.surface.preview={suggestion.id}
 	onmousedown={cancel}
 >
-	{#each cells as cell (cell.id)}<Block id={cell.id} preview={cell} />{/each}
+	{#each cells as cell (cell.id)}<Block kid={cell} />{/each}
 </div>
 
 <style>