@aswin.dev/editor 0.6.3

package/README.md

@@ -0,0 +1,78 @@
+# @aswin.dev/editor
+
+> Vue 3 visual drag-and-drop email editor — drop into any web app with one function call.
+
+[![npm version](https://img.shields.io/npm/v/@aswin.dev/editor?label=npm&color=cb3837)](https://www.npmjs.com/package/@aswin.dev/editor)
+[![License](https://img.shields.io/badge/license-FSL--1.1--MIT-blue)](https://github.com/templatical/sdk/blob/main/LICENSE)
+
+The visual editor for [Templatical](https://github.com/templatical/sdk) — an open-source drag-and-drop email editor with JSON templates and MJML output.
+
+- 🧩 **14 block types** — title, paragraph, image, button, section, divider, spacer, social icons, menu, table, HTML, video, countdown, custom
+- 🎨 **27 design tokens** — full theming, dark mode, custom fonts
+- 🔌 **Framework-agnostic** — works in React, Vue, Svelte, Angular, vanilla
+- 📦 **JSON in, MJML out** — portable templates, render with any email provider
+- 🌍 **Bilingual** — English + German built in
+- 🔒 **TypeScript strict** — full type safety end to end
+
+## Install
+
+```bash
+npm install @aswin.dev/editor
+```
+
+`@templatical/renderer` is an optional peer — install it only if you need to convert templates to MJML. The two common cases are:
+
+- **In the browser, alongside the editor**, when you call `editor.toMjml()` to export from the user's session.
+- **In Node.js (or another runtime)**, when you only have stored template JSON and want to convert it to MJML server-side. You don't need the editor for this — install just the renderer.
+
+```bash
+npm install @templatical/renderer
+```
+
+If you call `editor.toMjml()` without the renderer installed, it throws a clear error naming the missing package.
+
+## Usage
+
+```ts
+import { init } from '@aswin.dev/editor';
+import '@aswin.dev/editor/style.css';
+
+const editor = await init({
+  container: '#editor',
+  onChange(content) {
+    // content is JSON — store/version/sync however you want
+  },
+});
+
+// Render to MJML when sending email — async; requires @templatical/renderer
+const mjml = await editor.toMjml();
+
+// Always unmount when removing the editor (cleans up listeners + DOM)
+editor.unmount();
+```
+
+```html
+<div id="editor" style="height: 100vh"></div>
+```
+
+## Framework integration
+
+First-class examples for **React, Vue, Svelte, Angular, and vanilla JS** are in the [installation guide](https://docs.templatical.com/getting-started/installation).
+
+## Cloud features
+
+For AI rewrite, real-time collaboration, comments, snapshots, and saved modules, use `initCloud()` instead. See the [Cloud guide](https://docs.templatical.com/cloud/getting-started).
+
+## Documentation
+
+- [Quick Start](https://docs.templatical.com/getting-started/quick-start)
+- [Editor API reference](https://docs.templatical.com/api/editor)
+- [Block reference](https://docs.templatical.com/guide/blocks)
+- [Theming](https://docs.templatical.com/guide/theming)
+- [Custom blocks](https://docs.templatical.com/guide/custom-blocks)
+
+Full docs at **[docs.templatical.com](https://docs.templatical.com)**.
+
+## License
+
+[FSL-1.1-MIT](https://github.com/templatical/sdk/blob/main/LICENSE) — free for any non-competing commercial use, automatically converts to MIT after 2 years per release. [License FAQ](https://docs.templatical.com/license-faq).

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@aswin.dev/editor",
+  "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
+  "version": "0.6.3",
+  "bugs": "https://github.com/templatical/sdk/issues",
+  "devDependencies": {
+    "@lucide/vue": "^1.11.0",
+    "@templatical/core": "workspace:*",
+    "@templatical/quality": "workspace:*",
+    "@templatical/types": "workspace:*",
+    "@tiptap/core": "^3.22.4",
+    "@tiptap/extension-color": "^3.22.4",
+    "@tiptap/extension-font-family": "^3.22.4",
+    "@tiptap/extension-highlight": "^3.22.4",
+    "@tiptap/extension-link": "^3.22.4",
+    "@tiptap/extension-subscript": "^3.22.4",
+    "@tiptap/extension-superscript": "^3.22.4",
+    "@tiptap/extension-text-align": "^3.22.4",
+    "@tiptap/extension-text-style": "^3.22.4",
+    "@tiptap/extension-underline": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.4",
+    "@tiptap/suggestion": "^3.22.4",
+    "@tiptap/vue-3": "^3.22.4",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.8",
+    "@vueuse/core": "^14.2.1",
+    "es-module-lexer": "^2.1.0",
+    "happy-dom": "^20.9.0",
+    "liquidjs": "^10.25.7",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3",
+    "vanilla-colorful": "^0.7.2",
+    "vite": "^8.0.10",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.5",
+    "vue": "^3.5.33",
+    "vue-tsc": "^3.2.7",
+    "vuedraggable": "^4.1.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/templatical-editor.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://templatical.com",
+  "keywords": [
+    "drag-and-drop",
+    "email",
+    "email-builder",
+    "email-editor",
+    "email-template",
+    "mjml",
+    "templatical",
+    "tiptap",
+    "vue",
+    "wysiwyg"
+  ],
+  "license": "SEE LICENSE IN LICENSE",
+  "module": "./dist/templatical-editor.js",
+  "peerDependencies": {
+    "@templatical/media-library": "workspace:*",
+    "@templatical/quality": "workspace:*",
+    "@templatical/renderer": "workspace:*"
+  },
+  "peerDependenciesMeta": {
+    "@templatical/renderer": {
+      "optional": true
+    },
+    "@templatical/media-library": {
+      "optional": true
+    },
+    "@templatical/quality": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/templatical/sdk.git",
+    "directory": "packages/editor"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:all": "vite build && vite build --config vite.cdn.config.ts",
+    "build:cdn": "vite build --config vite.cdn.config.ts",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "verify:pack": "node scripts/verify-pack.mjs"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts"
+}