@topol.io/editor-react 0.0.0-alfa.0

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.md

@@ -0,0 +1,107 @@
+  <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-react
+
+//or 
+
+yarn add @topol.io/editor-react
+```
+
+## Use in Component
+In your React 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-react';
+
+const customOptions = {
+  authorize: {
+    apiKey: "YOUR_API_TOKEN",
+    userId: "some-user-id",
+  },  
+};
+
+```
+
+```jsx
+<TopolEditor options={customOptions}></TopolEditor>
+```
+
+
+## Call Topol Plugin actions
+To call actions to the editor import: 
+
+```js
+import { TopolPlugin } from '@topol.io/editor-react';
+
+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.
+
+```tsx
+<TopolEditor options={customOptions} onSave={handleOnSave}></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` | When editor is fully loaded |
+| `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)|
+
+<br>
+
+## TypeScript
+
+Topol Editor provides full TypeScript integration and exports all necessary types.
+
+```tsx
+import { ITopolOptions, INotification, ISavedBlock }  from '@topol.io/editor-react';  
+```

package/dist/topol-editor-react.es.js

@@ -0,0 +1,327 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import require$$0, { useEffect } from "react";
+var loadScript = function load(src, opts, cb) {
+  var head = document.head || document.getElementsByTagName("head")[0];
+  var script = document.createElement("script");
+  if (typeof opts === "function") {
+    cb = opts;
+    opts = {};
+  }
+  opts = opts || {};
+  cb = cb || function() {
+  };
+  script.type = opts.type || "text/javascript";
+  script.charset = opts.charset || "utf8";
+  script.async = "async" in opts ? !!opts.async : true;
+  script.src = src;
+  if (opts.attrs) {
+    setAttributes(script, opts.attrs);
+  }
+  if (opts.text) {
+    script.text = "" + opts.text;
+  }
+  var onend = "onload" in script ? stdOnEnd : ieOnEnd;
+  onend(script, cb);
+  if (!script.onload) {
+    stdOnEnd(script, cb);
+  }
+  head.appendChild(script);
+};
+function setAttributes(script, attrs) {
+  for (var attr in attrs) {
+    script.setAttribute(attr, attrs[attr]);
+  }
+}
+function stdOnEnd(script, cb) {
+  script.onload = function() {
+    this.onerror = this.onload = null;
+    cb(null, script);
+  };
+  script.onerror = function() {
+    this.onerror = this.onload = null;
+    cb(new Error("Failed to load " + this.src), script);
+  };
+}
+function ieOnEnd(script, cb) {
+  script.onreadystatechange = function() {
+    if (this.readyState != "complete" && this.readyState != "loaded")
+      return;
+    this.onreadystatechange = null;
+    cb(null, script);
+  };
+}
+const TOPOL_URL = "https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js";
+const TOPOL_DEV_URL = "https://d5aoblv5p04cg.cloudfront.net/develop/loader/build.js";
+const TopolPlugin = {
+  init: (topolOptions, options) => {
+    return new Promise((resolve, reject) => {
+      const topolURl = (options == null ? void 0 : options.dev) === true ? TOPOL_DEV_URL : TOPOL_URL;
+      loadScript(topolURl, (err) => {
+        if (err !== null) {
+          reject(err);
+        }
+        window.TopolPlugin.init(topolOptions);
+        resolve(true);
+      });
+    });
+  },
+  save: () => {
+    window.TopolPlugin.save();
+  },
+  load: (json) => {
+    window.TopolPlugin.load(json);
+  },
+  togglePreview: () => {
+    window.TopolPlugin.togglePreview();
+  },
+  togglePreviewSize: () => {
+    window.TopolPlugin.togglePreviewSize();
+  },
+  chooseFile: (url) => {
+    window.TopolPlugin.chooseFile(url);
+  },
+  undo: () => {
+    window.TopolPlugin.undo();
+  },
+  redo: () => {
+    window.TopolPlugin.redo();
+  },
+  setSavedBlocks: (savedBlocks) => {
+    window.TopolPlugin.setSavedBlocks(savedBlocks);
+  },
+  createNotification: (notification) => {
+    window.TopolPlugin.createNotification(notification);
+  },
+  changeEmailToMobile: () => {
+    window.TopolPlugin.changeEmailToMobile();
+  },
+  changeEmailToDesktop: () => {
+    window.TopolPlugin.changeEmailToDesktop();
+  },
+  toggleBlocksAndStructuresVisibility: () => {
+    window.TopolPlugin.toggleBlocksAndStructuresVisibility();
+  },
+  destroy: () => {
+    window.TopolPlugin.destroy();
+  }
+};
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+function toObject(val) {
+  if (val === null || val === void 0) {
+    throw new TypeError("Object.assign cannot be called with null or undefined");
+  }
+  return Object(val);
+}
+function shouldUseNative() {
+  try {
+    if (!Object.assign) {
+      return false;
+    }
+    var test1 = new String("abc");
+    test1[5] = "de";
+    if (Object.getOwnPropertyNames(test1)[0] === "5") {
+      return false;
+    }
+    var test2 = {};
+    for (var i = 0; i < 10; i++) {
+      test2["_" + String.fromCharCode(i)] = i;
+    }
+    var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
+      return test2[n2];
+    });
+    if (order2.join("") !== "0123456789") {
+      return false;
+    }
+    var test3 = {};
+    "abcdefghijklmnopqrst".split("").forEach(function(letter) {
+      test3[letter] = letter;
+    });
+    if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
+      return false;
+    }
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+shouldUseNative() ? Object.assign : function(target, source) {
+  var from;
+  var to = toObject(target);
+  var symbols;
+  for (var s = 1; s < arguments.length; s++) {
+    from = Object(arguments[s]);
+    for (var key in from) {
+      if (hasOwnProperty.call(from, key)) {
+        to[key] = from[key];
+      }
+    }
+    if (getOwnPropertySymbols) {
+      symbols = getOwnPropertySymbols(from);
+      for (var i = 0; i < symbols.length; i++) {
+        if (propIsEnumerable.call(from, symbols[i])) {
+          to[symbols[i]] = from[symbols[i]];
+        }
+      }
+    }
+  }
+  return to;
+};
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = require$$0, g = 60103;
+reactJsxRuntime_production_min.Fragment = 60107;
+if (typeof Symbol === "function" && Symbol.for) {
+  var h = Symbol.for;
+  g = h("react.element");
+  reactJsxRuntime_production_min.Fragment = h("react.fragment");
+}
+var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, k) {
+  var b, d = {}, e = null, l = null;
+  k !== void 0 && (e = "" + k);
+  a.key !== void 0 && (e = "" + a.key);
+  a.ref !== void 0 && (l = a.ref);
+  for (b in a)
+    n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
+}
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const EDITOR_HTML_ID = "editor";
+function TopolEditor(props) {
+  const mergeOptions = () => {
+    const callbacks = {
+      onSave(json, html) {
+        if (props.onSave !== void 0) {
+          props.onSave(json, html);
+        }
+      },
+      onSaveAndClose(json, html) {
+        if (props.onSaveAndClose !== void 0) {
+          props.onSaveAndClose(json, html);
+        }
+      },
+      onTestSend(email, json, html) {
+        if (props.onTestSend !== void 0) {
+          props.onTestSend(email, json, html);
+        }
+      },
+      onOpenFileManager() {
+        if (props.onOpenFileManager !== void 0) {
+          props.onOpenFileManager();
+        }
+      },
+      onLoaded() {
+        if (props.onLoaded !== void 0) {
+          props.onLoaded();
+        }
+      },
+      onBlockSave(block) {
+        if (props.onBlockSave !== void 0) {
+          props.onBlockSave(block);
+        }
+      },
+      onBlockRemove(blockId) {
+        if (props.onBlockRemove !== void 0) {
+          props.onBlockRemove(blockId);
+        }
+      },
+      onBlockEdit(blockId) {
+        if (props.onBlockEdit !== void 0) {
+          props.onBlockEdit(blockId);
+        }
+      },
+      onInit() {
+        if (props.onInit !== void 0) {
+          props.onInit();
+        }
+      },
+      onUndoChange(count) {
+        if (props.onUndoChange !== void 0) {
+          props.onUndoChange(count);
+        }
+      },
+      onRedoChange(count) {
+        if (props.onRedoChange !== void 0) {
+          props.onRedoChange(count);
+        }
+      },
+      onPreview(html) {
+        if (props.onPreview !== void 0) {
+          props.onPreview(html);
+        }
+      },
+      onAlert(notification) {
+        if (props.onAlert !== void 0) {
+          props.onAlert(notification);
+        }
+      }
+    };
+    return __spreadProps(__spreadValues({
+      id: "#" + EDITOR_HTML_ID
+    }, props.options), {
+      callbacks: __spreadValues({}, callbacks)
+    });
+  };
+  useEffect(() => {
+    const initializeEditor = async () => {
+      const mergedTopolOptinos = mergeOptions();
+      await TopolPlugin.init(mergedTopolOptinos, {
+        dev: props.dev !== void 0 ? props.dev : false
+      });
+    };
+    initializeEditor();
+    return () => {
+      TopolPlugin.destroy();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", {
+    id: "editor",
+    style: {
+      position: "absolute",
+      height: "100vh",
+      width: "100%"
+    }
+  });
+}
+export { TopolPlugin, TopolEditor as default };

package/dist/topol-editor-react.umd.js

@@ -0,0 +1,12 @@
+var M=Object.defineProperty,q=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var P=(l,a,d)=>a in l?M(l,a,{enumerable:!0,configurable:!0,writable:!0,value:d}):l[a]=d,v=(l,a)=>{for(var d in a||(a={}))V.call(a,d)&&P(l,d,a[d]);if(b)for(var d of b(a))$.call(a,d)&&P(l,d,a[d]);return l},T=(l,a)=>q(l,z(a));(function(l,a){typeof exports=="object"&&typeof module!="undefined"?a(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],a):(l=typeof globalThis!="undefined"?globalThis:l||self,a(l["topol-editor-react"]={},l.React))})(this,function(l,a){"use strict";function d(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var S=d(a),j=function(t,o,n){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("script");typeof o=="function"&&(n=o,o={}),o=o||{},n=n||function(){},i.type=o.type||"text/javascript",i.charset=o.charset||"utf8",i.async="async"in o?!!o.async:!0,i.src=t,o.attrs&&_(i,o.attrs),o.text&&(i.text=""+o.text);var u="onload"in i?g:E;u(i,n),i.onload||g(i,n),r.appendChild(i)};function _(e,t){for(var o in t)e.setAttribute(o,t[o])}function g(e,t){e.onload=function(){this.onerror=this.onload=null,t(null,e)},e.onerror=function(){this.onerror=this.onload=null,t(new Error("Failed to load "+this.src),e)}}function E(e,t){e.onreadystatechange=function(){this.readyState!="complete"&&this.readyState!="loaded"||(this.onreadystatechange=null,t(null,e))}}const k="https://d5aoblv5p04cg.cloudfront.net/editor-3/loader/build.js",R="https://d5aoblv5p04cg.cloudfront.net/develop/loader/build.js",s={init:(e,t)=>new Promise((o,n)=>{const r=(t==null?void 0:t.dev)===!0?R:k;j(r,i=>{i!==null&&n(i),window.TopolPlugin.init(e),o(!0)})}),save:()=>{window.TopolPlugin.save()},load:e=>{window.TopolPlugin.load(e)},togglePreview:()=>{window.TopolPlugin.togglePreview()},togglePreviewSize:()=>{window.TopolPlugin.togglePreviewSize()},chooseFile:e=>{window.TopolPlugin.chooseFile(e)},undo:()=>{window.TopolPlugin.undo()},redo:()=>{window.TopolPlugin.redo()},setSavedBlocks:e=>{window.TopolPlugin.setSavedBlocks(e)},createNotification:e=>{window.TopolPlugin.createNotification(e)},changeEmailToMobile:()=>{window.TopolPlugin.changeEmailToMobile()},changeEmailToDesktop:()=>{window.TopolPlugin.changeEmailToDesktop()},toggleBlocksAndStructuresVisibility:()=>{window.TopolPlugin.toggleBlocksAndStructuresVisibility()},destroy:()=>{window.TopolPlugin.destroy()}};var w={exports:{}},c={};/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/var h=Object.getOwnPropertySymbols,B=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;function p(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function x(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var t={},o=0;o<10;o++)t["_"+String.fromCharCode(o)]=o;var n=Object.getOwnPropertyNames(t).map(function(i){return t[i]});if(n.join("")!=="0123456789")return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(i){r[i]=i}),Object.keys(Object.assign({},r)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}x();/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var L=S.default,y=60103;if(c.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var m=Symbol.for;y=m("react.element"),c.Fragment=m("react.fragment")}var A=L.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,I=Object.prototype.hasOwnProperty,F={key:!0,ref:!0,__self:!0,__source:!0};function O(e,t,o){var n,r={},i=null,u=null;o!==void 0&&(i=""+o),t.key!==void 0&&(i=""+t.key),t.ref!==void 0&&(u=t.ref);for(n in t)I.call(t,n)&&!F.hasOwnProperty(n)&&(r[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps,t)r[n]===void 0&&(r[n]=t[n]);return{$$typeof:y,type:e,key:i,ref:u,props:r,_owner:A.current}}c.jsx=O,c.jsxs=O,w.exports=c;const N=w.exports.jsx,U="editor";function D(e){const t=()=>{const o={onSave(n,r){e.onSave!==void 0&&e.onSave(n,r)},onSaveAndClose(n,r){e.onSaveAndClose!==void 0&&e.onSaveAndClose(n,r)},onTestSend(n,r,i){e.onTestSend!==void 0&&e.onTestSend(n,r,i)},onOpenFileManager(){e.onOpenFileManager!==void 0&&e.onOpenFileManager()},onLoaded(){e.onLoaded!==void 0&&e.onLoaded()},onBlockSave(n){e.onBlockSave!==void 0&&e.onBlockSave(n)},onBlockRemove(n){e.onBlockRemove!==void 0&&e.onBlockRemove(n)},onBlockEdit(n){e.onBlockEdit!==void 0&&e.onBlockEdit(n)},onInit(){e.onInit!==void 0&&e.onInit()},onUndoChange(n){e.onUndoChange!==void 0&&e.onUndoChange(n)},onRedoChange(n){e.onRedoChange!==void 0&&e.onRedoChange(n)},onPreview(n){e.onPreview!==void 0&&e.onPreview(n)},onAlert(n){e.onAlert!==void 0&&e.onAlert(n)}};return T(v({id:"#"+U},e.options),{callbacks:v({},o)})};return a.useEffect(()=>((async()=>{const n=t();await s.init(n,{dev:e.dev!==void 0?e.dev:!1})})(),()=>{s.destroy()}),[]),N("div",{id:"editor",style:{position:"absolute",height:"100vh",width:"100%"}})}l.TopolPlugin=s,l.default=D,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import TopolPlugin, { INotification, ISavedBlock } from "@topol.io/editor";
+import IReactTopolOptions from '../types/IReactTopolOptions';
+declare type TopolEditorProps = {
+    options: IReactTopolOptions;
+    dev?: boolean;
+    onSave?(json: unknown, html: unknown): void;
+    onSaveAndClose?(json: unknown, html: unknown): void;
+    onTestSend?(email: string, json: unknown, html: unknown): void;
+    onOpenFileManager?(): void;
+    onLoaded?(): void;
+    onBlockSave?(block: ISavedBlock): void;
+    onBlockRemove?(blockId: number): void;
+    onBlockEdit?(blockId: number): void;
+    onInit?(): void;
+    onUndoChange?(count: number): void;
+    onRedoChange?(count: number): void;
+    onPreview?(html: unknown): void;
+    onAlert?(notification: INotification): void;
+};
+export default function TopolEditor(props: TopolEditorProps): JSX.Element;
+export type { IReactTopolOptions, INotification, ISavedBlock };
+export { TopolPlugin };

package/dist/types/types/IReactTopolOptions.d.ts

@@ -0,0 +1,33 @@
+import { ISavedBlock, IMergeTagGroup, IContentBlockOptions, ITheme, IAuthHeaderConfig, IFont, IAPI } from "@topol.io/editor";
+export default interface IReactOptions {
+    authorize: {
+        apiKey: string;
+        userId: string | number;
+    };
+    title?: string;
+    removeTopBar?: boolean;
+    topBarOptions?: Array<string>;
+    mainMenuAlign?: "left" | "right";
+    disableAlerts?: boolean;
+    customFileManager?: boolean;
+    language?: string;
+    light?: boolean;
+    theme?: ITheme;
+    hideSettingsTab?: boolean;
+    imageEditor?: boolean;
+    premadeBlocks?: unknown | boolean;
+    savedBlocks?: Array<ISavedBlock> | boolean;
+    mergeTags?: Array<IMergeTagGroup>;
+    enableAutosaves?: boolean;
+    htmlMinified?: boolean;
+    apiAuthorizationHeader?: IAuthHeaderConfig | string;
+    contentBlocks?: IContentBlockOptions[];
+    api?: IAPI;
+    mobileFirstEnabled?: boolean;
+    fonts?: Array<IFont>;
+    tinyConfig?: unknown;
+    fontSizes?: Array<number>;
+    colors?: Array<string>;
+    googleApiKey?: string;
+    role?: "manager" | "editor" | "reader";
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@topol.io/editor-react",
+  "description": "Official React package for Topol Editor.",
+  "keywords": [
+    "plugin",
+    "editor",
+    "email",
+    "topol",
+    "topol.io",
+    "topol-react",
+    "email-react",
+    "email templates"
+  ],
+  "version": "0.0.0-alfa.0",
+  "author": "Topol.io",
+  "homepage": "https://topol.io",
+  "license": "Apache-2.0",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/topol-editor-react.es.js",
+  "module": "./dist/topol-editor-react.es.js",
+  "types": "./dist/types/src/TopolEditor.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/topol-editor-react.es.js",
+      "require": "./dist/topol-editor-react.umd.js",
+      "types": "./dist/types/src/TopolEditor.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && yarn run build:types",
+    "build:types": "tsc -p tsconfig.prod.json"
+  },
+  "dependencies": {
+    "@topol.io/editor": "^0.0.0-alfa.13"
+  },
+  "devDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "@types/node": "^17.0.16",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}