@editora/plugins 1.0.2 → 1.0.4

package/dist/code-sample.esm.js

@@ -0,0 +1,381 @@
+const w = () => {
+  const d = window.getSelection();
+  if (d && d.rangeCount > 0) {
+    let t = d.getRangeAt(0).startContainer;
+    for (; t && t !== document.body; ) {
+      if (t.nodeType === Node.ELEMENT_NODE) {
+        const n = t;
+        if (n.getAttribute("contenteditable") === "true")
+          return n;
+      }
+      t = t.parentNode;
+    }
+  }
+  const a = document.activeElement;
+  if (a) {
+    if (a.getAttribute("contenteditable") === "true")
+      return a;
+    const t = a.closest('[contenteditable="true"]');
+    if (t) return t;
+  }
+  return document.querySelector('[contenteditable="true"]');
+}, k = '[data-theme="dark"], .dark, .editora-theme-dark', N = () => {
+  if (w()?.closest(k)) return !0;
+  const a = window.getSelection();
+  if (a && a.rangeCount > 0) {
+    const n = a.getRangeAt(0).startContainer;
+    if ((n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement)?.closest(k)) return !0;
+  }
+  return document.activeElement?.closest(k) ? !0 : document.body.matches(k) || document.documentElement.matches(k);
+}, A = [
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "python", label: "Python" },
+  { value: "java", label: "Java" },
+  { value: "csharp", label: "C#" },
+  { value: "cpp", label: "C++" },
+  { value: "c", label: "C" },
+  { value: "php", label: "PHP" },
+  { value: "ruby", label: "Ruby" },
+  { value: "go", label: "Go" },
+  { value: "rust", label: "Rust" },
+  { value: "swift", label: "Swift" },
+  { value: "kotlin", label: "Kotlin" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "scss", label: "SCSS" },
+  { value: "json", label: "JSON" },
+  { value: "xml", label: "XML" },
+  { value: "yaml", label: "YAML" },
+  { value: "markdown", label: "Markdown" },
+  { value: "sql", label: "SQL" },
+  { value: "bash", label: "Bash" },
+  { value: "shell", label: "Shell" },
+  { value: "plaintext", label: "Plain Text" }
+], S = /* @__PURE__ */ new Map();
+function $(d, a, t, n) {
+  const s = !!a, c = n || "javascript", g = t || "", p = N(), e = p ? {
+    overlay: "rgba(0, 0, 0, 0.62)",
+    dialogBg: "#1f2937",
+    dialogBorder: "#4b5563",
+    text: "#e2e8f0",
+    mutedText: "#a8b5c8",
+    headerFooterBg: "#222d3a",
+    border: "#3b4657",
+    fieldBg: "#111827",
+    fieldBorder: "#4b5563",
+    cancelBg: "#334155",
+    cancelHover: "#475569",
+    cancelText: "#e2e8f0",
+    primaryBg: "#3b82f6",
+    primaryHover: "#2563eb"
+  } : {
+    overlay: "rgba(0, 0, 0, 0.5)",
+    dialogBg: "#ffffff",
+    dialogBorder: "#e0e0e0",
+    text: "#333333",
+    mutedText: "#666666",
+    headerFooterBg: "#ffffff",
+    border: "#e0e0e0",
+    fieldBg: "#ffffff",
+    fieldBorder: "#dddddd",
+    cancelBg: "#e5e7eb",
+    cancelHover: "#d1d5db",
+    cancelText: "#333333",
+    primaryBg: "#2563eb",
+    primaryHover: "#1d4ed8"
+  }, l = document.createElement("div");
+  l.className = "rte-code-sample-overlay", p && l.classList.add("rte-theme-dark"), l.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: ${e.overlay};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    animation: fadeIn 160ms ease-out;
+  `;
+  const o = document.createElement("div");
+  o.className = "rte-code-sample-dialog", o.style.cssText = `
+    background: ${e.dialogBg};
+    border: 1px solid ${e.dialogBorder};
+    border-radius: 8px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 700px;
+    width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    animation: slideUp 200ms cubic-bezier(0.2, 0.9, 0.25, 1);
+  `;
+  const u = document.createElement("div");
+  u.style.cssText = `
+    padding: 20px;
+    border-bottom: 1px solid ${e.border};
+    background: ${e.headerFooterBg};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  `, u.innerHTML = `
+    <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: ${e.text};">
+      ${s ? "Edit Code Sample" : "Insert Code Sample"}
+    </h2>
+    <button class="rte-code-close-btn" style="background: none; border: none; font-size: 28px; color: ${e.mutedText}; cursor: pointer; padding: 0; width: 32px; height: 32px;">×</button>
+  `;
+  const m = document.createElement("div");
+  m.style.cssText = `
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+  `;
+  const i = document.createElement("div");
+  i.style.marginBottom = "20px", i.innerHTML = `
+    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: ${e.text}; font-size: 14px;">Language</label>
+    <select class="rte-code-language" style="
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid ${e.fieldBorder};
+      border-radius: 4px;
+      font-size: 14px;
+      background-color: ${e.fieldBg};
+      color: ${e.text};
+      cursor: pointer;
+    ">
+      ${A.map((r) => `
+        <option value="${r.value}" ${r.value === c ? "selected" : ""}>
+          ${r.label}
+        </option>
+      `).join("")}
+    </select>
+  `;
+  const b = document.createElement("div");
+  b.style.marginBottom = "20px", b.innerHTML = `
+    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: ${e.text}; font-size: 14px;">Code</label>
+    <textarea class="rte-code-textarea" spellcheck="false" placeholder="Paste or type your code here..." style="
+      width: 100%;
+      padding: 12px;
+      border: 1px solid ${e.fieldBorder};
+      border-radius: 4px;
+      font-family: 'Courier New', Courier, monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      resize: vertical;
+      min-height: 250px;
+      max-height: 400px;
+      background-color: ${e.fieldBg};
+      color: ${e.text};
+      box-sizing: border-box;
+    ">${g}</textarea>
+    <div class="rte-code-error" style="color: #dc2626; font-size: 12px; margin-top: 6px; display: none;"></div>
+  `;
+  const x = document.createElement("div");
+  x.style.cssText = `color: ${e.mutedText}; font-size: 12px; margin-top: 10px;`, x.innerHTML = "💡 Tip: Press Ctrl+Enter (or Cmd+Enter on Mac) to save, or Escape to cancel", m.appendChild(i), m.appendChild(b), m.appendChild(x);
+  const y = document.createElement("div");
+  y.style.cssText = `
+    padding: 20px;
+    border-top: 1px solid ${e.border};
+    background: ${e.headerFooterBg};
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  `, y.innerHTML = `
+    <button class="rte-code-cancel-btn" style="
+      padding: 10px 16px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      background: ${e.cancelBg};
+      color: ${e.cancelText};
+    ">Cancel</button>
+    <button class="rte-code-save-btn" style="
+      padding: 10px 16px;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      background: ${e.primaryBg};
+      color: #fff;
+    ">${s ? "Update Code Sample" : "Insert Code Sample"}</button>
+  `, o.appendChild(u), o.appendChild(m), o.appendChild(y), l.appendChild(o);
+  const L = i.querySelector(".rte-code-language"), E = b.querySelector(".rte-code-textarea"), B = b.querySelector(".rte-code-error"), f = u.querySelector(".rte-code-close-btn"), v = y.querySelector(".rte-code-cancel-btn"), h = y.querySelector(".rte-code-save-btn");
+  f.onmouseover = () => {
+    f.style.color = "#f8fafc", f.style.background = p ? "#334155" : "#f0f0f0", f.style.borderRadius = "4px";
+  }, f.onmouseout = () => {
+    f.style.color = e.mutedText, f.style.background = "none";
+  }, v.onmouseover = () => {
+    v.style.background = e.cancelHover;
+  }, v.onmouseout = () => {
+    v.style.background = e.cancelBg;
+  }, h.onmouseover = () => {
+    h.style.background = e.primaryHover;
+  }, h.onmouseout = () => {
+    h.style.background = e.primaryBg;
+  };
+  const C = () => {
+    l.remove();
+  }, T = () => {
+    const r = E.value.trim();
+    if (!r) {
+      B.textContent = "⚠ Code cannot be empty", B.style.display = "block";
+      return;
+    }
+    const M = L.value;
+    d(r, M), C();
+  };
+  if (f.onclick = C, v.onclick = C, h.onclick = T, E.addEventListener("keydown", (r) => {
+    (r.ctrlKey || r.metaKey) && r.key === "Enter" && (r.preventDefault(), T()), r.key === "Escape" && C();
+  }), E.addEventListener("input", () => {
+    B.style.display = "none";
+  }), l.addEventListener("click", (r) => {
+    r.target === l && C();
+  }), !document.getElementById("rte-code-sample-animations")) {
+    const r = document.createElement("style");
+    r.id = "rte-code-sample-animations", r.textContent = `
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes slideUp {
+        from { transform: translateY(20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+    `, document.head.appendChild(r);
+  }
+  return document.body.appendChild(l), setTimeout(() => E.focus(), 100), l;
+}
+function R() {
+  if (!w()) return;
+  let a = null;
+  const t = window.getSelection();
+  t && t.rangeCount > 0 && (a = t.getRangeAt(0).cloneRange()), $((n, s) => {
+    const c = window.getSelection();
+    if (a && (c?.removeAllRanges(), c?.addRange(a)), !c || c.rangeCount === 0) return;
+    const g = w();
+    if (!g) return;
+    const p = c.anchorNode;
+    if (!p || !g.contains(p)) return;
+    const e = c.getRangeAt(0), l = `code-block-${Date.now()}`, o = document.createElement("pre");
+    o.className = "rte-code-block", o.id = l, o.setAttribute("data-type", "code-block"), o.setAttribute("data-lang", s), o.setAttribute("data-code-id", l), o.setAttribute("contenteditable", "false"), o.style.cssText = `
+      display: block;
+      position: relative;
+      background: #f5f5f5;
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+      padding: 12px;
+      margin: 12px 0;
+      overflow-x: auto;
+      font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      color: #333;
+      user-select: text;
+      cursor: default;
+    `;
+    const u = document.createElement("code");
+    u.className = `language-${s}`, u.style.cssText = `
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      color: inherit;
+      white-space: pre;
+      word-break: normal;
+      display: block;
+    `, u.textContent = n;
+    const m = document.createElement("span");
+    m.style.cssText = `
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: #333;
+      color: #fff;
+      padding: 2px 8px;
+      font-size: 11px;
+      font-weight: bold;
+      border-radius: 0 6px 0 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      pointer-events: none;
+    `, m.textContent = s;
+    const i = document.createElement("button");
+    i.className = "rte-code-copy", i.textContent = "Copy", i.style.cssText = `
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      background: #fff;
+      border: 1px solid #d0d0d0;
+      border-radius: 3px;
+      padding: 4px 8px;
+      font-size: 11px;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    `, i.onclick = (x) => {
+      x.stopPropagation(), navigator.clipboard.writeText(n).then(() => {
+        i.textContent = "✓ Copied!", setTimeout(() => {
+          i.textContent = "Copy";
+        }, 2e3);
+      });
+    }, o.appendChild(m), o.appendChild(i), o.appendChild(u), o.addEventListener("mouseenter", () => {
+      i.style.opacity = "1";
+    }), o.addEventListener("mouseleave", () => {
+      i.style.opacity = "0";
+    }), o.addEventListener("dblclick", () => {
+      z(l);
+    }), S.set(l, {
+      id: l,
+      language: s,
+      code: n
+    }), e.insertNode(o);
+    const b = document.createRange();
+    b.setStartAfter(o), b.collapse(!0), c.removeAllRanges(), c.addRange(b);
+  });
+}
+function z(d) {
+  const a = w();
+  if (!a) return;
+  const t = a.querySelector(`#${d}`);
+  if (!t) return;
+  const n = S.get(d);
+  n && $(
+    (s, c) => {
+      const g = t.querySelector("code");
+      g && (g.textContent = s, g.className = `language-${c}`);
+      const p = t.querySelector("span");
+      p && (p.textContent = c), t.setAttribute("data-lang", c), n.language = c, n.code = s;
+      const e = t.querySelector(".rte-code-copy");
+      e && (e.onclick = (l) => {
+        l.stopPropagation(), navigator.clipboard.writeText(s).then(() => {
+          e.textContent = "✓ Copied!", setTimeout(() => {
+            e.textContent = "Copy";
+          }, 2e3);
+        });
+      });
+    },
+    d,
+    n.code,
+    n.language
+  );
+}
+const H = () => ({
+  name: "codeSample",
+  toolbar: [
+    {
+      label: "Code Block",
+      command: "insertCodeBlock",
+      icon: '<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 8L3 11.6923L7 16M17 8L21 11.6923L17 16M14 4L10 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+      shortcut: "Mod-Shift-C"
+    }
+  ],
+  commands: {
+    insertCodeBlock: (...d) => (R(), !0)
+  }
+});
+export {
+  H as CodeSamplePlugin
+};