@peteai/presentation-editor 0.0.6 → 0.0.8

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/alignment-button/alignment-button.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-	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 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';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
 	import type { Editor } from '../../editor/index.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -52,9 +52,8 @@
 		if (editor.activeAction?.type === 'edit') {
 			$htmlEditor.commands.setTextAlign(nextAlign[currentAlign]);
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: layers.map((layer) => {
+			editor.historyPush(
+				layers.map((layer) => {
 					editorNotReactive
 						.chain()
 						.setContent(layer.html)
@@ -63,14 +62,14 @@
 						.run();
 
 					return {
-						type: 'layer',
-						slideId: editor.activeSlide.id,
+						type: 'layerUpdate',
+						pageId: editor.activePage.id,
 						layer: { id: layer.id, type: layer.type },
 						undo: { html: layer.html },
 						redo: { html: editorNotReactive.getJSON() },
 					};
 				}),
-			});
+			);
 		}
 	};
 </script>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const AlignmentButton: import("svelte").Component<Props, {}, "layers">;
 type AlignmentButton = ReturnType<typeof AlignmentButton>;

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import BoldIcon from '@lucide/svelte/icons/bold';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
+
+	interface Props {
+		layers: TextLayer[];
+	}
+
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('bold');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('bold');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setBold().run();
+			} else {
+				$htmlEditor.chain().focus().unsetBold().run();
+			}
+		} else {
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+							if (value) {
+								chain = chain.setBold();
+							} else {
+								chain = chain.unsetBold();
+							}
+							chain.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
+		}
+	};
+</script>
+
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
+	<BoldIcon class="h-6 w-6" />
+</Toggle>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const BoldButton: import("svelte").Component<Props, {}, "layers">;
 type BoldButton = ReturnType<typeof BoldButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/case-button/case-button.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import CaseIcon from 'lucide-svelte/icons/case-sensitive';
+	import CaseIcon from '@lucide/svelte/icons/case-sensitive';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
 	import { extractUppercase } from '../../editor/utils.js';
-	import type { HtmlLayer } from '../../../../../types.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { createEditorNotReactive } from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -38,31 +37,26 @@
 				$htmlEditor.chain().focus().unsetTextTransform().run();
 			}
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
-						if (value) {
-							chain = chain.setTextTransform('uppercase');
-						} else {
-							chain = chain.unsetTextTransform();
-						}
-						chain.run();
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+							if (value) {
+								chain = chain.setTextTransform('uppercase');
+							} else {
+								chain = chain.unsetTextTransform();
+							}
+							chain.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,
-						};
-					}),
-				),
-			});
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
 		}
 	};
 </script>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const CaseButton: import("svelte").Component<Props, {}, "layers">;
 type CaseButton = ReturnType<typeof CaseButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/color-button/color-button.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 	import { Button } from '../../../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { extractNodeColors, extractSelectionColors } from '../../editor/utils.js';
 	import { buildBackgroundCircleStyle } from '../../../../utils.js';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import type { TextLayer } from '../../../../../types.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const ColorButton: import("svelte").Component<Props, {}, "layers">;
 type ColorButton = ReturnType<typeof ColorButton>;

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/font-family-button/font-family-button.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { Button } from '../../../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import { extractNodeFonts, extractSelectionFonts } from '../../editor/utils.js';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import type { TextLayer } from '../../../../../types.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 

package/dist/components/{presentation-editor/layers/types/html → editor/layers/types/text}/buttons/font-family-button/font-family-button.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const FontFamilyButton: import("svelte").Component<Props, {}, "layers">;
 type FontFamilyButton = ReturnType<typeof FontFamilyButton>;

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

@@ -1,24 +1,23 @@
 <script lang="ts">
-	import MinusIcon from 'lucide-svelte/icons/minus';
-	import PlusIcon from 'lucide-svelte/icons/plus';
-	import type { HtmlLayer } from '../../../../../types.js';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+	import type { TextLayer } from '../../../../../types.js';
 	import * as DropdownMenu from '../../../../../../ui/dropdown-menu/index.js';
 	import { Button, buttonVariants } from '../../../../../../ui/button/index.js';
-	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
 	import {
 		createEditorNotReactive,
 		extractNodeFontSizes,
 		extractSelectionFontSizes,
 	} from '../../editor/utils.js';
