trueeditr 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# 🚀 TrueEditr: Smart. Slim. AI-Native.
+
+TrueEditr is the next-gen WYSIWYG editor built for developers who want the power of AI without the bloat of traditional editors. Plug in your own AI keys, white-label everything, and get started for free.
+
+## ✨ Why TrueEditr?
+
+- **🤖 AI-Native**: Built-in integration for Gemini, GPT-4o, and Grok. (Connect your own keys!)
+- **📦 Featherweight**: < 50KB gzipped. No heavy UI frameworks.
+- **🛠 Pro Blocks**: Advanced tables, logic-aware code blocks, and beautiful callouts.
+- **📈 Built-in Analytics**: Track loads, AI usage, and user engagement from one dashboard.
+- **🖼 Media Webhooks**: Complete control over your image storage with HMAC-signed webhooks.
+
+## 🚀 Quick Start
+
+### 1. Installation
+```bash
+npm install trueeditr
+```
+
+### 2. Implementation
+```javascript
+import TrueEditr from 'trueeditr';
+
+const editor = new TrueEditr({
+  key: 'te_your_api_key',
+  selector: '#editor-container',
+  config: {
+    placeholder: 'Start writing something amazing...',
+    watermark: false // Standard for Pro users
+  }
+});
+```
+
+## 🛠 Advanced Features
+
+### Pro Implementation (Tables, Code, Callouts)
+Pro features are automatically enabled based on your API key's plan.
+
+```javascript
+const editor = new TrueEditr({
+  key: 'te_pro_key',
+  selector: '#editor-container'
+});
+```
+
+### Media Uploads (Cloud Storage)
+Configure your webhook in the dashboard, then enable uploads. TrueEditr will proxy the files to your backend with security headers.
+
+## ⚙️ Configuration Options
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `key` | `string` | `null` | **Required.** Your TrueEditr API Key. |
+| `selector` | `string` | `null` | **Required.** CSS selector for the target element. |
+| `apiUrl` | `string` | `"https://trueeditr.com/api"` | Base URL for the TrueEditr service. |
+
+## 🌐 Dashboard & Enterprise
+Manage your domains, check analytics, and upgrade to Pro at [trueeditr.com](https://trueeditr.com).
+
+## 📄 License
+MIT © 2026 TrueEditr Team.

package/index.js

@@ -0,0 +1,242 @@
+class TrueEditr {
+    constructor(config) {
+        this.apiKey = config.key;
+        this.selector = config.selector;
+        this.container = typeof document !== 'undefined' ? document.querySelector(this.selector) : null;
+        this.apiUrl = config.apiUrl || "https://trueeditr.com/api";
+        this.aiConfig = null;
+
+        if (!this.container) {
+            console.error("TrueEditr: Container not found");
+            return;
+        }
+
+        this.init();
+    }
+
+    async init() {
+        try {
+            const res = await fetch(`${this.apiUrl}/editor/init`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ apiKey: this.apiKey })
+            });
+            const data = await res.json();
+
+            if (data.success) {
+                this.config = { ...data.config, ...this.config }; // Merge server config
+                this.aiConfig = data.config.ai;
+                this.renderEditor();
+            } else {
+                this.renderError(data.error, data.upgrade);
+            }
+        } catch (err) {
+            console.error("TrueEditr Init Error:", err);
+        }
+    }
+
+    renderError(msg, upgradeLink) {
+        this.container.innerHTML = `
+            <div style="padding:1rem; border:1px solid #fee2e2; border-radius:0.5rem; background:#fef2f2; color:#b91c1c; font-family:sans-serif;">
+                <strong>TrueEditr Error:</strong> ${msg}
+                ${upgradeLink ? `<br><a href="${upgradeLink}" style="color:#7c3aed; font-weight:bold; text-decoration:none;">Upgrade Plan</a>` : ''}
+            </div>
+        `;
+    }
+
+    renderEditor() {
+        // Advanced Styles
+        const styles = `
+            .true-editor-wrapper { font-family: 'Inter', -apple-system, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 500px; position: relative; background: #fff; }
+            .true-editor-wrapper.fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; border-radius: 0; }
+            .true-editor-toolbar { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
+            .true-toolbar-row { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 0.4rem; }
+            .true-toolbar-row:last-child { border-bottom: none; padding-bottom: 0; }
+            .true-toolbar-group { display: flex; gap: 0.25rem; border-right: 1px solid #e2e8f0; padding-right: 0.5rem; margin-right: 0.25rem; }
+            .true-editor-btn { background: white; border: 1px solid #cbd5e1; border-radius: 0.375rem; padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; color: #475569; }
+            .true-editor-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
+            .true-editor-content { flex: 1; padding: 2rem; outline: none; overflow-y: auto; line-height: 1.8; color: #1e293b; font-size: 16px; }
+            .true-editor-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 0.4rem 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748b; }
+            .true-ai-popup { position: absolute; background: white; border: 1px solid #e2e8f0; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); width: 340px; z-index: 10000; display: none; }
+        `;
+
+        if (typeof document !== 'undefined') {
+            const styleEl = document.createElement("style");
+            styleEl.id = "true-editor-styles";
+            styleEl.textContent = styles;
+            document.head.appendChild(styleEl);
+
+            this.wrapper = document.createElement("div");
+            this.wrapper.className = "true-editor-wrapper";
+
+            const toolbar = document.createElement("div");
+            toolbar.className = "true-editor-toolbar";
+            this.wrapper.appendChild(toolbar);
+
+            const feats = this.config.features || [];
+
+            // Row 1
+            const row1 = document.createElement("div");
+            row1.className = "true-toolbar-row";
+            toolbar.appendChild(row1);
+
+            const gHist = this.createGroup(row1);
+            this.addBtn(gHist, { cmd: "undo", label: "↶", title: "Undo" });
+            this.addBtn(gHist, { cmd: "redo", label: "↷", title: "Redo" });
+
+            const gFmt = this.createGroup(row1);
+            this.addBtn(gFmt, { cmd: "bold", label: "<b>B</b>", title: "Bold" });
+            this.addBtn(gFmt, { cmd: "italic", label: "<i>I</i>", title: "Italic" });
+
+            const gHead = this.createGroup(row1);
+            this.addBtn(gHead, { cmd: "formatBlock", val: "h1", label: "H1", title: "H1" });
+            this.addBtn(gHead, { cmd: "formatBlock", val: "h2", label: "H2", title: "H2" });
+
+            if (this.aiConfig?.enabled) {
+                const ai = document.createElement("button");
+                ai.className = "true-editor-btn";
+                ai.innerHTML = "✨ AI Pro";
+                ai.style.color = "#7c3aed";
+                ai.style.marginLeft = "auto";
+                ai.onclick = (e) => this.showAIPopup(e);
+                row1.appendChild(ai);
+            }
+
+            // Row 2
+            const row2 = document.createElement("div");
+            row2.className = "true-toolbar-row";
+            toolbar.appendChild(row2);
+
+            const gIns = this.createGroup(row2);
+            if (feats.includes('image')) this.addBtn(gIns, { cmd: "insertImage", label: "🖼", title: "Image" });
+            if (feats.includes('table')) this.addBtn(gIns, { cmd: "insertTable", label: "⊞", title: "Table" });
+            if (feats.includes('code')) this.addBtn(gIns, { cmd: "insertCode", label: "‹/›", title: "Code" });
+
+            const gApps = this.createGroup(row2);
+            this.addBtn(gApps, { cmd: "templates", label: "📄 Templates" });
+            this.addBtn(gApps, { cmd: "export", label: "⬇ Export" });
+            this.addBtn(gApps, { cmd: "fullscreen", label: "⛶" });
+
+            this.editor = document.createElement("div");
+            this.editor.className = "true-editor-content";
+            this.editor.contentEditable = true;
+            this.wrapper.appendChild(this.editor);
+
+            this.footer = document.createElement("div");
+            this.footer.className = "true-editor-footer";
+            this.footer.innerHTML = `<div class="stats">Words: 0</div><div class="status">Draft active</div>`;
+            this.wrapper.appendChild(this.footer);
+
+            this.container.innerHTML = "";
+            this.container.appendChild(this.wrapper);
+            this.setupEventListeners();
+            this.setupAIPopup();
+        }
+    }
+
+    createGroup(row) {
+        const g = document.createElement("div");
+        g.className = "true-toolbar-group";
+        row.appendChild(g);
+        return g;
+    }
+
+    addBtn(parent, btn) {
+        const b = document.createElement("button");
+        b.className = "true-editor-btn";
+        b.innerHTML = btn.label;
+        b.title = btn.title || "";
+        b.onclick = (e) => this.handleAction(btn);
+        parent.appendChild(b);
+    }
+
+    handleAction(btn) {
+        if (btn.cmd === "insertTable") this.insertTable();
+        else if (btn.cmd === "insertCode") this.insertCode();
+        else if (btn.cmd === "templates") this.insertTemplate();
+        else if (btn.cmd === "export") this.exportContent();
+        else if (btn.cmd === "fullscreen") this.wrapper.classList.toggle('fullscreen');
+        else if (btn.cmd === "insertImage") {
+            const url = prompt("Image URL:");
+            if (url) document.execCommand("insertImage", false, url);
+        } else if (btn.val) {
+            document.execCommand(btn.cmd, false, btn.val);
+        } else {
+            document.execCommand(btn.cmd, false, null);
+        }
+        this.updateStats();
+    }
+
+    updateStats() {
+        const text = this.editor.innerText || "";
+        const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+        if (this.footer) this.footer.querySelector('.stats').textContent = `Words: ${words}`;
+    }
+
+    setupEventListeners() {
+        if (this.editor) {
+            this.editor.addEventListener("input", () => this.updateStats());
+        }
+    }
+
+    setupAIPopup() {
+        this.aiPopup = document.createElement("div");
+        this.aiPopup.className = "true-ai-popup";
+        this.aiPopup.innerHTML = `
+            <div style="font-weight:700; margin-bottom:8px;">AI Write Pro</div>
+            <input type="text" style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;" placeholder="Summarize, Rewrite, etc..." />
+            <button class="ai-gen-btn" style="margin-top:8px; background:#7c3aed; color:white; border:none; padding:6px 12px; border-radius:4px; cursor:pointer;">Generate</button>
+        `;
+        document.body.appendChild(this.aiPopup);
+        this.aiPopup.querySelector('.ai-gen-btn').onclick = () => this.handleAIRequest();
+    }
+
+    showAIPopup(e) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        this.aiPopup.style.display = 'block';
+        this.aiPopup.style.top = (rect.bottom + window.scrollY + 5) + 'px';
+        this.aiPopup.style.left = (rect.right + window.scrollX - 340) + 'px';
+    }
+
+    async handleAIRequest() {
+        const input = this.aiPopup.querySelector('input').value;
+        const context = this.editor.innerText;
+        try {
+            const res = await fetch(`${this.apiUrl}/editor/ai-completion`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ apiKey: this.apiKey, prompt: input, context })
+            });
+            const data = await res.json();
+            if (data.success) {
+                document.execCommand("insertText", false, data.text);
+                this.aiPopup.style.display = 'none';
+            }
+        } catch (err) { alert("AI Error"); }
+    }
+
+    insertTable() {
+        let html = '<table border="1" style="width:100%; border-collapse:collapse;"><tr><td>Cell</td><td>Cell</td></tr></table><p><br></p>';
+        document.execCommand('insertHTML', false, html);
+    }
+
+    insertCode() {
+        let html = '<pre style="background:#f1f5f9; padding:1em; border-radius:4px;"><code>// Your code</code></pre><p><br></p>';
+        document.execCommand('insertHTML', false, html);
+    }
+
+    insertTemplate() {
+        document.execCommand("insertHTML", false, "<h1>Template</h1><p>Content goes here...</p>");
+    }
+
+    exportContent() {
+        const blob = new Blob([this.editor.innerHTML], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = "export.html";
+        a.click();
+    }
+}
+
+export default TrueEditr;

package/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "trueeditr",
+    "version": "1.0.0",
+    "description": "Smart, AI-Native WYSIWYG Editor with built-in analytics and cloud storage support.",
+    "main": "index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/trueeditr/trueeditr.git"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [
+        "editor",
+        "wysiwyg",
+        "ai",
+        "gemini",
+        "gpt-4o",
+        "rich-text",
+        "analytics",
+        "pro-editor"
+    ],
+    "author": "TrueEditr Team",
+    "license": "MIT"
+}