@peteai/presentation-editor 0.0.2 → 0.0.4

package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import SearchIcon from 'lucide-svelte/icons/search';
+	import BackIcon from 'lucide-svelte/icons/arrow-left';
+	import DocumentIcon from 'lucide-svelte/icons/file-text';
+	import PopularIcon from 'lucide-svelte/icons/chart-no-axes-combined';
+	import { InfiniteLoader, LoaderState } from '../../../ui/infinite-loader/index.js';
+	import { Input } from '../../../ui/input/index.js';
+	import { Button } from '../../../ui/button/index.js';
+	import { Separator } from '../../../ui/separator/index.js';
+	import { cn } from '../../../../utils.js';
+	import { getPresentationEditorContext } from '../../presentation-editor.svelte.js';
+	import SidebarWrapper from '../sidebar-wrapper.svelte';
+	import {
+		createEditorNotReactive,
+		extractNodeFonts,
+		extractSelectionFonts,
+	} from '../../layers/types/html/editor/utils.js';
+	import FontSidebarButton from './font-sidebar-button.svelte';
+	import { applyHtmlToLayer } from '../../layers/utils.js';
+
+	const editor = getPresentationEditorContext();
+
+	let { htmlEditor } = editor;
+
+	let search = $state('');
+
+	const mapFont = (family: string) => ({ ...editor.fonts[family], family });
+
+	const fonts = Object.keys(editor.fonts).map(mapFont);
+
+	let htmlLayers = $derived(editor.activeLayers.filter((layer) => layer.type === 'html'));
+
+	const currentFonts = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return extractSelectionFonts($htmlEditor);
+		} else {
+			const set = new Set<string>();
+			htmlLayers.forEach((layer) => extractNodeFonts(layer.html, set));
+			return Array.from(set);
+		}
+	});
+
+	const documentFonts = $derived.by(() => {
+		const fontsSet = new Set<string>();
+
+		editor.slides.forEach((slide) => {
+			slide.layers.forEach((layer) => {
+				if (layer.type === 'html') {
+					extractNodeFonts(layer.html).forEach(fontsSet.add, fontsSet);
+				}
+			});
+		});
+
+		let fonts = Array.from(fontsSet);
+
+		return fonts
+			.sort()
+			.filter((family) => editor.fonts[family])
+			.map(mapFont);
+	});
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const setFont = async (family: string) => {
+		if (editor.activeAction?.type === 'edit') {
+			$htmlEditor.commands.setFontFamily(family);
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: await Promise.all(
+					htmlLayers.map(async (layer) => {
+						editorNotReactive
+							.chain()
+							.setContent(layer.html)
+							.selectAll()
+							.setFontFamily(family)
+							.run();
+
+						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
+						const redo = await applyHtmlToLayer(layer, editorNotReactive.getJSON());
+
+						return {
+							type: 'layer',
+							slideId: editor.activeSlide.id,
+							layer: { id: layer.id, type: layer.type },
+							undo,
+							redo,
+						};
+					}),
+				),
+			});
+		}
+	};
+
+	$effect(() => {
+		if (editor.activeSidebarPopup === 'font') {
+			if (!editor.activeLayers.some((layer) => layer.type === 'html')) {
+				editor.activeSidebarPopup = null;
+			}
+		}
+	});
+
+	const itemsPerPage = 30;
+
+	let popularPagesLoaded = $state(1);
+	let popularFonts = $derived(fonts.slice(0, popularPagesLoaded * itemsPerPage));
+	const popularLoaderState = new LoaderState();
+	const popularLoadMore = async () => {
+		const itemsCount = popularFonts.length;
+		popularPagesLoaded++;
+		if (itemsCount < popularFonts.length) {
+			popularLoaderState.loaded();
+		} else {
+			popularLoaderState.complete();
+		}
+	};
+
+	let searchedPagesLoaded = $state(1);
+	let searchedFonts = $derived(
+		search ? editor.searchFonts(search, searchedPagesLoaded * itemsPerPage).map(mapFont) : [],
+	);
+	const searchedLoaderState = new LoaderState();
+	const searchedLoadMore = async () => {
+		const itemsCount = searchedFonts.length;
+		searchedPagesLoaded++;
+		if (itemsCount < searchedFonts.length) {
+			searchedLoaderState.loaded();
+		} else {
+			searchedLoaderState.complete();
+		}
+	};
+
+	const cancelSearch = () => {
+		search = '';
+		searchedPagesLoaded = 1;
+	};
+</script>
+
+<SidebarWrapper name="Font">
+	<div class="relative flex items-center">
+		<div class="pointer-events-none absolute flex w-10 items-center justify-center">
+			{#if search}
+				<Button variant="ghost" size="icon-xs" class="pointer-events-auto" onclick={cancelSearch}>
+					<BackIcon class="h-6 w-6" />
+				</Button>
+			{:else}
+				<SearchIcon class="h-6 w-6" />
+			{/if}
+		</div>
+		<Input
+			class="pl-10"
+			bind:value={search}
+			placeholder="Try “Calligraphy” or “Open Sans”"
+			oninput={() => (searchedPagesLoaded = 1)}
+		/>
+	</div>
+	<div class={cn('flex-1 overflow-y-auto', search && 'hidden')}>
+		<div class="flex items-center gap-2 py-2">
+			<DocumentIcon class="h-6 w-6" />
+			<h5 class="text-left text-sm font-bold">Document fonts</h5>
+		</div>
+		<div class="flex flex-col">
+			{#each documentFonts as font}
+				<FontSidebarButton
+					family={font.family}
+					active={currentFonts.includes(font.family)}
+					onclick={() => setFont(font.family)}
+				/>
+			{/each}
+		</div>
+		<Separator class="my-2" />
+		<div class="flex items-center gap-2 py-2">
+			<PopularIcon class="h-6 w-6" />
+			<h5 class="text-left text-sm font-bold">Popular fonts</h5>
+		</div>
+		<div class="flex flex-col">
+			{#each popularFonts as font}
+				<FontSidebarButton
+					family={font.family}
+					active={currentFonts.includes(font.family)}
+					onclick={() => setFont(font.family)}
+				/>
+			{/each}
+			<InfiniteLoader loaderState={popularLoaderState} triggerLoad={popularLoadMore}>
+				{#snippet noData()}{/snippet}
+			</InfiniteLoader>
+		</div>
+	</div>
+
+	{#if search}
+		<div class="flex-1 overflow-y-auto">
+			{#if searchedFonts.length}
+				<div class="flex items-center gap-2 py-2">
+					<h5 class="text-left text-sm font-bold">All results</h5>
+				</div>
+				<div class="flex flex-col">
+					{#each searchedFonts as font}
+						<FontSidebarButton
+							family={font.family}
+							active={currentFonts.includes(font.family)}
+							onclick={() => setFont(font.family)}
+						/>
+					{/each}
+					<InfiniteLoader loaderState={searchedLoaderState} triggerLoad={searchedLoadMore}>
+						{#snippet noData()}{/snippet}
+					</InfiniteLoader>
+				</div>
+			{:else}
+				<p class="text-muted-foreground text-sm">
+					We couldn't find any results for “{search}”. Try searching for something else.
+				</p>
+			{/if}
+		</div>
+	{/if}
+</SidebarWrapper>

package/dist/components/presentation-editor/sidebar/font-sidebar/font-sidebar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FontSidebar: import("svelte").Component<Record<string, never>, {}, "">;
+type FontSidebar = ReturnType<typeof FontSidebar>;
+export default FontSidebar;

package/dist/components/presentation-editor/sidebar/font-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+import FontSidebar from './font-sidebar.svelte';
+export { FontSidebar };

package/dist/components/presentation-editor/sidebar/font-sidebar/index.js

@@ -0,0 +1,2 @@
+import FontSidebar from './font-sidebar.svelte';
+export { FontSidebar };

package/dist/components/presentation-editor/sidebar/position-slidebar.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { dndzone } from 'svelte-dnd-action';
+	import XIcon from 'lucide-svelte/icons/x';
+	import * as ContextMenu from '../../ui/context-menu/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import {
+		LayerButton,
+		LayerThumbWrapper,
+		HtmlLayerContent,
+		ImageLayerContent,
+		BackgroundLayerContent,
+	} from '../layers/index.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import LayerMenuContent from '../menu/layer-menu-content.svelte';
+	import BackgroundMenuContent from '../menu/background-menu-content.svelte';
+
+	const editor = getPresentationEditorContext();
+
+	const flipDurationMs = 300;
+	const otherOptions = { flipDurationMs, type: 'layers', dropTargetStyle: {} };
+
+	function handleDndConsider(e) {
+		editor.activeSlide.layers = e.detail.items;
+	}
+
+	async function handleDndFinalize(e) {
+		console.log('handleDndFinalize', e);
+
+		editor.activeSlide.layers = e.detail.items;
+
+		const index = e.detail.items.findIndex((item) => item.id === e.detail.info.id);
+		const item = e.detail.items[index];
+
+		let redo;
+		const prev = e.detail.items[index - 1];
+		const next = e.detail.items[index + 1];
+		if (prev && next) {
+			if (!(prev.sortOrder < item.sortOrder && next.sortOrder > item.sortOrder)) {
+				redo = { sortOrder: (prev.sortOrder + next.sortOrder) / 2 };
+			}
+		} else if (next) {
+			if (next && next.sortOrder <= item.sortOrder) {
+				redo = { sortOrder: next.sortOrder - 1 };
+			}
+		} else if (prev) {
+			if (prev && prev.sortOrder >= item.sortOrder) {
+				redo = { sortOrder: prev.sortOrder + 1 };
+			}
+		}
+
+		if (redo) {
+			editor.historyPush({
+				type: 'layer',
+				slideId: editor.activeSlide.id,
+				layer: { id: item.id, type: item.type },
+				undo: { sortOrder: item.sortOrder },
+				redo,
+			});
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="flex items-center justify-between">
+		<div class="text-sm font-bold">Position</div>
+		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
+			<XIcon />
+		</Button>
+	</div>
+	<div class="text-lg font-medium text-gray-500">Layers</div>
+	<div class="flex-1 resize-none overflow-y-auto">
+		<div class="flex flex-col gap-2">
+			<section
+				class="flex flex-col-reverse gap-2"
+				aria-label="Layers"
+				use:dndzone={{
+					items: editor.activeSlide.layers,
+					dragDisabled: editor.activeSlide.locked,
+					...otherOptions,
+				}}
+				onconsider={handleDndConsider}
+				onfinalize={handleDndFinalize}
+			>
+				{#each editor.activeSlide.layers as layer (layer.id)}
+					<div aria-label={layer.type} animate:flip={{ duration: flipDurationMs }}>
+						<ContextMenu.Root
+							onOpenChange={(open) =>
+								open && !editor.activeLayerIds.has(layer.id) && editor.setActiveLayers(layer.id)}
+						>
+							<ContextMenu.Trigger>
+								<LayerButton {layer}>
+									<LayerThumbWrapper {layer} thumb={{ width: 192, height: 32 }}>
+										{#snippet children({ thumbScale })}
+											{#if layer.type === 'html'}
+												<HtmlLayerContent {layer} {thumbScale} />
+											{:else if layer.type === 'image'}
+												<ImageLayerContent {layer} {thumbScale} />
+											{/if}
+										{/snippet}
+									</LayerThumbWrapper>
+								</LayerButton>
+							</ContextMenu.Trigger>
+							<ContextMenu.Content class="w-72">
+								<LayerMenuContent />
+							</ContextMenu.Content>
+						</ContextMenu.Root>
+					</div>
+				{/each}
+			</section>
+			<ContextMenu.Root>
+				<ContextMenu.Trigger>
+					<LayerButton>
+						{@const thumbScale = Math.max(192 / editor.width, 32 / editor.height)}
+						<div
+							class="absolute top-1/2 -translate-y-1/2"
+							style:width="{editor.width * thumbScale}px"
+							style:height="{editor.height * thumbScale}px"
+						>
+							<BackgroundLayerContent slide={editor.activeSlide} {thumbScale} />
+						</div>
+					</LayerButton>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content class="w-72">
+					<BackgroundMenuContent {editor} slide={editor.activeSlide} />
+				</ContextMenu.Content>
+			</ContextMenu.Root>
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/sidebar/position-slidebar.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PositionSlidebar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PositionSlidebar = InstanceType<typeof PositionSlidebar>;
+export default PositionSlidebar;

package/dist/components/presentation-editor/sidebar/sidebar-text-tab-button.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import Button from '../../ui/button/button.svelte';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { HtmlContent } from '../layers/types/html/index.js';
+	import type { DraggedHtml } from '../types.js';
+
+	interface Props {
+		html: DraggedHtml['html'];
+	}
+
+	const { html }: Props = $props();
+
+	let ref: HTMLDivElement;
+
+	const editor = getPresentationEditorContext();
+
+	let dragging = $state(false);
+
+	const scale = 4;
+
+	const onDocumentDragEnter = (e: DragEvent) => {
+		console.log('document dragenter', e);
+		if (editor.dragged) {
+			editor.dragged = { ...editor.dragged, inside: false };
+		}
+	};
+
+	const onDragStart = (e: DragEvent) => {
+		if (!e.target || !e.dataTransfer) {
+			return null;
+		}
+
+		e.dataTransfer.effectAllowed = 'move';
+		editor.dragged = {
+			x: e.clientX,
+			y: e.clientY,
+			offsetX: e.offsetX,
+			offsetY: e.offsetY,
+			opacity: 1,
+			hidden: false,
+			sticky: true,
+			inside: false,
+			initialScale: 1,
+			scale,
+			html,
+		};
+		addEventListener('dragenter', onDocumentDragEnter);
+		dragging = true;
+	};
+
+	const onDragEnd = (e: DragEvent) => {
+		console.log('dragend', e);
+		removeEventListener('dragenter', onDocumentDragEnter);
+		dragging = false;
+		editor.dragged = null;
+	};
+
+	const onDrag = (e: DragEvent) => {
+		// console.log('drag', e);
+		if (editor.dragged) {
+			editor.dragged = { ...editor.dragged, x: e.clientX, y: e.clientY };
+		}
+	};
+
+	const createLayer = () => {
+		const rect = ref.getBoundingClientRect();
+		const layer = editor.buildHtmlLayer({
+			width: rect.width,
+			height: rect.height,
+			scale,
+			html,
+		});
+		editor.addLayers(editor.activeSlide.id, layer);
+	};
+</script>
+
+<Button variant="outline" class="h-auto justify-start py-0" onclick={createLayer}>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={ref}
+		class="my-2"
+		draggable={true}
+		ondragstart={onDragStart}
+		ondragend={onDragEnd}
+		ondrag={onDrag}
+		style:opacity={dragging ? 0 : null}
+	>
+		<HtmlContent {html} />
+	</div>
+</Button>

package/dist/components/presentation-editor/sidebar/sidebar-text-tab-button.svelte.d.ts

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

package/dist/components/presentation-editor/sidebar/sidebar-text-tab.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import TextIcon from 'lucide-svelte/icons/type';
+	import Button from '../../ui/button/button.svelte';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+	import { buildParagraphHtml } from '../utils.js';
+	import SidebarTextTabButton from './sidebar-text-tab-button.svelte';
+
+	const editor = getPresentationEditorContext();
+
+	const createTextBox = () => {
+		const fontSize = 80 / 0.75;
+		const lineHeight = 1;
+		const layer = editor.buildHtmlLayer({
+			html: buildParagraphHtml({
+				text: 'Your paragraph text',
+				fontSize,
+				lineHeight,
+				textAlign: 'center',
+				bold: true,
+				italic: true,
+				uppercase: true,
+			}),
+			width: 1280,
+			height: fontSize * lineHeight,
+		});
+		editor.addLayers(editor.activeSlide.id, layer);
+	};
+
+	const defaultTextButtons = [
+		{
+			text: 'Add a heading',
+			fontSize: 28,
+			fontWeight: 700,
+			html: buildParagraphHtml({
+				text: 'Add a heading',
+				fontSize: 28,
+				lineHeight: 1.4,
+				textAlign: 'center',
+				bold: true,
+			}),
+		},
+		{
+			text: 'Add a subheading',
+			fontSize: 16.8,
+			fontWeight: 700,
+			html: buildParagraphHtml({
+				text: 'Add a subheading',
+				fontSize: 16.8,
+				lineHeight: 1.4,
+				textAlign: 'center',
+				bold: true,
+			}),
+		},
+		{
+			text: 'Add a little bit of body text',
+			fontSize: 12,
+			fontWeight: 400,
+			html: buildParagraphHtml({
+				text: 'Add a little bit of body text',
+				fontSize: 12,
+				lineHeight: 1.4,
+				textAlign: 'center',
+			}),
+		},
+	];
+</script>
+
+<div class="flex flex-col">
+	<Button variant="default" class="w-full" onclick={createTextBox}>
+		<TextIcon />
+		Add a text box
+	</Button>
+
+	<div class="flex-1 py-4">
+		<div class="flex flex-col gap-2">
+			<p class="text-sm font-semibold">Default text styles</p>
+			{#each defaultTextButtons as button}
+				<SidebarTextTabButton html={button.html} />
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/components/presentation-editor/sidebar/sidebar-text-tab.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SidebarTextTab: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarTextTab = InstanceType<typeof SidebarTextTab>;
+export default SidebarTextTab;

package/dist/components/presentation-editor/sidebar/{images-library.svelte → sidebar-uploads-tab.svelte}

@@ -65,7 +65,6 @@
 			</div>
 		</div>
 	{/if}
-	<div class="text-xl font-medium text-gray-500">Images</div>
 	<div class="-m-1">
 		{#each editor.images as image}
 			<UploadsImage {image} />

package/dist/components/presentation-editor/sidebar/sidebar-uploads-tab.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SidebarUploadsTab: import("svelte").Component<Record<string, never>, {}, "">;
+type SidebarUploadsTab = ReturnType<typeof SidebarUploadsTab>;
+export default SidebarUploadsTab;

package/dist/components/presentation-editor/sidebar/sidebar-wrapper.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import XIcon from 'lucide-svelte/icons/x';
+	import { Button } from '../../ui/button/index.js';
+	import { getPresentationEditorContext } from '../presentation-editor.svelte.js';
+
+	interface Props {
+		name: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { name, children }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+</script>
+
+<div class="flex h-full select-none flex-col gap-2">
+	<div class="flex items-center justify-between">
+		<div class="text-sm font-bold">{name}</div>
+		<Button variant="ghost" size="icon" onclick={() => (editor.activeSidebarPopup = null)}>
+			<XIcon />
+		</Button>
+	</div>
+
+	{@render children?.()}
+</div>

package/dist/components/presentation-editor/sidebar/sidebar-wrapper.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    name: string;
+    children?: import('svelte').Snippet;
+}
+declare const SidebarWrapper: import("svelte").Component<Props, {}, "">;
+type SidebarWrapper = ReturnType<typeof SidebarWrapper>;
+export default SidebarWrapper;