@peteai/presentation-editor 0.0.5 → 0.0.7

package/dist/components/editor/layers/types/text/text-layer-edit.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import type { EditorEvents } from '@tiptap/core';
+	import type {
+		TextLayer,
+		GroupLayer,
+		TextLayerInitial,
+		HistoryAction,
+	} from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { EditorContent } from './editor/index.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	import './editor.css';
+
+	interface Props {
+		layer: TextLayer;
+		groupLayer?: GroupLayer;
+	}
+
+	let { layer = $bindable(), groupLayer = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const pageId = editor.activePage.id;
+	const layerId = layer.id;
+	const layerState = layer;
+	const groupLayerState = groupLayer;
+
+	let bbox = $derived(
+		groupLayerState
+			? editor.getAbsoluteGroupLayers(groupLayerState, [layerState]).find((l) => l.id === layerId)!
+			: layerState,
+	);
+
+	const { htmlEditor } = editor;
+
+	let initial: TextLayerInitial | null = null;
+
+	const debouncedUpdates = createDebouncedCallback((actions: HistoryAction[]) => {
+		console.log('debouncedUpdates', actions);
+		editor.historyPush(actions);
+		initial = null;
+	}, 750);
+
+	const onUpdate = async (e: EditorEvents['update']) => {
+		console.log('editor update', e.editor.getJSON());
+		if (!initial) {
+			initial = editor.createTextLayerInitial(editor.activePage, layerState);
+		}
+		const html = e.editor.getJSON();
+		const actions = await editor.applyHtmlToLayer(initial, html);
+		// save update only when there is a content
+		if (e.editor.state.doc.textContent.trim().length) {
+			debouncedUpdates(actions);
+		}
+	};
+
+	const checkIfEmpty = () => {
+		if (initial && !$htmlEditor.isFocused && !$htmlEditor.state.doc.textContent.trim().length) {
+			Object.assign(layerState, {
+				html: initial.layer.initial.html,
+				x: initial.layer.initial.x,
+				y: initial.layer.initial.y,
+				height: initial.layer.initial.height,
+			});
+			editor.removeLayers(pageId, layerId);
+		}
+	};
+
+	$htmlEditor.on('update', onUpdate);
+
+	onDestroy(() => {
+		$htmlEditor.off('update', onUpdate);
+		checkIfEmpty();
+	});
+
+	$effect(() => {
+		if (editor.activeAction?.type !== 'edit') {
+			checkIfEmpty();
+		}
+	});
+
+	$htmlEditor.chain().setContent(layer.html).selectAll().run();
+
+	// update html when it changes by history undo/redo
+	$effect(() => {
+		if (editor.activeAction?.type !== 'edit') {
+			untrack(() => $htmlEditor)
+				.chain()
+				.setContent(layer.html)
+				.selectAll()
+				.run();
+		}
+	});
+</script>
+
+<div class="absolute origin-top-left select-none">
+	<div
+		class="pointer-events-auto select-text"
+		style:width={`${bbox.width * bbox.scale * editor.zoom}px`}
+		style:height={`${bbox.height * bbox.scale * editor.zoom}px`}
+		style:transform={`translate(${bbox.x * editor.zoom}px, ${bbox.y * editor.zoom}px) rotate(${bbox.rotate}deg)`}
+	>
+		<div
+			class="origin-top-left"
+			style:width="{bbox.width}px"
+			style:height="{bbox.height}px"
+			style:transform={`scale(${bbox.scale * editor.zoom})`}
+		>
+			<EditorContent editor={$htmlEditor} />
+		</div>
+	</div>
+</div>

package/dist/components/editor/layers/types/text/text-layer-edit.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TextLayer, GroupLayer } from '../../../types.js';
+import './editor.css';
+interface Props {
+    layer: TextLayer;
+    groupLayer?: GroupLayer;
+}
+declare const TextLayerEdit: import("svelte").Component<Props, {}, "layer" | "groupLayer">;
+type TextLayerEdit = ReturnType<typeof TextLayerEdit>;
+export default TextLayerEdit;

