@peteai/presentation-editor 0.0.1

package/dist/components/presentation-editor/layers/types/background/background-layer.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import BackgroundContent from './background-content.svelte';
+	import { calculateImageFill } from '../../utils.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import type { Layer } from '../../../types.js';
+
+	interface Props {
+		hoveredLayer: Layer | 'background' | null;
+	}
+
+	let { hoveredLayer = $bindable(null) }: Props = $props();
+
+	let ref: HTMLDivElement;
+
+	const editor = getPresentationEditorContext();
+
+	const onMouseDown = () => {
+		console.log('mousedown', 'background');
+		editor.setActiveBackground(true);
+	};
+
+	const onMouseOver = () => {
+		console.log('mouseover', 'background');
+		hoveredLayer = 'background';
+	};
+
+	const onMouseLeave = () => {
+		console.log('mouseleave', 'background');
+		hoveredLayer = null;
+	};
+
+	const onDragEnter = (e: DragEvent) => {
+		console.log('dragenter background image', e);
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		console.log('dragenter background', e);
+
+		if (editor.dragged) {
+			const rect = ref.getBoundingClientRect();
+			const { scale, offsetX, offsetY } = calculateImageFill(editor.dragged.image, rect);
+			editor.dragged = {
+				...editor.dragged,
+				hidden: false,
+				scale,
+				sticky: false,
+				x: rect.left + editor.dragged.offsetX - offsetX * scale,
+				y: rect.top + editor.dragged.offsetY - offsetY * scale,
+			};
+		}
+	};
+
+	const onDragOver = (e: DragEvent) => {
+		// console.log('dragover background image', e);
+		e.preventDefault();
+	};
+
+	const onDrop = (e: DragEvent) => {
+		console.log('drop background image', e);
+		e.preventDefault();
+
+		const { dragged } = editor;
+		if (dragged) {
+			console.log(
+				dragged.image,
+				{ width: editor.width, height: editor.height },
+				calculateImageFill(dragged.image, { width: editor.width, height: editor.height }),
+			);
+			editor.addImageLayer({
+				sortOrder: editor.activeSlide.layers.length
+					? editor.activeSlide.layers[0].sortOrder - 1
+					: 1,
+				x: 0,
+				y: 0,
+				...calculateImageFill(dragged.image, { width: editor.width, height: editor.height }),
+				image: {
+					id: dragged.image.id,
+					src: dragged.image.src,
+					width: dragged.image.width,
+					height: dragged.image.height,
+				},
+			});
+		}
+	};
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	bind:this={ref}
+	class="pointer-events-auto absolute inset-0 overflow-hidden"
+	onmousedown={onMouseDown}
+	onmouseover={onMouseOver}
+	onmouseleave={onMouseLeave}
+	ondragenter={onDragEnter}
+	ondragover={onDragOver}
+	ondrop={onDrop}
+>
+	<div class="h-full w-full">
+		<BackgroundContent slide={editor.activeSlide} />
+	</div>
+</div>

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

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

package/dist/components/presentation-editor/layers/types/background/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './background-layer.svelte';
+import BackgroundLayerThumb from './background-layer-thumb.svelte';
+import BackgroundContent from './background-content.svelte';
+import BackgroundLayerButtons from './background-layer-buttons.svelte';
+export { Root, Root as BackgroundLayer, BackgroundLayerThumb, BackgroundContent, BackgroundLayerButtons, };

package/dist/components/presentation-editor/layers/types/background/index.js

@@ -0,0 +1,7 @@
+import Root from './background-layer.svelte';
+import BackgroundLayerThumb from './background-layer-thumb.svelte';
+import BackgroundContent from './background-content.svelte';
+import BackgroundLayerButtons from './background-layer-buttons.svelte';
+export { Root, 
+//
+Root as BackgroundLayer, BackgroundLayerThumb, BackgroundContent, BackgroundLayerButtons, };

