@topol.io/editor 0.0.0-alfa.3 → 0.0.0-alfa.7

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2022 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

@@ -1 +1,88 @@
-# Topol Plugin NPM package
+  <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
+
+//or
+
+yarn add @topol.io/editor
+```
+
+## Usage
+
+Add HTML element Editor will load to
+
+```html
+<div id="app" style="position: absolute; width: 100%; height: 100%"></div>
+```
+
+In your JS or TS file import TopolPlugin, initialize the editor, as an ID provide the id you defined the HTML, in this example its `app`
+
+For more options see the docs for [TopolOptions configuration](https://topol.io/docs#plugin-configuration)
+
+```js
+import TopolPlugin from "@topol.io/editor";
+
+const TOPOL_OPTIONS = {
+  id: "#app",
+  authorize: {
+    apiKey: "YOUR_API_TOKEN",
+    userId: "some-user-id",
+  },
+  callbacks: {
+    onSave(json, html) {},
+  },
+};
+
+TopolPlugin.init(TOPOL_OPTIONS);
+```
+
+## Call Topol Plugin actions
+
+To call actions to the editor import:
+
+```js
+import { TopolPlugin } from "@topol.io/editor";
+
+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>
+
+<br>
+## TypeScript
+
+Topol Editor provides full TypeScript integration and exports all necessary types.
+
+```ts
+import { ITopolOptions, INotification, ISavedBlock } from "@topol.io/editor";
+```

package/dist/topol-plugin.es.js

@@ -49,8 +49,8 @@ function ieOnEnd(script, cb) {
   };
 }
 const TOPOL_URL = "https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js";
