react-lite-rich-text-editor 1.1.9 → 1.1.10

package/dist/index.cjs.js

@@ -411,7 +411,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".rte-container{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1)}.rte-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-toolbar{align-items:center;background-color:#f9fafb;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:4px;padding:8px}.rte-toolbar-button{align-items:center;background:transparent;border:none;border-radius:6px;color:#4b5563;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .15s ease;width:32px}.rte-toolbar-button:hover{background-color:#f3f4f6;color:#111827}.rte-toolbar-button.active{background-color:#eff6ff;color:#2563eb}.rte-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.rte-toolbar-button-danger:hover{background-color:#fef2f2!important;color:#dc2626!important}.rte-toolbar-select{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:14px;height:32px;outline:none;padding:0 8px;transition:border-color .15s ease}.rte-toolbar-select:hover{border-color:#d1d5db}.rte-toolbar-select:focus{border-color:#3b82f6}.rte-heading-select{width:112px}.rte-toolbar-button-text{font-size:12px;font-weight:700;min-width:32px;padding:0 8px;width:auto}.rte-color-picker-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:background-color .15s ease;width:32px}.rte-color-picker-label:hover{background-color:#f3f4f6}.rte-color-input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}.rte-bg-color-picker-label .rte-bg-color-swatch{align-items:center;border:1px solid #d1d5db;border-radius:4px;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;line-height:1;pointer-events:none;width:18px}.rte-media-width-custom{align-items:center;display:flex;gap:2px}.rte-media-width-input{border:1px solid #e5e7eb;border-radius:4px;color:#374151;font-size:11px;height:28px;outline:none;padding:0 6px;width:56px}.rte-media-width-input:focus{border-color:#3b82f6}.rte-media-width-unit{background:#fff;border:1px solid #e5e7eb;border-radius:4px;color:#374151;cursor:pointer;font-size:11px;height:28px;outline:none;padding:0 4px;width:44px}.rte-media-width-apply{color:#2563eb!important;font-size:13px!important;font-weight:700;height:28px;min-width:28px!important;padding:0 6px!important}.rte-media-width-apply:hover{background-color:#eff6ff!important}.rte-area-highlight-mode .rte-content{cursor:crosshair}.rte-area-highlight-block{box-decoration-break:clone;-webkit-box-decoration-break:clone;box-sizing:border-box;display:block}.rte-area-highlight-hint{background:rgba(37,99,235,.92);border-radius:999px;color:#fff;font-size:11px;font-weight:600;left:50%;padding:4px 10px;pointer-events:none;position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap;z-index:5}.rte-marquee-preview{border:2px dashed;border-radius:2px;box-sizing:border-box;pointer-events:none;position:absolute;z-index:6}.rte-area-highlight-toggle{min-width:32px;padding:0 6px!important;width:auto!important}.rte-area-highlight-icon{border:2px dashed;border-radius:2px;box-sizing:border-box;display:block;height:14px;width:14px}.rte-content{color:#1f2937;font-family:inherit;font-size:16px;line-height:1.6;min-height:150px;outline:none;overflow-y:auto;padding:12px;word-break:break-word}.rte-content-wrapper{position:relative}.rte-placeholder{color:#9ca3af;font-size:16px;line-height:1.6;pointer-events:none;position:absolute;top:12px;user-select:none}.rte-content ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.rte-content blockquote{background:#f8fafc;border-left:4px solid #bfdbfe;border-radius:0 8px 8px 0;color:#475569;margin:12px 0;padding:8px 14px}.rte-content img{border-radius:8px;display:block;height:auto;max-width:100%}.rte-content table{border-collapse:collapse;margin:16px 0;width:100%}.rte-content td,.rte-content th{border:1px solid #e5e7eb;min-width:40px;padding:12px;word-break:break-word}.video-container{border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:block;height:0;line-height:0;margin:16px 0;max-width:100%;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.video-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.rte-modal-overlay{align-items:center;animation:rte-fade-in .2s ease-out;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.rte-modal{animation:rte-zoom-in .2s ease-out;background-color:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px;max-width:400px;padding:0;width:100%}.rte-modal-title{color:#111827;flex:1;font-size:18px;font-weight:600;margin:0;text-align:center}.rte-modal-header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:20px 24px 16px}.rte-form-group{display:flex;flex-direction:column;gap:8px;padding:16px 24px}.rte-label{color:#374151;font-size:14px;font-weight:600}.rte-input{border:1px solid #d1d5db;border-radius:8px;box-sizing:border-box;font-size:14px;outline:none;padding:8px 12px;transition:all .15s ease;width:100%}.rte-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-modal-actions{border-top:1px solid #f3f4f6;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.rte-button{border:none;border-radius:8px;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .15s ease}.rte-button-secondary{background-color:#f3f4f6;color:#4b5563}.rte-button-secondary:hover{background-color:#e5e7eb}.rte-button-primary{background-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#fff}.rte-button-primary:hover{background-color:#1d4ed8}.rte-button-primary:disabled{cursor:not-allowed;opacity:.5}.rte-spinner-container{align-items:center;display:flex;justify-content:center;padding:16px}.rte-spinner{animation:rte-spin .8s linear infinite;border:3px solid #eff6ff;border-radius:50%;border-top-color:#3b82f6;height:32px;width:32px}@keyframes rte-spin{to{transform:rotate(1turn)}}@keyframes rte-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rte-zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-container{box-sizing:border-box;display:block;line-height:0;margin:16px 0;max-width:100%;position:relative}.image-container.image-align-center,.video-container.image-align-center{margin-left:auto;margin-right:auto}.image-container.image-align-left,.video-container.image-align-left{margin-left:0;margin-right:auto}.image-container.image-align-right,.video-container.image-align-right{margin-left:auto;margin-right:0}.image-container.rte-media-selected,.video-container.rte-media-selected{border-radius:12px;outline:2px solid #3b82f6;outline-offset:2px}.image-media-frame{display:block;line-height:0;max-width:100%;position:relative;width:100%}.image-media-frame img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-container[data-width-percent] .image-media-frame,.image-container[data-width-percent] .image-media-frame img{width:100%}.image-container[data-width-px] .image-media-frame,.image-container[data-width-px] .image-media-frame img{height:auto;width:100%}.image-delete-button{align-items:center;background:#ef4444;border:3px solid #fff;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#fff;cursor:pointer;display:none;font-size:18px;font-weight:700;height:26px;justify-content:center;line-height:1;padding:0;pointer-events:none;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .2s cubic-bezier(.4,0,.2,1);width:26px;z-index:50}.rte-content.rte-is-editable.rte-is-focused .image-delete-button,.rte-content.rte-is-editable.rte-is-focused .video-delete-button{display:flex;pointer-events:auto}.rte-content.rte-is-editable .video-container.rte-media-selected iframe{pointer-events:none}.image-delete-button:hover{background:#b91c1c;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translate(50%,-50%) scale(1.1)}.media-resize-handle{background:#3b82f6;border:2px solid #fff;border-radius:3px;bottom:2px;box-shadow:0 1px 3px rgba(15,23,42,.2);cursor:nwse-resize;height:12px;pointer-events:auto;position:absolute;right:2px;width:12px;z-index:60}.media-resize-handle:hover{background:#2563eb}.video-container .media-resize-handle{bottom:6px;right:6px}.video-container .video-delete-button{z-index:70}.rte-table-delete-btn,.rte-table-delete-hover{align-items:center;display:flex;justify-content:center}.rte-table-delete-btn{background:#fff;border:1px solid #ef4444;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#ef4444;cursor:pointer;height:28px;padding:0;transition:all .2s ease;width:28px}.rte-table-delete-btn:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.rte-table-delete-btn:active{transform:scale(.95)}.rte-media-toolbar{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;flex-wrap:wrap;gap:2px;max-width:calc(100% - 16px);padding:4px;pointer-events:auto}.rte-media-toolbar button{align-items:center;background:transparent;border:none;border-radius:4px;color:#4b5563;cursor:pointer;display:flex;font-size:11px;font-weight:600;height:28px;justify-content:center;min-width:28px;padding:0 6px;transition:all .15s ease}.rte-media-toolbar button.active,.rte-media-toolbar button:hover{background-color:#eff6ff;color:#2563eb}.rte-media-toolbar button.danger{color:#ef4444}.rte-media-toolbar button.danger:hover{background-color:#fef2f2;color:#dc2626}.rte-media-toolbar-divider{background:#e5e7eb;height:18px;margin:0 2px;width:1px}.image-container:after{clear:both;content:\"\";display:table}.rte-footer{background-color:#fcfcfd;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end;padding:6px 16px;user-select:none}.rte-footer-content{align-items:center;color:#9ca3af;display:flex;font-size:11px;gap:10px;letter-spacing:.025em}.rte-footer-separator{color:#e5e7eb;font-size:14px;line-height:1}.rte-footer-item b{color:#6b7280;font-weight:600}";
+var css_248z = ".rte-container{background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1)}.rte-container:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-toolbar{align-items:center;background-color:#f9fafb;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:4px;padding:8px}.rte-toolbar-button{align-items:center;background:transparent;border:none;border-radius:6px;color:#4b5563;cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all .15s ease;width:32px}.rte-toolbar-button:hover{background-color:#f3f4f6;color:#111827}.rte-toolbar-button.active{background-color:#eff6ff;color:#2563eb}.rte-toolbar-button:disabled{cursor:not-allowed;opacity:.5}.rte-toolbar-button-danger:hover{background-color:#fef2f2!important;color:#dc2626!important}.rte-toolbar-select{background-color:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;cursor:pointer;font-size:14px;height:32px;outline:none;padding:0 8px;transition:border-color .15s ease}.rte-toolbar-select:hover{border-color:#d1d5db}.rte-toolbar-select:focus{border-color:#3b82f6}.rte-heading-select{width:112px}.rte-toolbar-button-text{font-size:12px;font-weight:700;min-width:32px;padding:0 8px;width:auto}.rte-color-picker-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:background-color .15s ease;width:32px}.rte-color-picker-label:hover{background-color:#f3f4f6}.rte-color-input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}.rte-bg-color-picker-label .rte-bg-color-swatch{align-items:center;border:1px solid #d1d5db;border-radius:4px;display:inline-flex;font-size:11px;font-weight:700;height:18px;justify-content:center;line-height:1;pointer-events:none;width:18px}.rte-bg-color-swatch-none{background-color:#fff;background-image:linear-gradient(45deg,#d1d5db 25%,transparent 0,transparent 75%,#d1d5db 0),linear-gradient(45deg,#d1d5db 25%,transparent 0,transparent 75%,#d1d5db 0);background-position:0 0,4px 4px;background-size:8px 8px}.rte-bg-color-clear{position:relative}.rte-bg-color-clear-icon{align-items:center;display:inline-flex;font-size:11px;font-weight:700;height:14px;justify-content:center;line-height:1;position:relative;width:14px}.rte-bg-color-clear-icon:after{background:currentColor;border-radius:1px;content:\"\";height:2px;left:-1px;position:absolute;right:-1px;top:50%;transform:rotate(-35deg)}.rte-media-width-custom{align-items:center;display:flex;gap:2px}.rte-media-width-input{border:1px solid #e5e7eb;border-radius:4px;color:#374151;font-size:11px;height:28px;outline:none;padding:0 6px;width:56px}.rte-media-width-input:focus{border-color:#3b82f6}.rte-media-width-unit{background:#fff;border:1px solid #e5e7eb;border-radius:4px;color:#374151;cursor:pointer;font-size:11px;height:28px;outline:none;padding:0 4px;width:44px}.rte-media-width-apply{color:#2563eb!important;font-size:13px!important;font-weight:700;height:28px;min-width:28px!important;padding:0 6px!important}.rte-media-width-apply:hover{background-color:#eff6ff!important}.rte-area-highlight-mode .rte-content{cursor:crosshair}.rte-area-highlight-block{box-decoration-break:clone;-webkit-box-decoration-break:clone;box-sizing:border-box;display:block;max-width:100%}.rte-area-highlight-block>blockquote,.rte-area-highlight-block>div,.rte-area-highlight-block>h1,.rte-area-highlight-block>h2,.rte-area-highlight-block>h3,.rte-area-highlight-block>h4,.rte-area-highlight-block>h5,.rte-area-highlight-block>h6,.rte-area-highlight-block>p{margin-bottom:0;margin-top:0}.rte-area-highlight-block>*+*{margin-top:.25em}.rte-area-highlight-hint{background:rgba(37,99,235,.92);border-radius:999px;color:#fff;font-size:11px;font-weight:600;left:50%;padding:4px 10px;pointer-events:none;position:absolute;top:8px;transform:translateX(-50%);white-space:nowrap;z-index:5}.rte-marquee-preview{border:2px dashed;border-radius:2px;box-sizing:border-box;pointer-events:none;position:absolute;z-index:6}.rte-area-highlight-toggle{min-width:32px;padding:0 6px!important;width:auto!important}.rte-area-highlight-icon{border:2px dashed;border-radius:2px;box-sizing:border-box;display:block;height:14px;width:14px}.rte-content{color:#1f2937;font-family:inherit;font-size:16px;line-height:1.6;min-height:150px;outline:none;overflow-y:auto;padding:12px;word-break:break-word}.rte-content-wrapper{position:relative}.rte-placeholder{color:#9ca3af;font-size:16px;line-height:1.6;pointer-events:none;position:absolute;top:12px;user-select:none}.rte-content ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.rte-content blockquote{background:#f8fafc;border-left:4px solid #bfdbfe;border-radius:0 8px 8px 0;color:#475569;margin:12px 0;padding:8px 14px}.rte-content img{border-radius:8px;display:block;height:auto;max-width:100%}.rte-content table{border-collapse:collapse;margin:16px 0;width:100%}.rte-content td,.rte-content th{border:1px solid #e5e7eb;min-width:40px;padding:12px;word-break:break-word}.video-container{border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);display:block;height:0;line-height:0;margin:16px 0;max-width:100%;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.video-container iframe{height:100%;left:0;position:absolute;top:0;width:100%}.rte-modal-overlay{align-items:center;animation:rte-fade-in .2s ease-out;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:9999}.rte-modal{animation:rte-zoom-in .2s ease-out;background-color:#fff;border:1px solid #f3f4f6;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px;max-width:400px;padding:0;width:100%}.rte-modal-title{color:#111827;flex:1;font-size:18px;font-weight:600;margin:0;text-align:center}.rte-modal-header{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:20px 24px 16px}.rte-form-group{display:flex;flex-direction:column;gap:8px;padding:16px 24px}.rte-label{color:#374151;font-size:14px;font-weight:600}.rte-input{border:1px solid #d1d5db;border-radius:8px;box-sizing:border-box;font-size:14px;outline:none;padding:8px 12px;transition:all .15s ease;width:100%}.rte-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.rte-modal-actions{border-top:1px solid #f3f4f6;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.rte-button{border:none;border-radius:8px;cursor:pointer;font-weight:500;padding:8px 16px;transition:all .15s ease}.rte-button-secondary{background-color:#f3f4f6;color:#4b5563}.rte-button-secondary:hover{background-color:#e5e7eb}.rte-button-primary{background-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.05);color:#fff}.rte-button-primary:hover{background-color:#1d4ed8}.rte-button-primary:disabled{cursor:not-allowed;opacity:.5}.rte-spinner-container{align-items:center;display:flex;justify-content:center;padding:16px}.rte-spinner{animation:rte-spin .8s linear infinite;border:3px solid #eff6ff;border-radius:50%;border-top-color:#3b82f6;height:32px;width:32px}@keyframes rte-spin{to{transform:rotate(1turn)}}@keyframes rte-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rte-zoom-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-container{box-sizing:border-box;display:block;line-height:0;margin:16px 0;max-width:100%;position:relative}.image-container.image-align-center,.video-container.image-align-center{margin-left:auto;margin-right:auto}.image-container.image-align-left,.video-container.image-align-left{margin-left:0;margin-right:auto}.image-container.image-align-right,.video-container.image-align-right{margin-left:auto;margin-right:0}.image-container.rte-media-selected,.video-container.rte-media-selected{border-radius:12px;outline:2px solid #3b82f6;outline-offset:2px}.image-media-frame{display:block;line-height:0;max-width:100%;position:relative;width:100%}.image-media-frame img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-container[data-width-percent] .image-media-frame,.image-container[data-width-percent] .image-media-frame img{width:100%}.image-container[data-width-px] .image-media-frame,.image-container[data-width-px] .image-media-frame img{height:auto;width:100%}.image-delete-button{align-items:center;background:#ef4444;border:3px solid #fff;border-radius:9999px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#fff;cursor:pointer;display:none;font-size:18px;font-weight:700;height:26px;justify-content:center;line-height:1;padding:0;pointer-events:none;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .2s cubic-bezier(.4,0,.2,1);width:26px;z-index:50}.rte-content.rte-is-editable.rte-is-focused .image-delete-button,.rte-content.rte-is-editable.rte-is-focused .video-delete-button{display:flex;pointer-events:auto}.rte-content.rte-is-editable .video-container.rte-media-selected iframe{pointer-events:none}.image-delete-button:hover{background:#b91c1c;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translate(50%,-50%) scale(1.1)}.media-resize-handle{background:#3b82f6;border:2px solid #fff;border-radius:3px;bottom:2px;box-shadow:0 1px 3px rgba(15,23,42,.2);cursor:nwse-resize;height:12px;pointer-events:auto;position:absolute;right:2px;width:12px;z-index:60}.media-resize-handle:hover{background:#2563eb}.video-container .media-resize-handle{bottom:6px;right:6px}.video-container .video-delete-button{z-index:70}.rte-table-delete-btn,.rte-table-delete-hover{align-items:center;display:flex;justify-content:center}.rte-table-delete-btn{background:#fff;border:1px solid #ef4444;border-radius:6px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#ef4444;cursor:pointer;height:28px;padding:0;transition:all .2s ease;width:28px}.rte-table-delete-btn:hover{background:#ef4444;color:#fff;transform:scale(1.1)}.rte-table-delete-btn:active{transform:scale(.95)}.rte-media-toolbar{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;flex-wrap:wrap;gap:2px;max-width:calc(100% - 16px);padding:4px;pointer-events:auto}.rte-media-toolbar button{align-items:center;background:transparent;border:none;border-radius:4px;color:#4b5563;cursor:pointer;display:flex;font-size:11px;font-weight:600;height:28px;justify-content:center;min-width:28px;padding:0 6px;transition:all .15s ease}.rte-media-toolbar button.active,.rte-media-toolbar button:hover{background-color:#eff6ff;color:#2563eb}.rte-media-toolbar button.danger{color:#ef4444}.rte-media-toolbar button.danger:hover{background-color:#fef2f2;color:#dc2626}.rte-media-toolbar-divider{background:#e5e7eb;height:18px;margin:0 2px;width:1px}.image-container:after{clear:both;content:\"\";display:table}.rte-footer{background-color:#fcfcfd;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end;padding:6px 16px;user-select:none}.rte-footer-content{align-items:center;color:#9ca3af;display:flex;font-size:11px;gap:10px;letter-spacing:.025em}.rte-footer-separator{color:#e5e7eb;font-size:14px;line-height:1}.rte-footer-item b{color:#6b7280;font-weight:600}";
 styleInject(css_248z);
 
 // Helper functions for HTML escaping
