edytor 1.0.0-rc.3 → 2.0.0

package/dist/plugins/image/ImageEmpty.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	import { getContext, untrack, type Snippet } from 'svelte';
-	import type { Edytor } from '../../edytor.svelte.js';
-	import type { Block } from '../../block/block.svelte.js';
-	import { imageLabels } from './image.js';
-	import { ImageEmptyController } from './empty.svelte.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. Its
-	 * state is an `ImageEmptyController`, which an `empty` snippet renders
-	 * instead of this markup.
-	 */
-	let {
-		block,
-		upload,
-		uploads,
-		error = null,
-		landed = false,
-		empty
-	}: {
-		block: Block | undefined;
-		upload?: Uploader;
-		uploads?: FileUploads;
-		error?: 'upload' | null;
-		landed?: boolean;
-		empty?: Snippet<[ImageEmptyController]>;
-	} = $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'));
-	const panel = untrack(() => new ImageEmptyController(block, labels, { upload, uploads, error }));
-</script>
-
-{#if empty}
-	{@render empty(panel)}
-{:else if panel.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={panel.toggle}><span aria-hidden="true">🖼</span> {labels.add}</button
-	>
-	{#if panel.open}
-		<div data-edytor-image-form>
-			<input
-				placeholder={labels.linkPlaceholder}
-				aria-label={labels.link}
-				bind:value={panel.draft}
-				{@attach panel.field}
-			/>
-			<button type="button" onclick={() => panel.embed()}>{labels.embed}</button>
-			{#if panel.canUpload}
-				<label data-edytor-image-upload>
-					{labels.upload}
-					<input
-						type="file"
-						accept="image/*"
-						hidden
-						onchange={(event) => {
-							const file = event.currentTarget.files?.[0];
-							if (file) void panel.upload(file);
-						}}
-					/>
-				</label>
-			{/if}
-			{#if panel.failed === 'inline'}
-				<small data-edytor-image-error="inline"
-					>{labels.tooLarge(panel.inlineLimit, panel.canUpload)}</small
-				>
-			{:else if panel.failed === 'upload'}
-				<small data-edytor-image-error="upload">{labels.uploadFailed}</small>
-			{:else if panel.failed}
-				<small data-edytor-image-error="invalid">{labels.invalid}</small>
-			{/if}
-		</div>
-	{/if}
-{/if}

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

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

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

@@ -1,56 +0,0 @@
-import type { Attachment } from 'svelte/attachments';
-import type { Block } from '../../block/block.svelte.js';
-import type { ImageLabels } from '../../labels.js';
-import type { FileUploads, Uploader } from '../uploads.svelte.js';
-/** Why the last link or upload was not embedded. */
-export type ImageEmptyFailure = 'invalid' | 'inline' | 'upload';
-/**
- * An empty image block's state (Notion's "Add an image"): the panel's
- * `open` state, the link field's `draft`, and why the last link or upload
- * was not embedded (`failed`); `embed` and `upload` set the source. What an
- * image plugin's `empty` snippet receives (one per empty block shown).
- */
-export declare class ImageEmptyController {
-    /** The empty block; none in a suggestion's preview. */
-    readonly block: Block | undefined;
-    /** The words of the view rendering it (a suggestion's preview included). */
-    readonly labels: ImageLabels;
-    private options;
-    /** The link panel is open. */
-    open: boolean;
-    /** The link field's text. */
-    draft: string;
-    /** Why the last link or upload was not embedded (`null`: it was, or none was tried). */
-    failed: ImageEmptyFailure | null;
-    /** The cap on an inline (`data:`) image, written for people (`2 MB`). */
-    readonly inlineLimit: string;
-    constructor(
-    /** The empty block; none in a suggestion's preview. */
-    block: Block | undefined, 
-    /** The words of the view rendering it (a suggestion's preview included). */
-    labels: ImageLabels, options?: {
-        upload?: Uploader;
-        uploads?: FileUploads;
-        /** A pasted or dropped file's upload failed: the panel opens with its error. */
-        error?: 'upload' | null;
-    });
-    /**
-     * No control may write: a readonly view, or a suggestion's preview (no
-     * block). Show a passive placeholder then.
-     */
-    get readonly(): boolean;
-    /** The plugin has an `upload`: offer Upload. */
-    get canUpload(): boolean;
-    /** Open or close the link panel. */
-    toggle: () => void;
-    /**
-     * Embed `value` (default the `draft`): an accepted source (`safeImageSrc`)
-     * becomes the block's `src` (one `patchData`); an inline image over the
-     * cap is never stored (`failed` says why).
-     */
-    embed: (value?: string) => void;
-    /** Upload `file` with the plugin's `upload` and embed the URL it answers. */
-    upload: (file: File) => Promise<void>;
-    /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
-    field: Attachment<HTMLInputElement>;
-}

package/dist/plugins/image/empty.svelte.js

@@ -1,83 +0,0 @@
-import { MAX_INLINE_IMAGE_BYTES, oversizedInlineImage, safeImageSrc } from './image.js';
-/**
- * An empty image block's state (Notion's "Add an image"): the panel's
- * `open` state, the link field's `draft`, and why the last link or upload
- * was not embedded (`failed`); `embed` and `upload` set the source. What an
- * image plugin's `empty` snippet receives (one per empty block shown).
- */
-export class ImageEmptyController {
-    block;
-    labels;
-    options;
-    /** The link panel is open. */
-    open = $state(false);
-    /** The link field's text. */
-    draft = $state('');
-    /** Why the last link or upload was not embedded (`null`: it was, or none was tried). */
-    failed = $state(null);
-    /** The cap on an inline (`data:`) image, written for people (`2 MB`). */
-    inlineLimit = `${MAX_INLINE_IMAGE_BYTES / (1024 * 1024)} MB`;
-    constructor(
-    /** The empty block; none in a suggestion's preview. */
-    block, 
-    /** The words of the view rendering it (a suggestion's preview included). */
-    labels, options = {}) {
-        this.block = block;
-        this.labels = labels;
-        this.options = options;
-        if (options.error)
-            [this.open, this.failed] = [true, options.error];
-    }
-    /**
-     * No control may write: a readonly view, or a suggestion's preview (no
-     * block). Show a passive placeholder then.
-     */
-    get readonly() {
-        return !this.block || this.block.edytor.readonly;
-    }
-    /** The plugin has an `upload`: offer Upload. */
-    get canUpload() {
-        return Boolean(this.options.upload);
-    }
-    /** Open or close the link panel. */
-    toggle = () => {
-        this.open = !this.open;
-    };
-    /**
-     * Embed `value` (default the `draft`): an accepted source (`safeImageSrc`)
-     * becomes the block's `src` (one `patchData`); an inline image over the
-     * cap is never stored (`failed` says why).
-     */
-    embed = (value = this.draft) => {
-        const src = safeImageSrc(value);
-        // An inline image over the cap is never stored: it would weigh on every sync.
-        this.failed = !src ? 'invalid' : oversizedInlineImage(src) ? 'inline' : null;
-        if (src && this.failed === null && this.block) {
-            this.block.data.src = src;
-            this.options.uploads?.clear(this.block.id);
-        }
-    };
-    /** Upload `file` with the plugin's `upload` and embed the URL it answers. */
-    upload = async (file) => {
-        const { upload } = this.options;
-        if (!upload || this.readonly)
-            return;
-        try {
-            this.embed(await upload(file, { progress: () => { } }));
-        }
-        catch {
-            this.failed = 'upload';
-        }
-    };
-    /** The link field (`{@attach empty.field}`): Enter embeds its `draft`. */
-    field = (node) => {
-        const keydown = (event) => {
-            if (event.key !== 'Enter' || event.isComposing)
-                return;
-            event.preventDefault();
-            this.embed();
-        };
-        node.addEventListener('keydown', keydown);
-        return () => node.removeEventListener('keydown', keydown);
-    };
-}

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,92 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { UrlPasteController } from './urlPaste.svelte.js';
-
-	let {
-		controller,
-		menu
-	}: { controller: UrlPasteController; menu?: Snippet<[UrlPasteController]> } = $props();
-	// An editor turning readonly closes the menu (its conversions would be refused).
-	$effect(() => {
-		if (controller.open && controller.readonly) controller.close();
-	});
-</script>
-
-<!--
-	The editor keeps the keyboard: its keys move and pick (the plugin's
-	hotkeys). 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.open && menu}
-	{@render menu(controller)}
-{:else if controller.open}
-	<div
-		class="url-paste-menu"
-		data-edytor-url-paste-menu
-		role="listbox"
-		aria-label={controller.labels.pasteAs}
-		tabindex="-1"
-		{@attach controller.popup}
-	>
-		{#each controller.open.options as option, index (option.id)}
-			<button
-				type="button"
-				class="url-paste-option"
-				{...controller.option(index)}
-				data-edytor-url-paste-option={option.id}
-				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,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { UrlPasteController } from './urlPaste.svelte.js';
-type $$ComponentProps = {
-    controller: UrlPasteController;
-    menu?: Snippet<[UrlPasteController]>;
-};
-declare const UrlPasteMenu: import("svelte").Component<$$ComponentProps, {}, "">;
-type UrlPasteMenu = ReturnType<typeof UrlPasteMenu>;
-export default UrlPasteMenu;

package/dist/plugins/richtext/CalloutIconMenu.svelte

@@ -1,98 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { ICON_COLUMNS, type CalloutIconPicker } from './calloutIcons.svelte.js';
-
-	/**
-	 * A callout's icon picker (`callout.icon`), in the overlay under the icon:
-	 * the app's `picker` snippet, else a menu of the view's icons, then Remove
-	 * icon. Both take the keys and publish the popup through the controller's
-	 * attachments (`keys`, `popup`) and rows (`option`).
-	 */
-	let { picker, menu }: { picker: CalloutIconPicker; menu?: Snippet<[CalloutIconPicker]> } =
-		$props();
-
-	// A view turning readonly closes it (its write would be refused).
-	$effect(() => {
-		if (picker.isOpen && picker.readonly) picker.close(false);
-	});
-</script>
-
-{#if picker.isOpen}
-	<div data-edytor-callout-icons style:opacity={picker.box ? undefined : 0}>
-		{#if menu}
-			{@render menu(picker)}
-		{:else}
-			<div class="callout-icons" {@attach picker.keys} {@attach picker.popup}>
-				<div class="callout-icons-grid" role="none" style:--callout-icon-columns={ICON_COLUMNS}>
-					{#each picker.icons as icon, index (index)}
-						<button type="button" tabindex="-1" {...picker.option(index)}>{icon}</button>
-					{/each}
-				</div>
-				<button
-					type="button"
-					class="callout-icons-remove"
-					tabindex="-1"
-					{...picker.option(picker.icons.length)}>{picker.labels.remove}</button
-				>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.callout-icons {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		padding: 6px;
-		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-family:
-			ui-sans-serif,
-			-apple-system,
-			BlinkMacSystemFont,
-			'Segoe UI',
-			Helvetica,
-			Arial,
-			sans-serif;
-		font-size: 14px;
-		line-height: 20px;
-		outline: 0;
-	}
-	.callout-icons-grid {
-		display: grid;
-		grid-template-columns: repeat(var(--callout-icon-columns), 32px);
-		gap: 2px;
-	}
-	.callout-icons button {
-		border: 0;
-		border-radius: 6px;
-		background: transparent;
-		color: inherit;
-		font: inherit;
-		cursor: pointer;
-	}
-	.callout-icons-grid button {
-		width: 32px;
-		height: 32px;
-		padding: 0;
-		font-size: 20px;
-		line-height: 32px;
-	}
-	.callout-icons button[data-active] {
-		background: rgba(55, 53, 47, 0.08);
-	}
-	.callout-icons button[aria-checked='true'] {
-		box-shadow: inset 0 0 0 2px rgba(35, 131, 226, 0.57);
-	}
-	.callout-icons-remove {
-		padding: 4px 8px;
-		text-align: start;
-		color: #73726e;
-	}
-</style>

package/dist/plugins/richtext/CalloutIconMenu.svelte.d.ts

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

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

@@ -1,9 +0,0 @@
-/**
- * The rich text labels of each view, for the components its kinds render
- * (the to-do checkbox, an empty body's hint, a callout's icon): the first
- * rich text plugin listed.
- */
-export declare const richTextLabels: {
-    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,7 +0,0 @@
-import { viewLabels } from '../../labels.js';
-/**
- * The rich text labels of each view, for the components its kinds render
- * (the to-do checkbox, an empty body's hint, a callout's icon): the first
- * rich text plugin listed.
- */
-export const richTextLabels = viewLabels('richText');