@edmissioncrm/editor 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Edmission CRM India Private Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,112 @@
-# Temporary Holding Version
+# @edmissioncrm/editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An embeddable, **drag-and-drop email and document builder** for React, a drop-in `<EmailEditor>` that talks to
+your own backend for uploads, AI and file storage.
+
+- Drag-and-drop editor (15 blocks: heading, text, image, button, divider, spacer, social, video, GIF, HTML,
+  menu, form, timer, table, carousel)
+- **Email** and **PDF / document** modes; export clean email-safe HTML and the design JSON
+- Merge tags that stay intact, desktop and mobile preview, and **inbox previews** (Gmail, Apple Mail,
+  Outlook, Yahoo) with an audit check
+- Undo / redo, saved versions with compare and restore, custom themes
+- AI helper in every text field: improve writing, fix grammar, shorter / longer, change tone
+- Image library: upload, **Amazon S3** and **Google Drive**
+- Opens existing `react-email-editor` designs and keeps its component API, so migrating is a one-line change
+
+## Install
+
+```bash
+npm install @edmissioncrm/editor
+# peer deps: react >= 18, react-dom >= 18
+```
+
+The editor's CSS is injected automatically; there is nothing else to import.
+
+## Quick start
+
+```tsx
+import EmailEditor, { type EmailEditorRef } from "@edmissioncrm/editor";
+import { useRef } from "react";
+
+export function MyEditor() {
+  const ref = useRef<EmailEditorRef>(null);
+
+  const save = () =>
+    ref.current?.editor.exportHtml(({ design, html }) => {
+      // persist `design` (JSON) and send `html`
+    });
+
+  return (
+    // the editor fills its parent, so give the parent a height
+    <div style={{ height: "100vh" }}>
+      <button onClick={save}>Save</button>
+      <EmailEditor
+        ref={ref}
+        edmission={{ apiBaseUrl: "https://api.example.com" }}   // your backend
+        options={{ displayMode: "email" }}                      // or "document" for PDF
+        onReady={() => console.log("editor ready")}
+      />
+    </div>
+  );
+}
+```
+
+Moving from `react-email-editor`: change the import to `@edmissioncrm/editor`. Designs saved by
+`react-email-editor` are converted automatically when you load them.
+
+## Ref API
+
+`ref.current.editor` exposes a `react-email-editor` compatible handle:
+
+- `loadDesign(design)` / `saveDesign(cb)`, the design JSON
+- `exportHtml(cb)`, email-ready HTML together with the design
+- `setMergeTags(tags)` (same as `options.mergeTags`)
+- `addEventListener(event, handler)` / `removeEventListener(event, handler)`, e.g. `"design:updated"`
+
+## Configuration
+
+**Merge tags** go in `options.mergeTags` (the `react-email-editor` format or a flat map):
+
+```tsx
+options={{ mergeTags: { first_name: { name: "First name", value: "{{first_name}}", sample: "Aditi" } } }}
+```
+
+**Backend connection** is the `edmission` prop. Every option has a default:
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `apiBaseUrl` | page origin | Base URL of your API |
+| `orgId` | first UUID in the page URL | Sent as the `organization-id` header |
+| `authToken` | `localStorage.token` | Sent as `Authorization: Bearer …` (session cookies are always sent too) |
+| `uploadPath` | `/buzz-communication/upload/template-assets` | Image upload endpoint |
+| `aiGeneratePath` | `/mail-templates/ai-generate` | AI endpoint |
+| `s3ListEndpoint` | `${apiBaseUrl}/buzz-communication/upload/template-assets` | Files shown in the Amazon S3 tab |
+| `googleClientId` | none | Shows the Google Drive tab (OAuth Web client id) |
+
+**Your backend** holds every secret; the editor never does. Requests are sent with
+`credentials: "include"` and the `organization-id` / `Authorization` headers, so allow those in CORS.
+
+| Endpoint | Request | Response |
+| --- | --- | --- |
+| Upload `POST {uploadPath}` | multipart form, field `file` | `{ "file": { "url": "https://…" } }` |
+| AI `POST {aiGeneratePath}` | JSON `{ prompt, allowedVariables?, currentSubject?, currentHtmlContent? }` | `{ "subject": "…", "htmlContent": "<html>…" }` |
+| List `GET {s3ListEndpoint}` | none | `{ "items": [{ "id", "key", "url", "name", "kind" }] }`, `kind` is `image`, `gif`, `video` or `pdf` |
+
+Return only the signed-in organization's files from the list endpoint, and use public URLs for uploaded
+images so they load in the recipient's inbox.
+
+**Google Drive** needs an OAuth *Web application* client with the Google Drive API and Google Picker API
+enabled, the `drive.file` scope, and your app's origin under *Authorized JavaScript origins*. Picked files are
+set to "anyone with the link" so they display in sent emails.
+
+**Branding:** `logoUrl` / `logoAlt` replace the logo at the bottom of the side panel.
+
+**Typed component:** `EdmissionEmailEditor` is also exported, for apps that prefer props
+(`initialDesign`, `onDesignChange`, `builder`) and a ref with `getDesign()`, `exportHtml()` and `loadDesign()`.
+
+If you use Vite and see an "Invalid hook call", add `resolve: { dedupe: ["react", "react-dom"] }`.
+
+## License
+
+MIT, see [LICENSE](./LICENSE). Licences of the bundled open-source packages are in
+[THIRD_PARTY_LICENSES.md](./THIRD_PARTY_LICENSES.md).