@peteai/presentation-editor 0.0.6 → 0.0.8

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

@@ -1,88 +0,0 @@
-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/unstyled-list/index.d.ts

@@ -1,3 +0,0 @@
-import { UnstyledList } from './unstyled-list.js';
-export * from './unstyled-list.js';
-export default UnstyledList;

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

@@ -1,3 +0,0 @@
-import { UnstyledList } from './unstyled-list.js';
-export * from './unstyled-list.js';
-export default UnstyledList;

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

@@ -1,47 +0,0 @@
-import { Node } from '@tiptap/core';
-export interface UnstyledListOptions {
-    /**
-     * The node name for the list items
-     * @default 'listItem'
-     * @example 'paragraph'
-     */
-    itemTypeName: string;
-    /**
-     * HTML attributes to add to the unstyled list element
-     * @default {}
-     * @example { class: 'foo' }
-     */
-    HTMLAttributes: Record<string, any>;
-    /**
-     * Keep the marks when splitting the list
-     * @default false
-     * @example true
-     */
-    keepMarks: boolean;
-    /**
-     * Keep the attributes when splitting the list
-     * @default false
-     * @example true
-     */
-    keepAttributes: boolean;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        unstyledList: {
-            /**
-             * Toggle a unstyled list
-             */
-            toggleUnstyledList: () => ReturnType;
-        };
-    }
-}
-/**
- * Matches a unstyled list to a dash or asterisk.
- */
-export declare const inputRegex: RegExp;
-/**
- * This extension allows you to create unstyled lists.
- * This requires the ListItem extension
- * @see https://tiptap.dev/api/nodes/list-item.
- */
-export declare const UnstyledList: Node<UnstyledListOptions, any>;

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