package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/alignment-button.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Editor } from '../../editor/index.js';
+	import AlignJustifyIcon from 'lucide-svelte/icons/align-justify';
+	import AlignRightIcon from 'lucide-svelte/icons/align-right';
+	import AlignCenterIcon from 'lucide-svelte/icons/align-center';
+	import AlignLeftIcon from 'lucide-svelte/icons/align-left';
+	import { Button } from '../../../../../../ui/button/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+
+	type TextAlign = 'left' | 'center' | 'right' | 'justify';
+
+	const nextAlign: Record<TextAlign, TextAlign> = {
+		left: 'justify',
+		justify: 'right',
+		right: 'center',
+		center: 'left',
+	};
+
+	const getAlign = (): TextAlign | undefined => {
+		const align: TextAlign[] = ['left', 'center', 'right', 'justify'];
+		return align.find((alignment) => editor.isActive({ textAlign: alignment }));
+	};
+
+	const switchAlign = () => {
+		const align: TextAlign = getAlign() || 'left';
+		editor.commands.setTextAlign(nextAlign[align]);
+	};
+</script>
+
+<Button variant="ghost" size="icon-xs" onclick={switchAlign}>
+	{#if editor.isActive({ textAlign: 'justify' })}
+		<AlignJustifyIcon class="h-6 w-6" />
+	{:else if editor.isActive({ textAlign: 'right' })}
+		<AlignRightIcon class="h-6 w-6" />
+	{:else if editor.isActive({ textAlign: 'center' })}
+		<AlignCenterIcon class="h-6 w-6" />
+	{:else}
+		<AlignLeftIcon class="h-6 w-6" />
+	{/if}
+</Button>

package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/alignment-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/index.d.ts

@@ -0,0 +1,2 @@
+import AlignmentButton from './alignment-button.svelte';
+export { AlignmentButton };

package/dist/components/presentation-editor/layers/types/html/buttons/alignment-button/index.js

@@ -0,0 +1,2 @@
+import AlignmentButton from './alignment-button.svelte';
+export { AlignmentButton };

package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/bold-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import BoldIcon from 'lucide-svelte/icons/bold';
+	import type { Editor } from '../../editor/Editor.js';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+</script>
+
+<Toggle
+	size="xs"
+	pressed={editor.isActive('bold')}
+	onPressedChange={(val) => (val ? editor.commands.setBold() : editor.commands.unsetBold())}
+>
+	<BoldIcon class="h-6 w-6" />
+</Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/bold-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/index.d.ts

@@ -0,0 +1,2 @@
+import BoldButton from './bold-button.svelte';
+export { BoldButton };

package/dist/components/presentation-editor/layers/types/html/buttons/bold-button/index.js

@@ -0,0 +1,2 @@
+import BoldButton from './bold-button.svelte';
+export { BoldButton };

package/dist/components/presentation-editor/layers/types/html/buttons/case-button/case-button.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import CaseIcon from 'lucide-svelte/icons/case-sensitive';
+	import type { Editor } from '../../editor/Editor.js';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+
+	const getUppercase = () => {
+		const selection = editor.view.state.selection;
+		let uppercase: boolean | null = null;
+		editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+			if (node.type.name !== 'text') {
+				if (uppercase !== false && node.attrs.textTransform === 'uppercase') {
+					uppercase = true;
+				} else {
+					uppercase = false;
+				}
+			}
+		});
+		return !!uppercase;
+	};
+
+	let uppercase = $derived(editor && getUppercase());
+</script>
+
+<Toggle
+	size="xs"
+	pressed={uppercase}
+	onPressedChange={(val) =>
+		val ? editor.commands.setTextTransform('uppercase') : editor.commands.unsetTextTransform()}
+>
+	<CaseIcon class="h-6 w-6" />
+</Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/case-button/case-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/case-button/index.d.ts

@@ -0,0 +1,2 @@
+import CaseButton from './case-button.svelte';
+export { CaseButton };

package/dist/components/presentation-editor/layers/types/html/buttons/case-button/index.js

