@peteai/presentation-editor 0.0.5 → 0.0.7

package/dist/components/editor/types.d.ts

@@ -0,0 +1,282 @@
+import { type JSONContent } from '@tiptap/core';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ActiveSidebarTab = 'text' | 'uploads';
+type Colored = 'background' | 'text' | 'border';
+export type ActiveSidebarPopup = 'position' | 'font' | `${Colored}Color`;
+export type Fonts = {
+    [key: string]: {
+        type: string;
+    };
+};
+export type Image = {
+    id: string;
+    src: string;
+    width: number;
+    height: number;
+};
+export type CursorTooltip = {
+    x: number;
+    y: number;
+    text: string;
+};
+export interface Transform {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotate: number;
+    scale: number;
+}
+interface BaseLayer extends Transform {
+    id: string;
+    groupId: string | null;
+    opacity: number;
+    sortOrder: number;
+    locked: boolean;
+}
+export interface TextLayer extends BaseLayer {
+    type: 'text';
+    html: JSONContent;
+}
+export type LayerBorder = {
+    borderStyle: 'solid' | 'dashed' | 'dotted';
+    borderWidth: number;
+    borderColor: string;
+};
+export interface ImageLayer extends BaseLayer, LayerBorder {
+    type: 'image';
+    image: Image;
+    offsetX: number;
+    offsetY: number;
+    cornerRadius: number;
+    flipX: boolean;
+    flipY: boolean;
+}
+export type SimpleLayer = TextLayer | ImageLayer;
+export interface GroupLayer extends Omit<BaseLayer, 'groupId'> {
+    type: 'group';
+}
+export type Layer = GroupLayer | SimpleLayer;
+export type Gradient = {
+    type: 'linear90' | 'linear180' | 'linear135' | 'radialCenter' | 'radialTopLeft';
+    colors: string[];
+};
+export type BackgroundImage = Pick<ImageLayer, 'rotate' | 'opacity' | 'scale' | 'image' | 'offsetX' | 'offsetY' | 'flipX' | 'flipY'>;
+export type Page = {
+    id: string;
+    backgroundColor: string | null;
+    backgroundImage: BackgroundImage | null;
+    backgroundLocked: boolean;
+    layers: Layer[];
+    sortOrder: number;
+    locked: boolean;
+};
+export type ActiveAction = {
+    id: string;
+    type: string;
+    cursor?: string;
+    tooltip?: CursorTooltip | null;
+};
+interface BaseLayerGuide {
+    id: string;
+    type: string;
+    style: 'solid' | 'dashed' | 'dotted';
+}
+export interface LineLayerGuide extends BaseLayerGuide {
+    type: 'horizontal' | 'vertical';
+    x: number;
+    y: number;
+    length: number;
+}
+export interface BoxLayerGuide extends BaseLayerGuide {
+    type: 'box';
+    inset: number;
+}
+export type ActiveLayerGuide = LineLayerGuide | BoxLayerGuide;
+export type TextLayerInitial = {
+    layer: {
+        initial: TextLayer;
+        state: TextLayer;
+    };
+    groupLayer?: {
+        initial: GroupLayer;
+        state: GroupLayer;
+        childrenInitial: SimpleLayer[];
+        childrenState: SimpleLayer[];
+    };
+};
+interface BaseDragged {
+    x: number;
+    y: number;
+    offsetX: number;
+    offsetY: number;
+    opacity: number;
+    hidden: boolean;
+    sticky: boolean;
+    inside: boolean;
+    initialScale: number;
+    scale: number;
+    customScale?: number | null;
+    ref?: HTMLDivElement;
+}
+export interface DraggedImage extends BaseDragged {
+    image: ImageLayer['image'];
+}
+export interface DraggedHtml extends BaseDragged {
+    html: TextLayer['html'];
+}
+export type Dragged = DraggedHtml | DraggedImage;
+interface BaseEditorEvent {
+    type: string;
+    data: object;
+}
+interface EditorPageAddEvent extends BaseEditorEvent {
+    type: 'pageAdd';
+    data: {
+        page: Page;
+    };
+}
+interface EditorPageUpdateEvent extends BaseEditorEvent {
+    type: 'pageUpdate';
+    data: {
+        pageId: Page['id'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorPageRemoveEvent extends BaseEditorEvent {
+    type: 'pageRemove';
+    data: {
+        pageId: Page['id'];
+    };
+}
+interface EditorBackgroundImageAddEvent extends BaseEditorEvent {
+    type: 'backgroundImageAdd';
+    data: {
+        pageId: Page['id'];
+        backgroundImage: BackgroundImage;
+    };
+}
+interface EditorBackgroundImageUpdateEvent extends BaseEditorEvent {
+    type: 'backgroundImageUpdate';
+    data: {
+        pageId: Page['id'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorBackgroundImageRemoveEvent extends BaseEditorEvent {
+    type: 'backgroundImageRemove';
+    data: {
+        pageId: Page['id'];
+    };
+}
+interface EditorLayerAddEvent extends BaseEditorEvent {
+    type: 'layerAdd';
+    data: {
+        pageId: Page['id'];
+        layer: Layer;
+    };
+}
+interface EditorLayerUpdateEvent extends BaseEditorEvent {
+    type: 'layerUpdate';
+    data: {
+        pageId: Page['id'];
+        layerId: Layer['id'];
+        layerType: Layer['type'];
+        diff: {
+            [key: string]: any;
+        };
+    };
+}
+interface EditorLayerRemoveEvent extends BaseEditorEvent {
+    type: 'layerRemove';
+    data: {
+        pageId: Page['id'];
+        layerId: Layer['id'];
+        layerType: Layer['type'];
+    };
+}
+export type EditorEvent = EditorPageAddEvent | EditorPageUpdateEvent | EditorPageRemoveEvent | EditorBackgroundImageAddEvent | EditorBackgroundImageUpdateEvent | EditorBackgroundImageRemoveEvent | EditorLayerAddEvent | EditorLayerUpdateEvent | EditorLayerRemoveEvent;
+export type PageAddAction = {
+    type: 'pageAdd';
+    page: Page;
+};
+export type PageRemoveAction = {
+    type: 'pageRemove';
+    page: Page;
+    newPage?: Page;
+};
+export type PageUpdateAction = {
+    type: 'pageUpdate';
+    pageId: Page['id'];
+    undo: object;
+    redo: object;
+};
+export type LayerAddAction = {
+    type: 'layerAdd';
+    pageId: Page['id'];
+    layer: Layer;
+};
+export type LayerRemoveAction = {
+    type: 'layerRemove';
+    pageId: Page['id'];
+    layer: Layer;
+};
+export type LayerUpdateAction = {
+    type: 'layerUpdate';
+    pageId: Page['id'];
+    layer: {
+        id: string;
+        type: string;
+    };
+    undo: object;
+    redo: object;
+};
+export type BackgroundImageAddAction = {
+    type: 'backgroundImageAdd';
+    pageId: Page['id'];
+    backgroundImage: BackgroundImage;
+    previousBackgroundImage: Page['backgroundImage'];
+};
+export type BackgroundImageRemoveAction = {
+    type: 'backgroundImageRemove';
+    pageId: Page['id'];
+    previousBackgroundImage: Page['backgroundImage'];
+};
+export type BackgroundImageUpdateAction = {
+    type: 'backgroundImageUpdate';
+    pageId: Page['id'];
+    undo: object;
+    redo: object;
+};
+export type HistoryAction = PageAddAction | PageUpdateAction | PageRemoveAction | LayerAddAction | LayerRemoveAction | LayerUpdateAction | BackgroundImageAddAction | BackgroundImageRemoveAction | BackgroundImageUpdateAction;
+interface BaseOptions {
+    fonts?: Fonts;
+    images?: Image[];
+    width?: number;
+    height?: number;
+    generateId?: () => string;
+    loadFont?: (family: string) => Promise<void>;
+    searchFonts?: (q: string) => string[];
+    onImageUpload?: (file: File) => Promise<Image>;
+    onUpdate?: (events: EditorEvent[], pages: Page[]) => void;
+}
+interface MultipleModeOption extends BaseOptions {
+    mode?: 'multiple';
+    pages?: Page[];
+}
+interface SingleModeOption extends BaseOptions {
+    mode: 'single';
+    page?: Page;
+}
+export type EditorOptions = MultipleModeOption | SingleModeOption;
+export interface PageOptions extends HTMLAttributes<HTMLDivElement> {
+    page: Page;
+    thumbScale?: number;
+    fonts?: Fonts;
+    loadFont?: (family: string) => Promise<void>;
+}
+export {};

package/dist/components/{presentation-editor → editor}/utils.d.ts

@@ -1,9 +1,9 @@
-import type { Gradient, Slide } from './types.js';
+import type { Gradient, Page } from './types.js';
 export declare const arraysEqual: (a: unknown[], b: unknown[]) => boolean;
 export declare const checkImage: (url: string) => Promise<HTMLImageElement>;
 export declare function gradientToString(gradient: Gradient): string;
 export declare function stringToGradient(value: string): Gradient;
-export declare const getSlides: () => Slide[];
+export declare const getPages: () => Page[];
 export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlign, uppercase, bold, italic, }: {
     text: string;
     fontSize?: number;
@@ -31,7 +31,7 @@ export declare const buildParagraphHtml: ({ text, fontSize, lineHeight, textAlig
         }[];
     }[];
 };
-export declare const buildHtmlLayerParagraphFields: ({ text }: {
+export declare const buildTextLayerParagraphFields: ({ text }: {
     text: string;
 }) => {
     html: {
@@ -44,11 +44,19 @@ export declare const buildHtmlLayerParagraphFields: ({ text }: {
                 fontSize: number;
                 lineHeight: number;
             };
-            content: {
+            content: ({
+                type: string;
+                content: {
+                    type: string;
+                    text: string;
+                }[];
+                text?: undefined;
+            } | {
                 type: string;
                 text: string;
-            }[];
+                content?: undefined;
+            })[];
         }[];
     };
 };
-export declare const cognitionSlideToJson: (slide: any) => Slide;
+export declare const cognitionPageToJson: (page: any) => Page;

package/dist/components/{presentation-editor → editor}/utils.js

@@ -35,7 +35,7 @@ export function stringToGradient(value) {
         colors,
     };
 }
-export const getSlides = () => [
+export const getPages = () => [
     {
         id: uniqid(),
         backgroundColor: '#5ce1e6',
@@ -46,23 +46,25 @@ export const getSlides = () => [
         layers: [
             {
                 id: uniqid(),
+                groupId: null,
                 x: 200,
                 y: 250,
                 width: 1400,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 1,
                 locked: false,
-                scale: null,
-                rotate: null,
-                opacity: null,
+                scale: 1,
+                rotate: 0,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
                         {
-                            type: 'bulletList',
+                            type: 'list',
                             attrs: {
                                 fontSize: 80,
+                                listStyleType: 'disc',
                             },
                             content: [
                                 {
@@ -142,23 +144,23 @@ export const getSlides = () => [
             },
             {
                 id: uniqid(),
+                groupId: null,
                 x: 200,
                 y: 300,
                 width: 400,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 2,
                 locked: false,
                 scale: 2,
                 rotate: 45,
-                opacity: null,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
                         {
                             type: 'paragraph',
                             attrs: {
-                                color: '#ff914d',
                                 lineHeight: 1.2,
                                 fontSize: 112,
                                 textAlign: 'center',
@@ -168,7 +170,15 @@ export const getSlides = () => [
                                 {
                                     type: 'text',
                                     text: 'Some text',
-                                    marks: [{ type: 'bold' }],
+                                    marks: [
+                                        { type: 'bold' },
+                                        {
+                                            type: 'textStyle',
+                                            attrs: {
+                                                color: '#ff914d',
+                                            },
+                                        },
+                                    ],
                                 },
                             ],
                         },
@@ -177,16 +187,17 @@ export const getSlides = () => [
             },
             {
                 id: uniqid(),
+                groupId: null,
                 x: 1100,
                 y: 100,
                 width: 600,
                 height: 200,
-                type: 'html',
+                type: 'text',
                 sortOrder: 3,
                 locked: false,
-                scale: null,
-                rotate: null,
-                opacity: null,
+                scale: 1,
+                rotate: 0,
+                opacity: 1,
                 html: {
                     type: 'doc',
                     content: [
@@ -241,24 +252,32 @@ const getRandomFontFamily = () => {
     const randomIndex = Math.floor(Math.random() * fontFamilies.length);
     return fontFamilies[randomIndex];
 };
-const buildParagraphContent = ({ text, fontFamily = getRandomFontFamily(), fontSize = 40, lineHeight = 1.4, textAlign, }) => ({
-    type: 'paragraph',
+const buildParagraphContent = ({ text, fontFamily = getRandomFontFamily(), fontSize = 40, lineHeight = 1.4, textAlign, listItem, }) => ({
+    type: listItem ? 'listItem' : 'paragraph',
     attrs: {
         fontFamily,
         fontSize,
         lineHeight,
         ...(textAlign && { textAlign }),
     },
-    content: [{ type: 'text', text }],
+    content: [
+        listItem
+            ? {
+                type: 'listItemParagraph',
+                content: [{ type: 'text', text }],
+            }
+            : { type: 'text', text },
+    ],
 });
 const buildBulletListContent = ({ bullets }) => ({
-    type: 'bulletList',
-    content: bullets.map((bullet) => ({
-        type: 'listItem',
-        attrs: {
-            fontSize: 40,
-        },
-        content: [buildParagraphContent({ text: bullet, lineHeight: 1.5 })],
+    type: 'list',
+    attrs: {
+        listStyleType: 'disc',
+    },
+    content: bullets.map((bullet) => buildParagraphContent({
+        text: bullet,
+        lineHeight: 1.5,
+        listItem: true,
     })),
 });
 export const buildParagraphHtml = ({ text, fontSize = 56, lineHeight = 1.4, textAlign, uppercase, bold, italic, }) => {
@@ -287,16 +306,17 @@ export const buildParagraphHtml = ({ text, fontSize = 56, lineHeight = 1.4, text
 };
 const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => ({
     id: uniqid(),
+    groupId: null,
     x: 200,
     y: isTitle ? (withSubheadline ? 300 : 450) : 50,
     width: 1520,
     height: 200,
-    type: 'html',
+    type: 'text',
     sortOrder,
     locked: false,
-    scale: null,
-    rotate: null,
-    opacity: null,
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
     html: {
         type: 'doc',
         content: [
@@ -313,28 +333,29 @@ const buildHeadlineLayer = ({ sortOrder, text, isTitle, withSubheadline, }) => (
 });
 const buildSubheadlineLayer = ({ sortOrder, text, }) => ({
     id: uniqid(),
+    groupId: null,
     x: 400,
     y: 500,
     width: 1120,
     height: 200,
-    type: 'html',
+    type: 'text',
     sortOrder,
     locked: false,
-    scale: null,
-    rotate: null,
-    opacity: null,
+    scale: 1,
+    rotate: 0,
+    opacity: 1,
     html: {
         type: 'doc',
         content: [buildParagraphContent({ text, fontSize: 80, textAlign: 'center' })],
     },
 });
-export const buildHtmlLayerParagraphFields = ({ text }) => ({
+export const buildTextLayerParagraphFields = ({ text }) => ({
     html: {
         type: 'doc',
         content: [buildParagraphContent({ text, lineHeight: 1.5 })],
     },
 });
-const buildHtmlLayerBulletsFields = ({ bullets }) => ({
+const buildTextLayerBulletsFields = ({ bullets }) => ({
     html: {
         type: 'doc',
         content: [buildBulletListContent({ bullets })],
@@ -342,31 +363,40 @@ const buildHtmlLayerBulletsFields = ({ bullets }) => ({
 });
 const buildImageLayerFields = (image) => ({
     image,
+    offsetX: 0,
+    offsetY: 0,
+    cornerRadius: 0,
+    flipX: false,
+    flipY: false,
+    borderStyle: 'solid',
+    borderWidth: 0,
+    borderColor: '#000000',
 });
-const buildColumnLayer = ({ sortOrder, slide, isRight, }) => {
-    const type = slide[isRight ? 'right_type' : 'left_type'];
+const buildColumnLayer = ({ sortOrder, page, isRight, }) => {
+    const type = page[isRight ? 'right_type' : 'left_type'];
     return {
         id: uniqid(),
+        groupId: null,
         x: isRight ? 1020 : 100,
         y: 220,
         width: 800,
         height: 800,
-        type: type === 'image' ? 'image' : 'html',
+        type: type === 'image' ? 'image' : 'text',
         sortOrder,
         locked: false,
-        scale: null,
-        rotate: null,
-        opacity: null,
+        scale: 1,
+        rotate: 0,
+        opacity: 1,
         ...(type === 'image'
-            ? buildImageLayerFields(slide[isRight ? 'right_image' : 'left_image'])
+            ? buildImageLayerFields(page[isRight ? 'right_image' : 'left_image'])
             : type === 'bullets'
-                ? buildHtmlLayerBulletsFields({
-                    bullets: slide[isRight ? 'right_bullets' : 'left_bullets'],
+                ? buildTextLayerBulletsFields({
+                    bullets: page[isRight ? 'right_bullets' : 'left_bullets'],
                 })
-                : buildHtmlLayerParagraphFields({ text: slide[isRight ? 'right_text' : 'left_text'] })),
+                : buildTextLayerParagraphFields({ text: page[isRight ? 'right_text' : 'left_text'] })),
     };
 };
-let slideSortOrder = 1;
+let pageSortOrder = 1;
 const generateBackgroundColor = () => {
     const generateRandomHex = (length) => Math.floor(Math.random() * Math.pow(16, length))
         .toString(16)
@@ -395,49 +425,53 @@ const generateBackgroundColor = () => {
         return randomHexColor();
     }
 };
-export const cognitionSlideToJson = (slide) => {
+export const cognitionPageToJson = (page) => {
     let sortOrder = 1;
     const layers = [];
-    if (slide.type === 'title') {
+    if (page.type === 'title') {
         layers.push(buildHeadlineLayer({
             sortOrder: sortOrder++,
-            text: slide.headline,
+            text: page.headline,
             isTitle: true,
-            withSubheadline: !!slide.subheadline,
+            withSubheadline: !!page.subheadline,
         }));
-        if (slide.subheadline) {
-            layers.push(buildSubheadlineLayer({ sortOrder: sortOrder++, text: slide.subheadline }));
+        if (page.subheadline) {
+            layers.push(buildSubheadlineLayer({ sortOrder: sortOrder++, text: page.subheadline }));
         }
     }
-    else if (slide.type === 'columns') {
-        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
-        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide }));
-        layers.push(buildColumnLayer({ sortOrder: sortOrder++, slide, isRight: true }));
+    else if (page.type === 'columns') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: page.headline }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, page }));
+        layers.push(buildColumnLayer({ sortOrder: sortOrder++, page, isRight: true }));
     }
-    else if (slide.type === 'bullets') {
-        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: slide.headline }));
+    else if (page.type === 'bullets') {
+        layers.push(buildHeadlineLayer({ sortOrder: sortOrder++, text: page.headline }));
         layers.push({
             id: uniqid(),
+            groupId: null,
             x: 560,
             y: 220,
             width: 800,
             height: 800,
-            type: 'html',
+            type: 'text',
             sortOrder: sortOrder++,
             locked: false,
-            scale: null,
-            rotate: null,
-            opacity: null,
+            scale: 1,
+            rotate: 0,
+            opacity: 1,
             html: {
                 type: 'doc',
-                content: [buildBulletListContent({ bullets: slide.bullets })],
+                content: [buildBulletListContent({ bullets: page.bullets })],
             },
         });
     }
     return {
         id: uniqid(),
-        sortOrder: slideSortOrder++,
+        sortOrder: pageSortOrder++,
         backgroundColor: generateBackgroundColor(),
+        backgroundImage: null,
+        backgroundLocked: false,
+        locked: false,
         layers,
     };
 };

package/dist/components/ui/color-picker/color-picker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import DeleteIcon from 'lucide-svelte/icons/trash-2';
-	import PipetteIcon from 'lucide-svelte/icons/pipette';
+	import DeleteIcon from '@lucide/svelte/icons/trash-2';
+	import PipetteIcon from '@lucide/svelte/icons/pipette';
 	import { untrack } from 'svelte';
 	import { Slider } from 'bits-ui';
 	import { BROWSER } from 'esm-env';

package/dist/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import Check from 'lucide-svelte/icons/check';
-	import Minus from 'lucide-svelte/icons/minus';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
 	import { cn } from '../../../utils.js';
 	import type { Snippet } from 'svelte';
 

package/dist/components/ui/context-menu/context-menu-radio-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import Circle from 'lucide-svelte/icons/circle';
+	import Circle from '@lucide/svelte/icons/circle';
 	import { cn } from '../../../utils.js';
 
 	let {

package/dist/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ContextMenu as ContextMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import ChevronRight from 'lucide-svelte/icons/chevron-right';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import { cn } from '../../../utils.js';
 
 	let {