@peteai/presentation-editor 0.0.2 → 0.0.4

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

@@ -1,19 +1,65 @@
 <script lang="ts">
 	import StrikethroughIcon from 'lucide-svelte/icons/strikethrough';
-	import type { Editor } from '../../editor/Editor.js';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { HtmlLayer } from '../../../../../types.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('strike');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('strike');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setStrike().run();
+			} else {
+				$htmlEditor.chain().focus().unsetStrike().run();
+			}
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: layers.map((layer) => {
+					let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+					if (value) {
+						chain = chain.setStrike();
+					} else {
+						chain = chain.unsetStrike();
+					}
+					chain.run();
+
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { html: layer.html },
+						redo: { html: editorNotReactive.getJSON() },
+					};
+				}),
+			});
+		}
+	};
 </script>
 
-<Toggle
-	size="xs"
-	pressed={editor.isActive('strike')}
-	onPressedChange={(val) => (val ? editor.commands.setStrike() : editor.commands.unsetStrike())}
->
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
 	<StrikethroughIcon class="h-6 w-6" />
 </Toggle>

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

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

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

@@ -1,20 +1,65 @@
 <script lang="ts">
-	import type { Editor } from '../../editor/index.js';
 	import UnderlineIcon from 'lucide-svelte/icons/underline';
 	import { Toggle } from '../../../../../../ui/toggle/index.js';
+	import type { HtmlLayer } from '../../../../../types.js';
+	import { getPresentationEditorContext } from '../../../../../presentation-editor.svelte.js';
+	import { createEditorNotReactive } from '../../editor/utils.js';
 
 	interface Props {
-		editor: Editor;
+		layers: HtmlLayer[];
 	}
 
-	let { editor }: Props = $props();
+	let { layers = $bindable() }: Props = $props();
+
+	const editor = getPresentationEditorContext();
+
+	const { htmlEditor } = editor;
+
+	const editorNotReactive = createEditorNotReactive();
+
+	const isActive = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit') {
+			return $htmlEditor.isActive('underline');
+		} else {
+			return layers.every((layer) => {
+				editorNotReactive.chain().setContent(layer.html).selectAll().run();
+				return editorNotReactive.isActive('underline');
+			});
+		}
+	});
+
+	const setValue = async (value: boolean) => {
+		if (editor.activeAction?.type === 'edit') {
+			if (value) {
+				$htmlEditor.chain().focus().setUnderline().run();
+			} else {
+				$htmlEditor.chain().focus().unsetUnderline().run();
+			}
+		} else {
+			editor.historyPush({
+				type: 'layersGroup',
+				actions: layers.map((layer) => {
+					let chain = editorNotReactive.chain().setContent(layer.html).selectAll();
+					if (value) {
+						chain = chain.setUnderline();
+					} else {
+						chain = chain.unsetUnderline();
+					}
+					chain.run();
+
+					return {
+						type: 'layer',
+						slideId: editor.activeSlide.id,
+						layer: { id: layer.id, type: layer.type },
+						undo: { html: layer.html },
+						redo: { html: editorNotReactive.getJSON() },
+					};
+				}),
+			});
+		}
+	};
 </script>
 
-<Toggle
-	size="xs"
-	pressed={editor.isActive('underline')}
-	onPressedChange={(val) =>
-		val ? editor.commands.setUnderline() : editor.commands.unsetUnderline()}
->
+<Toggle size="xs" pressed={isActive} onPressedChange={(val) => setValue(val)}>
 	<UnderlineIcon class="h-6 w-6" />
 </Toggle>

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

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

package/dist/components/presentation-editor/layers/types/html/editor/createEditor.js

@@ -1,6 +1,6 @@
+import { tick } from 'svelte';
 import { readable } from 'svelte/store';
 import { Editor } from './Editor.js';