package/dist/components/editor/layers/types/text/text-layer.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
+	import type { TextLayer } from '../../../types.js';
+	import { getEditorContext } from '../../../editor.svelte.js';
+	import { TextLayerContent } from './index.js';
+	import { calculateBoundingBox } from '../../utils.js';
+	import { extractNodeFonts } from './editor/utils.js';
+
+	interface Props {
+		layer: TextLayer;
+	}
+
+	let { layer }: Props = $props();
+
+	const editor = getEditorContext();
+
+	let ref: HTMLElement | null = $state(null);
+
+	if (BROWSER) {
+		Promise.all(extractNodeFonts(layer.html).map(editor.loadFont)).finally(() => {
+			if (ref) {
+				Object.assign(layer, { height: ref.offsetHeight });
+			}
+		});
+	}
+
+	onMount(() => {
+		if (ref) {
+			Object.assign(layer, { height: ref.offsetHeight });
+		}
+	});
+
+	const canEdit = () => {
+		if (editor.activeAction) return false;
+		if (editor.activePage.locked) return false;
+		if (editor.activeSelection.type === 'root-layers') {
+			if (!editor.activeLayers.find((l) => l.id === layer.id)) return false;
+			if (layer.locked) return false;
+		} else if (editor.activeSelection.type === 'child-layer') {
+			if (!editor.activeGroupAndChild) return false;
+			const { groupLayer, childLayer } = editor.activeGroupAndChild;
+			if (childLayer.id !== layer.id) return false;
+			if (groupLayer.locked) return false;
+		} else {
+			return false;
+		}
+		return true;
+	};
+
+	let tryToEdit = false;
+
+	const onMouseDown = (e: MouseEvent) => {
+		if (e.button !== 0) return;
+		console.log('mousedown', layer.id, e);
+		if (!canEdit()) return;
+		tryToEdit = true;
+	};
+
+	const onClick = (e: MouseEvent) => {
+		console.log('click', layer.id, e);
+		if (!tryToEdit) return;
+		tryToEdit = false;
+		if (!canEdit()) return;
+		e.stopPropagation();
+		console.log('edit layer', layer.id);
+		editor.activeAction = { id: layer.id, type: 'edit' };
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter text layer', e);
+
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				inside: true,
+				sticky: true,
+				customScale: null,
+			};
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover text layer', e);
+		if (editor.dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+
+	const onDrop = (e: DragEvent) => {
+		if (!ref) return;
+		console.log('drop text layer', e);
+
+		const { dragged } = editor;
+		if (dragged) {
+			e.preventDefault();
+			e.stopPropagation();
+			const bbox = calculateBoundingBox(layer);
+			const rect = ref.getBoundingClientRect();
+			const x = (e.clientX - rect.left - dragged.offsetX) / editor.zoom + bbox.x;
+			const y = (e.clientY - rect.top - dragged.offsetY) / editor.zoom + bbox.y;
+			editor.dropDragged(x, y);
+		}
+	};
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="h-full w-full"
+	style:opacity={editor.activeAction?.id === layer.id && editor.activeAction?.type === 'edit'
+		? 0
+		: null}
+	onclick={onClick}
+	onmousedown={onMouseDown}
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+>
+	<TextLayerContent {layer} bind:ref />
+</div>

package/dist/components/editor/layers/types/text/text-layer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TextLayer } from '../../../types.js';
+interface Props {
+    layer: TextLayer;
+}
+declare const TextLayer: import("svelte").Component<Props, {}, "">;
+type TextLayer = ReturnType<typeof TextLayer>;
+export default TextLayer;

package/dist/components/{presentation-editor → editor}/layers/utils.d.ts

