edytor 1.0.0-rc.2 → 1.0.0

package/dist/plugins/find/FindHighlights.svelte.d.ts

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

package/dist/plugins/icons.d.ts

@@ -1,2 +0,0 @@
-/** The icon's CSS `mask-image` value for `id`, if the id has one. */
-export declare const iconOf: (id: string) => string | undefined;

package/dist/plugins/icons.js

@@ -1,63 +0,0 @@
-/**
- * Line icons for the built-in kinds (20×20, drawn in `currentColor` through
- * a CSS mask), keyed by command id. Menus fall back to a command's text icon.
- */
-const svg = (body) => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="black" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`)}")`;
-const heading = (n) => svg(`<path d="M3.5 5v10M10 5v10M3.5 10H10"/><text x="12" y="15.5" font-size="8" font-family="Arial" font-weight="700" fill="black" stroke="none">${n}</text>`);
-/** A toggle heading: the toggle's triangle, then the heading's level. */
-const toggleHeading = (n) => svg(`<path d="M3 7l4 3-4 3z" fill="black"/><path d="M9 5v10M14 5v10M9 10h5"/><text x="15.5" y="16" font-size="6" font-family="Arial" font-weight="700" fill="black" stroke="none">${n}</text>`);
-/** A layout of `n` columns: `n` rounded panels side by side. */
-const columns = (n) => {
-    const [gap, width] = [1.5, (15 - 1.5 * (n - 1)) / n];
-    const panels = Array.from({ length: n }, (_, i) => `<rect x="${2.5 + i * (width + gap)}" y="4" width="${width}" height="12" rx="1.5"/>`);
-    return svg(panels.join(''));
-};
-const ICONS = {
-    'block.paragraph': svg('<path d="M4.5 5.5h11M10 5.5v10"/>'),
-    'block.heading1': heading(1),
-    'block.heading2': heading(2),
-    'block.heading3': heading(3),
-    'block.bulleted-list-item': svg('<circle cx="4.5" cy="6" r="1.1" fill="black" stroke="none"/><circle cx="4.5" cy="10" r="1.1" fill="black" stroke="none"/><circle cx="4.5" cy="14" r="1.1" fill="black" stroke="none"/><path d="M8 6h8.5M8 10h8.5M8 14h8.5"/>'),
-    'block.numbered-list-item': svg('<text x="2.2" y="8.6" font-size="6.2" font-family="Arial" font-weight="700" fill="black" stroke="none">1</text><text x="2.2" y="15.6" font-size="6.2" font-family="Arial" font-weight="700" fill="black" stroke="none">2</text><path d="M8 6.5h8.5M8 13.5h8.5"/>'),
-    'block.todo-item': svg('<rect x="3.5" y="3.5" width="13" height="13" rx="2.5"/><path d="M7 10.3l2.1 2.1 4-4.6"/>'),
-    'block.toggle': svg('<path d="M7.5 5.5l6 4.5-6 4.5z" fill="black"/>'),
-    'block.toggle-heading1': toggleHeading(1),
-    'block.toggle-heading2': toggleHeading(2),
-    'block.toggle-heading3': toggleHeading(3),
-    'block.toc': svg('<path d="M3.5 5.5h13M6.5 10h10M9.5 14.5h7"/><circle cx="3.7" cy="10" r=".6" fill="black"/><circle cx="6.7" cy="14.5" r=".6" fill="black"/>'),
-    'page.new': svg('<path d="M11.5 2.5H6A1.5 1.5 0 0 0 4.5 4v12A1.5 1.5 0 0 0 6 17.5h8a1.5 1.5 0 0 0 1.5-1.5V6.5z"/><path d="M11.5 2.5v4h4M7.5 10.5h5M7.5 13.5h5"/>'),
-    'block.quote': svg('<path d="M4.5 4.5v11" stroke-width="2"/><path d="M8.5 6.5h8M8.5 10h8M8.5 13.5h5"/>'),
-    'block.callout': svg('<rect x="2.5" y="4" width="15" height="12" rx="2.5"/><circle cx="6.5" cy="8.2" r="1.3" fill="black" stroke="none"/><path d="M9.5 8.2h5M5.5 12.2h9"/>'),
-    'block.divider': svg('<path d="M3 10h14"/><path d="M5 6h10M5 14h10" opacity=".35"/>'),
-    'block.code': svg('<path d="M7.5 6L3.5 10l4 4M12.5 6l4 4-4 4"/>'),
-    'block.embed': svg('<rect x="2.5" y="4" width="15" height="12" rx="2"/><path d="M8 8l-2 2 2 2M12 8l2 2-2 2"/>'),
-    'block.bookmark': svg('<path d="M6 3.5h8a1 1 0 0 1 1 1v12l-5-3.5-5 3.5v-12a1 1 0 0 1 1-1z"/>'),
-    'block.file': svg('<path d="M11.5 2.5H6A1.5 1.5 0 0 0 4.5 4v12A1.5 1.5 0 0 0 6 17.5h8a1.5 1.5 0 0 0 1.5-1.5V6.5z"/><path d="M11.5 2.5v4h4"/>'),
-    'block.video': svg('<rect x="2.5" y="5" width="11" height="10" rx="2"/><path d="M13.5 8.5l4-2.5v8l-4-2.5"/>'),
-    'block.audio': svg('<path d="M7.5 14.5V5l9-1.5v9.5"/><circle cx="5.5" cy="14.5" r="2"/><circle cx="14.5" cy="13" r="2"/>'),
-    'block.table': svg('<rect x="2.5" y="3.5" width="15" height="13" rx="2"/><path d="M2.5 8h15M2.5 12.3h15M7.5 3.5v13M12.5 3.5v13"/>'),
-    'table.header-row': svg('<rect x="2.5" y="3.5" width="15" height="13" rx="2"/><path d="M2.5 8h15" /><path d="M3 4h14v4H3z" fill="black" opacity=".35" stroke="none"/>'),
-    'table.header-column': svg('<rect x="2.5" y="3.5" width="15" height="13" rx="2"/><path d="M7.5 3.5v13"/><path d="M3 4h4.5v12H3z" fill="black" opacity=".35" stroke="none"/>'),
-    'table.left': svg('<path d="M16 10H4.5M9 5.5L4.5 10 9 14.5"/>'),
-    'table.right': svg('<path d="M4 10h11.5M11 5.5l4.5 4.5-4.5 4.5"/>'),
-    'table.insert': svg('<path d="M10 4.5v11M4.5 10h11"/>'),
-    'columns.2': columns(2),
-    'columns.3': columns(3),
-    'columns.4': columns(4),
-    'columns.5': columns(5),
-    'mark.link': svg('<path d="M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"/>'),
-    'action.duplicate': svg('<rect x="6.5" y="6.5" width="10" height="10" rx="2"/><path d="M13.5 4.5v-.5a1.5 1.5 0 0 0-1.5-1.5H5A2.5 2.5 0 0 0 2.5 5v7A1.5 1.5 0 0 0 4 13.5h.5"/>'),
-    'action.delete': svg('<path d="M4 6h12M8 6V4.5h4V6M5.5 6l.8 9.2a1.5 1.5 0 0 0 1.5 1.3h4.4a1.5 1.5 0 0 0 1.5-1.3L14.5 6"/>'),
-    'action.link': svg('<path d="M8.5 11.5a3 3 0 0 0 4.2 0l2.6-2.6a3 3 0 0 0-4.2-4.2l-1 1M11.5 8.5a3 3 0 0 0-4.2 0l-2.6 2.6a3 3 0 0 0 4.2 4.2l1-1"/>'),
-    'action.turn': svg('<path d="M4 7.5h10.5l-3-3M16 12.5H5.5l3 3"/>'),
-    'action.color': svg('<path d="M6 15.5L10 4.5l4 11M7.4 11.7h5.2"/>'),
-    'action.up': svg('<path d="M10 16V4.5M5.5 9L10 4.5 14.5 9"/>'),
-    'action.down': svg('<path d="M10 4v11.5M5.5 11l4.5 4.5 4.5-4.5"/>'),
-    'action.chevron': svg('<path d="M8 5.5l4.5 4.5L8 14.5"/>'),
-    'image.align-left': svg('<path d="M3.5 5h13M3.5 8.3h8M3.5 11.7h13M3.5 15h8"/>'),
-    'image.align-center': svg('<path d="M3.5 5h13M6 8.3h8M3.5 11.7h13M6 15h8"/>'),
-    'image.align-right': svg('<path d="M3.5 5h13M8.5 8.3h8M3.5 11.7h13M8.5 15h8"/>'),
-    'image.alt': svg('<rect x="2.5" y="4.5" width="15" height="11" rx="2"/><path d="M5.5 12.5l1.8-5 1.8 5M6 11h2.6M11 7.5v5h2.5M14.5 7.5v5"/>')
-};
-/** The icon's CSS `mask-image` value for `id`, if the id has one. */
-export const iconOf = (id) => ICONS[id];

