@editora/template 1.0.1

package/dist/index.esm.js

@@ -0,0 +1,560 @@
+import S from "dompurify";
+let o = null, d = null, s = null, n = null, p = "", m = "", g = "insert";
+const M = [
+  {
+    id: "formal-letter",
+    name: "Formal Letter",
+    category: "Letters",
+    description: "Professional business letter template",
+    html: `<p><strong>{{ Company Name }}</strong></p>
+<p>{{ Today }}</p>
+<p>Dear {{ first_name }} {{ last_name }},</p>
+<p>I hope this letter finds you well. [Your letter content here]</p>
+<p>Thank you for your time and consideration.</p>
+<p>Sincerely,<br>Your Name</p>`
+  },
+  {
+    id: "meeting-notes",
+    name: "Meeting Notes",
+    category: "Notes",
+    description: "Template for meeting notes with attendees and action items",
+    html: `<h2>Meeting Notes - {{ today }}</h2>
+<p><strong>Attendees:</strong> [List attendees]</p>
+<p><strong>Agenda:</strong></p>
+<ul>
+  <li>[Item 1]</li>
+  <li>[Item 2]</li>
+  <li>[Item 3]</li>
+</ul>
+<p><strong>Action Items:</strong></p>
+<ul>
+  <li>[Owner]: [Task] - [Due Date]</li>
+</ul>
+<p><strong>Next Meeting:</strong> [Date]</p>`
+  },
+  {
+    id: "proposal",
+    name: "Project Proposal",
+    category: "Business",
+    description: "Structured project proposal template",
+    html: `<h1>Project Proposal</h1>
+<h2>Executive Summary</h2>
+<p>[Summary of the proposal]</p>
+<h2>Objectives</h2>
+<ul>
+  <li>[Objective 1]</li>
+  <li>[Objective 2]</li>
+</ul>
+<h2>Scope</h2>
+<p>[Project scope details]</p>
+<h2>Timeline</h2>
+<p>[Project timeline]</p>
+<h2>Budget</h2>
+<p>[Budget details]</p>
+<h2>Contact</h2>
+<p>{{ first_name }} {{ last_name }}<br>{{ email }}<br>{{ phone }}</p>`
+  },
+  {
+    id: "faq",
+    name: "FAQ Template",
+    category: "Documentation",
+    description: "FAQ document structure",
+    html: `<h1>Frequently Asked Questions</h1>
+<h2>General Questions</h2>
+<h3>Q: What is this about?</h3>
+<p>A: [Answer here]</p>
+<h3>Q: Who should use this?</h3>
+<p>A: [Answer here]</p>
+<h2>Technical Questions</h2>
+<h3>Q: How do I get started?</h3>
+<p>A: [Answer here]</p>
+<h3>Q: What are the requirements?</h3>
+<p>A: [Answer here]</p>`
+  }
+];
+let w = [...M];
+const y = () => w, k = () => {
+  const t = new Set(w.map((e) => e.category));
+  return Array.from(t);
+}, R = (t) => {
+  const e = t.toLowerCase();
+  return w.filter(
+    (r) => r.name.toLowerCase().includes(e) || r.description?.toLowerCase().includes(e) || r.tags?.some((l) => l.toLowerCase().includes(e))
+  );
+}, L = (t) => S.sanitize(t, {
+  ALLOWED_TAGS: ["p", "br", "strong", "em", "u", "h1", "h2", "h3", "h4", "ul", "ol", "li", "blockquote", "table", "thead", "tbody", "tr", "th", "td", "a", "span"],
+  ALLOWED_ATTR: ["href", "target", "class", "data-key", "data-category"]
+});
+function D(t) {
+  d = document.createElement("div"), d.className = "rte-dialog-overlay", N(t) && d.classList.add("rte-ui-theme-dark"), d.addEventListener("click", () => c()), o = document.createElement("div"), o.className = "rte-dialog rte-template-dialog", o.addEventListener("click", (r) => r.stopPropagation());
+  const e = k();
+  e.length > 0 && !p && (p = e[0]), b(), d.appendChild(o), document.body.appendChild(d), z();
+}
+const H = '[data-theme="dark"], .dark, .editora-theme-dark', A = () => {
+  const t = window.getSelection();
+  if (!t || t.rangeCount === 0) return null;
+  const e = t.anchorNode;
+  return (e instanceof HTMLElement ? e : e?.parentElement)?.closest(
+    ".rte-content, .editora-content"
+  ) || null;
+}, N = (t) => {
+  const e = t || A();
+  return e ? !!e.closest(H) : !1;
+};
+function b() {
+  if (!o) return;
+  const t = k(), e = E();
+  o.innerHTML = `
+    <div class="rte-dialog-header">
+      <h2>Insert Template</h2>
+      <button class="rte-dialog-close" aria-label="Close">✕</button>
+    </div>
+
+    <div class="rte-dialog-body">
+      <!-- Search -->
+      <input
+        type="text"
+        placeholder="Search templates..."
+        value="${m}"
+        class="rte-input rte-template-search"
+        aria-label="Search templates"
+      />
+
+      <!-- Category Tabs -->
+      <div class="rte-tabs">
+        ${t.map((r) => `
+          <button class="rte-tab ${p === r ? "active" : ""}" data-category="${r}">
+            ${r}
+          </button>
+        `).join("")}
+      </div>
+
+      <!-- Template List -->
+      <div class="rte-template-list">
+        ${e.length > 0 ? e.map((r) => `
+          <div
+            class="rte-template-item ${n?.id === r.id ? "selected" : ""}"
+            data-template-id="${r.id}"
+          >
+            <div class="template-name">${r.name}</div>
+            ${r.description ? `<div class="template-description">${r.description}</div>` : ""}
+          </div>
+        `).join("") : '<div class="rte-empty-state">No templates found</div>'}
+      </div>
+
+      <!-- Preview -->
+      ${n ? `
+        <div class="rte-template-preview">
+          <strong>Preview:</strong>
+          <div class="template-preview-content">${n.html}</div>
+        </div>
+      ` : ""}
+
+      <!-- Insert Mode Toggle -->
+      <div class="rte-insert-mode">
+        <label>
+          <input type="radio" name="insertMode" value="insert" ${g === "insert" ? "checked" : ""} />
+          Insert at cursor
+        </label>
+        <label>
+          <input type="radio" name="insertMode" value="replace" ${g === "replace" ? "checked" : ""} />
+          Replace document
+        </label>
+      </div>
+    </div>
+
+    <div class="rte-dialog-footer">
+      <button class="rte-button-secondary rte-cancel-btn">Cancel</button>
+      <button class="rte-button-primary rte-insert-btn" ${n ? "" : "disabled"}>
+        ${g === "insert" ? "Insert" : "Replace"}
+      </button>
+    </div>
+  `, V();
+}
+function I() {
+  if (!o) return;
+  o.innerHTML = `
+    <div class="rte-dialog-header">
+      <h2>Replace Document?</h2>
+    </div>
+    <div class="rte-dialog-body">
+      <p>This will replace your current document content. Continue?</p>
+    </div>
+    <div class="rte-dialog-footer">
+      <button class="rte-button-secondary rte-cancel-warning-btn">Cancel</button>
+      <button class="rte-button-primary rte-confirm-replace-btn">Replace</button>
+    </div>
+  `;
+  const t = o.querySelector(".rte-cancel-warning-btn"), e = o.querySelector(".rte-confirm-replace-btn");
+  t?.addEventListener("click", () => b()), e?.addEventListener("click", () => $());
+}
+function E() {
+  const t = y();
+  return m.trim() ? R(m) : p ? t.filter((e) => e.category === p) : t;
+}
+function V() {
+  if (!o) return;
+  o.querySelector(".rte-dialog-close")?.addEventListener("click", () => c()), o.querySelector(".rte-cancel-btn")?.addEventListener("click", () => c()), o.querySelector(".rte-insert-btn")?.addEventListener("click", () => x());
+  const l = o.querySelector(".rte-template-search");
+  l?.addEventListener("input", (a) => {
+    m = a.target.value, T();
+  }), l?.addEventListener("keydown", (a) => {
+    a.key === "Enter" && n ? x() : a.key === "Escape" && c();
+  }), o.querySelectorAll(".rte-tab").forEach((a) => {
+    a.addEventListener("click", () => {
+      const i = a.getAttribute("data-category");
+      i && (p = i, m = "", T());
+    });
+  }), o.querySelectorAll(".rte-template-item").forEach((a) => {
+    a.addEventListener("click", () => {
+      const i = a.getAttribute("data-template-id");
+      if (i) {
+        const u = y().find((v) => v.id === i);
+        u && (n = u, b());
+      }
+    }), a.addEventListener("dblclick", () => {
+      const i = a.getAttribute("data-template-id");
+      if (i) {
+        const u = y().find((v) => v.id === i);
+        u && (n = u, x());
+      }
+    });
+  }), o.querySelectorAll('input[name="insertMode"]').forEach((a) => {
+    a.addEventListener("change", (i) => {
+      g = i.target.value, b();
+    });
+  });
+}
+function T() {
+  const t = E();
+  t.length > 0 ? (!n || !t.find((e) => e.id === n.id)) && (n = t[0]) : n = null, b();
+}
+function x() {
+  if (n)
+    if (g === "replace") {
+      let t = null;
+      if (s) {
+        let e = s.startContainer;
+        for (; e && e !== document.body; ) {
+          if (e.nodeType === Node.ELEMENT_NODE) {
+            const r = e;
+            if (r.getAttribute("contenteditable") === "true") {
+              t = r;
+              break;
+            }
+          }
+          e = e.parentNode;
+        }
+      }
+      if (t || (t = document.querySelector('[contenteditable="true"]')), t?.innerHTML?.trim()) {
+        I();
+        return;
+      }
+      C(n), c();
+    } else
+      j(n), c();
+}
+function $() {
+  n && (C(n), c());
+}
+function j(t) {
+  if (s) {
+    const f = window.getSelection();
+    f && (f.removeAllRanges(), f.addRange(s));
+  }
+  const e = window.getSelection();
+  if (!e || e.rangeCount === 0) return;
+  const r = e.getRangeAt(0), l = document.createRange().createContextualFragment(L(t.html));
+  r.deleteContents(), r.insertNode(l);
+  const h = document.createRange();
+  h.setStartAfter(r.endContainer), h.collapse(!0), e.removeAllRanges(), e.addRange(h);
+}
+function C(t) {
+  let e = null;
+  if (s) {
+    let r = s.startContainer;
+    for (; r && r !== document.body; ) {
+      if (r.nodeType === Node.ELEMENT_NODE) {
+        const l = r;
+        if (l.getAttribute("contenteditable") === "true") {
+          e = l;
+          break;
+        }
+      }
+      r = r.parentNode;
+    }
+  }
+  e || (e = document.querySelector('[contenteditable="true"]')), e && (e.innerHTML = L(t.html), e.dispatchEvent(new Event("input", { bubbles: !0 })));
+}
+function c() {
+  d && (d.remove(), d = null), o = null, s = null, m = "";
+}
+function q(t) {
+  const e = window.getSelection();
+  e && e.rangeCount > 0 ? s = e.getRangeAt(0).cloneRange() : s = null;
+  const r = E();
+  r.length > 0 && !n && (n = r[0]);
+  const l = t?.contentElement instanceof HTMLElement ? t.contentElement : A();
+  D(l);
+}
+function z() {
+  if (typeof document > "u") return;
+  const t = "template-plugin-dialog-styles";
+  if (document.getElementById(t)) return;
+  const e = document.createElement("style");
+  e.id = t, e.textContent = `
+    .rte-dialog-overlay {
+      --rte-tmpl-overlay-bg: rgba(15, 23, 36, 0.56);
+      --rte-tmpl-dialog-bg: #fff;
+      --rte-tmpl-dialog-text: #101828;
+      --rte-tmpl-border: #d6dbe4;
+      --rte-tmpl-subtle-bg: #f7f9fc;
+      --rte-tmpl-subtle-hover: #eef2f7;
+      --rte-tmpl-muted-text: #5f6b7d;
+      --rte-tmpl-accent: #1976d2;
+      --rte-tmpl-accent-strong: #1565c0;
+      --rte-tmpl-ring: rgba(31, 117, 254, 0.18);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: var(--rte-tmpl-overlay-bg);
+      backdrop-filter: blur(2px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      padding: 16px;
+      box-sizing: border-box;
+    }
+    .rte-dialog-overlay.rte-ui-theme-dark {
+      --rte-tmpl-overlay-bg: rgba(2, 8, 20, 0.72);
+      --rte-tmpl-dialog-bg: #202938;
+      --rte-tmpl-dialog-text: #e8effc;
+      --rte-tmpl-border: #49566c;
+      --rte-tmpl-subtle-bg: #2a3444;
+      --rte-tmpl-subtle-hover: #344256;
+      --rte-tmpl-muted-text: #a5b1c5;
+      --rte-tmpl-accent: #58a6ff;
+      --rte-tmpl-accent-strong: #4598f4;
+      --rte-tmpl-ring: rgba(88, 166, 255, 0.22);
+    }
+    .rte-template-dialog {
+      background: var(--rte-tmpl-dialog-bg);
+      color: var(--rte-tmpl-dialog-text);
+      border: 1px solid var(--rte-tmpl-border);
+      border-radius: 12px;
+      box-shadow: 0 24px 48px rgba(10, 15, 24, 0.28);
+      width: 600px;
+      max-height: 700px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .rte-dialog-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--rte-tmpl-border);
+      background: linear-gradient(180deg, rgba(127, 154, 195, 0.08) 0%, rgba(127, 154, 195, 0) 100%);
+    }
+    .rte-dialog-header h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--rte-tmpl-dialog-text);
+    }
+    .rte-dialog-close {
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: var(--rte-tmpl-muted-text);
+      padding: 0;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      transition: background-color 0.16s ease, color 0.16s ease;
+    }
+    .rte-dialog-close:hover {
+      background-color: var(--rte-tmpl-subtle-hover);
+      color: var(--rte-tmpl-dialog-text);
+    }
+    .rte-dialog-body {
+      padding: 20px;
+      flex: 1;
+      overflow-y: auto;
+    }
+    .rte-input {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid var(--rte-tmpl-border);
+      border-radius: 4px;
+      font-size: 14px;
+      box-sizing: border-box;
+      background: var(--rte-tmpl-subtle-bg);
+      color: var(--rte-tmpl-dialog-text);
+    }
+    .rte-input:focus {
+      outline: none;
+      border-color: var(--rte-tmpl-accent);
+    }
+    .rte-tabs {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+      border-bottom: 1px solid var(--rte-tmpl-border);
+      padding-bottom: 8px;
+    }
+    .rte-tab {
+      padding: 6px 12px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--rte-tmpl-muted-text);
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+    }
+    .rte-tab:hover {
+      color: var(--rte-tmpl-dialog-text);
+    }
+    .rte-tab.active {
+      color: var(--rte-tmpl-accent);
+      border-bottom-color: var(--rte-tmpl-accent);
+      font-weight: 600;
+    }
+    .rte-template-list {
+      border: 1px solid var(--rte-tmpl-border);
+      border-radius: 4px;
+      max-height: 250px;
+      overflow-y: auto;
+      margin: 12px 0;
+      background: var(--rte-tmpl-subtle-bg);
+    }
+    .rte-template-item {
+      padding: 12px;
+      border-bottom: 1px solid var(--rte-tmpl-border);
+      cursor: pointer;
+      transition: background-color 0.2s;
+      background: none;
+    }
+    .rte-template-item:last-child {
+      border-bottom: none;
+    }
+    .rte-template-item:hover,
+    .rte-template-item.selected {
+      background-color: var(--rte-tmpl-subtle-hover);
+    }
+    .template-name {
+      font-weight: 600;
+      color: var(--rte-tmpl-dialog-text);
+      margin-bottom: 4px;
+    }
+    .template-description {
+      font-size: 12px;
+      color: var(--rte-tmpl-muted-text);
+    }
+    .rte-template-preview {
+      padding: 12px;
+      background-color: var(--rte-tmpl-subtle-bg);
+      border: 1px solid var(--rte-tmpl-border);
+      border-radius: 4px;
+      margin-top: 12px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .template-preview-content {
+      font-size: 13px;
+      line-height: 1.5;
+      margin-top: 8px;
+    }
+    .template-preview-content * {
+      margin: 4px 0;
+    }
+    .rte-insert-mode {
+      margin-top: 12px;
+      padding: 12px;
+      background-color: var(--rte-tmpl-subtle-bg);
+      border-radius: 4px;
+      display: flex;
+      gap: 16px;
+    }
+    .rte-insert-mode label {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    .rte-insert-mode input {
+      margin-right: 6px;
+      cursor: pointer;
+    }
+    .rte-empty-state {
+      padding: 40px;
+      text-align: center;
+      color: var(--rte-tmpl-muted-text);
+      font-size: 14px;
+    }
+    .rte-dialog-footer {
+      padding: 16px 20px;
+      border-top: 1px solid var(--rte-tmpl-border);
+      background: var(--rte-tmpl-subtle-bg);
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+    }
+    .rte-button-primary {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+      background-color: var(--rte-tmpl-accent);
+      color: white;
+      transition: all 0.2s;
+    }
+    .rte-button-primary:hover:not([disabled]) {
+      background-color: var(--rte-tmpl-accent-strong);
+    }
+    .rte-button-primary[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .rte-button-secondary {
+      padding: 8px 16px;
+      border: 1px solid var(--rte-tmpl-border);
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+      background-color: var(--rte-tmpl-subtle-bg);
+      color: var(--rte-tmpl-dialog-text);
+      transition: all 0.2s;
+    }
+    .rte-button-secondary:hover {
+      background-color: var(--rte-tmpl-subtle-hover);
+    }
+  `, document.head.appendChild(e);
+}
+const P = () => ({
+  name: "template",
+  toolbar: [
+    {
+      label: "Template",
+      command: "insertTemplate",
+      icon: '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3 3V9H21V3H3ZM19 5H5V7H19V5Z" fill="#000000"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M3 11V21H11V11H3ZM9 13H5V19H9V13Z" fill="#000000"></path> <path d="M21 11H13V13H21V11Z" fill="#000000"></path> <path d="M13 15H21V17H13V15Z" fill="#000000"></path> <path d="M21 19H13V21H21V19Z" fill="#000000"></path> </g></svg>'
+    }
+  ],
+  commands: {
+    insertTemplate: (t, e) => (q(e), !0)
+  },
+  keymap: {}
+});
+export {
+  P as TemplatePlugin
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@editora/template",
+  "version": "1.0.1",
+  "description": "Template plugin for Rich Text Editor - Insert predefined document templates",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [
+    "editor",
+    "template",
+    "document"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ajaykr089/Editora.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@editora/core": "^1.0.5",
+    "@editora/toast": "^2.0.2",
+    "dompurify": "^3.0.8"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}