@editora/plugins 1.0.2 → 1.0.4

package/dist/background-color.cjs.js

@@ -0,0 +1,218 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("./colorSelectionApply-C0iOfMWb.js");let l=null,k=null,L=null,s="#ffff00";const h='[data-theme="dark"], .dark, .editora-theme-dark',M=["#000000","#ffffff","#808080","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#ffa500","#800080","#ffc0cb"];function P(){const e=window.getSelection();if(e&&e.rangeCount>0){const r=e.getRangeAt(0).startContainer,a=r.nodeType===Node.ELEMENT_NODE?r:r.parentElement;if(a){const n=a.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 R(e){const t=P();if(t){const c=t.querySelector(`[data-command="${e}"]`);if(c)return c}return document.querySelector(`[data-command="${e}"]`)}function T(e){if(e?.closest(h))return!0;const t=window.getSelection();if(t&&t.rangeCount>0){const r=t.getRangeAt(0).startContainer;if((r.nodeType===Node.ELEMENT_NODE?r:r.parentElement)?.closest(h))return!0}return document.activeElement?.closest(h)?!0:document.body.matches(h)||document.documentElement.matches(h)}function q(){if(document.getElementById("rte-bg-color-picker-styles"))return;const e=document.createElement("style");e.id="rte-bg-color-picker-styles",e.textContent=`
+    .rte-bg-color-picker {
+      position: absolute;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      width: 220px;
+      z-index: 10000;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      overflow: hidden;
+    }
+
+    .rte-bg-color-picker-header {
+      padding: 12px 16px;
+      border-bottom: 1px solid #eee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .rte-bg-color-picker-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .rte-bg-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-bg-color-picker-close:hover {
+      color: #333;
+    }
+
+    .rte-bg-color-picker-body {
+      padding: 8px;
+    }
+
+    .rte-bg-color-section {
+      margin-bottom: 16px;
+    }
+
+    .rte-bg-color-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .rte-bg-color-section-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: #555;
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .rte-bg-color-preview {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+      padding: 6px;
+      background-color: #f8f9fa;
+      border-radius: 6px;
+      border: 1px solid #e0e0e0;
+    }
+
+    .rte-bg-color-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 6px;
+      max-width: 180px;
+    }
+
+    .rte-bg-color-swatch {
+      width: 100%;
+      aspect-ratio: 1;
+      border: 1px solid #e0e0e0;
+      border-radius: 3px;
+      cursor: pointer;
+      transition: all 0.15s;
+      padding: 0;
+      background: none;
+      min-height: 20px;
+    }
+
+    .rte-bg-color-swatch:hover {
+      transform: scale(1.05);
+      border-color: #ccc;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .rte-bg-color-swatch.selected {
+      border-color: #1976d2;
+      box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.3);
+    }
+
+    .rte-bg-color-preview-swatch {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      flex-shrink: 0;
+    }
+
+    .rte-bg-color-preview-hex {
+      font-size: 13px;
+      font-weight: 500;
+      color: #666;
+      font-family: monospace;
+    }
+
+    .rte-bg-color-input {
+      width: 50px;
+      height: 26px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      cursor: pointer;
+      padding: 2px;
+    }
+
+    .rte-bg-color-text-input {
+      flex: 1;
+      height: 26px;
+      width: 50px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      padding: 0 12px;
+      font-size: 13px;
+      font-family: monospace;
+    }
+
+    .rte-bg-color-text-input:focus {
+      outline: none;
+      border-color: #1976d2;
+    }
+
+    .rte-bg-color-custom {
+      display: flex;
+      gap: 8px;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark {
+      background: #1f2937;
+      border: 1px solid #4b5563;
+      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-picker-header {
+      border-bottom-color: #3b4657;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-picker-title {
+      color: #e2e8f0;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-picker-close {
+      color: #94a3b8;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-picker-close:hover {
+      color: #f8fafc;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-section-label {
+      color: #9fb0c6;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-preview {
+      background-color: #111827;
+      border-color: #4b5563;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-preview-hex {
+      color: #cbd5e1;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-preview-swatch,
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-swatch {
+      border-color: #4b5563;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-swatch:hover {
+      border-color: #7a8ba5;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-swatch.selected {
+      border-color: #58a6ff;
+      box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.4);
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-input,
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-text-input {
+      background: #111827;
+      border-color: #4b5563;
+      color: #e2e8f0;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-text-input::placeholder {
+      color: #94a3b8;
+    }
+
+    .rte-bg-color-picker.rte-theme-dark .rte-bg-color-text-input:focus {
+      border-color: #58a6ff;
+    }
+  `,document.head.appendChild(e)}function H(){const e=document.createElement("div");e.className="rte-bg-color-picker",T(k)&&e.classList.add("rte-theme-dark"),e.addEventListener("click",m=>m.stopPropagation());const t=document.createElement("div");t.className="rte-bg-color-picker-header";const c=document.createElement("span");c.className="rte-bg-color-picker-title",c.textContent="Background Color";const r=document.createElement("button");r.type="button",r.className="rte-bg-color-picker-close",r.id="rte-bg-color-close",r.setAttribute("aria-label","Close"),r.textContent="×",t.appendChild(c),t.appendChild(r);const a=document.createElement("div");a.className="rte-bg-color-picker-body";const n=document.createElement("div");n.className="rte-bg-color-section";const o=document.createElement("div");o.className="rte-bg-color-section-label",o.textContent="Current Color";const i=document.createElement("div");i.className="rte-bg-color-preview";const d=document.createElement("div");d.className="rte-bg-color-preview-swatch",d.id="rte-bg-color-preview-swatch";const u=document.createElement("span");u.className="rte-bg-color-preview-hex",u.id="rte-bg-color-preview-hex",i.appendChild(d),i.appendChild(u),n.appendChild(o),n.appendChild(i);const x=document.createElement("div");x.className="rte-bg-color-section";const E=document.createElement("div");E.className="rte-bg-color-section-label",E.textContent="Colors";const C=document.createElement("div");C.className="rte-bg-color-grid",C.id="rte-bg-color-grid",M.forEach(m=>{const g=document.createElement("button");g.type="button",g.className="rte-bg-color-swatch",g.style.backgroundColor=m,g.dataset.color=m,g.title=m,C.appendChild(g)}),x.appendChild(E),x.appendChild(C);const w=document.createElement("div");w.className="rte-bg-color-section";const S=document.createElement("div");S.className="rte-bg-color-section-label",S.textContent="Custom";const v=document.createElement("div");v.className="rte-bg-color-custom";const f=document.createElement("input");f.type="color",f.className="rte-bg-color-input",f.id="rte-bg-color-input",f.value=s;const p=document.createElement("input");return p.type="text",p.className="rte-bg-color-text-input",p.id="rte-bg-color-text-input",p.placeholder="#FFFF00",p.value=s.toUpperCase(),p.maxLength=7,v.appendChild(f),v.appendChild(p),w.appendChild(S),w.appendChild(v),a.appendChild(n),a.appendChild(x),a.appendChild(w),e.appendChild(t),e.appendChild(a),e}function U(){if(!l)return;l.querySelector("#rte-bg-color-close")?.addEventListener("click",()=>b());const t=l.querySelector("#rte-bg-color-grid");t&&t.addEventListener("click",n=>{const o=n.target;if(o.classList.contains("rte-bg-color-swatch")){const i=o.dataset.color;i&&(s=i,y(i),b())}});const c=l.querySelector("#rte-bg-color-input");c&&(c.addEventListener("change",n=>{const o=n.target.value.toUpperCase();s=o,y(o),b()}),c.addEventListener("input",n=>{s=n.target.value.toUpperCase(),N(),B()}));const r=l.querySelector("#rte-bg-color-text-input");r&&(r.addEventListener("change",n=>{let o=n.target.value.trim();o&&!o.startsWith("#")&&(o="#"+o),/^#[0-9A-F]{6}$/i.test(o)&&(s=o.toUpperCase(),y(s),b())}),r.addEventListener("input",n=>{let o=n.target.value.trim();o&&!o.startsWith("#")&&(o="#"+o,r.value=o),/^#[0-9A-F]{6}$/i.test(o)&&(s=o.toUpperCase(),N(),B())}));const a=n=>{if(l&&k){const o=n.target;!l.contains(o)&&!k.contains(o)&&b()}};setTimeout(()=>{document.addEventListener("click",a)},100),l._clickOutsideHandler=a}function N(){if(!l)return;const e=l.querySelector("#rte-bg-color-preview-swatch"),t=l.querySelector("#rte-bg-color-preview-hex"),c=l.querySelector("#rte-bg-color-input"),r=l.querySelector("#rte-bg-color-text-input");e&&(e.style.backgroundColor=s),t&&(t.textContent=s.toUpperCase()),c&&(c.value=s),r&&(r.value=s.toUpperCase())}function B(){if(!l)return;l.querySelectorAll(".rte-bg-color-swatch").forEach(t=>{t.dataset.color?.toUpperCase()===s.toUpperCase()?t.classList.add("selected"):t.classList.remove("selected")})}function I(){try{const e=window.getSelection();if(!e||e.rangeCount===0)return"#ffff00";const c=e.getRangeAt(0).commonAncestorContainer,r=c.nodeType===1?c:c.parentElement;if(r){const a=r.closest('[style*="background-color"]');if(a){const n=a.style.backgroundColor;if(n)return O(n)}}return"#ffff00"}catch{return"#ffff00"}}function O(e){if(e.startsWith("#"))return e.toUpperCase();const t=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);if(t){const c=parseInt(t[1]),r=parseInt(t[2]),a=parseInt(t[3]);return"#"+[c,r,a].map(n=>{const o=n.toString(16);return o.length===1?"0"+o:o}).join("").toUpperCase()}return"#ffff00"}function y(e){const t=A.applyColorToSelection({color:e,className:"rte-bg-color",styleProperty:"backgroundColor",commands:["hiliteColor","backColor"],savedRange:L,getActiveEditorRoot:P,warnMessage:"[BackgroundColor] Could not apply highlight for current selection"});return t&&console.log("[BackgroundColor] Applied color:",e),t}function b(){if(l){const e=l._clickOutsideHandler;e&&document.removeEventListener("click",e),l.remove(),l=null}k=null,L=null}function z(e,t){const c=e.getBoundingClientRect(),r=t.getBoundingClientRect(),a=r.width||220,n=r.height||320,o=8;let i=c.left;i+a>window.innerWidth-o&&(i=window.innerWidth-a-o),i=Math.max(o,i);let d=c.bottom+o;if(d+n>window.innerHeight-o){const u=c.top-n-o;u>=o?d=u:d=Math.max(o,window.innerHeight-n-o)}t.style.top=`${Math.round(d+window.scrollY)}px`,t.style.left=`${Math.round(i+window.scrollX)}px`}function _(){if(q(),l)return b(),!0;const e=R("openBackgroundColorPicker");if(!e)return!1;const t=window.getSelection();return!t||t.isCollapsed?(alert("Please select text to apply background color"),!1):(t.rangeCount>0&&(L=t.getRangeAt(0).cloneRange()),s=I(),l=H(),document.body.appendChild(l),k=e,z(e,l),N(),B(),U(),!0)}const D=()=>({name:"backgroundColor",marks:{backgroundColor:{attrs:{color:{default:"#ffffff"}},parseDOM:[{tag:'span[style*="background-color"]',getAttrs:e=>{const r=(e.getAttribute("style")||"").match(/background-color:\s*([^;]+)/);return r?{color:r[1]}:null}},{tag:"mark",getAttrs:e=>({color:e.style.backgroundColor||"#ffff00"})}],toDOM:e=>["span",{style:`background-color: ${e.attrs?.color||"#ffffff"}`,class:"rte-bg-color"},0]}},toolbar:[{label:"Background Color",command:"openBackgroundColorPicker",icon:'<svg width="24" height="24" focusable="false"><g fill-rule="evenodd"><path class="tox-icon-highlight-bg-color__color" d="M3 18h18v3H3z" fill="#000000"></path><path fill-rule="nonzero" d="M7.7 16.7H3l3.3-3.3-.7-.8L10.2 8l4 4.1-4 4.2c-.2.2-.6.2-.8 0l-.6-.7-1.1 1.1zm5-7.5L11 7.4l3-2.9a2 2 0 0 1 2.6 0L18 6c.7.7.7 2 0 2.7l-2.9 2.9-1.8-1.8-.5-.6"></path></g></svg>',shortcut:"Mod-Shift-h"}],commands:{openBackgroundColorPicker:()=>_(),setBackgroundColor:e=>e?y(e):!1},keymap:{"Mod-Shift-h":"openBackgroundColorPicker"}});exports.BackgroundColorPlugin=D;