@@ -423,6 +423,82 @@ const escapeAttr = str => escapeHtml(str).replace(/"/g, """);
 
 // URL detection regex
 const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+const TRANSPARENT_BACKGROUNDS = new Set(["", "transparent", "initial", "inherit", "rgba(0, 0, 0, 0)", "rgb(0, 0, 0, 0)"]);
+const isTransparentBackground = value => {
+  if (!value) return true;
+  const normalized = value.trim().toLowerCase();
+  if (TRANSPARENT_BACKGROUNDS.has(normalized)) return true;
+  const match = normalized.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)$/);
+  if ((match === null || match === void 0 ? void 0 : match[4]) !== undefined && parseFloat(match[4]) === 0) return true;
+  return false;
+};
+const unwrapNode = element => {
+  const parent = element.parentNode;
+  if (!parent) return;
+  while (element.firstChild) {
+    parent.insertBefore(element.firstChild, element);
+  }
+  parent.removeChild(element);
+};
+const unwrapAreaHighlightBlock = block => {
+  var _block$classList;
+  if (!(block !== null && block !== void 0 && (_block$classList = block.classList) !== null && _block$classList !== void 0 && _block$classList.contains("rte-area-highlight-block"))) return;
+  const parent = block.parentNode;
+  if (!parent) return;
+  const fragment = document.createDocumentFragment();
+  while (block.firstChild) {
+    fragment.appendChild(block.firstChild);
+  }
+  parent.insertBefore(fragment, block);
+  parent.removeChild(block);
+};
+const stripInlineBackground = element => {
+  if (!(element instanceof HTMLElement)) return;
+  if (element.classList.contains("rte-block-highlight")) {
+    element.classList.remove("rte-block-highlight");
+  }
+  if (element.tagName === "MARK") {
+    unwrapNode(element);
+    return;
+  }
+  const hadBackground = element.style.backgroundColor && !isTransparentBackground(element.style.backgroundColor) || element.style.background && !isTransparentBackground(element.style.background);
+  if (!hadBackground) return;
+  element.style.backgroundColor = "";
+  element.style.background = "";
+  if (!element.getAttribute("style")) {
+    element.removeAttribute("style");
+  }
+  const tag = element.tagName;
+  if ((tag === "SPAN" || tag === "FONT") && !element.className && element.attributes.length === 0) {
+    unwrapNode(element);
+  }
+};
+const collectElementsInRange = (range, root) => {
+  const elements = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  let node = walker.currentNode;
+  while (node) {
+    if (range.intersectsNode(node)) {
+      elements.push(node);
+    }
+    node = walker.nextNode();
+  }
+  return elements;
+};
+const elementHasRemovableBackground = element => {
+  var _element$style, _element$style2;
+  if (!(element instanceof HTMLElement)) return false;
+  if (element.classList.contains("rte-area-highlight-block")) return true;
+  if (element.classList.contains("rte-block-highlight")) return true;
+  if (element.tagName === "MARK") return true;
+  if ((_element$style = element.style) !== null && _element$style !== void 0 && _element$style.backgroundColor && !isTransparentBackground(element.style.backgroundColor)) {
+    return true;
+  }
+  if ((_element$style2 = element.style) !== null && _element$style2 !== void 0 && _element$style2.background && !isTransparentBackground(element.style.background)) {
+    return true;
+  }
+  return false;
+};
 const rectsIntersect = (a, b) => !(a.right < b.left || a.left > b.right || a.bottom < b.top || a.top > b.bottom);
 const caretRangeFromClientPoint = (x, y) => {
   var _document$caretPositi, _document;
@@ -461,38 +537,74 @@ const getIntersectingBlocks = (editor, clientRect) => {
   });
   return candidates.filter(el => !candidates.some(other => other !== el && other.contains(el)));
 };