-const createTopolPlugin = (options) => {
-  const init = () => {
+const TopolPlugin = {
+  init: (options) => {
     return new Promise((resolve, reject) => {
       loadScript(TOPOL_URL, (err) => {
         if (err !== null) {
@@ -60,61 +60,45 @@ const createTopolPlugin = (options) => {
         resolve(true);
       });
     });
-  };
-  const save = () => {
+  },
+  save: () => {
     window.TopolPlugin.save();
-  };
-  const load2 = (json) => {
+  },
+  load: (json) => {
     window.TopolPlugin.load(json);
-  };
-  const togglePreview = () => {
+  },
+  togglePreview: () => {
     window.TopolPlugin.togglePreview();
-  };
-  const togglePreviewSize = () => {
+  },
+  togglePreviewSize: () => {
     window.TopolPlugin.togglePreviewSize();
-  };
-  const chooseFile = (url) => {
+  },
+  chooseFile: (url) => {
     window.TopolPlugin.chooseFile(url);
-  };
-  const undo = () => {
+  },
+  undo: () => {
     window.TopolPlugin.undo();
-  };
-  const redo = () => {
+  },
+  redo: () => {
     window.TopolPlugin.redo();
-  };
-  const setSavedBlocks = (savedBlocks) => {
+  },
+  setSavedBlocks: (savedBlocks) => {
     window.TopolPlugin.setSavedBlocks(savedBlocks);
-  };
-  const createNotification = (notification) => {
+  },
+  createNotification: (notification) => {
     window.TopolPlugin.createNotification(notification);
-  };
-  const changeEmailToMobile = () => {
+  },
+  changeEmailToMobile: () => {
     window.TopolPlugin.changeEmailToMobile();
-  };
-  const changeEmailToDesktop = () => {
+  },
+  changeEmailToDesktop: () => {
     window.TopolPlugin.changeEmailToDesktop();
-  };
-  const toggleBlocksAndStructuresVisibility = () => {
+  },
+  toggleBlocksAndStructuresVisibility: () => {
     window.TopolPlugin.toggleBlocksAndStructuresVisibility();
-  };
-  const destroy = () => {
+  },
+  destroy: () => {
     window.TopolPlugin.destroy();
-  };
-  return {
-    init,
-    save,
-    load: load2,
-    togglePreview,
-    togglePreviewSize,
-    chooseFile,
-    undo,
-    redo,
-    setSavedBlocks,
-    createNotification,
-    changeEmailToMobile,
-    changeEmailToDesktop,
-    toggleBlocksAndStructuresVisibility,
-    destroy
-  };
+  }
 };
-export { createTopolPlugin as default };
+export { TopolPlugin as default };

package/dist/topol-plugin.umd.js

@@ -1 +1 @@
-(function(d,a){typeof exports=="object"&&typeof module!="undefined"?module.exports=a():typeof define=="function"&&define.amd?define(a):(d=typeof globalThis!="undefined"?globalThis:d||self,d["topol-plugin"]=a())})(this,function(){"use strict";var d=function(i,o,l){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("script");typeof o=="function"&&(l=o,o={}),o=o||{},l=l||function(){},n.type=o.type||"text/javascript",n.charset=o.charset||"utf8",n.async="async"in o?!!o.async:!0,n.src=i,o.attrs&&a(n,o.attrs),o.text&&(n.text=""+o.text);var s="onload"in n?c:g;s(n,l),n.onload||c(n,l),r.appendChild(n)};function a(e,i){for(var o in i)e.setAttribute(o,i[o])}function c(e,i){e.onload=function(){this.onerror=this.onload=null,i(null,e)},e.onerror=function(){this.onerror=this.onload=null,i(new Error("Failed to load "+this.src),e)}}function g(e,i){e.onreadystatechange=function(){this.readyState!="complete"&&this.readyState!="loaded"||(this.onreadystatechange=null,i(null,e))}}const w="https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js";return e=>({init:()=>new Promise((t,f)=>{d(w,u=>{u!==null&&f(u),window.TopolPlugin.init(e),t(!0)})}),save:()=>{window.TopolPlugin.save()},load:t=>{window.TopolPlugin.load(t)},togglePreview:()=>{window.TopolPlugin.togglePreview()},togglePreviewSize:()=>{window.TopolPlugin.togglePreviewSize()},chooseFile:t=>{window.TopolPlugin.chooseFile(t)},undo:()=>{window.TopolPlugin.undo()},redo:()=>{window.TopolPlugin.redo()},setSavedBlocks:t=>{window.TopolPlugin.setSavedBlocks(t)},createNotification:t=>{window.TopolPlugin.createNotification(t)},changeEmailToMobile:()=>{window.TopolPlugin.changeEmailToMobile()},changeEmailToDesktop:()=>{window.TopolPlugin.changeEmailToDesktop()},toggleBlocksAndStructuresVisibility:()=>{window.TopolPlugin.toggleBlocksAndStructuresVisibility()},destroy:()=>{window.TopolPlugin.destroy()}})});
+(function(l,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d():typeof define=="function"&&define.amd?define(d):(l=typeof globalThis!="undefined"?globalThis:l||self,l["topol-plugin"]=d())})(this,function(){"use strict";var l=function(n,e,t){var c=document.head||document.getElementsByTagName("head")[0],i=document.createElement("script");typeof e=="function"&&(t=e,e={}),e=e||{},t=t||function(){},i.type=e.type||"text/javascript",i.charset=e.charset||"utf8",i.async="async"in e?!!e.async:!0,i.src=n,e.attrs&&d(i,e.attrs),e.text&&(i.text=""+e.text);var s="onload"in i?u:a;s(i,t),i.onload||u(i,t),c.appendChild(i)};function d(o,n){for(var e in n)o.setAttribute(e,n[e])}function u(o,n){o.onload=function(){this.onerror=this.onload=null,n(null,o)},o.onerror=function(){this.onerror=this.onload=null,n(new Error("Failed to load "+this.src),o)}}function a(o,n){o.onreadystatechange=function(){this.readyState!="complete"&&this.readyState!="loaded"||(this.onreadystatechange=null,n(null,o))}}const r="https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js";return{init:o=>new Promise((n,e)=>{l(r,t=>{t!==null&&e(t),window.TopolPlugin.init(o),n(!0)})}),save:()=>{window.TopolPlugin.save()},load:o=>{window.TopolPlugin.load(o)},togglePreview:()=>{window.TopolPlugin.togglePreview()},togglePreviewSize:()=>{window.TopolPlugin.togglePreviewSize()},chooseFile:o=>{window.TopolPlugin.chooseFile(o)},undo:()=>{window.TopolPlugin.undo()},redo:()=>{window.TopolPlugin.redo()},setSavedBlocks:o=>{window.TopolPlugin.setSavedBlocks(o)},createNotification:o=>{window.TopolPlugin.createNotification(o)},changeEmailToMobile:()=>{window.TopolPlugin.changeEmailToMobile()},changeEmailToDesktop:()=>{window.TopolPlugin.changeEmailToDesktop()},toggleBlocksAndStructuresVisibility:()=>{window.TopolPlugin.toggleBlocksAndStructuresVisibility()},destroy:()=>{window.TopolPlugin.destroy()}}});

package/dist/types/src/main.d.ts

@@ -7,8 +7,8 @@ declare global {
         TopolPlugin: ITopolPlugin;
     }
 }
-declare const createTopolPlugin: (options: ITopolOptions) => {
-    init: () => Promise<boolean | string>;
+declare const TopolPlugin: {
+    init: (options: ITopolOptions) => Promise<boolean | string>;
     save: () => void;
     load: (json: unknown) => void;
     togglePreview: () => void;
@@ -23,4 +23,7 @@ declare const createTopolPlugin: (options: ITopolOptions) => {
     toggleBlocksAndStructuresVisibility: () => void;
     destroy: () => void;
 };
-export default createTopolPlugin;
+export default TopolPlugin;
+export type { ITopolOptions };
+export type { INotification };
+export type { ISavedBlock };

package/package.json

@@ -1,21 +1,33 @@
 {
   "name": "@topol.io/editor",
-  "version": "0.0.0-alfa.3",
+  "description": "Official package for Topol Editor",
+  "keywords": [
+    "plugin",
+    "editor",
+    "email",
+    "topol",
+    "topol.io",
+    "email templates"
+  ],
+  "author": "Topol.io",
+  "homepage": "https://topol.io",
+  "license": "Apache-2.0",
+  "version": "0.0.0-alfa.7",
   "files": [
     "dist"
   ],
   "module": "./dist/topol-plugin.es.js",
-  "types": "./dist/src/main.d.ts",
+  "types": "./dist/types/src/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/topol-plugin.es.js",
       "require": "./dist/topol-plugin.umd.js",
-      "types": "./dist/src/main.d.ts"
+      "types": "./dist/types/src/main.d.ts"
     }
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && tsc",
     "lint": "eslint --config '.eslintrc.js' ./**/*.ts --fix",
     "format": "prettier --write .",
     "build:types": "tsc"