-	import { applyHtmlToLayer } from '../../../../utils.js';
 
 	interface Props {
-		layers: HtmlLayer[];
+		layers: TextLayer[];
 	}
 
 	let { layers = $bindable() }: Props = $props();
 
-	const editor = getPresentationEditorContext();
+	const editor = getEditorContext();
 
 	const { htmlEditor } = editor;
 
@@ -40,12 +39,12 @@
 	const fontSize = $derived.by(() => {
 		if (editor.activeAction?.type === 'edit') {
 			const fontSizesPx = extractSelectionFontSizes($htmlEditor);
-			return getFontSize(fontSizesPx, layers[0]?.scale || 1);
+			return getFontSize(fontSizesPx, layers[0]?.scale);
 		} else {
 			const set = new Set<number>();
 			layers.forEach((layer) => {
 				const fontSizesPx = extractNodeFontSizes(layer.html);
-				const fontSize = getFontSize(fontSizesPx, layer.scale || 1);
+				const fontSize = getFontSize(fontSizesPx, layer.scale);
 				if (fontSize) {
 					set.add(fontSize);
 				}
@@ -55,8 +54,9 @@
 		}
 	});
 
-	const updateFontSize = async (value: number) => {
+	const updateFontSize = async (value: string | number) => {
 		console.log('updateFontSize', value);
+		value = parseInt(value.toString());
 		let fontSizePt = value;
 		if (fontSizePt < min) {
 			fontSizePt = min;
@@ -64,36 +64,29 @@
 			fontSizePt = max;
 		}
 		if (editor.activeAction?.type === 'edit') {
-			$htmlEditor.commands.setFontSize(fontSizePt / pxToPt / (layers[0]?.scale || 1));
+			$htmlEditor.commands.setFontSize(fontSizePt / pxToPt / layers[0]?.scale);
 		} else {
-			editor.historyPush({
-				type: 'layersGroup',
-				actions: await Promise.all(
-					layers.map(async (layer) => {
-						const editorNotReactive = createEditorNotReactive(layer.html);
-						const scale = layer.scale || 1;
-						const fontSize = fontSizePt / pxToPt / scale;
-						editorNotReactive
-							.chain()
-							.setContent(layer.html)
-							.selectAll()
-							.setFontSize(fontSize)
-							.run();
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							const editorNotReactive = createEditorNotReactive(layer.html);
+							const fontSize = fontSizePt / pxToPt / layer.scale;
+							editorNotReactive
+								.chain()
+								.setContent(layer.html)
+								.selectAll()
+								.setFontSize(fontSize)
+								.run();
 
-						const undo = { html: layer.html, x: layer.x, y: layer.y, height: layer.height };
-						const html = editorNotReactive.getJSON();
-						const redo = await applyHtmlToLayer(layer, html);
-
-						return {
-							type: 'layer',
-							slideId: editor.activeSlide.id,
-							layer: { id: layer.id, type: layer.type },
-							undo,
-							redo,
-						};
-					}),
-				),
-			});
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
 		}
 	};
 
@@ -138,11 +131,11 @@
 					placeholder="– –"
 					value={fontSize}
 					style:-moz-appearance="textfield"
-					onchange={(e) => updateFontSize(e.target.value)}
+					onchange={(e) => updateFontSize(e.currentTarget.value)}
 					onkeydown={(e) => {
 						if (e.key === 'Enter') {
 							e.stopPropagation();
-							updateFontSize(e.target.value);
+							updateFontSize(e.currentTarget.value);
 						} else if (e.key === 'Escape') {
 							e.stopPropagation();
 						}

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const FontSizeButton: import("svelte").Component<Props, {}, "layers">;
 type FontSizeButton = ReturnType<typeof FontSizeButton>;

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import ItalicIcon from '@lucide/svelte/icons/italic';
+	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
+
+	interface Props {
+		layers: TextLayer[];
+	}
+
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('italic');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('italic');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setItalic().run();
+			} else {
+				$htmlEditor.chain().focus().unsetItalic().run();
+			}
+		} else {
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+							if (value) {
+								chain = chain.setItalic();
+							} else {
+								chain = chain.unsetItalic();
+							}
+							chain.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
+		}
+	};
+</script>
+
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
+	<ItalicIcon class="h-6 w-6" />
+</Toggle>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const ItalicButton: import("svelte").Component<Props, {}, "layers">;
 type ItalicButton = ReturnType<typeof ItalicButton>;

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

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import * as DropdownMenu from '../../../../../../ui/dropdown-menu/index.js';
+	import { buttonVariants } from '../../../../../../ui/button/index.js';
+	import { getEditorContext } from '../../../../../editor.svelte.js';
+	import type { TextLayer } from '../../../../../types.js';
+	import type { Editor } from '../../editor/index.js';
+	import {
+		createEditorNotReactive,
+		extractNodeListStyleTypes,
+		extractSelectionListStyleTypes,
+	} from '../../editor/utils.js';
+
+	interface Props {
+		layers: TextLayer[];
+	}
+
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getEditorContext();
+
+	const { htmlEditor } = editor;
+
+	type ListStyleType = { name: string | undefined; symbol: string; title: string };
+
+	const listStyleTypes: ListStyleType[] = [
+		{ name: undefined, symbol: '¶', title: 'Paragraph' },
+		{ name: 'disc', symbol: '●', title: 'Disc' },
+		{ name: 'circle', symbol: '○', title: 'Circle' },
+		{ name: 'square', symbol: '■', title: 'Square' },
+		{ name: 'decimal', symbol: '1.', title: 'Decimal' },
+		{ name: 'lower-alpha', symbol: 'a.', title: 'Lower Alpha' },
+		{ name: 'upper-alpha', symbol: 'A.', title: 'Upper Alpha' },
+		{ name: 'upper-roman', symbol: 'I.', title: 'Upper Roman' },
+	];
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const getListStyleType = (editor: Editor): ListStyleType => {
+		for (let listStyleType of listStyleTypes) {
+			if (editor.isActive('list', { listStyleType: listStyleType.name })) {
+				if (listStyleTypes.find((l) => l.name === listStyleType.name)) return listStyleType;
+			}
+		}
+		return listStyleTypes[0];
+	};
+
+	const currentListStyleType = $derived.by(() => {
+		const set = new Set<string>();
+		if (editor.activeAction?.type === 'edit') {
+			extractSelectionListStyleTypes($htmlEditor, set);
+		} else {
+			layers.forEach((layer) => extractNodeListStyleTypes(layer.html, set));
+		}
+		if (set.size === 1) {
+			const listStyleType = listStyleTypes.find((l) => set.has(l.name ?? ''));
+			if (listStyleType) return listStyleType;
+		}
+		return listStyleTypes[0];
+	});
+
+	const setListStyleType = async (type?: string) => {
+		if (editor.activeAction?.type === 'edit') {
+			$htmlEditor.chain().focus().toggleListStyleType(type).run();
+		} else {
+			editor.historyPush(
+				(
+					await Promise.all(
+						layers.map(async (layer) => {
+							editorNotReactive
+								.chain()
+								.focus()
+								.setContent(layer.html)
+								.selectAll()
+								.toggleListStyleType(type)
+								.run();
+
+							return editor.applyHtmlToLayer(
+								editor.createTextLayerInitial(editor.activePage, layer),
+								editorNotReactive.getJSON(),
+							);
+						}),
+					)
+				).flat(),
+			);
+		}
+	};
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger
+		class={buttonVariants({
+			variant: 'ghost',
+			size: 'xs',
+			class: 'inline-flex cursor-text select-none rounded-none align-middle',
+		})}
+	>
+		{currentListStyleType.symbol}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content
+		trapFocus={false}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		align="start"
+		sideOffset={2}
+		class="w-32 p-1"
+	>
+		{#each listStyleTypes as listStyleType}
+			<DropdownMenu.Item onSelect={() => setListStyleType(listStyleType.name)}>
+				{listStyleType.symbol}
+				{listStyleType.title}
+			</DropdownMenu.Item>
+		{/each}
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

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

@@ -1,6 +1,6 @@
-import type { HtmlLayer } from '../../../../../types.js';
+import type { TextLayer } from '../../../../../types.js';
 interface Props {
-    layers: HtmlLayer[];
+    layers: TextLayer[];
 }
 declare const ListButton: import("svelte").Component<Props, {}, "layers">;
 type ListButton = ReturnType<typeof ListButton>;