@editora/plugins 1.0.1 → 1.0.4

package/dist/text-color.cjs.js

@@ -0,0 +1,300 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("./colorSelectionApply-C0iOfMWb.js");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.applyColorToSelection({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 P=()=>({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:{}});exports.TextColorPlugin=P;