-import { tick } from 'svelte';
 const createEditor = (options) => {
     const editor = new Editor(options);
     return readable(editor, (set) => {
@@ -11,7 +11,7 @@ const createEditor = (options) => {
         });
         return () => {
             console.log('destroying editor');
-            editor.destroy();
+            // editor.destroy();
         };
     });
 };

package/dist/components/presentation-editor/layers/types/html/editor/utils.d.ts

@@ -0,0 +1,11 @@
+import { type JSONContent } from '@tiptap/core';
+import { Editor } from './Editor.js';
+export declare const DEFAULT_COLOR = "#000000";
+export declare const createEditorNotReactive: (content?: JSONContent) => Editor;
+export declare const extractSelectionFonts: (editor: Editor) => string[];
+export declare const extractNodeFonts: (content: JSONContent, set?: Set<string>) => string[];
+export declare const extractSelectionFontSizes: (editor: Editor) => number[];
+export declare const extractNodeFontSizes: (content: JSONContent, set?: Set<number>) => number[];
+export declare const extractSelectionColors: (editor: Editor) => string[];
+export declare const extractNodeColors: (content: JSONContent, set?: Set<string>) => string[];
+export declare const extractUppercase: (editor: Editor) => boolean;

package/dist/components/presentation-editor/layers/types/html/editor/utils.js