@@ -1,74 +0,0 @@
-import { mergeAttributes, Node, wrappingInputRule } from '@tiptap/core';
-import ListItem from '@tiptap/extension-list-item';
-import TextStyle from '@tiptap/extension-text-style';
-/**
- * Matches a unstyled list to a dash or asterisk.
- */
-export const inputRegex = /^\s*([-+*])\s$/;
-/**
- * This extension allows you to create unstyled lists.
- * This requires the ListItem extension
- * @see https://tiptap.dev/api/nodes/list-item.
- */
-export const UnstyledList = Node.create({
-    name: 'unstyledList',
-    addOptions() {
-        return {
-            itemTypeName: 'listItem',
-            HTMLAttributes: {},
-            keepMarks: false,
-            keepAttributes: false,
-        };
-    },
-    group: 'block list',
-    content() {
-        return `${this.options.itemTypeName}+`;
-    },
-    parseHTML() {
-        return [{ tag: 'ul' }];
-    },
-    renderHTML({ HTMLAttributes }) {
-        return ['ul', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
-    },
-    addCommands() {
-        return {
-            toggleUnstyledList: () => ({ commands, chain }) => {
-                const selection = this.editor.view.state.selection;
-                console.log('selection', selection.from, selection.to, selection);
-                if (this.options.keepAttributes) {
-                    console.log(TextStyle.name, this.editor.getAttributes(TextStyle.name));
-                    console.log('fontSize', this.editor.getAttributes('fontSize'));
-                    return chain()
-                        .toggleList(this.name, this.options.itemTypeName, this.options.keepMarks)
-                        .updateAttributes(ListItem.name, this.editor.getAttributes(TextStyle.name))
-                        .run();
-                }
-                return commands.toggleList(this.name, this.options.itemTypeName, this.options.keepMarks);
-            },
-        };
-    },
-    addKeyboardShortcuts() {
-        return {
-            'Mod-Shift-9': () => this.editor.commands.toggleUnstyledList(),
-        };
-    },
-    addInputRules() {
-        let inputRule = wrappingInputRule({
-            find: inputRegex,
-            type: this.type,
-        });
-        if (this.options.keepMarks || this.options.keepAttributes) {
-            inputRule = wrappingInputRule({
-                find: inputRegex,
-                type: this.type,
-                keepMarks: this.options.keepMarks,
-                keepAttributes: this.options.keepAttributes,
-                getAttributes: () => {
-                    return this.editor.getAttributes(TextStyle.name);
-                },
-                editor: this.editor,
-            });
-        }
-        return [inputRule];
-    },
-});

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

@@ -1,9 +0,0 @@
-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

@@ -1,103 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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;

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

@@ -1,105 +0,0 @@
-<script lang="ts">
-	import { tick } from 'svelte';
-	import type { HtmlLayer } from '../../../types.js';
-	import { getPresentationEditorContext } from '../../../presentation-editor.svelte.js';
-	import { HtmlLayerContent } from './index.js';
-	import { calculateBoundingBox, calculateLayerTransform } from '../../utils.js';
-
-	interface Props {
-		layer: HtmlLayer;
-	}
-
-	let { layer = $bindable() }: Props = $props();
-
-	const editor = getPresentationEditorContext();
-
-	let ref: HTMLElement | null = $state(null);
-
-	$effect(() => {
-		if (!ref) return;
-		tick().then(() => {
-			if (!ref) return;
-			layer.height = ref.offsetHeight;
-		});
-	});
-
-	const onMouseDown = (e: MouseEvent) => {
-		if (e.button !== 0) return;
-		console.log('mousedown', layer.id, e);
-		if (
-			!editor.activeSlide.locked &&
-			!layer.locked &&
-			editor.activeLayerIds.has(layer.id) &&
-			!editor.activeAction
-		) {
-			addEventListener('mouseup', onMouseUp);
-		}
-	};
-
-	const onMouseUp = (e: MouseEvent) => {
-		console.log('mouseup', layer.id, e);
-		if (
-			editor.activeLayerIds.has(layer.id) &&
-			editor.activeLayerIds.size === 1 &&
-			!editor.activeAction
-		) {
-			console.log('edit layer', layer.id);
-			editor.activeAction = { id: layer.id, type: 'edit' };
-		}
-		removeEventListener('mouseup', onMouseUp);
-	};
-
-	const onDragEnter = (e: DragEvent) => {
-		console.log('dragenter html 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 html layer', e);
-		if (editor.dragged) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-	};
-
-	const onDrop = (e: DragEvent) => {
-		if (!ref) return;
-		console.log('drop html layer', e);
-
-		const { dragged } = editor;
-		if (dragged) {
-			e.preventDefault();
-			e.stopPropagation();
-			const bbox = calculateBoundingBox(calculateLayerTransform(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_no_static_element_interactions -->
-<div
-	class="h-full w-full"
-	style:opacity={editor.activeAction?.id === layer.id && editor.activeAction?.type === 'edit'
-		? 0
-		: null}
-	onmousedown={onMouseDown}
-	ondragenter={onDragEnter}
-	ondragover={onDragOver}
-	ondrop={onDrop}
->
-	<HtmlLayerContent {layer} bind:ref />
-</div>

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

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

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

@@ -1,5 +0,0 @@
-import Root from './html-layer.svelte';
-import HtmlLayerContent from './html-layer-content.svelte';
-import HtmlContent from './html-content.svelte';
-import HtmlLayerEdit from './html-layer-edit.svelte';
-export { Root, Root as HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit };

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

@@ -1,5 +0,0 @@
-import Root from './html-layer.svelte';
-import HtmlLayerContent from './html-layer-content.svelte';
-import HtmlContent from './html-content.svelte';
-import HtmlLayerEdit from './html-layer-edit.svelte';
-export { Root, Root as HtmlLayer, HtmlLayerContent, HtmlContent, HtmlLayerEdit };

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

@@ -1,3 +0,0 @@
-import Root from './image-layer.svelte';
-import ImageLayerContent from './image-layer-content.svelte';
-export { Root, Root as ImageLayer, ImageLayerContent };

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

@@ -1,3 +0,0 @@
-import Root from './image-layer.svelte';
-import ImageLayerContent from './image-layer-content.svelte';
-export { Root, Root as ImageLayer, ImageLayerContent };

package/dist/components/presentation-editor/menu/slide-menu-content.svelte.d.ts

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

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

@@ -1,4 +0,0 @@
-import { PresentationEditor } from './presentation-editor.svelte.js';
-declare const PresentationEditor: any;
-type PresentationEditor = ReturnType<typeof PresentationEditor>;
-export default PresentationEditor;