-const insertAreaHighlightRegion = (editor, clientRect, color) => {
-  const editorRect = editor.getBoundingClientRect();
-  const clipped = clipRectToBounds(clientRect, editorRect);
+const isHighlightableBlock = block => {
+  const text = (block.textContent || "").replace(/[\u00A0\u200B\s]/g, "");
+  if (text.length > 0) return true;
+  return !!block.querySelector("img, table, iframe, .image-container, .video-container, svg");
+};
+const createAreaHighlightWrapper = (color, textAlign, clipped, editorRect) => {
   const widthPx = Math.max(40, Math.round(clipped.width));
   const heightPx = Math.max(24, Math.round(clipped.height));
   const region = document.createElement("div");
   region.className = "rte-area-highlight-block";
   region.style.backgroundColor = color;
-  region.style.minHeight = `${heightPx}px`;
+  region.style.display = "block";
   region.style.width = `${widthPx}px`;
+  region.style.minHeight = `${heightPx}px`;
   region.style.maxWidth = "100%";
-  region.style.boxSizing = "border-box";
-  region.style.padding = "12px";
+  region.style.padding = "6px 10px";
   region.style.borderRadius = "4px";
-  region.style.margin = "8px 0";
-  region.style.display = "block";
-  const blocks = getIntersectingBlocks(editor, clipped);
+  region.style.margin = "4px 0";
+  region.style.boxSizing = "border-box";
+  if (textAlign === "center") {
+    region.style.marginLeft = "auto";
+    region.style.marginRight = "auto";
+  } else if (textAlign === "right" || textAlign === "end") {
+    region.style.marginLeft = "auto";
+    region.style.marginRight = "0";
+  } else {
+    const leftOffset = Math.max(0, Math.round(clipped.left - editorRect.left));
+    region.style.marginLeft = `${leftOffset}px`;
+    region.style.marginRight = "auto";
+  }
+  return region;
+};
+const insertAreaHighlightRegion = (editor, clientRect, color) => {
+  var _alignNode;
+  const editorRect = editor.getBoundingClientRect();
+  const clipped = clipRectToBounds(clientRect, editorRect);
+  const blocks = getIntersectingBlocks(editor, clipped).filter(isHighlightableBlock);
   if (blocks.length > 0) {
     const first = blocks[0];
+    const textAlign = window.getComputedStyle(first).textAlign;
+    const region = createAreaHighlightWrapper(color, textAlign, clipped, editorRect);
+    let totalBlockHeight = 0;
+    blocks.forEach(block => {
+      totalBlockHeight += block.getBoundingClientRect().height;
+    });
+    const targetHeight = Math.max(24, Math.round(clipped.height));
+    const innerPadding = 12;
+    const extraVertical = Math.max(0, targetHeight - totalBlockHeight - innerPadding);
+    if (extraVertical > 0) {
+      const pad = Math.round(extraVertical / 2);
+      region.style.paddingTop = `${6 + pad}px`;
+      region.style.paddingBottom = `${6 + pad}px`;
+    }
     if (first.parentNode) {
       first.parentNode.insertBefore(region, first);
     } else {
       editor.appendChild(region);
     }
     blocks.forEach(block => {
-      block.style.backgroundColor = "";
-      block.style.borderRadius = "";
       region.appendChild(block);
     });
     return true;
   }
   const insertRange = caretRangeFromClientPoint(clipped.left + clipped.width / 2, clipped.top + Math.min(8, clipped.height / 2)) || caretRangeFromClientPoint(clipped.left + 4, clipped.top + 4);
+  let alignNode = insertRange === null || insertRange === void 0 ? void 0 : insertRange.startContainer;
+  if (((_alignNode = alignNode) === null || _alignNode === void 0 ? void 0 : _alignNode.nodeType) === 3) alignNode = alignNode.parentNode;
+  const textAlign = alignNode instanceof HTMLElement ? window.getComputedStyle(alignNode).textAlign : "left";
+  const region = createAreaHighlightWrapper(color, textAlign, clipped, editorRect);
   region.innerHTML = "&nbsp;";
   if (insertRange && editor.contains(insertRange.startContainer)) {
     insertRange.collapse(true);
@@ -847,6 +959,42 @@ function RichTextEditor({
     const computedColor = window.getComputedStyle(sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode).color;
     return rgbToHex(computedColor);
   };
+  const getBackgroundColorAtCursor = () => {
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount || !editorRef.current) return null;
+    let node = sel.anchorNode;
+    if (node.nodeType === 3) node = node.parentNode;
+    while (node && node !== editorRef.current) {
+      if (node.nodeType === 1) {
+        var _node$classList, _node$classList2, _node$style;
+        if ((_node$classList = node.classList) !== null && _node$classList !== void 0 && _node$classList.contains("rte-area-highlight-block")) {
+          const bg = node.style.backgroundColor;
+          return bg && !isTransparentBackground(bg) ? rgbToHex(bg) : null;
+        }
+        if ((_node$classList2 = node.classList) !== null && _node$classList2 !== void 0 && _node$classList2.contains("rte-block-highlight")) {
+          const bg = node.style.backgroundColor;
+          return bg && !isTransparentBackground(bg) ? rgbToHex(bg) : null;
+        }
+        const inlineBg = (_node$style = node.style) === null || _node$style === void 0 ? void 0 : _node$style.backgroundColor;
+        if (inlineBg && !isTransparentBackground(inlineBg)) {
+          return rgbToHex(inlineBg);
+        }
+        if (node.tagName === "MARK") {
+          const markBg = window.getComputedStyle(node).backgroundColor;
+          return markBg && !isTransparentBackground(markBg) ? rgbToHex(markBg) : null;
+        }
+      }
+      node = node.parentNode;
+    }
+    return null;
+  };
+  const syncBackgroundColorState = () => {
+    const activeBg = getBackgroundColorAtCursor();
+    setHasActiveTextBackground(!!activeBg);
+    if (activeBg) {
+      setBgColor(activeBg);
+    }
+  };
   const stripEditorChrome = root => {
     root.querySelectorAll(".image-delete-button, .video-delete-button, .video-edit-overlay, .media-resize-handle").forEach(element => element.remove());
     root.querySelectorAll(".rte-media-selected").forEach(element => {
@@ -1126,12 +1274,14 @@ function RichTextEditor({
         setIsUnderline(isParentStyle(container, "U", "underline"));
         const computedColor = window.getComputedStyle(container).color;
         setFontColor(rgbToHex(computedColor));
+        syncBackgroundColorState();
       } else {
         setIsBold(document.queryCommandState("bold"));
         setIsItalic(document.queryCommandState("italic"));
         setIsUnderline(document.queryCommandState("underline"));
         const computedColor = window.getComputedStyle(container).color;
         setFontColor(rgbToHex(computedColor));
+        syncBackgroundColorState();
       }
 
       // 3. Current Font Size
@@ -1158,6 +1308,7 @@ function RichTextEditor({
   };
   const [fontColor, setFontColor] = React.useState("#000000");
   const [bgColor, setBgColor] = React.useState("#ffff00");
+  const [hasActiveTextBackground, setHasActiveTextBackground] = React.useState(false);
   React.useEffect(() => {
     bgColorRef.current = bgColor;
   }, [bgColor]);
@@ -1180,6 +1331,7 @@ function RichTextEditor({
   };
   const applyBackgroundColor = color => {
     setBgColor(color);
+    setHasActiveTextBackground(true);
     focus();
     restoreSavedSelection();
     document.execCommand("styleWithCSS", false, true);
@@ -1189,6 +1341,85 @@ function RichTextEditor({
     document.execCommand("styleWithCSS", false, false);
     triggerChange();
   };
+  const clearMediaHighlightStyles = editor => {
+    editor.querySelectorAll(".image-container, .video-container, td, th").forEach(element => {
+      if (!editor.contains(element)) return;
+      if (!element.style.backgroundColor && !element.style.padding && !element.style.borderRadius) {
+        return;
+      }
+      element.style.backgroundColor = "";
+      element.style.padding = "";
+      element.style.borderRadius = "";
+      if (!element.getAttribute("style")) {
+        element.removeAttribute("style");
+      }
+    });
+  };
+  const removeBackgroundColor = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    focus();
+    restoreSavedSelection();
+    const sel = window.getSelection();
+    const range = sel !== null && sel !== void 0 && sel.rangeCount ? sel.getRangeAt(0) : null;
+    document.execCommand("styleWithCSS", false, true);
+    document.execCommand("hiliteColor", false, "transparent");
+    document.execCommand("backColor", false, "transparent");
+    document.execCommand("styleWithCSS", false, false);
+    const processElement = element => {
+      var _element$classList, _element$classList2, _element$classList3;
+      if (!editor.contains(element)) return;
+      if ((_element$classList = element.classList) !== null && _element$classList !== void 0 && _element$classList.contains("rte-area-highlight-block")) {
+        unwrapAreaHighlightBlock(element);
+        return;
+      }
+      if ((_element$classList2 = element.classList) !== null && _element$classList2 !== void 0 && _element$classList2.contains("image-container") || (_element$classList3 = element.classList) !== null && _element$classList3 !== void 0 && _element$classList3.contains("video-container")) {
+        element.style.backgroundColor = "";
+        element.style.padding = "";
+        element.style.borderRadius = "";
+        if (!element.getAttribute("style")) {
+          element.removeAttribute("style");
+        }
+        return;
+      }
+      stripInlineBackground(element);
+    };
+    if (range && editor.contains(range.commonAncestorContainer)) {
+      const elements = collectElementsInRange(range, editor).filter(elementHasRemovableBackground).reverse();
+      elements.forEach(processElement);
+      if (range.collapsed) {
+        let node = range.startContainer;
+        if (node.nodeType === 3) node = node.parentNode;
+        while (node && node !== editor) {
+          if (elementHasRemovableBackground(node)) {
+            processElement(node);
+            break;
+          }
+          node = node.parentNode;
+        }
+      }
+    } else {
+      [...editor.querySelectorAll(".rte-area-highlight-block")].forEach(unwrapAreaHighlightBlock);
+      [...editor.querySelectorAll("mark")].forEach(mark => unwrapNode(mark));
+      [...editor.querySelectorAll("[style*='background']")].forEach(element => {
+        if (editor.contains(element)) {
+          stripInlineBackground(element);
+        }
+      });
+    }
+    clearMediaHighlightStyles(editor);
+    editor.querySelectorAll("span[style], font[style]").forEach(element => {
+      if (!editor.contains(element)) return;
+      if (!element.style.backgroundColor && !element.style.background) {
+        if (!element.getAttribute("style")) {
+          unwrapNode(element);
+        }
+      }
+    });
+    setHasActiveTextBackground(false);
+    triggerChange();
+    focus();
+  };
   const applyMarqueeHighlight = React.useCallback((clientRect, color) => {
     const editor = editorRef.current;
     if (!editor || clientRect.width < 10 || clientRect.height < 10) {
@@ -1201,6 +1432,9 @@ function RichTextEditor({
       return;
     }
     insertAreaHighlightRegion(editor, clippedRect, color);
+    setAreaHighlightMode(false);
+    setMarqueePreview(null);
+    areaDragRef.current = null;
     editor.querySelectorAll("td, th").forEach(cell => {
       if (!editor.contains(cell)) return;
       if (cell.closest(".rte-area-highlight-block")) return;
@@ -2008,12 +2242,7 @@ function RichTextEditor({
     setCurrentFontSize("16");
     setCurrentLineHeight("");
     setFontColor("#000000");
-    setBgColor("#ffff00");
-    document.execCommand("styleWithCSS", false, true);
-    document.execCommand("hiliteColor", false, "transparent");
-    document.execCommand("backColor", false, "transparent");
-    document.execCommand("styleWithCSS", false, false);
-    triggerChange();
+    removeBackgroundColor();
     focus();
   };
   const deleteTextBeforeCursorInBlock = (block, range, selection) => {
@@ -2623,10 +2852,12 @@ function RichTextEditor({
     title: areaHighlightMode ? "Highlight color for area selection" : "Text background color",
     className: "rte-color-picker-label rte-bg-color-picker-label"
   }, /*#__PURE__*/React.createElement("span", {
-    className: "rte-bg-color-swatch",
-    style: {
+    className: `rte-bg-color-swatch${hasActiveTextBackground ? "" : " rte-bg-color-swatch-none"}`,
+    style: hasActiveTextBackground ? {
       backgroundColor: bgColor,
       color: fontColor
+    } : {
+      color: fontColor
     }
   }, "A"), /*#__PURE__*/React.createElement("input", {
     type: "color",
@@ -2646,6 +2877,19 @@ function RichTextEditor({
     },
     className: "rte-color-input"
   })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    title: "Remove background color",
+    className: `rte-toolbar-button rte-bg-color-clear${hasActiveTextBackground ? " active" : ""}`,
+    onMouseDown: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      saveSelection();
+      removeBackgroundColor();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rte-bg-color-clear-icon",
+    "aria-hidden": "true"
+  }, "A")), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Area highlight \u2014 drag to select a box (like screenshot)",
     className: `rte-toolbar-button rte-area-highlight-toggle${areaHighlightMode ? " active" : ""}`,