esender-email-editor 1.1.0 → 1.2.1

package/README.md

@@ -11,9 +11,11 @@ A drag-and-drop **MJML email editor** for React 18 + Ant Design 5. The editor re
 The package is published on the public **npm registry**.
 
 ```bash
-npm install esender-email-editor
+npm install esender-email-editor --legacy-peer-deps
 ```
 
+> `--legacy-peer-deps` is required because `react-giphy-searchbox` (a transitive runtime dependency used by the Gif block) still declares an ancient `react@16.x` peer. The runtime works fine on React 18 — only the metadata is stale.
+
 ## Peer dependencies
 
 The package externalizes its heavy runtime deps so the host app provides them. Peer ranges are intentionally permissive — any version within the declared range works, and hosts that already satisfy a peer can skip it.
@@ -116,7 +118,6 @@ export const Composer = () => {
 | Prop | Type | Required | Description |
 |---|---|---|---|
 | `apiKey` | `string` | yes | License key. Exchanged for a JWT on mount. |
-| `apiConfig` | `ApiConfig` | no | Override base URL and any endpoint path. See [API configuration](#api-configuration). |
 | `customButtons` | `ReactNode` | no | Slot rendered in the editor's top-right toolbar. |
 | `showUndoRedo` | `boolean` | no | Show the undo/redo toolbar (default `true`). |
 | `onLicenseError` | `(error: LicenseError) => void` | no | Fires when the license verify call fails. |
@@ -133,43 +134,14 @@ export const Composer = () => {
 |---|---|---|
 | `getJson()` | `string` | Stringified MJML JSON tree (export-ready). |
 | `getHtml()` | `string` | Compiled email HTML via `mjml-browser`. Triggers `onHtmlExport`. |
-| `loadJson(json, raw?)` | `void` | Load a previously saved template. `json` is the same string `getJson()` produced. Pass `null` to clear. |
-| `saveTemplate({ projectId, templateId? })` | `Promise<TemplateApiResponse>` | Create or update a template. Omit `templateId` to create; include it to update. POSTs to the configured `saveTemplateUrl` (default `/template/create`). |
-| `loadTemplate({ projectId, templateId? })` | `Promise<TemplateApiResponse>` | GET the configured `getTemplatesUrl` or `getTemplateByIdUrl` and pipe the JSON back into `loadJson(...)`. |
-
-## API configuration
-
-The editor talks to a small set of backend endpoints. Defaults point at the hosted eSender API, but every URL is overridable via the `apiConfig` prop so consumers can self-host the backend.
-
-```tsx
-<Package
-  ref={ref}
-  apiKey="…"
-  apiConfig={{
-    baseUrl: 'https://api.example.com',
-    verifyUrl: '/license/verify',
-    refreshUrl: '/license/refresh',
-    saveTemplateUrl: '/templates',
-    getTemplatesUrl: '/templates/:projectId',
-    getTemplateByIdUrl: '/templates/:projectId/:templateId',
-    uploadMediaUrl: '/media',
-  }}
-/>
-```
+| `loadJson(json, raw?)` | `void` | Load a previously saved template. `json` accepts either the stringified output of `getJson()` or a deserialized object. Pass `null` to clear the canvas. |
+| `loadHtml(html)` | `void` | Load raw HTML into the editor. The HTML is wrapped in an MJML `mj-raw` block and rendered verbatim. The editor cannot break arbitrary HTML back into editable blocks — for full editability, prefer `loadJson` with a previously saved template. |
+| `saveTemplate({ projectId, templateId? })` | `Promise<TemplateApiResponse>` | Create or update a template. Omit `templateId` to create; include it to update. POSTs to `https://esender.in/api/license/template/create`. |
+| `loadTemplate({ projectId, templateId? })` | `Promise<TemplateApiResponse>` | GET from `https://esender.in/api/license/template/:projectId[/:templateId]` and pipe the JSON back into `loadJson(...)`. |
 
-### Defaults
-
-| Field | Default | Method | Purpose |
-|---|---|---|---|
-| `baseUrl` | `https://esender.in/api` | — | Prepended to every relative URL below. |
-| `verifyUrl` | `/verify` | POST | Exchange `apiKey` for access + refresh tokens. |
-| `refreshUrl` | `/refresh` | POST | Exchange a refresh token for a new access token. |
-| `saveTemplateUrl` | `/template/create` | POST | Create (or update, if `templateId` is in the body) a template. |
-| `getTemplatesUrl` | `/template/:projectId` | GET | Load the project's current template. |
-| `getTemplateByIdUrl` | `/template/:projectId/:templateId` | GET | Load a specific template. |
-| `uploadMediaUrl` | `/media/add` | POST (multipart) | Upload an image; returns a hosted URL. |
+## Backend
 
-Template URLs may contain `:projectId` and `:templateId` placeholders. They're substituted at call time and URL-encoded.
+The editor talks to the hosted eSender API at `https://esender.in/api`. Endpoints are fixed and not configurable; consumers only supply `apiKey`.
 
 ## Events
 
@@ -187,13 +159,11 @@ Callbacks are stored internally in a ref, so inline arrow functions are safe —
 
 ## Theme isolation
 
-The editor mounts its own `<ConfigProvider>` with the eSender primary color and uses an internal `getPopupContainer` so antd portals (Tooltip, Dropdown, Select, Drawer, Popover) render inside the editor's root rather than escaping to `document.body`. As a result:
+The editor does **not** mount its own `<ConfigProvider>` or antd `<App />`. It inherits the host application's antd theme, locale, and static-method context — nothing the editor renders will override your colors, components, or token configuration.
 
-- The editor will **not** restyle your host app's antd components.
-- Your host app's `<ConfigProvider theme={…}>` will **not** restyle the editor.
-- Antd's `message` / `notification` / `Modal.useApp` are scoped via `<App />` inside the editor.
+All editor-specific CSS lives under a single `.aee-root` class scope (the wrapper div around the editor), so SCSS overrides and resets cannot reach host components either.
 
-You can safely nest `<Package />` inside a host app that already uses antd with a different theme.
+If you want the editor branded purple like the default screenshots, wrap your host app in your own `<ConfigProvider theme={{ token: { colorPrimary: '#7747ff' } }}>` — the editor will inherit it.
 
 ## License handshake
 
@@ -201,9 +171,9 @@ The editor will not render until the eSender license is verified:
 
 1. Host passes `apiKey` to `<Package />`.
 2. On mount, the package checks `localStorage` for a cached access token.
-3. If absent, it `POST`s to `{baseUrl}{verifyUrl}` (default `https://esender.in/api/verify`) with `x-api-key: <apiKey>`.
+3. If absent, it `POST`s to `https://esender.in/api/license/verify` with `x-api-key: <apiKey>`.
 4. On success the returned `accessToken` and `refreshToken` are stored in `localStorage` and the editor mounts.
-5. While running, the internal axios client attaches the access token to protected calls; on `401` / `token expired` it calls `{baseUrl}{refreshUrl}` once and retries. If refresh fails, tokens are cleared and the next mount re-runs verify.
+5. While running, the internal axios client attaches the access token to protected calls; on `401` / `token expired` it calls `https://esender.in/api/license/refresh` once and retries. If refresh fails, tokens are cleared and the next mount re-runs verify.
 
 No further token management is required from the host.
 
@@ -291,11 +261,16 @@ import Package, {
   type RefreshTokenResponse,
   type TemplateApiResponse,
   type TemplateDocument,
-  type ApiConfig,
   type EditorEventCallbacks,
   type SaveEvent,
   type LoadEvent,
   type MediaUploadEvent,
+  // convenience aliases
+  type EditorInstance,        // = EditorHandle
+  type TemplateData,          // = TemplateDocument
+  type TemplateJson,          // shape of getJson()/loadJson() payload
+  type SaveTemplatePayload,   // = SaveTemplateOptions
+  type LoadTemplatePayload,   // = LoadTemplateOptions
 } from 'esender-email-editor';
 ```