@@ -0,0 +1,88 @@
+import {} from '@tiptap/core';
+import { Editor } from './Editor.js';
+import { extensions } from '../extensions.js';
+export const DEFAULT_COLOR = '#000000';
+export const createEditorNotReactive = (content) => {
+    return new Editor({
+        extensions,
+        injectCSS: false,
+        content,
+    });
+};
+export const extractSelectionFonts = (editor) => {
+    const selection = editor.view.state.selection;
+    const set = new Set();
+    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (node.attrs.fontFamily) {
+            set.add(node.attrs.fontFamily);
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeFonts = (content, set = new Set()) => {
+    if (content.type !== 'text') {
+        if (content.attrs?.fontFamily) {
+            set.add(content.attrs.fontFamily);
+        }
+        content.content?.forEach((content) => extractNodeFonts(content, set));
+    }
+    return Array.from(set);
+};
+export const extractSelectionFontSizes = (editor) => {
+    const selection = editor.view.state.selection;
+    const set = new Set();
+    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (node.attrs.fontSize) {
+            set.add(node.attrs.fontSize);
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeFontSizes = (content, set = new Set()) => {
+    if (content.type !== 'text') {
+        if (content.attrs?.fontSize) {
+            set.add(content.attrs.fontSize);
+        }
+        content.content?.forEach((content) => extractNodeFontSizes(content, set));
+    }
+    return Array.from(set);
+};
+export const extractSelectionColors = (editor) => {
+    const selection = editor.view.state.selection;
+    const set = new Set();
+    editor.view.state.doc.nodesBetween(selection.from, selection.to, (node) => {
+        if (node.isText && node.text?.trim().length) {
+            const color = node.marks?.find((mark) => mark.type.name === 'textStyle')?.attrs?.color;
+            set.add(color || DEFAULT_COLOR);
+        }
+    });
+    return Array.from(set);
+};
+export const extractNodeColors = (content, set = new Set()) => {
+    if (content.type === 'text') {
+        const color = content.marks?.find((mark) => mark.type === 'textStyle')?.attrs?.color;
+        set.add(color || DEFAULT_COLOR);
+    }
+    else {
+        if (content.attrs?.color) {
+            set.add(content.attrs.color);
+        }
+    }
+    content.content?.forEach((content) => extractNodeColors(content, set));
+    return Array.from(set);
+};
+export const extractUppercase = (editor) => {
+    const selection = editor.view.state.selection;
+    let uppercase = 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;
+};

package/dist/components/presentation-editor/layers/types/html/extensions/font-family/font-family.d.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/core';
+export type FontFamilyOptions = {
+    /**
+     * A list of node names where the font family can be applied.
+     * @default []
+     * @example ['paragraph', 'listItem']
+     */
+    types: string[];
+};
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        fontFamily: {
+            /**
+             * Set the font family
+             * @param fontFamily The font family
+             * @example editor.commands.setFontFamily('Arial')
+             */
+            setFontFamily: (fontFamily: string) => ReturnType;
+            /**
+             * Unset the font family
+             * @example editor.commands.unsetFontFamily()
+             */
+            unsetFontFamily: () => ReturnType;
+        };
+    }
+}
+export declare const FontFamily: Extension<FontFamilyOptions, any>;

package/dist/components/presentation-editor/layers/types/html/extensions/font-family/font-family.js

@@ -0,0 +1,40 @@
+import { Extension } from '@tiptap/core';
+export const FontFamily = Extension.create({
+    name: 'fontFamily',
+    addOptions() {
+        return {
+            types: [],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontFamily: {
+                        default: null,
+                        parseHTML: (element) => element.style.fontFamily,
+                        renderHTML: (attributes) => {
+                            if (!attributes.fontFamily) {
+                                return {};
+                            }
+                            return {
+                                style: `font-family: "${attributes.fontFamily}"`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setFontFamily: (fontFamily) => ({ commands }) => {
+                return this.options.types.every((type) => commands.updateAttributes(type, { fontFamily }));
+            },
+            unsetFontFamily: () => ({ commands }) => {
+                return this.options.types.every((type) => commands.resetAttributes(type, 'fontFamily'));
+            },
+        };
+    },
+});

package/dist/components/presentation-editor/layers/types/html/extensions/font-family/index.d.ts

@@ -0,0 +1,3 @@
+import { FontFamily } from './font-family.js';
+export * from './font-family.js';
+export default FontFamily;

package/dist/components/presentation-editor/layers/types/html/extensions/font-family/index.js

@@ -0,0 +1,3 @@
+import { FontFamily } from './font-family.js';
+export * from './font-family.js';
+export default FontFamily;

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.d.ts

@@ -1,6 +1,10 @@
 import { Extension } from '@tiptap/core';
-import '@tiptap/extension-text-style';
 export type FontSizeOptions = {
+    /**
+     * A list of node names where the font size can be applied.
+     * @default []
+     * @example ['paragraph', 'listItem']
+     */
     types: string[];
 };
 declare module '@tiptap/core' {

package/dist/components/presentation-editor/layers/types/html/extensions/font-size/font-size.js

@@ -1,5 +1,4 @@
 import { Extension } from '@tiptap/core';
-import '@tiptap/extension-text-style';
 export const FontSize = Extension.create({
     name: 'fontSize',
     addOptions() {
@@ -30,14 +29,11 @@ export const FontSize = Extension.create({
     },
     addCommands() {
         return {
-            setFontSize: (fontSize) => ({ 
-            // chain,
-            commands, }) => {
+            setFontSize: (fontSize) => ({ commands }) => {
                 return this.options.types.every((type) => commands.updateAttributes(type, { fontSize }));
-                // return chain().setMark('textStyle', { fontSize }).run();
             },
-            unsetFontSize: () => ({ chain }) => {
-                return chain().setMark('textStyle', { fontSize: null }).removeEmptyTextStyle().run();
+            unsetFontSize: () => ({ commands }) => {
+                return this.options.types.every((type) => commands.resetAttributes(type, 'fontSize'));
             },
         };
     },

package/dist/components/presentation-editor/layers/types/html/extensions.d.ts

@@ -0,0 +1 @@
+export declare const extensions: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any>)[];

package/dist/components/presentation-editor/layers/types/html/extensions.js

@@ -0,0 +1,56 @@
+import { Document } from '@tiptap/extension-document';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Text } from '@tiptap/extension-text';
+import { ListItem } from '@tiptap/extension-list-item';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { OrderedList } from '@tiptap/extension-ordered-list';
+import { UnstyledList } from './extensions/unstyled-list/index.js';
+import { ListKeymap } from '@tiptap/extension-list-keymap';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { LineHeight } from './extensions/line-height/index.js';
+import { TextTransform } from './extensions/text-transform/index.js';
+import { FontFamily } from './extensions/font-family/index.js';
+import { FontSize } from './extensions/font-size/index.js';
+import { Color } from '@tiptap/extension-color';
+import { Bold } from '@tiptap/extension-bold';
+import { Italic } from '@tiptap/extension-italic';
+import { Underline } from '@tiptap/extension-underline';
+import { Strike } from '@tiptap/extension-strike';
+import { Selection } from './extensions/selection/index.js';
+export const extensions = [
+    Document,
+    Paragraph,
+    Text,
+    ListItem.configure({
+        HTMLAttributes: { style: 'margin-left: calc(var(--list-item-ident)*1em)' },
+    }),
+    BulletList.configure({
+        HTMLAttributes: { class: 'list-disc', style: '--list-item-ident: 1' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    OrderedList.configure({
+        HTMLAttributes: { class: 'list-decimal', style: '--list-item-ident: 1' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    UnstyledList.configure({
+        HTMLAttributes: { class: 'list-none', style: '--list-item-ident: 0' },
+        keepAttributes: true,
+        keepMarks: true,
+    }),
+    ListKeymap,
+    TextStyle,
+    FontFamily.configure({ types: ['paragraph', 'listItem'] }),
+    TextAlign.configure({ types: ['paragraph', 'listItem'] }),
+    LineHeight.configure({ types: ['paragraph', 'listItem'] }),
+    TextTransform.configure({ types: ['paragraph', 'listItem'] }),
+    FontSize.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
+    Color.configure({ types: ['paragraph', 'listItem', 'textStyle'] }),
+    Bold,
+    Italic,
+    Underline,
+    Strike,
+    Selection,
+];

package/dist/components/presentation-editor/layers/types/html/html-content.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env';
 	import { generateHTML, type JSONContent } from '@tiptap/core';
-	import { extensions } from './index.js';
+	import { extensions } from './extensions.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { extractNodeFonts } from './editor/utils.js';
 
 	let { html } = $props();
 
+	const editor = getPresentationEditorContext();
+
+	if (BROWSER) {
+		const fontFamilies = extractNodeFonts(html);
+		Promise.all(fontFamilies.map(editor.loadFont));
+	}
+
 	const getHtml = (html: JSONContent) => {
 		try {
 			return generateHTML(html, extensions);
@@ -15,7 +24,19 @@
 	};
 </script>
 
-{#if BROWSER}
-	<!-- eslint-disable svelte/no-at-html-tags -->
-	{@html getHtml(html)}
-{/if}
+<div
+	class="html-content whitespace-pre-wrap break-words p-0 text-left text-base font-normal normal-case not-italic text-black"
+>
+	{#if BROWSER}
+		<!-- eslint-disable svelte/no-at-html-tags -->
+		{@html getHtml(html)}
+	{/if}
+</div>
+
+<style>
+	:global {
+		.html-content p:empty::after {
+			content: '\00A0';
+		}
+	}
+</style>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { HtmlLayer } from '../../../types.js';
+	import { cn } from '../../../../../utils.js';
+	import HtmlContent from './html-content.svelte';
+
+	interface Props {
+		layer: HtmlLayer;
+		thumbScale?: number;
+		ref?: HTMLElement | null;
+	}
+
+	let { layer, thumbScale = 1, ref = $bindable(null) }: Props = $props();
+
+	let scale = $derived((layer.scale || 1) * thumbScale);
+</script>
+
+<div
+	class={cn('h-full', { 'origin-top-left': scale !== 1 })}
+	style:width="{layer.width}px"
+	style:height="{layer.height}px"
+	style:transform={scale !== 1 ? `scale(${scale})` : ''}
+>
+	<div bind:this={ref} id="layer-content-{layer.id}">
+		<HtmlContent html={layer.html} />
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { HtmlLayer } from '../../../types.js';
+interface Props {
+    layer: HtmlLayer;
+    thumbScale?: number;
+    ref?: HTMLElement | null;
+}
+declare const HtmlLayerContent: import("svelte").Component<Props, {}, "ref">;
+type HtmlLayerContent = ReturnType<typeof HtmlLayerContent>;
+export default HtmlLayerContent;

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { onDestroy, untrack } from 'svelte';
+	import type { HtmlLayer, LayerUpdateAction } from '../../../types.js';
+	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
+	import { EditorContent } from './editor/index.js';
+	import { applyHtmlToLayer } from '../../utils.js';
+	import { createDebouncedCallback } from '../../../../../utils.js';
+
+	import './editor.css';
+
+	interface Props {
+		layer: HtmlLayer;
+	}
+
+	let { layer = $bindable() }: Props = $props();
+
+	const layerId = layer.id;
+	const layerRef = layer;
+
+	const editorState = getPresentationEditorContext();
+
+	const { htmlEditor } = editorState;
+
+	let scaleAndZoom = $derived((layer.scale || 1) * editorState.zoom);
+	let rotate = $derived(layer.rotate || 0);
+
+	let undo: Pick<HtmlLayer, 'html' | 'x' | 'y' | 'height'> | null = null;
+
+	const debouncedUpdates = createDebouncedCallback((action) => {
+		console.log('debouncedUpdates', action);
+		editorState.historyPush(action);
+		undo = null;
+	}, 750);
+
+	const onUpdate = async (e) => {
+		console.log('editor update');
+		if (!undo) {
+			undo = { html: $state.snapshot(layer.html), x: layer.x, y: layer.y, height: layer.height };
+		}
+		const html = e.editor.getJSON();
+		const redo = await applyHtmlToLayer(layer, html);
+
+		// save update only when there is a content
+		if (e.editor.state.doc.textContent.trim().length) {
+			const action: LayerUpdateAction = {
+				type: 'layer',
+				slideId: editorState.activeSlide.id,
+				layer: { id: layer.id, type: layer.type },
+				undo,
+				redo,
+			};
+			debouncedUpdates(action);
+		}
+	};
+
+	const checkIfEmpty = () => {
+		if (undo && !$htmlEditor.isFocused && !$htmlEditor.state.doc.textContent.trim().length) {
+			Object.assign(layerRef, undo);
+			editorState.removeLayers(editorState.activeSlide.id, layerId);
+		}
+	};
+
+	$htmlEditor.on('update', onUpdate);
+
+	onDestroy(() => {
+		$htmlEditor.off('update', onUpdate);
+		checkIfEmpty();
+	});
+
+	$effect(() => {
+		if (editorState.activeAction?.type !== 'edit') {
+			checkIfEmpty();
+		}
+	});
+
+	$htmlEditor.chain().setContent(layer.html).selectAll().run();
+
+	// update html when it changes by history undo/redo
+	$effect(() => {
+		const editor = untrack(() => $htmlEditor);
+		if (editorState.activeAction?.type !== 'edit') {
+			editor.chain().setContent(layer.html).selectAll().run();
+		}
+	});
+</script>
+
+<div class="absolute origin-top-left select-none">
+	<div
+		class="pointer-events-auto select-text"
+		style:width={`${layer.width * scaleAndZoom}px`}
+		style:height={`${layer.height * scaleAndZoom}px`}
+		style:transform={`translate(${layer.x * editorState.zoom}px, ${layer.y * editorState.zoom}px) rotate(${rotate}deg)`}
+	>
+		<div
+			class="origin-top-left"
+			style:width="{layer.width}px"
+			style:height="{layer.height}px"
+			style:transform={`scale(${scaleAndZoom})`}
+		>
+			<EditorContent editor={$htmlEditor} />
+		</div>
+	</div>
+</div>

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

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