@editora/plugins 1.0.6 → 1.0.8

package/dist/text-color.esm.js

@@ -1,6 +1,6 @@
-import { a as h } from "./colorSelectionApply-D8r_gV32.mjs";
-let o = null, p = null, f = null, i = "#000000";
-const s = '[data-theme="dark"], .dark, .editora-theme-dark', k = [
+import { a as y, b as w } from "./anchoredPopover-Dts0IrgU.mjs";
+let n = null, d = null, g = null, i = "#000000";
+const u = '[data-theme="dark"], .dark, .editora-theme-dark', C = [
   "#000000",
   "#ffffff",
   "#808080",
@@ -14,79 +14,95 @@ const s = '[data-theme="dark"], .dark, .editora-theme-dark', k = [
   "#800080",
   "#ffc0cb"
 ];
-function m() {
+function v() {
   const e = window.getSelection();
   if (e && e.rangeCount > 0) {
-    const l = e.getRangeAt(0).startContainer, c = l.nodeType === Node.ELEMENT_NODE ? l : l.parentElement;
-    if (c) {
-      const n = c.closest(
+    const c = e.getRangeAt(0).startContainer, l = c.nodeType === Node.ELEMENT_NODE ? c : c.parentElement;
+    if (l) {
+      const r = l.closest(
         '[data-editora-editor="true"], .rte-editor, .editora-editor'
       );
-      if (n) return n;
+      if (r) return r;
     }
   }
-  const t = document.activeElement;
-  return t ? t.closest(
+  const o = document.activeElement;
+  return o ? o.closest(
     '[data-editora-editor="true"], .rte-editor, .editora-editor'
   ) : null;
 }
-function v(e) {
-  const t = m();
-  if (t) {
-    const r = t.querySelector(
-      `[data-command="${e}"]`
-    );
-    if (r) return r;
+function E(e) {
+  const o = window.__editoraLastCommand, t = window.__editoraLastCommandButton;
+  if (o === e && t && t.isConnected) {
+    const a = window.getComputedStyle(t), s = t.getBoundingClientRect();
+    if (a.display !== "none" && a.visibility !== "hidden" && a.pointerEvents !== "none" && !(s.width === 0 && s.height === 0))
+      return t;
+  }
+  const c = (a) => {
+    for (const s of a) {
+      const b = window.getComputedStyle(s), h = s.getBoundingClientRect();
+      if (!(b.display === "none" || b.visibility === "hidden" || b.pointerEvents === "none") && !(h.width === 0 && h.height === 0))
+        return s;
+    }
+    return null;
+  }, l = v();
+  if (l) {
+    const a = Array.from(
+      l.querySelectorAll(`[data-command="${e}"]`)
+    ), s = c(a);
+    if (s) return s;
   }
-  return document.querySelector(`[data-command="${e}"]`);
+  const r = Array.from(
+    document.querySelectorAll(`[data-command="${e}"]`)
+  );
+  return c(r);
 }
-function y(e) {
-  if (e?.closest(s)) return !0;
-  const t = window.getSelection();
-  if (t && t.rangeCount > 0) {
-    const l = t.getRangeAt(0).startContainer;
-    if ((l.nodeType === Node.ELEMENT_NODE ? l : l.parentElement)?.closest(s)) return !0;
+function S(e) {
+  if (e?.closest(u)) return !0;
+  const o = window.getSelection();
+  if (o && o.rangeCount > 0) {
+    const c = o.getRangeAt(0).startContainer;
+    if ((c.nodeType === Node.ELEMENT_NODE ? c : c.parentElement)?.closest(u)) return !0;
   }
-  return document.activeElement?.closest(s) ? !0 : document.body.matches(s) || document.documentElement.matches(s);
+  return document.activeElement?.closest(u) ? !0 : document.body.matches(u) || document.documentElement.matches(u);
 }
-function d(e) {
-  return h({
+function f(e) {
+  return y({
     color: e,
     className: "rte-text-color",
     styleProperty: "color",
     commands: ["foreColor"],
-    savedRange: f,
-    getActiveEditorRoot: m,
+    savedRange: g,
+    getActiveEditorRoot: v,
     warnMessage: "[TextColor] Could not apply color for current selection"
   });
 }
-function w() {
+function T() {
   const e = window.getSelection();
   if (!e || e.rangeCount === 0) return "#000000";
-  let r = e.getRangeAt(0).startContainer;
-  for (; r && r !== document.body; ) {
-    if (r.nodeType === Node.ELEMENT_NODE) {
-      const l = r, c = l.style.color || window.getComputedStyle(l).color;
-      if (c && c !== "rgb(0, 0, 0)")
-        return C(c);
+  let t = e.getRangeAt(0).startContainer;
+  for (; t && t !== document.body; ) {
+    if (t.nodeType === Node.ELEMENT_NODE) {
+      const c = t, l = c.style.color || window.getComputedStyle(c).color;
+      if (l && l !== "rgb(0, 0, 0)")
+        return A(l);
     }
-    r = r.parentNode;
+    t = t.parentNode;
   }
   return "#000000";
 }
-function C(e) {
+function A(e) {
   if (e.startsWith("#")) return e;
-  const t = e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-  if (!t) return "#000000";
-  const r = parseInt(t[1]), l = parseInt(t[2]), c = parseInt(t[3]);
-  return "#" + [r, l, c].map((n) => {
-    const u = n.toString(16);
-    return u.length === 1 ? "0" + u : u;
+  const o = e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  if (!o) return "#000000";
+  const t = parseInt(o[1]), c = parseInt(o[2]), l = parseInt(o[3]);
+  return "#" + [t, c, l].map((r) => {
+    const a = r.toString(16);
+    return a.length === 1 ? "0" + a : a;
   }).join("");
 }
-function E(e) {
-  const t = window.getSelection();
-  t && t.rangeCount > 0 && (f = t.getRangeAt(0).cloneRange()), i = w(), o = document.createElement("div"), o.className = "rte-inline-color-picker", y(e) && o.classList.add("rte-theme-dark"), o.addEventListener("click", (l) => l.stopPropagation()), o.innerHTML = `
+function L(e) {
+  const o = window.getSelection();
+  o && o.rangeCount > 0 && (g = o.getRangeAt(0).cloneRange()), i = T(), n = document.createElement("div"), n.className = "rte-inline-color-picker", S(e) && n.classList.add("rte-theme-dark"), n.addEventListener("click", (t) => t.stopPropagation()), n.innerHTML = `
     <div class="rte-color-picker-header">
       <span class="rte-color-picker-title">Text Color</span>
       <button class="rte-color-picker-close" aria-label="Close">×</button>
@@ -103,13 +119,13 @@ function E(e) {
       <div class="rte-color-section">
         <label class="rte-color-section-label">Colors</label>
         <div class="rte-color-palette">
-          ${k.map((l) => `
+          ${C.map((t) => `
             <button
-              class="rte-color-swatch ${i === l ? "selected" : ""}"
-              style="background-color: ${l}; ${l === "#ffffff" ? "border: 1px solid #ccc;" : ""}"
-              data-color="${l}"
-              title="${l.toUpperCase()}"
-              aria-label="${l.toUpperCase()}"
+              class="rte-color-swatch ${i === t ? "selected" : ""}"
+              style="background-color: ${t}; ${t === "#ffffff" ? "border: 1px solid #ccc;" : ""}"
+              data-color="${t}"
+              title="${t.toUpperCase()}"
+              aria-label="${t.toUpperCase()}"
             ></button>
           `).join("")}
         </div>
@@ -136,72 +152,72 @@ function E(e) {
         </div>
       </div>
     </div>
-  `;
-  const r = e.getBoundingClientRect();
-  o.style.position = "absolute", o.style.top = `${r.bottom + window.scrollY + 4}px`, o.style.left = `${r.left + window.scrollX}px`, o.style.zIndex = "10000", document.body.appendChild(o), p = e, T();
+  `, document.body.appendChild(n), d && (d.destroy(), d = null), d = w({
+    popover: n,
+    anchor: e,
+    onClose: p,
+    gap: 4,
+    margin: 8,
+    zIndex: 1e4
+  }), P();
 }
-function T() {
-  if (!o) return;
-  o.querySelector(".rte-color-picker-close")?.addEventListener("click", () => a()), o.querySelectorAll(".rte-color-swatch").forEach((c) => {
-    c.addEventListener("click", () => {
-      const n = c.getAttribute("data-color");
-      n && (i = n, d(n), a());
+function P() {
+  if (!n) return;
+  n.querySelector(".rte-color-picker-close")?.addEventListener("click", () => p()), n.querySelectorAll(".rte-color-swatch").forEach((l) => {
+    l.addEventListener("click", () => {
+      const r = l.getAttribute("data-color");
+      r && (i = r, f(r), p());
     });
   });
-  const r = o.querySelector(".rte-color-input-native");
-  r?.addEventListener("change", (c) => {
-    const n = c.target.value;
-    i = n, d(n), a();
+  const t = n.querySelector(".rte-color-input-native");
+  t?.addEventListener("change", (l) => {
+    const r = l.target.value;
+    i = r, f(r), p();
   });
-  const l = o.querySelector(".rte-color-input-text");
-  l?.addEventListener("change", (c) => {
-    const n = c.target.value;
-    /^#[0-9A-Fa-f]{6}$/.test(n) && (i = n, d(n), a());
-  }), r?.addEventListener("input", (c) => {
-    const n = c.target.value;
-    i = n, x(n), b(n), L(n);
-  }), l?.addEventListener("input", (c) => {
-    const n = c.target.value;
-    /^#[0-9A-Fa-f]{6}$/.test(n) && (i = n, x(n), b(n), S(n));
+  const c = n.querySelector(".rte-color-input-text");
+  c?.addEventListener("change", (l) => {
+    const r = l.target.value;
+    /^#[0-9A-Fa-f]{6}$/.test(r) && (i = r, f(r), p());
+  }), t?.addEventListener("input", (l) => {
+    const r = l.target.value;
+    i = r, m(r), k(r), _(r);
+  }), c?.addEventListener("input", (l) => {
+    const r = l.target.value;
+    /^#[0-9A-Fa-f]{6}$/.test(r) && (i = r, m(r), k(r), $(r));
   });
 }
-function x(e) {
-  if (!o) return;
-  const t = o.querySelector(".rte-color-preview-box"), r = o.querySelector(".rte-color-preview-label");
-  t && (t.style.backgroundColor = e, t.style.border = e === "#ffffff" ? "1px solid #ccc" : "none"), r && (r.textContent = e.toUpperCase());
+function m(e) {
+  if (!n) return;
+  const o = n.querySelector(".rte-color-preview-box"), t = n.querySelector(".rte-color-preview-label");
+  o && (o.style.backgroundColor = e, o.style.border = e === "#ffffff" ? "1px solid #ccc" : "none"), t && (t.textContent = e.toUpperCase());
 }
-function b(e) {
-  if (!o) return;
-  o.querySelectorAll(".rte-color-swatch").forEach((r) => {
-    r.getAttribute("data-color") === e ? r.classList.add("selected") : r.classList.remove("selected");
+function k(e) {
+  if (!n) return;
+  n.querySelectorAll(".rte-color-swatch").forEach((t) => {
+    t.getAttribute("data-color") === e ? t.classList.add("selected") : t.classList.remove("selected");
   });
 }
-function S(e) {
-  if (!o) return;
-  const t = o.querySelector(".rte-color-input-native");
-  t && (t.value = e);
+function $(e) {
+  if (!n) return;
+  const o = n.querySelector(".rte-color-input-native");
+  o && (o.value = e);
 }
-function L(e) {
-  if (!o) return;
-  const t = o.querySelector(".rte-color-input-text");
-  t && (t.value = e);
+function _(e) {
+  if (!n) return;
+  const o = n.querySelector(".rte-color-input-text");
+  o && (o.value = e);
 }
-function a() {
-  o && (o.remove(), o = null), p = null, f = null;
+function p() {
+  d && (d.destroy(), d = null), n && (n.remove(), n = null), g = null;
 }
-function $() {
-  if (o)
-    return a(), !0;
-  const e = v("openTextColorPicker");
-  return e ? (E(e), !0) : !1;
+function R() {
+  if (x(), n)
+    return p(), !0;
+  const e = E("openTextColorPicker");
+  return e ? (L(e), !0) : !1;
 }
-function g() {
-  if (!window.__textColorPluginInitialized && (window.__textColorPluginInitialized = !0, document.addEventListener("click", (e) => {
-    if (o && p) {
-      const t = e.target;
-      !o.contains(t) && !p.contains(t) && a();
-    }
-  }), !document.getElementById("text-color-plugin-styles"))) {
+function x() {
+  if (!window.__textColorPluginInitialized && (window.__textColorPluginInitialized = !0, !document.getElementById("text-color-plugin-styles"))) {
     const e = document.createElement("style");
     e.id = "text-color-plugin-styles", e.textContent = `
       .rte-inline-color-picker {
@@ -455,8 +471,8 @@ function g() {
     `, document.head.appendChild(e);
   }
 }
-document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", g) : setTimeout(g, 100);
-const A = () => ({
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", x) : setTimeout(x, 100);
+const N = () => ({
   name: "textColor",
   marks: {
     textColor: {
@@ -467,15 +483,15 @@ const A = () => ({
         {
           tag: "span[style*=color]",
           getAttrs: (e) => {
-            const r = (e.getAttribute("style") || "").match(/color:\s*([^;]+)/);
-            return r ? { color: r[1] } : null;
+            const t = (e.getAttribute("style") || "").match(/color:\s*([^;]+)/);
+            return t ? { color: t[1] } : null;
           }
         },
         {
           tag: "font[color]",
           getAttrs: (e) => {
-            const t = e.getAttribute("color");
-            return t ? { color: t } : null;
+            const o = e.getAttribute("color");
+            return o ? { color: o } : null;
           }
         }
       ],
@@ -497,11 +513,11 @@ const A = () => ({
     }
   ],
   commands: {
-    openTextColorPicker: () => $(),
-    setTextColor: (e) => e ? d(e) : !1
+    openTextColorPicker: () => R(),
+    setTextColor: (e) => e ? f(e) : !1
   },
   keymap: {}
 });
 export {
-  A as TextColorPlugin
+  N as TextColorPlugin
 };

package/index.d.ts

@@ -8,6 +8,48 @@ export interface ApiConfig {
 export type MediaManagerConfig = Record<string, unknown>;
 export type DocumentManagerConfig = Record<string, unknown>;
 
+export interface MergeTagItem {
+  key?: string;
+  label: string;
+  category?: string;
+  preview?: string;
+  description?: string;
+  value?: string;
+}
+
+export interface MergeTagCategory {
+  id?: string;
+  name: string;
+  tags: MergeTagItem[];
+}
+
+export interface MergeTagDialogOptions {
+  title?: string;
+  searchPlaceholder?: string;
+  emptyStateText?: string;
+  cancelText?: string;
+  insertText?: string;
+  showPreview?: boolean;
+}
+
+export interface MergeTagPluginOptions {
+  tags?: MergeTagItem[];
+  categories?: MergeTagCategory[];
+  defaultCategory?: string;
+  dialog?: MergeTagDialogOptions;
+  tokenTemplate?: string | ((tag: MergeTagItem & { key: string; category: string }) => string);
+}
+
+export interface Template {
+  id: string;
+  name: string;
+  category: string;
+  html: string;
+  description?: string;
+  preview?: string;
+  tags?: string[];
+}
+
 export function HeadingPlugin(): Plugin;
 export function BoldPlugin(): Plugin;
 export function ItalicPlugin(): Plugin;
@@ -50,8 +92,16 @@ export function PrintPlugin(): Plugin;
 export function PageBreakPlugin(): Plugin;
 export function FootnotePlugin(): Plugin;
 export function CodeSamplePlugin(): Plugin;
-export function MergeTagPlugin(): Plugin;
+export function MergeTagPlugin(options?: MergeTagPluginOptions): Plugin;
 export function TemplatePlugin(): Plugin;
+export const PREDEFINED_TEMPLATES: Template[];
+export function addCustomTemplate(template: Template): boolean;
+export function getAllTemplates(): Template[];
+export function getTemplatesByCategory(category: string): Template[];
+export function getTemplateCategories(): string[];
+export function searchTemplates(query: string): Template[];
+export function sanitizeTemplate(html: string): string;
+export function validateTemplate(template: Template): boolean;
 export function CommentsPlugin(): Plugin;
 export function SpellCheckPlugin(): Plugin;
 export function A11yCheckerPlugin(): Plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/plugins",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "40+ Free Premium Plugins for Editora Rich Text Editor. Table editor, code formatting, accessibility, math, media, and more. Free enterprise plugin collection.",
   "author": "Ajay Kumar <ajaykr089@gmail.com>",
   "license": "MIT",
@@ -40,6 +40,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "index.d.ts",
+  "style": "dist/plugins.css",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -298,7 +299,8 @@
       "import": "./dist/underline.esm.js",
       "require": "./dist/underline.cjs.js",
       "default": "./dist/underline.esm.js"
-    }
+    },
+    "./styles.css": "./dist/plugins.css"
   },
   "files": [
     "dist",
@@ -315,14 +317,14 @@
     "prepublishOnly": "npm run typecheck:build && npm run build"
   },
   "peerDependencies": {
-    "@editora/core": "^1.0.6"
+    "@editora/core": "^1.0.7"
   },
   "dependencies": {
     "katex": "^0.16.27",
     "mathjax": "^3.2.2"
   },
   "devDependencies": {
-    "@editora/core": "^1.0.6",
+    "@editora/core": "^1.0.7",
     "@types/katex": "^0.16.8",
     "typescript": "^5.0.0",
     "vite": "^7.3.1"

package/dist/colorSelectionApply-C0iOfMWb.js

@@ -1 +0,0 @@
-"use strict";const u="p,div,li,ul,ol,table,thead,tbody,tfoot,tr,td,th,h1,h2,h3,h4,h5,h6,blockquote,pre";function i(e){return!!e.cloneContents().querySelector(u)}function s(e,t){return(e?.nodeType===Node.ELEMENT_NODE?e:e?.parentElement??null)?.closest('[contenteditable="true"]')||t()?.querySelector('[contenteditable="true"]')||document.querySelector('[contenteditable="true"]')}function c(e,t){const n=s(e,t);n&&n.dispatchEvent(new Event("input",{bubbles:!0}))}function f(e,t){let o=e.startContainer.nodeType===Node.TEXT_NODE?e.startContainer.parentElement:e.startContainer;for(;o&&o!==document.body;){if(o.classList.contains(t)){const a=document.createRange();if(a.selectNodeContents(o),a.compareBoundaryPoints(Range.START_TO_START,e)<=0&&a.compareBoundaryPoints(Range.END_TO_END,e)>=0)return o}o=o.parentElement}return null}function m(e){try{if(e.savedRange){const r=window.getSelection();r&&(r.removeAllRanges(),r.addRange(e.savedRange.cloneRange()))}const t=window.getSelection();if(!t||t.rangeCount===0||t.isCollapsed)return!1;const n=t.getRangeAt(0);if(n.collapsed)return!1;const o=f(n,e.className);if(o)return e.styleProperty==="backgroundColor"?o.style.backgroundColor=e.color:o.style.color=e.color,c(o,e.getActiveEditorRoot),!0;s(n.commonAncestorContainer,e.getActiveEditorRoot)?.focus({preventScroll:!0});try{document.execCommand("styleWithCSS",!1,"true")}catch{}let l=!1;if(e.commands.forEach(r=>{l||(l=document.execCommand(r,!1,e.color))}),!l&&!i(n)){const r=document.createElement("span");e.styleProperty==="backgroundColor"?r.style.backgroundColor=e.color:r.style.color=e.color,r.className=e.className;const d=n.extractContents();r.appendChild(d),n.insertNode(r),n.setStartAfter(r),n.collapse(!0),t.removeAllRanges(),t.addRange(n),l=!0}return l?(c(n.commonAncestorContainer,e.getActiveEditorRoot),!0):(e.warnMessage&&console.warn(e.warnMessage),!1)}catch(t){return e.warnMessage?console.error(e.warnMessage,t):console.error("[ColorApply] Failed to apply color",t),!1}}exports.applyColorToSelection=m;

package/dist/colorSelectionApply-D8r_gV32.mjs

@@ -1,63 +0,0 @@
-const u = "p,div,li,ul,ol,table,thead,tbody,tfoot,tr,td,th,h1,h2,h3,h4,h5,h6,blockquote,pre";
-function i(e) {
-  return !!e.cloneContents().querySelector(u);
-}
-function s(e, t) {
-  return (e?.nodeType === Node.ELEMENT_NODE ? e : e?.parentElement ?? null)?.closest('[contenteditable="true"]') || t()?.querySelector('[contenteditable="true"]') || document.querySelector('[contenteditable="true"]');
-}
-function c(e, t) {
-  const n = s(e, t);
-  n && n.dispatchEvent(new Event("input", { bubbles: !0 }));
-}
-function f(e, t) {
-  let o = e.startContainer.nodeType === Node.TEXT_NODE ? e.startContainer.parentElement : e.startContainer;
-  for (; o && o !== document.body; ) {
-    if (o.classList.contains(t)) {
-      const l = document.createRange();
-      if (l.selectNodeContents(o), l.compareBoundaryPoints(Range.START_TO_START, e) <= 0 && l.compareBoundaryPoints(Range.END_TO_END, e) >= 0)
-        return o;
-    }
-    o = o.parentElement;
-  }
-  return null;
-}
-function m(e) {
-  try {
-    if (e.savedRange) {
-      const r = window.getSelection();
-      r && (r.removeAllRanges(), r.addRange(e.savedRange.cloneRange()));
-    }
-    const t = window.getSelection();
-    if (!t || t.rangeCount === 0 || t.isCollapsed)
-      return !1;
-    const n = t.getRangeAt(0);
-    if (n.collapsed)
-      return !1;
-    const o = f(n, e.className);
-    if (o)
-      return e.styleProperty === "backgroundColor" ? o.style.backgroundColor = e.color : o.style.color = e.color, c(o, e.getActiveEditorRoot), !0;
-    s(
-      n.commonAncestorContainer,
-      e.getActiveEditorRoot
-    )?.focus({ preventScroll: !0 });
-    try {
-      document.execCommand("styleWithCSS", !1, "true");
-    } catch {
-    }
-    let a = !1;
-    if (e.commands.forEach((r) => {
-      a || (a = document.execCommand(r, !1, e.color));
-    }), !a && !i(n)) {
-      const r = document.createElement("span");
-      e.styleProperty === "backgroundColor" ? r.style.backgroundColor = e.color : r.style.color = e.color, r.className = e.className;
-      const d = n.extractContents();
-      r.appendChild(d), n.insertNode(r), n.setStartAfter(r), n.collapse(!0), t.removeAllRanges(), t.addRange(n), a = !0;
-    }
-    return a ? (c(n.commonAncestorContainer, e.getActiveEditorRoot), !0) : (e.warnMessage && console.warn(e.warnMessage), !1);
-  } catch (t) {
-    return e.warnMessage ? console.error(e.warnMessage, t) : console.error("[ColorApply] Failed to apply color", t), !1;
-  }
-}
-export {
-  m as a
-};