edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/toolbar/Toolbar.svelte

@@ -1,349 +0,0 @@
-<script lang="ts">
-	import { iconOf } from '../icons.js';
-	import { TOOLBAR_COLORS, type ToolbarController } from './ToolbarController.svelte.js';
-	import type { Snippet } from 'svelte';
-	let {
-		controller,
-		toolbar
-	}: { controller: ToolbarController; toolbar?: Snippet<[ToolbarController]> } = $props();
-
-	const keep = (event: MouseEvent) => event.preventDefault();
-	const labels = $derived(controller.labels);
-</script>
-
-<!--
-	The bar's id, role, placement mark and publication to the view's root
-	(`popup`), its roving tab stop and Escape (`keys`) and the link field's
-	keys (`linkField`) are the controller's attachments: a custom `toolbar`
-	that uses them behaves as this one.
--->
-{#if controller.isVisible && toolbar}
-	{@render toolbar(controller)}
-{:else if controller.isVisible}
-	<div class="selection-toolbar-frame">
-		<div
-			class="selection-toolbar"
-			data-testid="selection-toolbar"
-			role="toolbar"
-			aria-label={labels.bar}
-			tabindex="-1"
-			{@attach controller.popup}
-			{@attach controller.keys}
-		>
-			<button
-				type="button"
-				class="toolbar-type"
-				data-stop="turn"
-				aria-haspopup="menu"
-				aria-expanded={controller.panel === 'turn'}
-				onmousedown={keep}
-				onclick={() => controller.togglePanel('turn')}
-				>{controller.currentKind?.label ?? labels.text}<span
-					class="toolbar-chevron"
-					aria-hidden="true"
-				></span></button
-			>
-			<span class="toolbar-divider" aria-hidden="true"></span>
-			<button
-				type="button"
-				class="toolbar-link"
-				data-stop="link"
-				data-testid="toolbar-link"
-				aria-expanded={controller.panel === 'link'}
-				style:--toolbar-icon={iconOf('mark.link')}
-				onmousedown={keep}
-				onclick={() => controller.togglePanel('link')}>{labels.link}</button
-			>
-			<span class="toolbar-divider" aria-hidden="true"></span>
-			{#each controller.marks as item (item.mark)}
-				<button
-					type="button"
-					class={`toolbar-mark mark-${item.mark}`}
-					data-stop={`mark:${item.mark}`}
-					aria-label={item.label}
-					title={item.label}
-					data-testid={`toolbar-${item.mark}`}
-					aria-pressed={controller.isActive(item.mark)}
-					onmousedown={keep}
-					onclick={() => controller.toggleMark(item.mark)}>{item.icon}</button
-				>
-			{/each}
-			<span class="toolbar-divider" aria-hidden="true"></span>
-			<button
-				type="button"
-				class="toolbar-color"
-				data-stop="color"
-				aria-label={labels.color}
-				title={labels.textColor}
-				aria-expanded={controller.panel === 'color'}
-				onmousedown={keep}
-				onclick={() => controller.togglePanel('color')}
-				>A<span class="toolbar-chevron" aria-hidden="true"></span></button
-			>
-		</div>
-
-		{#if controller.panel === 'turn'}
-			<div class="toolbar-panel" role="menu" aria-label={labels.turnInto}>
-				<div class="toolbar-heading">{labels.turnInto}</div>
-				{#each controller.kinds as kind (kind.id)}
-					<button
-						type="button"
-						role="menuitem"
-						class="toolbar-row"
-						data-current={kind === controller.currentKind}
-						style:--toolbar-icon={iconOf(kind.id)}
-						onmousedown={keep}
-						onclick={() => controller.turnInto(kind)}>{kind.label}</button
-					>
-				{/each}
-			</div>
-		{:else if controller.panel === 'link'}
-			<div class="toolbar-panel toolbar-link-panel">
-				<label class="sr-only" for={controller.linkFieldId}>{labels.linkUrl}</label>
-				<input
-					data-testid="toolbar-link-input"
-					placeholder={labels.linkPlaceholder}
-					value={controller.linkUrl}
-					oninput={(event) => controller.setLinkUrl(event.currentTarget.value)}
-					{@attach controller.linkField}
-				/>
-				<button
-					type="button"
-					class="toolbar-link-action"
-					data-testid="toolbar-link-apply"
-					title={labels.applyLink}
-					onmousedown={keep}
-					onclick={() => controller.applyLink()}>{labels.apply}</button
-				>
-				<button
-					type="button"
-					class="toolbar-link-action"
-					data-testid="toolbar-link-remove"
-					title={labels.removeLink}
-					onmousedown={keep}
-					onclick={() => controller.removeLink()}>{labels.remove}</button
-				>
-			</div>
-		{:else if controller.panel === 'color'}
-			<div class="toolbar-panel" role="menu" aria-label={labels.color}>
-				<div class="toolbar-heading">{labels.textColor}</div>
-				<div class="toolbar-swatches">
-					{#each TOOLBAR_COLORS as color (color.name)}
-						<button
-							type="button"
-							role="menuitem"
-							class="toolbar-swatch"
-							title={labels.colorText(controller.colorName(color.name))}
-							style:color={color.text ?? 'inherit'}
-							onmousedown={keep}
-							onclick={() => controller.setColor('color', color.text)}>A</button
-						>
-					{/each}
-				</div>
-				<div class="toolbar-heading">{labels.backgroundColor}</div>
-				<div class="toolbar-swatches">
-					{#each TOOLBAR_COLORS as color (color.name)}
-						<button
-							type="button"
-							role="menuitem"
-							class="toolbar-swatch"
-							title={labels.colorBackground(controller.colorName(color.name))}
-							style:background={color.background ?? 'transparent'}
-							onmousedown={keep}
-							onclick={() => controller.setColor('highlight', color.background)}
-						></button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.selection-toolbar-frame {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 6px;
-		font-family:
-			ui-sans-serif,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI Variable Display',
-			'Segoe UI',
-			Helvetica,
-			Arial,
-			sans-serif;
-		font-size: 14px;
-		line-height: 20px;
-		color: #2c2c2b;
-		animation: toolbar-in 120ms cubic-bezier(0.2, 0, 0, 1);
-	}
-	@keyframes toolbar-in {
-		from {
-			opacity: 0;
-			transform: translateY(2px);
-		}
-	}
-	.selection-toolbar,
-	.toolbar-panel {
-		border-radius: 10px;
-		background: #fff;
-		box-shadow:
-			0 14px 28px -6px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06),
-			0 0 0 1px rgba(84, 72, 49, 0.08);
-	}
-	.selection-toolbar {
-		display: flex;
-		align-items: center;
-		gap: 1px;
-		height: 36px;
-		padding: 0 4px;
-		white-space: nowrap;
-	}
-	button {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		gap: 4px;
-		height: 28px;
-		min-width: 28px;
-		padding: 0 6px;
-		border-radius: 6px;
-		color: inherit;
-		font: inherit;
-		cursor: pointer;
-		transition: background-color 80ms ease;
-	}
-	button:hover,
-	button[aria-expanded='true'] {
-		background: rgba(33, 27, 23, 0.06);
-	}
-	button[aria-pressed='true'] {
-		color: #2383e2;
-	}
-	.toolbar-type {
-		padding: 0 6px 0 8px;
-		font-weight: 500;
-	}
-	.toolbar-chevron {
-		width: 12px;
-		height: 12px;
-		background: #a19e99;
-		-webkit-mask: var(--toolbar-chevron) center / 12px no-repeat;
-		mask: var(--toolbar-chevron) center / 12px no-repeat;
-		--toolbar-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-	}
-	.toolbar-link::before,
-	.toolbar-row::before {
-		content: '';
-		width: 18px;
-		height: 18px;
-		background: currentColor;
-		-webkit-mask: var(--toolbar-icon) center / 18px no-repeat;
-		mask: var(--toolbar-icon) center / 18px no-repeat;
-	}
-	.toolbar-divider {
-		width: 1px;
-		height: 20px;
-		margin: 0 3px;
-		background: rgba(28, 19, 1, 0.08);
-	}
-	.mark-bold {
-		font-weight: 700;
-	}
-	.mark-italic {
-		font-style: italic;
-		font-family: Georgia, serif;
-	}
-	.mark-underline {
-		text-decoration: underline;
-		text-underline-offset: 2px;
-	}
-	.mark-strike {
-		text-decoration: line-through;
-	}
-	.mark-code {
-		font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
-		font-size: 12px;
-	}
-	.toolbar-color {
-		font-weight: 500;
-		text-decoration: underline;
-		text-decoration-thickness: 2px;
-		text-underline-offset: 3px;
-	}
-	.toolbar-panel {
-		box-sizing: border-box;
-		width: 240px;
-		max-height: 320px;
-		overflow-y: auto;
-		padding: 4px;
-		animation: toolbar-in 120ms cubic-bezier(0.2, 0, 0, 1);
-	}
-	.toolbar-heading {
-		padding: 6px 8px 4px;
-		color: #73726e;
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 16px;
-	}
-	.toolbar-row {
-		justify-content: flex-start;
-		gap: 8px;
-		width: 100%;
-		padding: 0 8px;
-	}
-	.toolbar-row[data-current='true']::after {
-		content: '✓';
-		margin-left: auto;
-		color: #2c2c2b;
-		font-size: 13px;
-	}
-	.toolbar-link-panel {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		width: 380px;
-	}
-	.toolbar-link-panel input {
-		flex: 1;
-		height: 28px;
-		padding: 0 8px;
-		border-radius: 6px;
-		background: rgba(242, 241, 238, 0.6);
-		box-shadow: inset 0 0 0 1px rgba(15, 15, 15, 0.1);
-		color: inherit;
-		font: inherit;
-		outline: 0;
-	}
-	.toolbar-link-panel input:focus {
-		box-shadow:
-			inset 0 0 0 1px rgba(35, 131, 226, 0.57),
-			0 0 0 2px rgba(35, 131, 226, 0.35);
-	}
-	.toolbar-link-action {
-		color: #73726e;
-		font-size: 13px;
-	}
-	.toolbar-swatches {
-		display: grid;
-		grid-template-columns: repeat(5, 28px);
-		gap: 4px;
-		padding: 2px 6px 6px;
-	}
-	.toolbar-swatch {
-		width: 28px;
-		padding: 0;
-		box-shadow: inset 0 0 0 1px rgba(28, 19, 1, 0.11);
-		font-weight: 500;
-	}
-	.sr-only {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-	}
-</style>

package/dist/plugins/toolbar/Toolbar.svelte.d.ts

@@ -1,9 +0,0 @@
-import { type ToolbarController } from './ToolbarController.svelte.js';
-import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    controller: ToolbarController;
-    toolbar?: Snippet<[ToolbarController]>;
-};
-declare const Toolbar: import("svelte").Component<$$ComponentProps, {}, "">;
-type Toolbar = ReturnType<typeof Toolbar>;
-export default Toolbar;

package/dist/plugins/triggers/TriggerMenu.svelte

@@ -1,135 +0,0 @@
-<script lang="ts">
-	import type { TriggerItemPayload } from '../../plugins.js';
-	import type { TriggerMenuController } from './TriggerController.svelte.js';
-
-	let { controller }: { controller: TriggerMenuController<any> } = $props();
-	const items = $derived(controller.items);
-	const row = $derived(controller.trigger.item);
-	const menu = $derived(controller.trigger.menu);
-
-	// An editor turning readonly closes the menu (a pick would be refused).
-	$effect(() => {
-		if (controller.isOpen && controller.readonly) controller.close();
-	});
-
-	/** The row payload of an `item` snippet. */
-	const payload = (item: unknown, index: number): TriggerItemPayload<unknown> => {
-		const pick = () => void controller.pick(item);
-		return {
-			item,
-			label: controller.labelOf(item),
-			id: controller.optionId(index),
-			selected: index === controller.selectedIndex,
-			run: pick,
-			pick,
-			select: () => (controller.selectedIndex = index),
-			option: controller.option(index)
-		};
-	};
-</script>
-
-<!--
-	The listbox's id, role and publication to the view's root are the
-	controller's `popup` attachment, a row's attributes its `option(index)`:
-	a custom `menu` that uses them behaves as this one.
--->
-{#if controller.isOpen && menu}
-	{@render menu(controller)}
-{:else if controller.isOpen}
-	<!-- A press in the menu keeps the editor's focus and its caret at the query. -->
-	<div
-		class="edytor-trigger-menu"
-		data-testid="trigger-menu"
-		data-trigger={controller.char}
-		role="presentation"
-		onmousedown={(event) => event.preventDefault()}
-	>
-		<div
-			class="edytor-trigger-items"
-			role="listbox"
-			aria-label={controller.name}
-			aria-busy={controller.loading}
-			{@attach controller.popup}
-		>
-			<!-- Keyed by position and key: two rows may share a key (a label without an id). -->
-			{#each items as item, index (`${index}:${controller.keyOf(item)}`)}
-				{#if row}
-					{@render row(payload(item, index))}
-				{:else}
-					<button
-						type="button"
-						class="edytor-trigger-item"
-						{...controller.option(index)}
-						data-testid="trigger-menu-item"
-						onmousemove={() => (controller.selectedIndex = index)}
-						onclick={() => void controller.pick(item)}
-					>
-						{controller.labelOf(item)}
-					</button>
-				{/if}
-			{/each}
-			{#if items.length === 0}
-				<div class="edytor-trigger-empty" data-testid="trigger-menu-empty">
-					{controller.loading ? controller.searching : controller.empty}
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
-
-<style>
-	.edytor-trigger-menu {
-		width: 280px;
-		max-height: min(40vh, 320px);
-		display: flex;
-		flex-direction: column;
-		border-radius: 10px;
-		background: #fff;
-		color: #2c2c2b;
-		box-shadow:
-			0 14px 28px -6px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06),
-			0 0 0 1px rgba(84, 72, 49, 0.08);
-		font-size: 14px;
-		line-height: 20px;
-		font-family:
-			ui-sans-serif,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI Variable Display',
-			'Segoe UI',
-			Helvetica,
-			Arial,
-			sans-serif;
-		overflow: hidden;
-	}
-	.edytor-trigger-items {
-		flex: 1;
-		overflow-y: auto;
-		padding: 4px;
-	}
-	.edytor-trigger-item {
-		display: block;
-		width: 100%;
-		height: 28px;
-		border: 0;
-		background: none;
-		color: inherit;
-		font: inherit;
-		line-height: 28px;
-		text-align: left;
-		padding: 0 8px;
-		border-radius: 6px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		cursor: pointer;
-	}
-	.edytor-trigger-item[data-selected='true'] {
-		background: rgba(33, 27, 23, 0.06);
-	}
-	.edytor-trigger-empty {
-		padding: 6px 8px;
-		color: #73726e;
-	}
-</style>

package/dist/plugins/triggers/TriggerMenu.svelte.d.ts

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

package/dist/text/deltas.d.ts

@@ -1,22 +0,0 @@
-import type { JSONText, SerializableContent } from '../utils/json.ts';
-export type Mark = [string, SerializableContent];
-export type JSONDelta = {
-    text: string;
-    marks: Mark[];
-    id: string;
-};
-export declare const deltaToJson: (delta: JSONDelta[]) => JSONText[];
-/**
- * Convert a text segment's run items into render deltas.
- * `items` are the `{kind:'text'}` entries of one logical text segment (the
- * runs between two inline atoms — or the whole content when no inline is
- * present). Adjacent same-mark items are already merged by the runs view;
- * the guard below keeps the contract total for unmerged item lists
- * (detached spec buffers, `project()` raw items).
- *
- * Returns `[deltas, isEmpty]` mirroring the historical `toDeltas` signature.
- */
-export declare const runsToDeltas: (items: readonly {
-    text: string;
-    marks?: Record<string, unknown>;
-}[]) => readonly [JSONDelta[], boolean];

package/dist/text/deltas.js

@@ -1,46 +0,0 @@
-export const deltaToJson = (delta) => {
-    return delta.map((d) => {
-        const result = {
-            text: d.text,
-            marks: Object.fromEntries(d.marks)
-        };
-        if (d.marks.length === 0) {
-            delete result.marks;
-        }
-        return result;
-    });
-};
-/**
- * Convert a text segment's run items into render deltas.
- * `items` are the `{kind:'text'}` entries of one logical text segment (the
- * runs between two inline atoms — or the whole content when no inline is
- * present). Adjacent same-mark items are already merged by the runs view;
- * the guard below keeps the contract total for unmerged item lists
- * (detached spec buffers, `project()` raw items).
- *
- * Returns `[deltas, isEmpty]` mirroring the historical `toDeltas` signature.
- */
-export const runsToDeltas = (items) => {
-    const result = [];
-    let isEmpty = true;
-    for (const item of items) {
-        if (!item.text)
-            continue;
-        const marks = Object.entries(item.marks ?? {});
-        const last = result[result.length - 1];
-        if (last &&
-            last.marks.length === marks.length &&
-            last.marks.every(([k, v]) => item.marks?.[k] === v)) {
-            last.text += item.text;
-        }
-        else {
-            result.push({
-                text: item.text,
-                marks,
-                id: crypto.randomUUID()
-            });
-        }
-        isEmpty = false;
-    }
-    return [result, isEmpty];
-};

package/dist/text/text.utils.d.ts

@@ -1,45 +0,0 @@
-import type { JSONText, SerializableContent } from '../utils/json.js';
-import type { Text } from './text.svelte.js';
-export type TextOperations = {
-    insertText: {
-        value: string;
-        isAutoDot?: boolean;
-        start?: number;
-        end?: number;
-        marks?: Record<string, SerializableContent | null>;
-    };
-    deleteText: {
-        direction: 'BACKWARD' | 'FORWARD';
-        length: number;
-    };
-    splitText: {
-        index?: number;
-    };
-    setText: {
-        value: JSONText[];
-    };
-    markText: {
-        mark: string;
-        start?: number;
-        end?: number;
-        value?: SerializableContent | null;
-        toggle?: boolean;
-    };
-    removeMarksFromText: {
-        start?: number;
-        end?: number;
-    };
-};
-export declare function batch<T extends (...args: any[]) => any, O extends keyof TextOperations>(operation: O, func: T): T;
-export declare function insertText(this: Text, { value, isAutoDot, start, end, marks }: TextOperations['insertText']): void;
-export declare function getMarksAtRange(this: Text, yStart: number, yEnd: number): JSONText[];
-export declare const getPreviousGraphemeStart: (value: string, offset: number) => number;
-export declare const getNextGraphemeEnd: (value: string, offset: number) => number;
-export declare function deleteText(this: Text, { direction, length }: TextOperations['deleteText']): {
-    start: number;
-    end: number;
-} | undefined;
-export declare function removeMarksFromText(this: Text, { start, end }: TextOperations['removeMarksFromText']): void;
-export declare function markText(this: Text, { mark, value, toggle, start, end }: TextOperations['markText']): void;
-export declare function splitText(this: Text, { index }: TextOperations['splitText']): JSONText[];
-export declare function setText(this: Text, { value }: TextOperations['setText']): void;