package/dist/plugins/image/ImageEmpty.svelte

@@ -1,116 +0,0 @@
-<script lang="ts">
-	import { getContext, untrack } from 'svelte';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import type { Block } from '../../block/block.svelte.js';
-	import {
-		MAX_INLINE_IMAGE_BYTES,
-		imageLabels,
-		oversizedInlineImage,
-		safeImageSrc
-	} from './image.js';
-	import type { FileUploads, Uploader } from '../uploads.svelte.js';
-
-	/**
-	 * Notion's empty image: "Add an image", then a link field (and Upload with
-	 * an `upload`). A readonly view, or a suggestion's preview (no `block`),
-	 * shows a passive placeholder: no control may run `upload` for a write the
-	 * view would refuse. A pasted or dropped file whose upload failed
-	 * (`error`) opens the panel with its error; embedding a source forgets
-	 * it. A block whose upload answered while it was not shown (`landed`: its
-	 * paste undone, then redone) gets that URL as soon as it shows here.
-	 */
-	let {
-		block,
-		upload,
-		uploads,
-		error = null,
-		landed = false
-	}: {
-		block: Block | undefined;
-		upload?: Uploader;
-		uploads?: FileUploads;
-		error?: 'upload' | null;
-		landed?: boolean;
-	} = $props();
-
-	// After the flush that shows the block: never inside the transaction that showed it.
-	$effect(() => {
-		if (landed && block && !block.edytor.readonly) {
-			const id = block.id;
-			untrack(() => uploads?.fill(id));
-		}
-	});
-	/** The words of the view rendering it (a suggestion's preview included). */
-	const labels = imageLabels.of(getContext<Edytor>('edytor'));
-	let draft = $state('');
-	// The panel opens on a failed upload; the user closes it.
-	let open = $state(untrack(() => error !== null));
-	/** Why the last link or upload was not embedded (`null`: it was). */
-	let failed = $state<'invalid' | 'inline' | 'upload' | null>(untrack(() => error));
-	const inlineLimit = `${MAX_INLINE_IMAGE_BYTES / (1024 * 1024)} MB`;
-
-	const embed = (value: string) => {
-		const src = safeImageSrc(value);
-		// An inline image over the cap is never stored: it would weigh on every sync.
-		failed = !src ? 'invalid' : oversizedInlineImage(src) ? 'inline' : null;
-		if (src && failed === null && block) {
-			block.data.src = src;
-			uploads?.clear(block.id);
-		}
-	};
-</script>
-
-{#if !block || block.edytor.readonly}
-	<div data-edytor-image-placeholder><span aria-hidden="true">🖼</span> {labels.image}</div>
-{:else}
-	<button
-		type="button"
-		data-edytor-image-add
-		onmousedown={(event) => event.preventDefault()}
-		onclick={() => (open = !open)}><span aria-hidden="true">🖼</span> {labels.add}</button
-	>
-	{#if open}
-		<div data-edytor-image-form>
-			<input
-				placeholder={labels.linkPlaceholder}
-				aria-label={labels.link}
-				bind:value={draft}
-				onkeydown={(event) => {
-					if (event.key === 'Enter') {
-						event.preventDefault();
-						embed(draft);
-					}
-				}}
-			/>
-			<button type="button" onclick={() => embed(draft)}>{labels.embed}</button>
-			{#if upload}
-				<label data-edytor-image-upload>
-					{labels.upload}
-					<input
-						type="file"
-						accept="image/*"
-						hidden
-						onchange={async (event) => {
-							const file = event.currentTarget.files?.[0];
-							if (!file || block?.edytor.readonly !== false) return;
-							try {
-								embed(await upload(file, { progress: () => {} }));
-							} catch {
-								failed = 'upload';
-							}
-						}}
-					/>
-				</label>
-			{/if}
-			{#if failed === 'inline'}
-				<small data-edytor-image-error="inline"
-					>{labels.tooLarge(inlineLimit, Boolean(upload))}</small
-				>
-			{:else if failed === 'upload'}
-				<small data-edytor-image-error="upload">{labels.uploadFailed}</small>
-			{:else if failed}
-				<small data-edytor-image-error="invalid">{labels.invalid}</small>
-			{/if}
-		</div>
-	{/if}
-{/if}

package/dist/plugins/image/ImageEmpty.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Block } from '../../block/block.svelte.js';
-import type { FileUploads, Uploader } from '../uploads.svelte.js';
-type $$ComponentProps = {
-    block: Block | undefined;
-    upload?: Uploader;
-    uploads?: FileUploads;
-    error?: 'upload' | null;
-    landed?: boolean;
-};
-declare const ImageEmpty: import("svelte").Component<$$ComponentProps, {}, "">;
-type ImageEmpty = ReturnType<typeof ImageEmpty>;
-export default ImageEmpty;

package/dist/plugins/keepInView.d.ts

@@ -1,4 +0,0 @@
-/** A menu row's action: the keyboard's row (`isSelected`) scrolls into view. */
-export declare const keepInView: (node: HTMLElement, isSelected: boolean) => {
-    update: (value: boolean) => false | void;
-};

package/dist/plugins/keepInView.js

@@ -1,6 +0,0 @@
-/** A menu row's action: the keyboard's row (`isSelected`) scrolls into view. */
-export const keepInView = (node, isSelected) => {
-    const reveal = (value) => value && node.scrollIntoView?.({ block: 'nearest' });
-    reveal(isSelected);
-    return { update: reveal };
-};

package/dist/plugins/media/UrlPasteMenu.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-	import type { UrlPasteController } from './urlPaste.svelte.js';
-
-	let { controller }: { controller: UrlPasteController } = $props();
-	// An editor turning readonly closes the menu (its conversions would be refused).
-	$effect(() => {
-		if (controller.open && controller.readonly) controller.close();
-	});
-</script>
-
-{#if controller.open}
-	<!-- The editor keeps the keyboard: its keys move and pick (the plugin's hotkeys). -->
-	<div
-		class="url-paste-menu"
-		data-edytor-url-paste-menu
-		role="listbox"
-		aria-label={controller.labels.pasteAs}
-		tabindex="-1"
-		onmousedown={(event) => event.preventDefault()}
-	>
-		{#each controller.open.options as option, index (option.id)}
-			<button
-				type="button"
-				class="url-paste-option"
-				data-edytor-url-paste-option={option.id}
-				role="option"
-				tabindex="-1"
-				aria-selected={index === controller.index}
-				onmousemove={() => (controller.index = index)}
-				onclick={() => controller.pick(option)}
-				><span aria-hidden="true">{option.icon}</span>{option.label}</button
-			>
-		{/each}
-	</div>
-{/if}
-
-<style>
-	.url-paste-menu {
-		display: flex;
-		flex-direction: column;
-		min-width: 200px;
-		padding: 4px;
-		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;
-	}
-	.url-paste-option {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		height: 28px;
-		padding: 0 8px;
-		border-radius: 6px;
-		color: inherit;
-		font: inherit;
-		text-align: left;
-		white-space: nowrap;
-		cursor: pointer;
-	}
-	.url-paste-option span {
-		display: grid;
-		place-items: center;
-		width: 20px;
-	}
-	.url-paste-option[aria-selected='true'] {
-		background: rgba(84, 72, 49, 0.08);
-	}
-</style>

package/dist/plugins/media/UrlPasteMenu.svelte.d.ts

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

package/dist/plugins/richtext/labels.d.ts

@@ -1,5 +0,0 @@
-/** The rich text labels of each view, for the to-do checkbox (the first rich text plugin listed). */
-export declare const checkboxLabels: {
-    claim: (view: object | undefined, labels: import("../../labels.js").RichTextLabels) => void;
-    of: (view: object | undefined) => import("../../labels.js").RichTextLabels;
-};

package/dist/plugins/richtext/labels.js

@@ -1,3 +0,0 @@
-import { viewLabels } from '../../labels.js';
-/** The rich text labels of each view, for the to-do checkbox (the first rich text plugin listed). */
-export const checkboxLabels = viewLabels('richText');