@@ -0,0 +1,2 @@
+import CaseButton from './case-button.svelte';
+export { CaseButton };

package/dist/components/presentation-editor/layers/types/html/buttons/color-button/color-button.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import PaletteIcon from 'lucide-svelte/icons/palette';
+	import type { Editor } from '../../editor/Editor.js';
+	import * as Popover from '../../../../../../ui/popover/index.js';
+	import { Button, buttonVariants } from '../../../../../../ui/button/index.js';
+	import { cn } from '../../../../../../../utils.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+
+	const defaultColor = '#000000';
+
+	const colors = [
+		{ value: '#000000', name: 'Black' },
+		{ value: '#545454', name: 'Dark Gray' },
+		{ value: '#737373', name: 'Gray' },
+		{ value: '#a6a6a6', name: 'Gray' },
+		{ value: '#d9d9d9', name: 'Light Gray' },
+		{ value: '#ffffff', name: 'White' },
+
+		{ value: '#ff3131', name: 'Bright Red' },
+		{ value: '#ff5757', name: 'Coral Red' },
+		{ value: '#ff66c4', name: 'Pink' },
+		{ value: '#cb6ce6', name: 'Magenta' },
+		{ value: '#8c52ff', name: 'Purple' },
+		{ value: '#5e17eb', name: 'Violet' },
+
+		{ value: '#0097b2', name: 'Dark Turquoise' },
+		{ value: '#0cc0df', name: 'Aqua Blue' },
+		{ value: '#5ce1e6', name: 'Turquoise Blue' },
+		{ value: '#38b6ff', name: 'Light Blue' },
+		{ value: '#5271ff', name: 'Royal Blue' },
+		{ value: '#004aad', name: 'Cobalt Blue' },
+
+		{ value: '#00bf63', name: 'Green' },
+		{ value: '#7ed957', name: 'Grass Green' },
+		{ value: '#c1ff72', name: 'Lime' },
+		{ value: '#ffde59', name: 'Yellow' },
+		{ value: '#ffbd59', name: 'Peach' },
+		{ value: '#ff914d', name: 'Orange' },
+	];
+
+	const getColor = () => editor.getAttributes('textStyle').color || defaultColor;
+
+	const setColor = (value: string) => {
+		if (value === defaultColor) {
+			editor.chain().focus().unsetColor().run();
+		} else {
+			editor.chain().focus().setColor(value).run();
+		}
+	};
+</script>
+
+<Popover.Root>
+	<Popover.Trigger class={buttonVariants({ variant: 'ghost', size: 'icon-xs' })}>
+		<span class="h-6 w-6 rounded-full border border-gray-300" style:background-color={getColor()}
+		></span>
+	</Popover.Trigger>
+	<Popover.Content align="start" sideOffset={2} class="w-auto p-2">
+		<div class="flex flex-col gap-2">
+			<div class="flex items-center gap-2 p-2">
+				<PaletteIcon class="h-5 w-5" />
+				<h5 class="text-left text-sm font-bold">Colors</h5>
+			</div>
+			<div class="grid grid-cols-6 items-stretch gap-3">
+				{#each colors as color}
+					<Button
+						class={cn(
+							'relative h-10 w-10 after:absolute after:inset-0 after:rounded-full after:transition-shadow',
+							getColor() === color.value && 'after:shadow-active',
+						)}
+						variant="ghost"
+						size="icon"
+						onclick={() => setColor(color.value)}
+					>
+						<span
+							class="h-full w-full rounded-full after:absolute after:inset-0 after:rounded-full after:shadow-inner"
+							style:background-color={color.value}
+						></span>
+					</Button>
+				{/each}
+			</div>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/components/presentation-editor/layers/types/html/buttons/color-button/color-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/color-button/index.d.ts

@@ -0,0 +1,2 @@
+import ColorButton from './color-button.svelte';
+export { ColorButton };

package/dist/components/presentation-editor/layers/types/html/buttons/color-button/index.js

@@ -0,0 +1,2 @@
+import ColorButton from './color-button.svelte';
+export { ColorButton };

package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/font-size-button.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import MinusIcon from 'lucide-svelte/icons/minus';
+	import PlusIcon from 'lucide-svelte/icons/plus';
+	import type { Layer } from '../../../../../types.js';
+	import type { Editor } from '../../editor/Editor.js';
+	import * as DropdownMenu from '../../../../../../ui/dropdown-menu/index.js';
+	import { Button, buttonVariants } from '../../../../../../ui/button/index.js';
+
+	interface Props {
+		layer: Layer;
+		editor: Editor;
+	}
+
+	let { layer, editor }: Props = $props();
+
+	let fontSizeInputEl: HTMLInputElement | null = $state(null);
+	let pxToPt = 3 / 4;
+	const min = 1;
+	const max = 800;
+
+	const getFontSize = (scale: number) => {
+		const selection = editor.view.state.selection;
+		let fontSizes: number[] = [];
+		editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+			if (node.type.name !== 'text') {
+				if (node.attrs.fontSize) {
+					fontSizes.push(node.attrs.fontSize);
+				}
+			}
+		});
+		fontSizes = [...new Set(fontSizes)];
+		let fontSizePx;
+		if (fontSizes.length === 1) {
+			fontSizePx = fontSizes[0];
+		} else if (fontSizes.length === 0) {
+			fontSizePx = 14; // TODO: find better way of defining default font size
+		}
+		return fontSizePx ? Math.round(fontSizePx * pxToPt * scale * 10) / 10 : null;
+	};
+
+	let scale = $derived(layer.scale || 1);
+	let fontSize = $derived(editor && getFontSize(scale));
+
+	const updateFontSize = (value: number) => {
+		console.log('updateFontSize', value);
+		if (editor) {
+			let fontSizePt = value;
+			if (fontSizePt < min) {
+				fontSizePt = min;
+			} else if (fontSizePt > max) {
+				fontSizePt = max;
+			}
+			editor.commands.setFontSize(fontSizePt / pxToPt / scale);
+		}
+	};
+
+	const incrementFontSize =
+		(inc = 1) =>
+		() => {
+			if (fontSize) {
+				updateFontSize(fontSize + inc);
+			}
+		};
+</script>
+
+<div class="flex items-center outline-0">
+	<Button
+		variant="outline"
+		size="xs"
+		class="w-8 rounded-r-none border-r-0"
+		onclick={incrementFontSize(-1)}
+	>
+		<MinusIcon class="h-6 w-6" />
+	</Button>
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger
+			class={buttonVariants({
+				variant: 'outline',
+				size: 'xs',
+				class: 'inline-flex cursor-text select-none rounded-none align-middle',
+			})}
+		>
+			<div
+				class="max-width-full m-auto inline-block overflow-hidden text-ellipsis whitespace-nowrap"
+			>
+				<input
+					bind:this={fontSizeInputEl}
+					class="m-0 h-full w-10 border-none bg-transparent p-0 pb-1 text-center text-sm font-semibold leading-none outline-none focus:border-transparent focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none"
+					type="number"
+					pattern="\d*"
+					{max}
+					{min}
+					step="0.1"
+					tabindex="-1"
+					placeholder="– –"
+					value={fontSize}
+					style:-moz-appearance="textfield"
+					onchange={(e) => updateFontSize(e.target.value)}
+					onkeydown={(e) => {
+						if (e.key === 'Enter') {
+							e.stopPropagation();
+							updateFontSize(e.target.value);
+						} else if (e.key === 'Escape') {
+							e.stopPropagation();
+						}
+					}}
+				/>
+			</div>
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content
+			trapFocus={false}
+			onOpenAutoFocus={(e) => e.preventDefault()}
+			align="start"
+			sideOffset={2}
+			class="w-32 p-1"
+		>
+			{#each [6, 8, 10, 12, 14, 16, 18, 21, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 88, 96, 104, 120, 144] as size}
+				<DropdownMenu.Item onSelect={() => updateFontSize(size)}>
+					{size}
+				</DropdownMenu.Item>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	<Button
+		variant="outline"
+		size="xs"
+		class="w-8 rounded-l-none border-l-0"
+		onclick={incrementFontSize()}
+	>
+		<PlusIcon class="h-6 w-6" />
+	</Button>
+</div>

package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/font-size-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/index.d.ts

@@ -0,0 +1,2 @@
+import FontSizeButton from './font-size-button.svelte';
+export { FontSizeButton };

package/dist/components/presentation-editor/layers/types/html/buttons/font-size-button/index.js

@@ -0,0 +1,2 @@
+import FontSizeButton from './font-size-button.svelte';
+export { FontSizeButton };

package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/index.d.ts

@@ -0,0 +1,2 @@
+import ItalicButton from './italic-button.svelte';
+export { ItalicButton };

package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/index.js

@@ -0,0 +1,2 @@
+import ItalicButton from './italic-button.svelte';
+export { ItalicButton };

package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/italic-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import ItalicIcon from 'lucide-svelte/icons/italic';
+	import type { Editor } from '../../editor/Editor.js';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+</script>
+
+<Toggle
+	size="xs"
+	pressed={editor.isActive('italic')}
+	onPressedChange={(val) => (val ? editor.commands.setItalic() : editor.commands.unsetItalic())}
+>
+	<ItalicIcon class="h-6 w-6" />
+</Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/italic-button/italic-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/list-button/index.d.ts

@@ -0,0 +1,2 @@
+import ListButton from './list-button.svelte';
+export { ListButton };

package/dist/components/presentation-editor/layers/types/html/buttons/list-button/index.js

@@ -0,0 +1,2 @@
+import ListButton from './list-button.svelte';
+export { ListButton };

package/dist/components/presentation-editor/layers/types/html/buttons/list-button/list-button.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { type Editor } from '../../editor/index.js';
+	import BulletListIcon from 'lucide-svelte/icons/list';
+	import OrderedListIcon from 'lucide-svelte/icons/list-ordered';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+
+	type ListType = 'bulletList' | 'orderedList';
+
+	let listType: ListType | false = $derived(
+		editor &&
+			((editor.isActive('bulletList') && 'bulletList') ||
+				(editor.isActive('orderedList') && 'orderedList')),
+	);
+</script>
+
+<Toggle
+	size="xs"
+	pressed={!!listType}
+	onPressedChange={() =>
+		!listType
+			? editor.commands.toggleBulletList()
+			: listType === 'bulletList'
+				? editor.commands.toggleOrderedList()
+				: editor.commands.toggleUnstyledList()}
+>
+	{#if listType === 'orderedList'}
+		<OrderedListIcon class="h-6 w-6" />
+	{:else}
+		<BulletListIcon class="h-6 w-6" />
+	{/if}
+</Toggle>

package/dist/components/presentation-editor/layers/types/html/buttons/list-button/list-button.svelte.d.ts

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

package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/index.d.ts

@@ -0,0 +1,2 @@
+import StrikethroughButton from './strikethrough-button.svelte';
+export { StrikethroughButton };

package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/index.js

@@ -0,0 +1,2 @@
+import StrikethroughButton from './strikethrough-button.svelte';
+export { StrikethroughButton };

package/dist/components/presentation-editor/layers/types/html/buttons/strikethrough-button/strikethrough-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import StrikethroughIcon from 'lucide-svelte/icons/strikethrough';
+	import type { Editor } from '../../editor/Editor.js';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+</script>
+
+<Toggle
+	size="xs"
+	pressed={editor.isActive('strike')}
+	onPressedChange={(val) => (val ? editor.commands.setStrike() : editor.commands.unsetStrike())}
+>
+	<StrikethroughIcon class="h-6 w-6" />
+</Toggle>