@topol.io/editor-svelte 0.0.1

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2024 Ecomail s.r.o.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,119 @@
+  <a href="https://topol.io" target="_blank">
+    <img src="https://storage.googleapis.com/topolio17326/plugin-assets/6320/17326/topol-with-bg.png" alt="Tailwind CSS" width="400" height="120">
+  </a>
+
+---
+
+Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.
+
+# Documentation
+
+## Installation
+
+Install Editor from NPM using:
+
+```sh
+npm install @topol.io/editor-svelte
+
+//or
+
+yarn add @topol.io/editor-svelte
+```
+
+## Use in Component
+
+In your Svelte component import and add the simplest options.
+
+For more options see the docs for [TopolOptions configuration](https://topol.io/docs#plugin-configuration)
+
+```js
+import { TopolEditor } from '@topol.io/editor-svelte';
+
+const customOptions = {
+  authorize: {
+    apiKey: 'YOUR_API_TOKEN',
+    userId: 'some-user-id',
+  },
+};
+```
+
+```html
+<TopolEditor options="{customOptions}"></TopolEditor>
+```
+
+## Call Topol Plugin actions
+
+To call actions to the editor import:
+
+```js
+import { TopolPlugin } from '@topol.io/editor-svelte';
+
+const save = () => {
+  TopolPlugin.save();
+};
+```
+
+### List of all available TopolPlugin actions:
+
+| Action                                                        | Description                                                                                                                  |
+| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `TopolPlugin.save()`                                          | Saves the content of the editor [more info](https://topol.io/docs#plugin-configuration)                                      |
+| `TopolPlugin.load(template)`                                  | Loads the provided template [more info](https://topol.io/docs#save-and-load-options)                                         |
+| `TopolPlugin.togglePreview()`                                 | Toggles editor preview [more info](https://topol.io/docs#preview-mode-on-desktop-and-mobile)                                 |
+| `TopolPlugin.togglePreviewSize()`                             | Toggles editor preview size                                                                                                  |
+| `TopolPlugin.undo()`                                          | Undo change in editor [more info](https://topol.io/docs#redo-and-undo)                                                       |
+| `TopolPlugin.redo()`                                          | Redo change in editor [more info](https://topol.io/docs#redo-and-undo)                                                       |
+| `TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[])`       | Sets the saved blocks [more info](https://topol.io/docs#saved-blocks)                                                        |
+| `TopolPlugin.createNotification(notification: INotification)` | Creates editor's notification [more info](https://topol.io/docs#show-custom-notification-in-editor)                          |
+| `TopolPlugin.changeEmailToMobile()`                           | Change email to mobile view [more info](https://topol.io/docs#mobile-first-email-template)                                   |
+| `TopolPlugin.changeEmailToDesktop()`                          | Change email to desktop view [more info](https://topol.io/docs#mobile-first-email-template)                                  |
+| `TopolPlugin.toggleBlocksAndStructuresVisibility()`           | Toggle hidden structures visibility for blocks and structures [more info](https://topol.io/docs#mobile-first-email-template) |
+| `TopolPlugin.destroy()`                                       | Destroys the editor initialization [more info](https://topol.io/docs#working-with-js-frameworks)                             |
+
+<br>
+
+## Editor Events
+
+The callbacks from editor are received as component events.
+
+```html
+<TopolEditor
+  options="{customOptions}"
+  on:onSave="{onSave}"
+></TopolEditor>
+```
+
+### List of all editor events
+
+| Event                | Description                                                                                                               |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `@onSave`            | Returns object which contains html and json of the template} [more info](https://topol.io/docs#onsave-and-onsaveandclose) |
+| `@onSaveAndClose`    | Returns object which contains html and json of the template [more info](https://topol.io/docs#onsave-and-onsaveandclose)  |
+| `@onTestSend`        | Returns object which contains email, html and json of the template [more info](https://topol.io/docs#on-test-send)        |
+| `@onOpenFileManager` | When user clicks file manager open [more info](https://topol.io/docs#custom-file-manager)                                 |
+| `@onLoaded`          | After editor template is loaded using `TopolPlugin.load()`                                                                |
+| `@onInit`            | When editor inits [more info](https://topol.io/docs#custom-file-manager)                                                  |
+| `@onBlockSave`       | When user saves block in editor, returns object of type ISavedBlock [more info](https://topol.io/docs#saved-blocks)       |
+| `@onBlockRemove`     | When user removes saved block, returns id of saved block to be removed [more info](https://topol.io/docs#saved-blocks)    |
+| `@onBlockEdit`       | When user edits saved block, returns id of saved block to be updated [more info](https://topol.io/docs#saved-blocks)      |
+| `@onUndoChange`      | When user clicks undo button, retunrs number of steps user undone [more info](https://topol.io/docs#redo-and-undo)        |
+| `@unRedoChange`      | When user clicks redo button, retunrs number of steps user redone [more info](https://topol.io/docs#redo-and-undo)        |
+| `@onPreview`         | When user switches to preview                                                                                             |
+| `@onAlert`           | When alert appears in editor [more info](https://topol.io/docs#show-custom-notification-in-editor)                        |
+| `@onClose`           | When close is click inside WindowBar [more info](https://topol.io/docs#window-bar)                                        |
+
+<br>
+
+## TypeScript
+
+Topol Editor provides full TypeScript integration and exports all necessary types.
+
+```svelte
+<script lang="ts">
+import {
+  ITopolOptions,
+  INotification,
+  ISavedBlock,
+} from '@topol.io/editor-svelte';
+</script>
+```

package/dist/TopolEditor.svelte

@@ -0,0 +1,75 @@
+<script context="module"></script>
+  
+<script>import { createEventDispatcher, onMount, onDestroy } from "svelte";
+import TopolPlugin from "@topol.io/editor";
+const EDITOR_HTML_ID = "topol-editor-id";
+export let options;
+export let stage = "production";
+const dispatch = createEventDispatcher();
+const mergeOptions = () => {
+  const callbacks = {
+    onSave(json, html) {
+      dispatch("onSave", { json, html });
+    },
+    onSaveAndClose(json, html) {
+      dispatch("onSaveAndClose", { json, html });
+    },
+    onTestSend(email, json, html) {
+      dispatch("onTestSend", { email, json, html });
+    },
+    onOpenFileManager() {
+      dispatch("onOpenFileManager");
+    },
+    onLoaded() {
+      dispatch("onLoaded");
+    },
+    onBlockSave(block) {
+      dispatch("onBlockSave", block);
+    },
+    onBlockRemove(blockId) {
+      dispatch("onBlockRemove", blockId);
+    },
+    onBlockEdit(blockId) {
+      dispatch("onBlockEdit", blockId);
+    },
+    onInit() {
+      dispatch("onInit");
+    },
+    onUndoChange(count) {
+      dispatch("onUndoChange", count);
+    },
+    onRedoChange(count) {
+      dispatch("onRedoChange", count);
+    },
+    onPreview(html) {
+      dispatch("onPreview", html);
+    },
+    onAlert(notification) {
+      dispatch("onAlert", notification);
+    },
+    onClose() {
+      dispatch("onClose");
+    },
+    //@ts-expect-error
+    onBannerClick(json, html) {
+      dispatch("onBannerClick", { json, html });
+    },
+    onEdittedWithoutSaveChanged(hasUnsavedChanges) {
+      dispatch("onEdittedWithoutSaveChanged", hasUnsavedChanges);
+    }
+  };
+  return { id: "#" + EDITOR_HTML_ID, ...options, callbacks: { ...callbacks } };
+};
+onMount(async () => {
+  const mergedTopolOptinos = mergeOptions();
+  await TopolPlugin.init(mergedTopolOptinos, { stage });
+});
+onDestroy(() => {
+  TopolPlugin.destroy();
+});
+</script>
+  
+<div
+  id="{EDITOR_HTML_ID}"
+  style="position: absolute; width: 100%; height: 100vh"
+></div>

package/dist/TopolEditor.svelte.d.ts

@@ -0,0 +1,45 @@
+import { SvelteComponent } from "svelte";
+export type ISvelteOptions = Omit<ITopolOptions, 'id' | 'callbacks'>;
+export type ISaveData = {
+    json: unknown;
+    html: unknown;
+};
+export type ISendTestData = {
+    email: string;
+    json: unknown;
+    html: unknown;
+};
+import type { ITopolOptions, IStage } from '@topol.io/editor';
+declare const __propDef: {
+    props: {
+        options: ISvelteOptions;
+        stage?: IStage | undefined;
+    };
+    events: {
+        onSave: CustomEvent<any>;
+        onSaveAndClose: CustomEvent<any>;
+        onTestSend: CustomEvent<any>;
+        onOpenFileManager: CustomEvent<any>;
+        onLoaded: CustomEvent<any>;
+        onBlockSave: CustomEvent<any>;
+        onBlockRemove: CustomEvent<any>;
+        onBlockEdit: CustomEvent<any>;
+        onInit: CustomEvent<any>;
+        onUndoChange: CustomEvent<any>;
+        onRedoChange: CustomEvent<any>;
+        onPreview: CustomEvent<any>;
+        onAlert: CustomEvent<any>;
+        onClose: CustomEvent<any>;
+        onBannerClick: CustomEvent<any>;
+        onEdittedWithoutSaveChanged: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TopolEditorProps = typeof __propDef.props;
+export type TopolEditorEvents = typeof __propDef.events;
+export type TopolEditorSlots = typeof __propDef.slots;
+export default class TopolEditor extends SvelteComponent<TopolEditorProps, TopolEditorEvents, TopolEditorSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as TopolPlugin } from '@topol.io/editor';
+export type { INotification, IStage, ISavedBlock } from '@topol.io/editor';
+export { default as TopolEditor } from './TopolEditor.svelte';
+export type { ISvelteOptions as ITopolOptions } from './TopolEditor.svelte';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default as TopolPlugin } from '@topol.io/editor';
+export { default as TopolEditor } from './TopolEditor.svelte';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@topol.io/editor-svelte",
+  "description": "Official Svelte package for Topol Editor.",
+  "keywords": [
+    "plugin",
+    "editor",
+    "email",
+    "topol",
+    "topol.io",
+    "topol-svelte",
+    "email-svelte",
+    "email templates"
+  ],
+  "author": "Topol.io",
+  "homepage": "https://topol.io",
+  "license": "Apache-2.0",
+  "files": [
+    "dist"
+  ],
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "peerDependencies": {
+    "svelte": "^4.2.8"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@topol.io/editor": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "svelte-package"
+  }
+}