@editora/plugins 1.0.2 → 1.0.5

package/dist/embed-iframe.esm.js

@@ -0,0 +1,556 @@
+const g = [
+  { label: "Inline Value", value: "inline" },
+  { label: "Responsive - 21x9", value: "21x9" },
+  { label: "Responsive - 16x9", value: "16x9" },
+  { label: "Responsive - 4x3", value: "4x3" },
+  { label: "Responsive - 1x1", value: "1x1" }
+], m = '[data-theme="dark"], .dark, .editora-theme-dark', u = /* @__PURE__ */ new WeakMap(), l = (e) => (u.has(e) || u.set(e, {
+  dialogElement: null,
+  activeTab: "general",
+  formData: {
+    src: "",
+    selectedSize: "inline",
+    width: "100%",
+    height: "400px",
+    constrainProportions: !0,
+    name: "",
+    title: "",
+    longDescription: "",
+    descriptionUrl: "",
+    showBorder: !0,
+    enableScrollbar: !0
+  }
+}), u.get(e));
+function v(e) {
+  return e?.matches(m) || e?.closest(m) || document.activeElement?.closest(m) ? !0 : document.body.matches(m) || document.documentElement.matches(m);
+}
+const I = () => ({
+  name: "embedIframe",
+  toolbar: [
+    {
+      label: "Embed Content",
+      command: "openEmbedIframeDialog",
+      icon: '<svg width="24" height="24" focusable="false"><path d="M19 6V5H5v14h2A13 13 0 0 1 19 6Zm0 1.4c-.8.8-1.6 2.4-2.2 4.6H19V7.4Zm0 5.6h-2.4c-.4 1.8-.6 3.8-.6 6h3v-6Zm-4 6c0-2.2.2-4.2.6-6H13c-.7 1.8-1.1 3.8-1.1 6h3Zm-4 0c0-2.2.4-4.2 1-6H9.6A12 12 0 0 0 8 19h3ZM4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm11.8 9c.4-1.9 1-3.4 1.8-4.5a9.2 9.2 0 0 0-4 4.5h2.2Zm-3.4 0a12 12 0 0 1 2.8-4 12 12 0 0 0-5 4h2.2Z" fill-rule="nonzero"></path></svg>',
+      shortcut: "Mod-Shift-e",
+      type: "button"
+    }
+  ],
+  commands: {
+    openEmbedIframeDialog: (e) => (x(e), !0)
+  },
+  keymap: {
+    "Mod-Shift-e": "openEmbedIframeDialog"
+  }
+});
+function x(e) {
+  if (!e) {
+    const o = document.activeElement;
+    o && o.closest("[data-editora-editor]") && (e = o.closest("[data-editora-editor]"));
+  }
+  if (e || (e = document.querySelector("[data-editora-editor]")), !e) {
+    console.warn("Editor element not found");
+    return;
+  }
+  const t = l(e);
+  t.formData = {
+    src: "",
+    selectedSize: "inline",
+    width: "100%",
+    height: "400px",
+    constrainProportions: !0,
+    name: "",
+    title: "",
+    longDescription: "",
+    descriptionUrl: "",
+    showBorder: !0,
+    enableScrollbar: !0
+  }, t.activeTab = "general";
+  const a = document.createElement("div");
+  a.className = "rte-dialog-overlay rte-embed-iframe-overlay", v(e) && a.classList.add("rte-theme-dark"), a.onclick = () => f(e);
+  const r = document.createElement("div");
+  r.className = "rte-dialog-content embed-iframe-dialog", r.onclick = (o) => o.stopPropagation(), r.innerHTML = `
+    <div class="rte-dialog-header">
+      <h3>Embed Iframe</h3>
+      <button class="rte-dialog-close">×</button>
+    </div>
+    <div class="rte-dialog-body">
+      <div class="rte-vertical-tabs">
+        <div class="rte-tab-buttons">
+          <button class="rte-tab-button active" data-tab="general">General</button>
+          <button class="rte-tab-button" data-tab="advanced">Advanced</button>
+        </div>
+        <div class="rte-tab-content">
+          <div class="rte-tab-panel" data-panel="general" style="display: block;">
+            <div class="rte-form-group">
+              <label class="rte-form-label">Source</label>
+              <input type="url" class="rte-form-input" id="iframe-src" placeholder="https://example.com" required />
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-form-label">Size</label>
+              <select class="rte-form-select" id="iframe-size">
+                ${g.map((o) => `<option value="${o.value}">${o.label}</option>`).join("")}
+              </select>
+            </div>
+            <div class="rte-form-row" id="dimensions-row">
+              <div class="rte-form-group">
+                <label class="rte-form-label">Width</label>
+                <input type="text" class="rte-form-input" id="iframe-width" placeholder="100%" value="100%" />
+              </div>
+              <div class="rte-form-group">
+                <label class="rte-form-label">Height</label>
+                <input type="text" class="rte-form-input" id="iframe-height" placeholder="400px" value="400px" />
+              </div>
+              <div class="rte-form-group constrain-group">
+                <button type="button" class="rte-constrain-btn locked" id="constrain-btn" title="Unlock proportions">🔒</button>
+              </div>
+            </div>
+          </div>
+          <div class="rte-tab-panel" data-panel="advanced" style="display: none;">
+            <div class="rte-form-group">
+              <label class="rte-form-label">Name</label>
+              <input type="text" class="rte-form-input" id="iframe-name" placeholder="Iframe name" />
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-form-label">Title</label>
+              <input type="text" class="rte-form-input" id="iframe-title" placeholder="Iframe title" />
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-form-label">Long Description</label>
+              <textarea class="rte-form-textarea" id="iframe-longdesc" placeholder="Detailed description of the iframe content" rows="3"></textarea>
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-form-label">Description URL</label>
+              <input type="url" class="rte-form-input" id="iframe-desc-url" placeholder="https://example.com/description" />
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-checkbox-label">
+                <input type="checkbox" id="iframe-border" checked />
+                Show iframe border
+              </label>
+            </div>
+            <div class="rte-form-group">
+              <label class="rte-checkbox-label">
+                <input type="checkbox" id="iframe-scrollbar" checked />
+                Enable scrollbar
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="rte-dialog-footer">
+      <button type="button" class="rte-btn rte-btn-secondary" id="cancel-btn">Cancel</button>
+      <button type="submit" class="rte-btn rte-btn-primary" id="save-btn">Save</button>
+    </div>
+  `, a.appendChild(r), document.body.appendChild(a), t.dialogElement = a, y(r, e), C(), setTimeout(() => {
+    r.querySelector("#iframe-src")?.focus();
+  }, 100);
+}
+function y(e, t) {
+  l(t), e.querySelector(".rte-dialog-close")?.addEventListener("click", () => f(t)), e.querySelectorAll(".rte-tab-button").forEach((i) => {
+    i.addEventListener("click", (n) => {
+      const c = n.target.getAttribute("data-tab");
+      c && k(e, c, t);
+    });
+  }), e.querySelector("#iframe-size")?.addEventListener("change", (i) => w(e, i.target.value, t));
+  const r = e.querySelector("#iframe-width"), o = e.querySelector("#iframe-height");
+  r?.addEventListener("input", (i) => S(e, i.target.value, t)), o?.addEventListener("input", (i) => D(e, i.target.value, t)), e.querySelector("#constrain-btn")?.addEventListener("click", () => q(e, t)), e.querySelector("#cancel-btn")?.addEventListener("click", () => f(t)), e.querySelector("#save-btn")?.addEventListener("click", () => E(e, t));
+}
+function k(e, t, a) {
+  const r = l(a);
+  r.activeTab = t, e.querySelectorAll(".rte-tab-button").forEach((o) => {
+    o.classList.toggle("active", o.getAttribute("data-tab") === t);
+  }), e.querySelectorAll(".rte-tab-panel").forEach((o) => {
+    o.style.display = o.getAttribute("data-panel") === t ? "block" : "none";
+  });
+}
+function w(e, t, a) {
+  const r = l(a);
+  r.formData.selectedSize = t;
+  const o = e.querySelector("#dimensions-row"), i = e.querySelector("#iframe-width"), n = e.querySelector("#iframe-height");
+  t === "inline" ? (o.style.display = "flex", i.value = "100%", n.value = "400px", r.formData.width = "100%", r.formData.height = "400px") : (o.style.display = "none", r.formData.width = "100%", r.formData.height = "auto");
+}
+function S(e, t, a) {
+  const r = l(a);
+  if (r.formData.width = t, r.formData.constrainProportions && r.formData.selectedSize === "inline") {
+    const o = parseFloat(t);
+    if (!isNaN(o)) {
+      const i = o * 9 / 16;
+      r.formData.height = `${i}px`;
+      const n = e.querySelector("#iframe-height");
+      n && (n.value = r.formData.height);
+    }
+  }
+}
+function D(e, t, a) {
+  const r = l(a);
+  if (r.formData.height = t, r.formData.constrainProportions && r.formData.selectedSize === "inline") {
+    const o = parseFloat(t);
+    if (!isNaN(o)) {
+      const i = o * 16 / 9;
+      r.formData.width = `${i}px`;
+      const n = e.querySelector("#iframe-width");
+      n && (n.value = r.formData.width);
+    }
+  }
+}
+function q(e, t) {
+  const a = l(t);
+  a.formData.constrainProportions = !a.formData.constrainProportions;
+  const r = e.querySelector("#constrain-btn");
+  r && (r.textContent = a.formData.constrainProportions ? "🔒" : "🔓", r.className = `rte-constrain-btn ${a.formData.constrainProportions ? "locked" : "unlocked"}`, r.title = a.formData.constrainProportions ? "Unlock proportions" : "Lock proportions");
+}
+function E(e, t) {
+  const a = l(t), r = e.querySelector("#iframe-src")?.value.trim();
+  if (!r) {
+    alert("Please enter a source URL");
+    return;
+  }
+  if (!r.startsWith("https://") && !r.startsWith("http://")) {
+    alert("Please enter a valid URL starting with https:// or http://");
+    return;
+  }
+  const o = e.querySelector("#iframe-name")?.value.trim(), i = e.querySelector("#iframe-title")?.value.trim(), n = e.querySelector("#iframe-longdesc")?.value.trim();
+  e.querySelector("#iframe-desc-url")?.value.trim();
+  const c = e.querySelector("#iframe-border")?.checked ?? !0, p = e.querySelector("#iframe-scrollbar")?.checked ?? !0;
+  let s = a.formData.width, d = a.formData.height;
+  a.formData.selectedSize !== "inline" && (s = "100%", d = "auto"), z(t, {
+    src: r,
+    width: s,
+    height: d,
+    aspectRatio: a.formData.selectedSize,
+    name: o || void 0,
+    title: i || void 0,
+    longDescription: n || void 0,
+    showBorder: c,
+    enableScrollbar: p
+  }), f(t);
+}
+function z(e, t) {
+  const a = e.querySelector('[contenteditable="true"]');
+  a && (a.focus(), setTimeout(() => {
+    const r = [
+      `src="${t.src}"`,
+      `width="${t.width}"`,
+      `height="${t.height}"`,
+      "allowfullscreen",
+      `frameborder="${t.showBorder ? "1" : "0"}"`,
+      `scrolling="${t.enableScrollbar ? "auto" : "no"}"`
+    ];
+    t.name && r.push(`name="${t.name}"`), t.title && r.push(`title="${t.title}"`), t.longDescription && r.push(`longdesc="${t.longDescription}"`);
+    const o = [];
+    t.aspectRatio !== "inline" && o.push(`rte-iframe-${t.aspectRatio}`);
+    const i = o.length > 0 ? `class="${o.join(" ")}"` : "", n = `data-aspect-ratio="${t.aspectRatio}"`, c = `<iframe ${r.join(" ")} ${i} ${n}></iframe>`;
+    if (!document.execCommand("insertHTML", !1, c)) {
+      const s = window.getSelection();
+      if (s && s.rangeCount > 0) {
+        const d = s.getRangeAt(0);
+        d.deleteContents();
+        const b = document.createElement("div");
+        b.innerHTML = c;
+        const h = document.createDocumentFragment();
+        for (; b.firstChild; )
+          h.appendChild(b.firstChild);
+        d.insertNode(h);
+      }
+    }
+  }, 10));
+}
+function f(e) {
+  const t = l(e);
+  t.dialogElement && (document.body.removeChild(t.dialogElement), t.dialogElement = null);
+}
+function C() {
+  if (document.getElementById("embed-iframe-dialog-styles")) return;
+  const e = document.createElement("style");
+  e.id = "embed-iframe-dialog-styles", e.textContent = `
+    /* Embed Iframe Dialog Styles */
+    .embed-iframe-dialog {
+      max-width: 600px;
+      width: 100%;
+    }
+
+    .rte-vertical-tabs {
+      display: flex;
+      gap: 20px;
+      min-height: 400px;
+    }
+
+    .rte-tab-buttons {
+      display: flex;
+      flex-direction: column;
+      width: 120px;
+      border-right: 1px solid #e1e5e9;
+    }
+
+    .rte-tab-button {
+      padding: 12px 16px;
+      border: none;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      color: #666;
+      border-right: 3px solid transparent;
+      transition: all 0.2s ease;
+    }
+
+    .rte-tab-button:hover {
+      background-color: #f8f9fa;
+      color: #333;
+    }
+
+    .rte-tab-button.active {
+      background-color: #e3f2fd;
+      color: #1976d2;
+      border-right-color: #1976d2;
+      font-weight: 600;
+    }
+
+    .rte-tab-content {
+      flex: 1;
+      padding: 0 0 0 20px;
+    }
+
+    .rte-tab-panel {
+      padding: 0;
+    }
+
+    .rte-form-group {
+      margin-bottom: 16px;
+    }
+
+    .rte-form-label {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .rte-form-textarea,
+    .rte-form-input,
+    .rte-form-select {
+      width: 100%;
+      padding: 8px 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+      transition: border-color 0.2s ease;
+      box-sizing: border-box;
+    }
+
+    .rte-form-textarea:focus,
+    .rte-form-input:focus,
+    .rte-form-select:focus {
+      outline: none;
+      border-color: #0066cc;
+      box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+    }
+
+    .rte-form-textarea {
+      resize: vertical;
+      min-height: 80px;
+      font-family: inherit;
+    }
+
+    .rte-form-row {
+      display: flex;
+      gap: 12px;
+      align-items: flex-end;
+    }
+
+    .rte-form-row .rte-form-group {
+      flex: 1;
+    }
+
+    .rte-form-row .constrain-group {
+      flex: 0 0 auto;
+      margin-bottom: 0;
+    }
+
+    .rte-constrain-btn {
+      padding: 8px 12px;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 18px;
+      transition: all 0.2s ease;
+      height: 38px;
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .rte-constrain-btn:hover {
+      background-color: #f5f5f5;
+      border-color: #1976d2;
+    }
+
+    .rte-constrain-btn.locked {
+      background-color: #e3f2fd;
+      border-color: #1976d2;
+    }
+
+    .rte-checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+      padding: 4px 0;
+    }
+
+    .rte-checkbox-label input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: #0066cc;
+    }
+
+    .rte-checkbox-label:hover {
+      color: #000;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-dialog-content {
+      background: #1f2937;
+      border: 1px solid #4b5563;
+      color: #e2e8f0;
+      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-dialog-header,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-dialog-footer {
+      background: #222d3a;
+      border-color: #3b4657;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-dialog-header h3,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-label,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-checkbox-label {
+      color: #e2e8f0;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-tab-buttons {
+      border-right-color: #3b4657;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-tab-button {
+      color: #a8b5c8;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-tab-button:hover {
+      background: #334155;
+      color: #f8fafc;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-tab-button.active {
+      background: rgba(88, 166, 255, 0.18);
+      color: #8cc6ff;
+      border-right-color: #58a6ff;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-input,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-select,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-textarea {
+      background: #111827;
+      border-color: #4b5563;
+      color: #e2e8f0;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-input::placeholder,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-textarea::placeholder {
+      color: #94a3b8;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-input:focus,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-select:focus,
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-form-textarea:focus {
+      border-color: #58a6ff;
+      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.28);
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-constrain-btn {
+      background: #111827;
+      border-color: #4b5563;
+      color: #e2e8f0;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-constrain-btn:hover {
+      background: #334155;
+      border-color: #58a6ff;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-constrain-btn.locked {
+      background: rgba(88, 166, 255, 0.22);
+      border-color: #58a6ff;
+      color: #d9ecff;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-btn-secondary {
+      background: #334155;
+      border-color: #4b5563;
+      color: #e2e8f0;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-btn-secondary:hover {
+      background: #475569;
+      border-color: #64748b;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-btn-primary {
+      background: #3b82f6;
+      color: #fff;
+    }
+
+    .rte-embed-iframe-overlay.rte-theme-dark .rte-btn-primary:hover {
+      background: #2563eb;
+    }
+
+    /* Responsive iframe classes */
+    .rte-iframe-21x9,
+    .rte-iframe-16x9,
+    .rte-iframe-4x3,
+    .rte-iframe-1x1 {
+      position: relative;
+      width: 100%;
+      padding-bottom: 56.25%;
+      height: 0;
+      overflow: hidden;
+    }
+
+    .rte-iframe-21x9 {
+      padding-bottom: 42.857%;
+    }
+
+    .rte-iframe-16x9 {
+      padding-bottom: 56.25%;
+    }
+
+    .rte-iframe-4x3 {
+      padding-bottom: 75%;
+    }
+
+    .rte-iframe-1x1 {
+      padding-bottom: 100%;
+    }
+
+    .rte-iframe-21x9 iframe,
+    .rte-iframe-16x9 iframe,
+    .rte-iframe-4x3 iframe,
+    .rte-iframe-1x1 iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `, document.head.appendChild(e);
+}
+export {
+  I as EmbedIframePlugin
+};