@peteai/presentation-editor 0.0.1 → 0.0.2

package/README.md

@@ -1,58 +1,192 @@
-# create-svelte
+# @peteai/presentation-editor
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+## Introduction
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+This project is a Svelte component library which lets you create a customizable presentation editors.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Install
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm install @peteai/presentation-editor
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Types
+
+```typescript
+type Image = {
+	id: string;
+	src: string;
+	width: number;
+	height: number;
+};
+
+interface BaseLayer {
+	id: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	rotate: number | null;
+	opacity: number | null;
+	sortOrder: number;
+}
+
+interface HtmlLayer extends BaseLayer {
+	type: 'html';
+	scale: number | null;
+	html: JSONContent;
+}
+
+type LayerBorder = {
+	borderStyle: 'solid' | 'dashed' | 'dotted' | null;
+	borderWidth: number | null;
+	borderColor: string | null;
+};
+
+interface ImageLayer extends BaseLayer, LayerBorder {
+	type: 'image';
+	scale: number | null;
+	image: Image;
+	offsetX: number | null;
+	offsetY: number | null;
+	cornerRadius: number | null;
+	flipX: boolean;
+	flipY: boolean;
+}
+
+type Layer = HtmlLayer | ImageLayer;
+
+type Slide = {
+	id: string;
+	backgroundColor: string | null;
+	layers: Layer[];
+	sortOrder: number;
+};
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
+### Html editor
 
-To build your library:
+PresentationEditor is using `Tiptap` editor for `HtmlLayer` content editing.
 
-```bash
-npm run package
-```
+`JSONContent` type provided by `@tiptap/core` is used for html content of `HtmlLayer` to store data in json format.
 
-To create a production version of your showcase app:
+## Settings
 
-```bash
-npm run build
-```
+The PresentationEditor component accepts a bunch of settings. Here is a typescript definition of all available settings:
 
-You can preview the production build with `npm run preview`.
+```typescript
+interface BaseOptions {
+	images?: Image[];
+	width?: number;
+	height?: number;
+	generateId?: () => string;
+	onImageUpload?: (file: File) => Promise<Image>;
+	onLayerAdd?: (slideId: string, layer: Layer) => Promise<Layer>;
+	onLayerUpdate?: (slideId: string, layerId: string, layerType: string, changes: object) => void;
+	onLayerRemove?: (slideId: string, layerId: string, layerType: string) => Promise<void>;
+}
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+interface MultipleModeOption extends BaseOptions {
+	mode?: 'multiple';
+	slides?: Slide[];
+	onSlideAdd?: (slide: Slide) => Promise<Slide>;
+	onSlideUpdate?: (slideId: string, changes: object) => void;
+	onSlideRemove?: (slideId: string) => Promise<void>;
+}
 
-## Publishing
+interface SingleModeOption extends BaseOptions {
+	mode: 'single';
+	slide?: Slide;
+}
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+export type PresentationEditorOptions = MultipleModeOption | SingleModeOption;
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+## Getting Started
+
+```typescript
+import { createEditor } from '@peteai/presentation-editor';
+
+// images list
+const images: Image[];
+// slides list
+const slides: Slide[];
+
+const editor = new createEditor({
+	target: document.querySelector('.target'),
+	props: {
+		// function for new slides and layers ids generation
+		generateId: () => crypto.randomUUID(),
+		images,
+		slides,
+		onImageUpload: async (file) => {
+			// called when user uploads image
+			// callback to store file and return Image
+			// which will be added to the images list
+			// new ImageLayer gonna be created if image file was dropped on slide
+			// ...
+			return image;
+		},
+		onSlideAdd: async (slide) => {
+			// called when new slide is added
+			// expect Slide to be returned to overwrite newly created slide
+		},
+		onSlideUpdate: async (slideId, values) => {
+			// called when slide is updated
+		},
+		onSlideRemove: async (slideId) => {
+			// called when slide is removed
+		},
+		onLayerAdd: async (slideId, layer) => {
+			// called when new layer is added
+			// expect Slide to be returned to overwrite newly created layer
+		},
+		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+			// called when layer is updated
+		},
+		onLayerRemove: async (slideId, layerId, layerType) => {
+			// called when layer is removed
+		},
+	},
+});
+```
 
-```bash
-npm publish
+## Single Slide Mode
+
+```typescript
+import { createEditor } from '@peteai/presentation-editor';
+
+// images list
+const images: Image[];
+// slides list
+const slide: Slide;
+
+const editor = new createEditor({
+	target: document.querySelector('.target'),
+	props: {
+		mode: 'single',
+		// function for new slides and layers ids generation
+		generateId: () => crypto.randomUUID(),
+		images,
+		slide,
+		onImageUpload: async (file) => {
+			// called when user uploads image
+			// callback to store file and return Image
+			// which will be added to the images list
+			// new ImageLayer gonna be created if image file was dropped on slide
+			// ...
+			return image;
+		},
+		onLayerAdd: async (slideId, layer) => {
+			// called when new layer is added
+			// expect Slide to be returned to overwrite newly created layer
+		},
+		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+			// called when layer is updated
+		},
+		onLayerRemove: async (slideId, layerId, layerType) => {
+			// called when layer is removed
+		},
+	},
+});
 ```

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

@@ -19,7 +19,7 @@
 
 	let editorOptions: PresentationEditorOptions = $props();
 
-	const presentationEditor = new PresentationEditor(editorOptions);
+	export const presentationEditor = new PresentationEditor(editorOptions);
 
 	let activeSidebarTab: ActiveSidebar = $state('images');
 
@@ -64,7 +64,7 @@
 	};
 
 	let sliderValue = $state(convertZoomToSlider(presentationEditor.zoom));
-	const setZoom = (zoom: number) => {
+	export const setZoom = (zoom: number) => {
 		sliderValue = convertZoomToSlider(zoom);
 	};
 

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

@@ -1,7 +1,4 @@
 import { PresentationEditor } from './presentation-editor.svelte.js';
-declare const PresentationEditor: import("svelte").Component<PresentationEditorOptions, {
-    fillScreen: () => Promise<void>;
-    fitToScreen: () => void;
-}, "">;
+declare const PresentationEditor: any;
 type PresentationEditor = ReturnType<typeof PresentationEditor>;
 export default PresentationEditor;

package/dist/index.d.ts

@@ -1,9 +1,8 @@
 import { PresentationEditor } from './components/presentation-editor/index.js';
-declare const createEditor: ({ target, props }: {
-    target: any;
-    props: any;
-}) => {
-    fillScreen: () => Promise<void>;
-    fitToScreen: () => void;
+import type { PresentationEditorOptions } from './components/presentation-editor/presentation-editor.svelte.js';
+type createEditorOptions = {
+    target: Document | Element | ShadowRoot;
+    props: PresentationEditorOptions;
 };
+declare const createEditor: (options: createEditorOptions) => Record<string, any>;
 export { PresentationEditor, createEditor };

package/dist/index.js

@@ -1,8 +1,5 @@
 // Reexport your entry components here
 import { mount } from 'svelte';
 import { PresentationEditor } from './components/presentation-editor/index.js';
-const createEditor = ({ target, props }) => mount(PresentationEditor, {
-    target,
-    props,
-});
+const createEditor = (options) => mount(PresentationEditor, options);
 export { PresentationEditor, createEditor };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@peteai/presentation-editor",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",