@editora/plugins 1.0.1 → 1.0.4

package/dist/editorContainerHelpers-C7kdWnS0.mjs

@@ -0,0 +1,26 @@
+function i() {
+  const t = window.getSelection();
+  if (!t || !t.rangeCount)
+    return null;
+  const e = t.getRangeAt(0).startContainer, r = e.nodeType === Node.TEXT_NODE ? e.parentElement : e;
+  return o(r);
+}
+function o(t) {
+  if (!t) return null;
+  if (t.hasAttribute("data-editora-editor"))
+    return t;
+  let n = t.parentElement;
+  for (; n; ) {
+    if (n.hasAttribute("data-editora-editor"))
+      return n;
+    n = n.parentElement;
+  }
+  return null;
+}
+function a(t) {
+  return t ? t.querySelector(".rte-content") : (console.warn("[Editora] Editor container not found"), null);
+}
+export {
+  i as f,
+  a as g
+};

package/dist/editorContainerHelpers-CFbfiOJI.js

@@ -0,0 +1 @@
+"use strict";function o(){const t=window.getSelection();if(!t||!t.rangeCount)return null;const e=t.getRangeAt(0).startContainer,r=e.nodeType===Node.TEXT_NODE?e.parentElement:e;return i(r)}function i(t){if(!t)return null;if(t.hasAttribute("data-editora-editor"))return t;let n=t.parentElement;for(;n;){if(n.hasAttribute("data-editora-editor"))return n;n=n.parentElement}return null}function a(t){return t?t.querySelector(".rte-content"):(console.warn("[Editora] Editor container not found"),null)}exports.findEditorContainerFromSelection=o;exports.getContentElement=a;

package/dist/embed-iframe.cjs.js

@@ -0,0 +1,361 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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=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 x=()=>({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=>(y(e),!0)},keymap:{"Mod-Shift-e":"openEmbedIframeDialog"}});function y(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,k(r,e),C(),setTimeout(()=>{r.querySelector("#iframe-src")?.focus()},100)}function k(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&&S(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=>D(e,i.target.value,t)),o?.addEventListener("input",i=>q(e,i.target.value,t)),e.querySelector("#constrain-btn")?.addEventListener("click",()=>E(e,t)),e.querySelector("#cancel-btn")?.addEventListener("click",()=>f(t)),e.querySelector("#save-btn")?.addEventListener("click",()=>I(e,t))}function S(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 D(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 q(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 E(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 I(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)}exports.EmbedIframePlugin=x;