@editora/plugins 1.0.2 → 1.0.4

package/dist/text-color.esm.js

@@ -0,0 +1,507 @@
+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 = [
+  "#000000",
+  "#ffffff",
+  "#808080",
+  "#ff0000",
+  "#00ff00",
+  "#0000ff",
+  "#ffff00",
+  "#ff00ff",
+  "#00ffff",
+  "#ffa500",
+  "#800080",
+  "#ffc0cb"
+];
+function m() {
+  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(
+        '[data-editora-editor="true"], .rte-editor, .editora-editor'
+      );
+      if (n) return n;
+    }
+  }
+  const t = document.activeElement;
+  return t ? t.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;
+  }
+  return document.querySelector(`[data-command="${e}"]`);
+}
+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;
+  }
+  return document.activeElement?.closest(s) ? !0 : document.body.matches(s) || document.documentElement.matches(s);
+}
+function d(e) {
+  return h({
+    color: e,
+    className: "rte-text-color",
+    styleProperty: "color",
+    commands: ["foreColor"],
+    savedRange: f,
+    getActiveEditorRoot: m,
+    warnMessage: "[TextColor] Could not apply color for current selection"
+  });
+}
+function w() {
+  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);
+    }
+    r = r.parentNode;
+  }
+  return "#000000";
+}
+function C(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;
+  }).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 = `
+    <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>
+    </div>
+    
+    <div class="rte-color-picker-body">
+      <!-- Current Color Preview -->
+      <div class="rte-color-preview-section">
+        <div class="rte-color-preview-box" style="background-color: ${i}; ${i === "#ffffff" ? "border: 1px solid #ccc;" : ""}"></div>
+        <span class="rte-color-preview-label">${i.toUpperCase()}</span>
+      </div>
+
+      <!-- Preset Colors -->
+      <div class="rte-color-section">
+        <label class="rte-color-section-label">Colors</label>
+        <div class="rte-color-palette">
+          ${k.map((l) => `
+            <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()}"
+            ></button>
+          `).join("")}
+        </div>
+      </div>
+
+      <!-- Custom Color -->
+      <div class="rte-color-section">
+        <label class="rte-color-section-label">Custom</label>
+        <div class="rte-custom-color-inputs">
+          <input
+            type="color"
+            value="${i}"
+            class="rte-color-input-native"
+            aria-label="Color picker"
+          />
+          <input
+            type="text"
+            value="${i}"
+            placeholder="#000000"
+            pattern="^#[0-9A-Fa-f]{6}$"
+            class="rte-color-input-text"
+            aria-label="Hex color input"
+          />
+        </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();
+}
+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());
+    });
+  });
+  const r = o.querySelector(".rte-color-input-native");
+  r?.addEventListener("change", (c) => {
+    const n = c.target.value;
+    i = n, d(n), a();
+  });
+  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));
+  });
+}
+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 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 S(e) {
+  if (!o) return;
+  const t = o.querySelector(".rte-color-input-native");
+  t && (t.value = e);
+}
+function L(e) {
+  if (!o) return;
+  const t = o.querySelector(".rte-color-input-text");
+  t && (t.value = e);
+}
+function a() {
+  o && (o.remove(), o = null), p = null, f = null;
+}
+function $() {
+  if (o)
+    return a(), !0;
+  const e = v("openTextColorPicker");
+  return e ? (E(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"))) {
+    const e = document.createElement("style");
+    e.id = "text-color-plugin-styles", e.textContent = `
+      .rte-inline-color-picker {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        width: 220px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      }
+
+      .rte-color-picker-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .rte-color-picker-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+      }
+
+      .rte-color-picker-close {
+        background: none;
+        border: none;
+        font-size: 24px;
+        cursor: pointer;
+        color: #999;
+        padding: 0;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+
+      .rte-color-picker-close:hover {
+        color: #333;
+      }
+
+      .rte-color-picker-body {
+        padding: 8px;
+      }
+
+      .rte-color-preview-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 8px;
+        padding: 6px;
+        background-color: #f8f9fa;
+        border-radius: 6px;
+        border: 1px solid #e0e0e0;
+      }
+
+      .rte-color-preview-box {
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        flex-shrink: 0;
+      }
+
+      .rte-color-preview-label {
+        font-size: 13px;
+        font-weight: 500;
+        color: #666;
+        font-family: monospace;
+      }
+
+      .rte-color-section {
+        margin-bottom: 16px;
+      }
+
+      .rte-color-section:last-child {
+        margin-bottom: 0;
+      }
+
+      .rte-color-section-label {
+        display: block;
+        font-size: 12px;
+        font-weight: 600;
+        color: #666;
+        margin-bottom: 8px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .rte-color-palette {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 6px;
+        max-width: 180px;
+      }
+
+      .rte-color-swatch {
+        width: 100%;
+        aspect-ratio: 1;
+        border: 1px solid #e0e0e0;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        padding: 0;
+        min-height: 20px;
+      }
+
+      .rte-color-swatch:hover {
+        transform: scale(1.05);
+        border-color: #ccc;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .rte-color-swatch.selected {
+        border-color: #1976d2;
+        box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.3);
+      }
+
+      .rte-custom-color-inputs {
+        display: flex;
+        gap: 8px;
+      }
+
+      .rte-color-input-native {
+        width: 50px;
+        height: 26px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 2px;
+      }
+
+      .rte-color-input-text {
+        flex: 1;
+        height: 26px;
+        width: 50px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 0 12px;
+        font-size: 13px;
+        font-family: monospace;
+      }
+
+      .rte-color-input-text:focus {
+        outline: none;
+        border-color: #1976d2;
+      }
+
+      .rte-color-picker-footer {
+        padding: 12px 16px;
+        border-top: 1px solid #eee;
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+      }
+
+      .rte-btn-primary,
+      .rte-btn-secondary {
+        padding: 6px 16px;
+        border-radius: 4px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+      }
+
+      .rte-btn-primary {
+        background-color: #1976d2;
+        color: white;
+      }
+
+      .rte-btn-primary:hover {
+        background-color: #1565c0;
+      }
+
+      .rte-btn-secondary {
+        background-color: #f5f5f5;
+        color: #333;
+        border: 1px solid #ddd;
+      }
+
+      .rte-btn-secondary:hover {
+        background-color: #eeeeee;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark {
+        background: #1f2937;
+        border: 1px solid #4b5563;
+        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-picker-header {
+        border-bottom-color: #3b4657;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-picker-title {
+        color: #e2e8f0;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-picker-close {
+        color: #94a3b8;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-picker-close:hover {
+        color: #f8fafc;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-preview-section {
+        background-color: #111827;
+        border-color: #4b5563;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-preview-label {
+        color: #cbd5e1;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-section-label {
+        color: #9fb0c6;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-swatch {
+        border-color: #4b5563;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-swatch:hover {
+        border-color: #7a8ba5;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-swatch.selected {
+        border-color: #58a6ff;
+        box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.4);
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-input-native,
+      .rte-inline-color-picker.rte-theme-dark .rte-color-input-text {
+        background: #111827;
+        border-color: #4b5563;
+        color: #e2e8f0;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-input-text::placeholder {
+        color: #94a3b8;
+      }
+
+      .rte-inline-color-picker.rte-theme-dark .rte-color-input-text:focus {
+        border-color: #58a6ff;
+      }
+    `, document.head.appendChild(e);
+  }
+}
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", g) : setTimeout(g, 100);
+const A = () => ({
+  name: "textColor",
+  marks: {
+    textColor: {
+      attrs: {
+        color: { default: "#000000" }
+      },
+      parseDOM: [
+        {
+          tag: "span[style*=color]",
+          getAttrs: (e) => {
+            const r = (e.getAttribute("style") || "").match(/color:\s*([^;]+)/);
+            return r ? { color: r[1] } : null;
+          }
+        },
+        {
+          tag: "font[color]",
+          getAttrs: (e) => {
+            const t = e.getAttribute("color");
+            return t ? { color: t } : null;
+          }
+        }
+      ],
+      toDOM: (e) => [
+        "span",
+        {
+          style: `color: ${e.attrs?.color || "#000000"}`,
+          class: "rte-text-color"
+        },
+        0
+      ]
+    }
+  },
+  toolbar: [
+    {
+      label: "Text Color",
+      command: "openTextColorPicker",
+      icon: '<svg width="24" height="24" focusable="false"><g fill-rule="evenodd"><path class="tox-icon-text-color__color" d="M3 18h18v3H3z" fill="currentColor"></path><path d="M8.7 16h-.8a.5.5 0 0 1-.5-.6l2.7-9c.1-.3.3-.4.5-.4h2.8c.2 0 .4.1.5.4l2.7 9a.5.5 0 0 1-.5.6h-.8a.5.5 0 0 1-.4-.4l-.7-2.2c0-.3-.3-.4-.5-.4h-3.4c-.2 0-.4.1-.5.4l-.7 2.2c0 .3-.2.4-.4.4Zm2.6-7.6-.6 2a.5.5 0 0 0 .5.6h1.6a.5.5 0 0 0 .5-.6l-.6-2c0-.3-.3-.4-.5-.4h-.4c-.2 0-.4.1-.5.4Z"></path></g></svg>'
+    }
+  ],
+  commands: {
+    openTextColorPicker: () => $(),
+    setTextColor: (e) => e ? d(e) : !1
+  },
+  keymap: {}
+});
+export {
+  A as TextColorPlugin
+};

package/dist/underline.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=()=>({name:"underline",marks:{underline:{parseDOM:[{tag:"u"}],toDOM:()=>["u",{},0]}},toolbar:[{label:"Underline",command:"toggleUnderline",icon:'<svg width="24" height="24" focusable="false"><path d="M16 5c.6 0 1 .4 1 1v7c0 2.8-2.2 5-5 5s-5-2.2-5-5V6c0-.6.4-1 1-1s1 .4 1 1v7c0 1.7 1.3 3 3 3s3-1.3 3-3V6c0-.6.4-1 1-1ZM4 17h16c.6 0 1 .4 1 1s-.4 1-1 1H4a1 1 0 1 1 0-2Z" fill-rule="evenodd"></path></svg>',shortcut:"Mod-u"}],commands:{toggleUnderline:()=>(document.execCommand("underline",!1),!0)},keymap:{"Mod-u":"toggleUnderline","Mod-U":"toggleUnderline"}});exports.UnderlinePlugin=e;

package/dist/underline.esm.js

@@ -0,0 +1,34 @@
+const e = () => ({
+  name: "underline",
+  // Schema definition for underline mark
+  marks: {
+    underline: {
+      parseDOM: [{ tag: "u" }],
+      toDOM: () => ["u", {}, 0]
+    }
+  },
+  // Toolbar button configuration (matching React version exactly)
+  toolbar: [
+    {
+      label: "Underline",
+      command: "toggleUnderline",
+      icon: '<svg width="24" height="24" focusable="false"><path d="M16 5c.6 0 1 .4 1 1v7c0 2.8-2.2 5-5 5s-5-2.2-5-5V6c0-.6.4-1 1-1s1 .4 1 1v7c0 1.7 1.3 3 3 3s3-1.3 3-3V6c0-.6.4-1 1-1ZM4 17h16c.6 0 1 .4 1 1s-.4 1-1 1H4a1 1 0 1 1 0-2Z" fill-rule="evenodd"></path></svg>',
+      shortcut: "Mod-u"
+    }
+  ],
+  // Native command implementations
+  commands: {
+    /**
+     * Toggle underline formatting on current selection
+     */
+    toggleUnderline: () => (document.execCommand("underline", !1), !0)
+  },
+  // Keyboard shortcuts
+  keymap: {
+    "Mod-u": "toggleUnderline",
+    "Mod-U": "toggleUnderline"
+  }
+});
+export {
+  e as UnderlinePlugin
+};

package/index.d.ts

@@ -0,0 +1,62 @@
+import type { Plugin } from "@editora/core";
+
+export interface ApiConfig {
+  apiUrl: string;
+  headers?: Record<string, string>;
+}
+
+export type MediaManagerConfig = Record<string, unknown>;
+export type DocumentManagerConfig = Record<string, unknown>;
+
+export function HeadingPlugin(): Plugin;
+export function BoldPlugin(): Plugin;
+export function ItalicPlugin(): Plugin;
+export function UnderlinePlugin(): Plugin;
+export function StrikethroughPlugin(): Plugin;
+export function ListPlugin(): Plugin;
+export function ChecklistPlugin(): Plugin;
+export function HistoryPlugin(): Plugin;
+export function LinkPlugin(): Plugin;
+export function BlockquotePlugin(): Plugin;
+export function ClearFormattingPlugin(): Plugin;
+export function CodePlugin(): Plugin;
+export function TablePlugin(): Plugin;
+export function FontSizePlugin(): Plugin;
+export function FontFamilyPlugin(): Plugin;
+export function TextAlignmentPlugin(): Plugin;
+export function TextColorPlugin(): Plugin;
+export function BackgroundColorPlugin(): Plugin;
+export function LineHeightPlugin(): Plugin;
+export function IndentPlugin(): Plugin;
+export function DirectionPlugin(): Plugin;
+export function CapitalizationPlugin(): Plugin;
+export function MathPlugin(): Plugin;
+export function SpecialCharactersPlugin(): Plugin;
+export function EmojisPlugin(): Plugin;
+export function EmbedIframePlugin(): Plugin;
+export function AnchorPlugin(): Plugin;
+
+export function MediaManagerPlugin(): Plugin;
+export function setMediaManagerConfig(config: Partial<MediaManagerConfig>): void;
+export function getMediaManagerConfig(): MediaManagerConfig;
+
+export function DocumentManagerPlugin(): Plugin;
+export function setDocumentManagerConfig(config: Partial<DocumentManagerConfig>): void;
+export function getDocumentManagerConfig(): DocumentManagerConfig;
+
+export function PreviewPlugin(): Plugin;
+export function FullscreenPlugin(): Plugin;
+export function PrintPlugin(): Plugin;
+export function PageBreakPlugin(): Plugin;
+export function FootnotePlugin(): Plugin;
+export function CodeSamplePlugin(): Plugin;
+export function MergeTagPlugin(): Plugin;
+export function TemplatePlugin(): Plugin;
+export function CommentsPlugin(): Plugin;
+export function SpellCheckPlugin(): Plugin;
+export function A11yCheckerPlugin(): Plugin;
+
+export function setGlobalApiConfig(config: Partial<ApiConfig>): void;
+export function getGlobalApiConfig(): ApiConfig;
+export function getGlobalApiHeaders(): Record<string, string>;
+export function buildApiUrl(baseUrl: string, path: string): string;