@@ -1,4 +1,4 @@
-import type { HtmlLayer, ImageLayer, Layer } from '../types.js';
+import type { ImageLayer, Layer } from '../types.js';
 type Origin = 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-right' | 'left' | 'right' | 'top' | 'bottom';
 export type Point = {
     x: number;
@@ -10,6 +10,7 @@ export type Transform = {
     width: number;
     height: number;
     rotate: number;
+    scale: number;
 };
 export declare const rotatePointOld: (point: {
     x: number;
@@ -18,7 +19,7 @@ export declare const rotatePointOld: (point: {
     x: number;
     y: number;
 };
-export declare const calculateLayerTransform: (layer: Layer) => Transform;
+export declare const calculateLayerTransform: (layer: Layer, groupScale?: number) => Transform;
 export declare const calculateNewPosition: (origin: Origin, transform: Transform, newWidth: number, newHeight: number) => {
     newX: number;
     newY: number;
@@ -32,10 +33,6 @@ export declare function calculateBoundingBox(transform: Transform): {
 export declare function degToRad(deg: number): number;
 export declare function rotatePoint(p: Point, origin: Point, angleRad: number): Point;
 export declare function getRotatedCorners(rect: Transform): Point[];
-export declare function calculateBoundingBoxSize(width: number, height: number, rotate: number): {
-    width: number;
-    height: number;
-};
 export declare function isRotatedVertically(rotate: number): boolean;
 interface ScaleResult {
     width: number;
@@ -49,14 +46,16 @@ export declare function getRotatedBoundingBox(center: Point, width: number, heig
     width: number;
     height: number;
 };
-export declare function calculateGroupRotatedBoundingBox(rects: Transform[], groupRotate?: number): Transform;
-export declare function calculateRelativeRects(bbox: Transform, rects: Transform[]): {
+export declare function calculateGroupRotatedBoundingBox(transforms: Transform[], rotate?: number): Transform;
+export declare function calculateRelativeRects(bbox: Transform, absoluteRects: Transform[]): {
     x: number;
     y: number;
+    rotate: number;
     width: number;
     height: number;
-    rotate: number;
+    scale: number;
 }[];
+export declare function calculateAbsoluteRects(bbox: Transform, rects: Transform[]): Transform[];
 export declare const checkPolygonsIntersect: (a: {
     x: number;
     y: number;
@@ -64,12 +63,7 @@ export declare const checkPolygonsIntersect: (a: {
     x: number;
     y: number;
 }[]) => boolean;
-export declare function calculateGroupBoundingBox(transforms: Transform[]): {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
+export declare function calculateGroupBoundingBox(transforms: Transform[]): Transform;
 export declare function calculateImageCover(image: {
     width: number;
     height: number;
@@ -87,5 +81,4 @@ export declare function calculateImageCover(image: {
 export declare const defaultColor = "#000000";
 export declare function extractBorderColors(layers: ImageLayer[]): string[] | undefined;
 export declare function buildBackgroundCircleStyle(colors: string[]): string;
-export declare function applyHtmlToLayer(layer: HtmlLayer, html: HtmlLayer['html']): Promise<Pick<HtmlLayer, 'html' | 'x' | 'y' | 'height'>>;
 export {};

package/dist/components/{presentation-editor → editor}/layers/utils.js

@@ -1,4 +1,3 @@
-import { tick } from 'svelte';
 export const rotatePointOld = (point, angleRad) => {
     const cos = Math.cos(angleRad);
     const sin = Math.sin(angleRad);
@@ -33,15 +32,17 @@ const getPoints = (origin, width, height) => {
             throw new Error(`Unknown origin: ${origin}`);
     }
 };
-export const calculateLayerTransform = (layer) => {
-    const { x, y, width, height } = layer;
-    const scale = layer.scale || 1;
-    const rotate = layer.rotate || 0;
-    return { x, y, width: width * scale, height: height * scale, rotate };
-};
+export const calculateLayerTransform = (layer, groupScale = 1) => ({
+    x: layer.x * groupScale,
+    y: layer.y * groupScale,
+    width: layer.width * groupScale,
+    height: layer.height * groupScale,
+    rotate: layer.rotate,
+    scale: layer.scale,
+});
 export const calculateNewPosition = (origin, transform, newWidth, newHeight) => {
-    const { x, y, width, height, rotate } = transform;
-    const oldPoint = getPoints(origin, width, height);
+    const { x, y, width, height, rotate, scale } = transform;
+    const oldPoint = getPoints(origin, width * scale, height * scale);
     const newPoint = getPoints(origin, newWidth, newHeight);
     let deltaX = newPoint.x - oldPoint.x;
     let deltaY = newPoint.y - oldPoint.y;
@@ -53,23 +54,23 @@ export const calculateNewPosition = (origin, transform, newWidth, newHeight) =>
         deltaY = rotatedNewCenter.y - rotatedOldCenter.y;
     }
     return {
-        newX: x - deltaX - (newWidth - width) / 2,
-        newY: y - deltaY - (newHeight - height) / 2,
+        newX: x - deltaX - (newWidth - width * scale) / 2,
+        newY: y - deltaY - (newHeight - height * scale) / 2,
     };
 };
 export function calculateBoundingBox(transform) {
-    const { x, y, width, height, rotate } = transform;
+    const { x, y, width, height, rotate, scale } = transform;
     if (rotate === 0) {
-        return { x, y, width, height };
+        return { x, y, width: width * scale, height: height * scale };
     }
     const radians = (rotate * Math.PI) / 180;
     const origins = ['top-left', 'top-right'];
-    const corners = origins.map((position) => rotatePointOld(getPoints(position, width, height), radians));
+    const corners = origins.map((position) => rotatePointOld(getPoints(position, width * scale, height * scale), radians));
     const maxX = Math.max(...corners.map((corner) => Math.abs(corner.x)));
     const maxY = Math.max(...corners.map((corner) => Math.abs(corner.y)));
     return {
-        x: x + width / 2 - maxX,
-        y: y + height / 2 - maxY,
+        x: x + (width * scale) / 2 - maxX,
+        y: y + (height * scale) / 2 - maxY,
         width: maxX * 2,
         height: maxY * 2,
     };
@@ -88,11 +89,11 @@ export function rotatePoint(p, origin, angleRad) {
     };
 }
 export function getRotatedCorners(rect) {
-    const cx = rect.x + rect.width / 2;
-    const cy = rect.y + rect.height / 2;
+    const cx = rect.x + (rect.width * rect.scale) / 2;
+    const cy = rect.y + (rect.height * rect.scale) / 2;
     const angle = degToRad(rect.rotate);
-    const hw = rect.width / 2;
-    const hh = rect.height / 2;
+    const hw = (rect.width * rect.scale) / 2;
+    const hh = (rect.height * rect.scale) / 2;
     const corners = [
         { x: cx - hw, y: cy - hh },
         { x: cx + hw, y: cy - hh },
@@ -101,15 +102,6 @@ export function getRotatedCorners(rect) {
     ];
     return corners.map((p) => rotatePoint(p, { x: cx, y: cy }, angle));
 }
-export function calculateBoundingBoxSize(width, height, rotate) {
-    const theta = degToRad(rotate);
-    const cosTheta = Math.abs(Math.cos(theta));
-    const sinTheta = Math.abs(Math.sin(theta));
-    return {
-        width: width * cosTheta + height * sinTheta,
-        height: width * sinTheta + height * cosTheta,
-    };
-}
 export function isRotatedVertically(rotate) {
     const rotationNormalized = ((rotate % 360) + 360) % 360;
     const rotationShifted = (rotationNormalized + 45) % 360;
@@ -170,12 +162,12 @@ export function getRotatedBoundingBox(center, width, height, rotate) {
         height: maxY - minY,
     };
 }
-export function calculateGroupRotatedBoundingBox(rects, groupRotate = 0) {
-    if (!groupRotate)
-        return { ...calculateGroupBoundingBox(rects), rotate: 0 };
-    const allCorners = rects.flatMap(getRotatedCorners);
-    const theta = degToRad(-groupRotate); // inverse to align bbox with axes
-    // Rotate all points to align with desired bbox angle
+export function calculateGroupRotatedBoundingBox(transforms, rotate = 0) {
+    if (!rotate)
+        return calculateGroupBoundingBox(transforms);
+    const allCorners = transforms.flatMap((t) => getRotatedCorners(t));
+    const theta = degToRad(-rotate); // inverse to align bbox with axes
+    // Rotate all points to align with desired angle
     const rotatedPoints = allCorners.map((p) => rotatePoint(p, { x: 0, y: 0 }, theta));
     // Compute AABB of rotated points
     const xs = rotatedPoints.map((p) => p.x);
@@ -191,36 +183,59 @@ export function calculateGroupRotatedBoundingBox(rects, groupRotate = 0) {
         y: (minY + maxY) / 2,
     };
     // Rotate center back to original space
-    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(groupRotate));
-    const bbox = {
+    const center = rotatePoint(centerRotated, { x: 0, y: 0 }, degToRad(rotate));
+    return {
         x: center.x - width / 2,
         y: center.y - height / 2,
         width,
         height,
-        rotate: groupRotate,
+        rotate,
+        scale: 1,
     };
-    return bbox;
 }
-export function calculateRelativeRects(bbox, rects) {
+export function calculateRelativeRects(bbox, absoluteRects) {
     const theta = degToRad(-bbox.rotate); // inverse to align bbox with axes
-    const bboxCenter = { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 };
-    return rects.map((rect) => {
-        // Get center of original rect
+    const bboxCenter = {
+        x: bbox.x + (bbox.width * bbox.scale) / 2,
+        y: bbox.y + (bbox.height * bbox.scale) / 2,
+    };
+    return absoluteRects.map((rect) => {
+        // Get center of original absolute rect
         const center = {
-            x: rect.x + rect.width / 2,
-            y: rect.y + rect.height / 2,
+            x: rect.x + (rect.width * rect.scale) / 2,
+            y: rect.y + (rect.height * rect.scale) / 2,
         };
         // Rotate center ralatively to the bbox center
         const relativeCenter = rotatePoint(center, bboxCenter, theta);
         return {
-            x: relativeCenter.x - rect.width / 2 - bbox.x,
-            y: relativeCenter.y - rect.height / 2 - bbox.y,
-            width: rect.width,
-            height: rect.height,
+            ...rect,
+            x: (relativeCenter.x - bbox.x) / bbox.scale - (rect.width * rect.scale) / 2,
+            y: (relativeCenter.y - bbox.y) / bbox.scale - (rect.height * rect.scale) / 2,
             rotate: rect.rotate - bbox.rotate,
         };
     });
 }
+export function calculateAbsoluteRects(bbox, rects) {
+    const theta = degToRad(bbox.rotate);
+    const bboxCenter = {
+        x: bbox.x + (bbox.width * bbox.scale) / 2,
+        y: bbox.y + (bbox.height * bbox.scale) / 2,
+    };
+    return rects.map((rect) => {
+        const relativeCenter = {
+            x: bbox.x + (rect.x + (rect.width * rect.scale) / 2) * bbox.scale,
+            y: bbox.y + (rect.y + (rect.height * rect.scale) / 2) * bbox.scale,
+        };
+        const center = rotatePoint(relativeCenter, bboxCenter, theta);
+        return {
+            ...rect,
+            x: center.x - (rect.width * rect.scale * bbox.scale) / 2,
+            y: center.y - (rect.height * rect.scale * bbox.scale) / 2,
+            rotate: rect.rotate + bbox.rotate,
+            scale: rect.scale * bbox.scale,
+        };
+    });
+}
 export const checkPolygonsIntersect = (a, b) => {
     const polygons = [a, b];
     for (const polygon of polygons) {
@@ -259,7 +274,7 @@ export function calculateGroupBoundingBox(transforms) {
         minY = Math.min(minY, bbox.y);
         maxY = Math.max(maxY, bbox.y + bbox.height);
     });
-    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY, rotate: 0, scale: 1 };
 }
 const minScaleToContain = (rotatedRect, rect) => {
     const { width: rw, height: rh, rotate } = rotatedRect;
@@ -307,21 +322,3 @@ export function buildBackgroundCircleStyle(colors) {
         .join(', ');
     return `background-image: conic-gradient(${gradientColors})`;
 }
-export async function applyHtmlToLayer(layer, html) {
-    layer.html = html;
-    await tick();
-    const { x, y, width, height } = layer;
-    const redo = { html, x, y, height };
-    const layerContent = document.getElementById(`layer-content-${layer.id}`);
-    if (layerContent && layerContent.offsetHeight !== layer.height) {
-        const scale = layer.scale || 1;
-        const rotate = layer.rotate || 0;
-        const newHeight = layerContent.offsetHeight * scale;
-        const { newX, newY } = calculateNewPosition(`top-left`, { x, y, width: width * scale, height: height * scale, rotate }, width * scale, newHeight);
-        redo.x = newX;
-        redo.y = newY;
-        redo.height = newHeight / scale;
-    }
-    Object.assign(layer, redo);
-    return redo;
-}

package/dist/components/{presentation-editor → editor}/menu/background-menu-content.svelte

@@ -1,55 +1,55 @@
 <script lang="ts">
-	import CopyIcon from 'lucide-svelte/icons/copy';
-	import PasteIcon from 'lucide-svelte/icons/clipboard';
-	import DuplicateIcon from 'lucide-svelte/icons/copy-plus';
-	import AddIcon from 'lucide-svelte/icons/file-plus-2';
-	import TrashIcon from 'lucide-svelte/icons/trash-2';
-	import LockIcon from 'lucide-svelte/icons/lock-keyhole';
-	import UnlockIcon from 'lucide-svelte/icons/lock-keyhole-open';
-	import ExtractImageIcon from 'lucide-svelte/icons/square-arrow-out-up-right';
+	import CopyIcon from '@lucide/svelte/icons/copy';
+	import PasteIcon from '@lucide/svelte/icons/clipboard';
+	import DuplicateIcon from '@lucide/svelte/icons/copy-plus';
+	import AddIcon from '@lucide/svelte/icons/file-plus-2';
+	import TrashIcon from '@lucide/svelte/icons/trash-2';
+	import LockIcon from '@lucide/svelte/icons/lock-keyhole';
+	import UnlockIcon from '@lucide/svelte/icons/lock-keyhole-open';
+	import ExtractImageIcon from '@lucide/svelte/icons/square-arrow-out-up-right';
 	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
-	import type { PresentationEditor } from '../presentation-editor.svelte.js';
-	import type { Slide } from '../types.js';
+	import type { Editor } from '../editor.svelte.js';
+	import type { Page } from '../types.js';
 	import { checkIfMac } from '../../../utils.js';
 
 	interface Props {
-		editor: PresentationEditor;
-		slide: Slide;
+		editor: Editor;
+		page: Page;
 	}
 
-	let { editor, slide }: Props = $props();
+	let { editor, page }: Props = $props();
 
-	const locked = $derived(slide.locked || slide.backgroundLocked);
+	const locked = $derived(page.locked || page.backgroundLocked);
 
 	const isMac = checkIfMac();
 </script>
 
-<DropdownMenu.Item onclick={() => editor.copySlide(slide.id)}>
+<DropdownMenu.Item onclick={() => editor.copyPage(page.id)}>
 	<CopyIcon />
 	Copy
 	<DropdownMenu.Shortcut>{isMac ? '⌘C' : 'Ctrl+C'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 <DropdownMenu.Item
 	onclick={() => editor.clipboardPaste()}
-	disabled={!editor.clipboard || (slide.locked && !('layers' in editor.clipboard))}
+	disabled={!editor.clipboard || (page.locked && !('layers' in editor.clipboard))}
 >
 	<PasteIcon />
 	Paste
 	<DropdownMenu.Shortcut>{isMac ? '⌘V' : 'Ctrl+V'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.addSlide()}>
+<DropdownMenu.Item onclick={() => editor.addPage()}>
 	<AddIcon />
 	Add page
 	<DropdownMenu.Shortcut>{isMac ? '⌘⏎' : 'Ctrl+⏎'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.duplicateSlide(slide)}>
+<DropdownMenu.Item onclick={() => editor.duplicatePage(page)}>
 	<DuplicateIcon />
 	Duplicate page
 	<DropdownMenu.Shortcut>{isMac ? '⌘D' : 'Ctrl+D'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
-<DropdownMenu.Item onclick={() => editor.removeBackground(slide.id)} disabled={locked}>
+<DropdownMenu.Item onclick={() => editor.removeBackground(page.id)} disabled={locked}>
 	<TrashIcon />
-	{#if slide.backgroundImage}
+	{#if page.backgroundImage}
 		Delete background image
 	{:else}
 		Delete background
@@ -59,8 +59,8 @@
 
 <DropdownMenu.Separator />
 
-<DropdownMenu.Item onclick={() => editor.backgroundToggleLocked(slide.id)} disabled={slide.locked}>
-	{#if slide.backgroundLocked}
+<DropdownMenu.Item onclick={() => editor.backgroundToggleLocked(page.id)} disabled={page.locked}>
+	{#if page.backgroundLocked}
 		<UnlockIcon />
 		Unlock background
 	{:else}
@@ -70,10 +70,10 @@
 	<DropdownMenu.Shortcut>{isMac ? '⌥⇧L' : 'Alt+Shift+L'}</DropdownMenu.Shortcut>
 </DropdownMenu.Item>
 
-{#if slide.backgroundImage}
+{#if page.backgroundImage}
 	<DropdownMenu.Separator />
 
-	<DropdownMenu.Item onclick={() => editor.backgroundImageToLayer(slide.id)} disabled={locked}>
+	<DropdownMenu.Item onclick={() => editor.backgroundImageToLayer(page.id)} disabled={locked}>
 		<ExtractImageIcon />
 		Detach image from background
 	</DropdownMenu.Item>

package/dist/components/{presentation-editor → editor}/menu/background-menu-content.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { PresentationEditor } from '../presentation-editor.svelte.js';
-import type { Slide } from '../types.js';
+import type { Editor } from '../editor.svelte.js';
+import type { Page } from '../types.js';
 interface Props {
-    editor: PresentationEditor;
-    slide: Slide;
+    editor: Editor;
+    page: Page;
 }
 declare const BackgroundMenuContent: import("svelte").Component<Props, {}, "">;
 type BackgroundMenuContent = ReturnType<typeof BackgroundMenuContent>;