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

package/dist/index.esm.js

@@ -409,7 +409,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-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{display:block;line-height:0;margin:16px 0;max-width:100%;position:relative;width:fit-content}.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-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;gap:2px;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
@@ -421,6 +421,220 @@ 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;
+  if (document.caretRangeFromPoint) {
+    return document.caretRangeFromPoint(x, y);
+  }
+  const position = (_document$caretPositi = (_document = document).caretPositionFromPoint) === null || _document$caretPositi === void 0 ? void 0 : _document$caretPositi.call(_document, x, y);
+  if (!position) return null;
+  const range = document.createRange();
+  range.setStart(position.offsetNode, position.offset);
+  range.collapse(true);
+  return range;
+};
+const clipRectToBounds = (rect, bounds) => {
+  const left = Math.max(rect.left, bounds.left);
+  const top = Math.max(rect.top, bounds.top);
+  const right = Math.min(rect.right, bounds.right);
+  const bottom = Math.min(rect.bottom, bounds.bottom);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+};
+const BLOCK_SELECTOR = "h1, h2, h3, h4, h5, h6, p, blockquote, li, td, th, div:not(.rte-area-highlight-block):not(.image-container):not(.video-container):not(.image-media-frame)";
+const getIntersectingBlocks = (editor, clientRect) => {
+  const candidates = [...editor.querySelectorAll(BLOCK_SELECTOR)].filter(el => {
+    if (el === editor || !editor.contains(el)) return false;
+    if (el.closest(".rte-area-highlight-block, .image-container, .video-container")) {
+      return false;
+    }
+    return rectsIntersect(el.getBoundingClientRect(), clientRect);
+  });
+  return candidates.filter(el => !candidates.some(other => other !== el && other.contains(el)));
+};
+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.display = "block";
+  region.style.width = `${widthPx}px`;
+  region.style.minHeight = `${heightPx}px`;
+  region.style.maxWidth = "100%";
+  region.style.padding = "6px 10px";
+  region.style.borderRadius = "4px";
+  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 => {
+      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);
+    let node = insertRange.startContainer;
+    if (node.nodeType === 3) node = node.parentNode;
+    while (node && node !== editor && node.parentNode !== editor) {
+      node = node.parentNode;
+    }
+    if (node && node !== editor && editor.contains(node)) {
+      node.parentNode.insertBefore(region, node);
+    } else {
+      editor.appendChild(region);
+    }
+  } else {
+    editor.appendChild(region);
+  }
+  return true;
+};
+const getClientRectFromDrag = (startX, startY, currentX, currentY) => {
+  const left = Math.min(startX, currentX);
+  const top = Math.min(startY, currentY);
+  const right = Math.max(startX, currentX);
+  const bottom = Math.max(startY, currentY);
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top
+  };
+};
 function RichTextEditor({
   onChange,
   showEditButton,
@@ -439,8 +653,11 @@ function RichTextEditor({
   onImageUpload
 }) {
   const editorRef = useRef(null);
+  const contentWrapperRef = useRef(null);
   const fileInputRef = useRef(null);
   const scrollTopRef = useRef(0);
+  const areaDragRef = useRef(null);
+  const bgColorRef = useRef("#ffff00");
   const [html, setHtml] = useState("");
   const [linkModalOpen, setLinkModalOpen] = useState(false);
   const [linkUrl, setLinkUrl] = useState("");
@@ -481,11 +698,15 @@ function RichTextEditor({
   const [tableCols, setTableCols] = useState(3);
   const [selectionVersion, setSelectionVersion] = useState(0);
   const [selectedMedia, setSelectedMedia] = useState(null);
+  const [mediaWidthInput, setMediaWidthInput] = useState("100");
+  const [mediaWidthUnit, setMediaWidthUnit] = useState("%");
   const [metrics, setMetrics] = useState({
     words: 0,
     chars: 0
   });
   const [isEmpty, setIsEmpty] = useState(!value);
+  const [areaHighlightMode, setAreaHighlightMode] = useState(false);
+  const [marqueePreview, setMarqueePreview] = useState(null);
   const updateMetrics = useCallback(() => {
     if (!editorRef.current) return;
     // Calculate metrics immediately but outside of render path
@@ -522,6 +743,10 @@ function RichTextEditor({
       selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
     }
   };
+  const handleKeyUp = () => {
+    saveSelection();
+    setSelectionVersion(v => v + 1);
+  };
   const handleZoomIn = () => {
     setZoomLevel(prevZoom => prevZoom + 0.1);
   };
@@ -732,6 +957,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 => {
@@ -771,9 +1032,31 @@ function RichTextEditor({
     }
     return 100;
   };
+  const getMediaWidthPx = container => {
+    if (!container) return 0;
+    if (container.dataset.widthPx) {
+      return Number(container.dataset.widthPx);
+    }
+    const width = container.style.width || "";
+    if (width.endsWith("px")) {
+      return parseInt(width, 10) || 0;
+    }
+    return Math.round(container.getBoundingClientRect().width);
+  };
+  const syncMediaWidthControls = container => {
+    if (!container) return;
+    if (container.dataset.widthPx) {
+      setMediaWidthInput(String(getMediaWidthPx(container)));
+      setMediaWidthUnit("px");
+      return;
+    }
+    setMediaWidthInput(String(getMediaWidthPercent(container)));
+    setMediaWidthUnit("%");
+  };
   const applyMediaWidthPercent = (container, percent) => {
     if (!container) return;
-    const clamped = Math.max(25, Math.min(100, Math.round(percent)));
+    const clamped = Math.max(10, Math.min(100, Math.round(percent)));
+    delete container.dataset.widthPx;
     container.dataset.widthPercent = String(clamped);
     container.style.width = `${clamped}%`;
     container.style.maxWidth = "100%";
@@ -794,8 +1077,36 @@ function RichTextEditor({
       img.style.objectFit = "";
     }
   };
+  const applyMediaWidthPx = (container, px) => {
+    if (!container) return;
+    const clamped = Math.max(20, Math.min(2000, Math.round(px)));
+    delete container.dataset.widthPercent;
+    container.dataset.widthPx = String(clamped);
+    container.style.width = `${clamped}px`;
+    container.style.maxWidth = "100%";
+    container.style.marginLeft = "";
+    container.style.marginTop = "";
+    if (container.classList.contains("video-container")) {
+      container.style.height = "0";
+      container.style.paddingBottom = "56.25%";
+      return;
+    }
+    const frame = getImageMediaTarget(container);
+    if (!frame) return;
+    frame.style.width = "100%";
+    frame.style.height = "";
+    const img = frame.querySelector("img");
+    if (img) {
+      img.style.height = "auto";
+      img.style.objectFit = "";
+    }
+  };
   const normalizeMediaWidth = container => {
     if (!container) return;
+    if (container.dataset.widthPx) {
+      applyMediaWidthPx(container, Number(container.dataset.widthPx));
+      return;
+    }
     if (container.classList.contains("image-small")) {
       container.classList.remove("image-small");
       applyMediaWidthPercent(container, 50);
@@ -811,11 +1122,7 @@ function RichTextEditor({
       return;
     }
     if (width.endsWith("px")) {
-      const editorWidth = getEditorInnerWidth();
-      const px = parseFloat(width);
-      if (editorWidth > 0 && px > 0) {
-        applyMediaWidthPercent(container, Math.round(px / editorWidth * 100));
-      }
+      applyMediaWidthPx(container, parseFloat(width));
       return;
     }
     if (container.classList.contains("video-container")) {
@@ -858,12 +1165,18 @@ function RichTextEditor({
       const startWidth = container.getBoundingClientRect().width;
       const onMouseMove = moveEvent => {
         const nextWidth = Math.max(60, startWidth + (moveEvent.clientX - startX));
-        const percent = Math.round(nextWidth / editorWidth * 100);
-        applyMediaWidthPercent(container, percent);
+        if (container.dataset.widthPx) {
+          applyMediaWidthPx(container, nextWidth);
+        } else {
+          const percent = Math.round(nextWidth / editorWidth * 100);
+          applyMediaWidthPercent(container, percent);
+        }
       };
       const onMouseUp = () => {
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
+        syncMediaWidthControls(container);
+        setSelectionVersion(v => v + 1);
         triggerChange();
       };
       document.addEventListener("mousemove", onMouseMove);
@@ -959,12 +1272,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
@@ -990,11 +1305,202 @@ function RichTextEditor({
     focus();
   };
   const [fontColor, setFontColor] = useState("#000000");
+  const [bgColor, setBgColor] = useState("#ffff00");
+  const [hasActiveTextBackground, setHasActiveTextBackground] = useState(false);
+  useEffect(() => {
+    bgColorRef.current = bgColor;
+  }, [bgColor]);
   const getActiveTextColor = () => getColorAtCursor() || fontColor;
-  const handleColorChange = color => {
+  const restoreSavedSelection = () => {
+    if (!selectionRangeRef.current) return;
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(selectionRangeRef.current);
+  };
+  const applyTextColor = color => {
     setFontColor(color);
-    exec("foreColor", color);
+    focus();
+    restoreSavedSelection();
+    document.execCommand("styleWithCSS", false, true);
+    document.execCommand("foreColor", false, color);
+    document.execCommand("styleWithCSS", false, false);
+    triggerChange();
+  };
+  const applyBackgroundColor = color => {
+    setBgColor(color);
+    setHasActiveTextBackground(true);
+    focus();
+    restoreSavedSelection();
+    document.execCommand("styleWithCSS", false, true);
+    if (!document.execCommand("hiliteColor", false, color)) {
+      document.execCommand("backColor", false, color);
+    }
+    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 = useCallback((clientRect, color) => {
+    const editor = editorRef.current;
+    if (!editor || clientRect.width < 10 || clientRect.height < 10) {
+      return;
+    }
+    editor.focus();
+    const editorRect = editor.getBoundingClientRect();
+    const clippedRect = clipRectToBounds(clientRect, editorRect);
+    if (clippedRect.width < 10 || clippedRect.height < 10) {
+      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;
+      if (rectsIntersect(cell.getBoundingClientRect(), clippedRect)) {
+        cell.style.backgroundColor = color;
+      }
+    });
+    editor.querySelectorAll(".image-container, .video-container").forEach(media => {
+      if (!editor.contains(media)) return;
+      if (rectsIntersect(media.getBoundingClientRect(), clippedRect)) {
+        media.style.backgroundColor = color;
+        media.style.padding = "4px";
+        media.style.borderRadius = "4px";
+      }
+    });
+    updateMetrics();
+    triggerChange();
+    focus();
+  }, [triggerChange, updateMetrics]);
+  const handleAreaSelectMouseDown = useCallback(e => {
+    if (!areaHighlightMode || !editable || disabled) return;
+    if (e.button !== 0) return;
+    if (e.target.closest(".rte-toolbar, .rte-media-toolbar, .rte-modal-overlay")) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const wrapper = contentWrapperRef.current;
+    if (!wrapper) return;
+    const wrapperRect = wrapper.getBoundingClientRect();
+    areaDragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      wrapperRect
+    };
+    const updatePreview = (clientX, clientY) => {
+      const drag = areaDragRef.current;
+      if (!drag) return;
+      drag.currentX = clientX;
+      drag.currentY = clientY;
+      const rect = getClientRectFromDrag(drag.startX, drag.startY, drag.currentX, drag.currentY);
+      setMarqueePreview({
+        left: rect.left - drag.wrapperRect.left,
+        top: rect.top - drag.wrapperRect.top,
+        width: rect.width,
+        height: rect.height
+      });
+    };
+    const onMove = ev => {
+      ev.preventDefault();
+      updatePreview(ev.clientX, ev.clientY);
+    };
+    const onUp = ev => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      const drag = areaDragRef.current;
+      areaDragRef.current = null;
+      setMarqueePreview(null);
+      if (!drag) return;
+      const clientRect = getClientRectFromDrag(drag.startX, drag.startY, ev.clientX, ev.clientY);
+      requestAnimationFrame(() => {
+        applyMarqueeHighlight(clientRect, bgColorRef.current);
+      });
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    updatePreview(e.clientX, e.clientY);
+  }, [areaHighlightMode, editable, disabled, applyMarqueeHighlight]);
   const addLink = () => {
     const sel = window.getSelection();
     if (!sel || sel.rangeCount === 0) return;
@@ -1248,9 +1754,25 @@ function RichTextEditor({
         if (frame && !frame.querySelector(".image-delete-button")) {
           frame.appendChild(createMediaDeleteButton("Remove image", "image-delete-button", () => {
             existingWrapper.remove();
+            clearMediaSelection();
             triggerChange && triggerChange();
           }));
         }
+        if (!existingWrapper.dataset.mediaEnhanced) {
+          existingWrapper.dataset.mediaEnhanced = "true";
+          existingWrapper.addEventListener("click", event => {
+            if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+            event.preventDefault();
+            event.stopPropagation();
+            selectMediaContainer(existingWrapper);
+          });
+          img.addEventListener("dblclick", event => {
+            if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+            event.preventDefault();
+            event.stopPropagation();
+            openImageModal(img.src);
+          });
+        }
         attachMediaResizeHandle(existingWrapper);
         normalizeMediaWidth(existingWrapper);
         updateMediaControlVisibility(existingWrapper);
@@ -1328,14 +1850,33 @@ function RichTextEditor({
           event.stopPropagation();
           selectMediaContainer(container);
         });
+        container.style.cursor = editable ? "pointer" : "default";
+        container.dataset.mediaEnhanced = "true";
+        container.addEventListener("click", event => {
+          if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+          event.preventDefault();
+          event.stopPropagation();
+          selectMediaContainer(container);
+        });
+        const deleteBtn = createMediaDeleteButton("Remove image", "image-delete-button", () => {
+          container.remove();
+          clearMediaSelection();
+          triggerChange();
+        });
         frame.appendChild(img);
+        frame.appendChild(deleteBtn);
         container.appendChild(frame);
-        applyMediaWidthPercent(container, 25);
+        attachMediaResizeHandle(container);
+        applyMediaWidthPercent(container, 50);
 
         // Insert at cursor position
         insertNodeAtCursor(container);
         requestAnimationFrame(() => {
+          var _editorRef$current5;
           processExistingMedia(editorRef.current);
+          selectMediaContainer(container);
+          syncMediaWidthControls(container);
+          (_editorRef$current5 = editorRef.current) === null || _editorRef$current5 === void 0 || _editorRef$current5.focus();
           triggerChange();
         });
       }
@@ -1503,6 +2044,28 @@ function RichTextEditor({
     selection.addRange(newRange);
   };
   const handleKeyDown = useCallback(e => {
+    var _editorRef$current6;
+    if (e.key === "Escape") {
+      if (areaHighlightMode) {
+        e.preventDefault();
+        areaDragRef.current = null;
+        setMarqueePreview(null);
+        setAreaHighlightMode(false);
+        return;
+      }
+      if (selectedMedia) {
+        e.preventDefault();
+        clearMediaSelection();
+        return;
+      }
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && selectedMedia !== null && selectedMedia !== void 0 && selectedMedia.classList.contains("rte-media-selected") && (_editorRef$current6 = editorRef.current) !== null && _editorRef$current6 !== void 0 && _editorRef$current6.contains(selectedMedia)) {
+      e.preventDefault();
+      selectedMedia.remove();
+      clearMediaSelection();
+      triggerChange();
+      return;
+    }
     if (applyMarkdownShortcut(e)) return;
 
     // Handle Enter key
@@ -1576,7 +2139,7 @@ function RichTextEditor({
       return;
     }
     if (e.key === "Backspace") {
-      var _node$closest, _node, _editorRef$current5;
+      var _node$closest, _node, _editorRef$current7;
       const selection = window.getSelection();
       if (!(selection !== null && selection !== void 0 && selection.rangeCount)) return;
       const range = selection.getRangeAt(0);
@@ -1586,7 +2149,7 @@ function RichTextEditor({
         node = node.parentNode;
       }
       const listItem = (_node$closest = (_node = node).closest) === null || _node$closest === void 0 ? void 0 : _node$closest.call(_node, "li");
-      if (!listItem || !((_editorRef$current5 = editorRef.current) !== null && _editorRef$current5 !== void 0 && _editorRef$current5.contains(listItem))) return;
+      if (!listItem || !((_editorRef$current7 = editorRef.current) !== null && _editorRef$current7 !== void 0 && _editorRef$current7.contains(listItem))) return;
       const list = listItem.parentNode;
       if (isListItemEffectivelyEmpty(listItem)) {
         e.preventDefault();
@@ -1635,7 +2198,7 @@ function RichTextEditor({
       e.preventDefault();
       exec("underline");
     }
-  }, [exec, triggerChange, fontColor]);
+  }, [exec, triggerChange, fontColor, areaHighlightMode, selectedMedia]);
   const confirmLink = () => {
     // Add protocol if missing
     let url = linkUrl.trim();
@@ -1677,7 +2240,7 @@ function RichTextEditor({
     setCurrentFontSize("16");
     setCurrentLineHeight("");
     setFontColor("#000000");
-    triggerChange();
+    removeBackgroundColor();
     focus();
   };
   const deleteTextBeforeCursorInBlock = (block, range, selection) => {
@@ -1903,7 +2466,11 @@ function RichTextEditor({
     }
   }, [disabled]);
   const handleEditorClick = useCallback(e => {
-    var _editorRef$current6;
+    var _editorRef$current8;
+    if (areaHighlightMode) {
+      e.preventDefault();
+      return;
+    }
     setSelectionVersion(v => v + 1);
     const deleteBtn = e.target.closest('button[title="Remove image"], button[title="Remove video"]');
     if (deleteBtn && editable && editorFocused) {
@@ -1918,7 +2485,10 @@ function RichTextEditor({
       return;
     }
     const clickedMedia = e.target.closest('.image-container, .video-container');
-    if (clickedMedia && (_editorRef$current6 = editorRef.current) !== null && _editorRef$current6 !== void 0 && _editorRef$current6.contains(clickedMedia) && editable) {
+    if (clickedMedia && (_editorRef$current8 = editorRef.current) !== null && _editorRef$current8 !== void 0 && _editorRef$current8.contains(clickedMedia) && editable) {
+      e.preventDefault();
+      e.stopPropagation();
+      selectMediaContainer(clickedMedia);
       return;
     }
 
@@ -1949,16 +2519,78 @@ function RichTextEditor({
         }
       }, 0);
     }
-  }, [editable, disabled, editorFocused, triggerChange]);
+  }, [areaHighlightMode, editable, disabled, editorFocused, triggerChange]);
+  useEffect(() => {
+    if (!selectedMedia) return;
+    syncMediaWidthControls(selectedMedia);
+  }, [selectedMedia, selectionVersion]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || !selectedMedia) return;
+    const bumpToolbarPosition = () => setSelectionVersion(v => v + 1);
+    editor.addEventListener("scroll", bumpToolbarPosition, {
+      passive: true
+    });
+    window.addEventListener("resize", bumpToolbarPosition, {
+      passive: true
+    });
+    return () => {
+      editor.removeEventListener("scroll", bumpToolbarPosition);
+      window.removeEventListener("resize", bumpToolbarPosition);
+    };
+  }, [selectedMedia]);
   const renderMediaToolbar = () => {
     if (!selectedMedia || !editorRef.current || !editable) return null;
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const wrapperEl = contentWrapperRef.current;
+    const anchorRect = (wrapperEl === null || wrapperEl === void 0 ? void 0 : wrapperEl.getBoundingClientRect()) ?? editorRef.current.getBoundingClientRect();
     const mediaRect = selectedMedia.getBoundingClientRect();
-    const top = mediaRect.top - editorRect.top + editorRef.current.scrollTop;
-    const left = mediaRect.left - editorRect.left + editorRef.current.scrollLeft;
-    const width = mediaRect.width;
+    const relTop = mediaRect.top - anchorRect.top;
+    const relLeft = mediaRect.left - anchorRect.left;
+    const mediaWidth = mediaRect.width;
+    const mediaHeight = mediaRect.height;
     const currentPercent = getMediaWidthPercent(selectedMedia);
     const widthPresets = [25, 50, 75, 100];
+    const toolbarWidth = 340;
+    const toolbarHeight = 40;
+    const gap = 8;
+    const preferredTop = relTop - toolbarHeight - gap;
+    const toolbarTop = preferredTop >= 4 ? preferredTop : relTop + mediaHeight + gap;
+    const applyCustomMediaWidth = () => {
+      const num = parseFloat(mediaWidthInput);
+      if (isNaN(num) || num <= 0) {
+        syncMediaWidthControls(selectedMedia);
+        return;
+      }
+      if (mediaWidthUnit === "px") {
+        applyMediaWidthPx(selectedMedia, num);
+      } else {
+        applyMediaWidthPercent(selectedMedia, num);
+      }
+      syncMediaWidthControls(selectedMedia);
+      setSelectionVersion(v => v + 1);
+      triggerChange();
+    };
+    const handleUnitChange = newUnit => {
+      if (newUnit === mediaWidthUnit) return;
+      const editorInnerWidth = getEditorInnerWidth();
+      const currentVal = parseFloat(mediaWidthInput);
+      if (isNaN(currentVal) || currentVal <= 0) {
+        setMediaWidthUnit(newUnit);
+        return;
+      }
+      let converted = currentVal;
+      if (newUnit === "px" && mediaWidthUnit === "%") {
+        converted = Math.round(editorInnerWidth * currentVal / 100);
+        applyMediaWidthPx(selectedMedia, converted);
+      } else if (newUnit === "%" && mediaWidthUnit === "px") {
+        converted = Math.min(100, Math.max(10, Math.round(currentVal / editorInnerWidth * 100)));
+        applyMediaWidthPercent(selectedMedia, converted);
+      }
+      setMediaWidthInput(String(converted));
+      setMediaWidthUnit(newUnit);
+      setSelectionVersion(v => v + 1);
+      triggerChange();
+    };
     const handleAlignment = align => {
       selectedMedia.classList.remove("image-align-left", "image-align-center", "image-align-right");
       selectedMedia.classList.add(`image-align-${align}`);
@@ -1968,6 +2600,8 @@ function RichTextEditor({
     };
     const setWidth = percent => {
       applyMediaWidthPercent(selectedMedia, percent);
+      syncMediaWidthControls(selectedMedia);
+      setSelectionVersion(v => v + 1);
       triggerChange();
     };
     const removeMedia = () => {
@@ -1976,17 +2610,26 @@ function RichTextEditor({
       triggerChange();
     };
     const isActivePercent = percent => {
+      if (selectedMedia.dataset.widthPx) return false;
       if (!selectedMedia.dataset.widthPercent && !(selectedMedia.style.width || "").endsWith("%")) {
         return false;
       }
       return Math.abs(currentPercent - percent) <= 3;
     };
+    const isFormControl = target => target instanceof Element && !!target.closest("input, select, textarea");
     return /*#__PURE__*/React.createElement("div", {
       className: "rte-media-toolbar",
+      onMouseDown: e => {
+        e.stopPropagation();
+        if (!isFormControl(e.target)) {
+          e.preventDefault();
+        }
+      },
+      onClick: e => e.stopPropagation(),
       style: {
         position: "absolute",
-        top: Math.max(0, top - 44),
-        left: Math.max(8, left + width / 2 - 156),
+        top: Math.max(4, toolbarTop),
+        left: Math.max(8, Math.min(relLeft + mediaWidth / 2 - toolbarWidth / 2, anchorRect.width - toolbarWidth - 8)),
         zIndex: 1000
       }
     }, /*#__PURE__*/React.createElement("button", {
@@ -2011,6 +2654,44 @@ function RichTextEditor({
       title: `${percent}% width`
     }, percent, "%")), /*#__PURE__*/React.createElement("span", {
       className: "rte-media-toolbar-divider"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "rte-media-width-custom"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "number",
+      className: "rte-media-width-input",
+      value: mediaWidthInput,
+      min: mediaWidthUnit === "%" ? 10 : 20,
+      max: mediaWidthUnit === "%" ? 100 : 2000,
+      title: "Custom width",
+      onChange: e => setMediaWidthInput(e.target.value),
+      onBlur: e => {
+        var _e$relatedTarget, _e$relatedTarget$clos;
+        if ((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && (_e$relatedTarget$clos = _e$relatedTarget.closest) !== null && _e$relatedTarget$clos !== void 0 && _e$relatedTarget$clos.call(_e$relatedTarget, ".rte-media-width-custom")) return;
+        applyCustomMediaWidth();
+      },
+      onMouseDown: e => e.stopPropagation(),
+      onKeyDown: e => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          applyCustomMediaWidth();
+        }
+      }
+    }), /*#__PURE__*/React.createElement("select", {
+      className: "rte-media-width-unit",
+      value: mediaWidthUnit,
+      onChange: e => handleUnitChange(e.target.value),
+      onMouseDown: e => e.stopPropagation()
+    }, /*#__PURE__*/React.createElement("option", {
+      value: "%"
+    }, "%"), /*#__PURE__*/React.createElement("option", {
+      value: "px"
+    }, "px")), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "rte-media-width-apply",
+      title: "Apply size",
+      onClick: applyCustomMediaWidth
+    }, "\u2713")), /*#__PURE__*/React.createElement("span", {
+      className: "rte-media-toolbar-divider"
     }), /*#__PURE__*/React.createElement("button", {
       type: "button",
       onClick: removeMedia,
@@ -2145,7 +2826,7 @@ function RichTextEditor({
     key: s,
     value: s
   }, s, "px"))), /*#__PURE__*/React.createElement("label", {
-    title: "Font Color",
+    title: "Text Color",
     className: "rte-color-picker-label"
   }, /*#__PURE__*/React.createElement(FaFont, {
     size: 14,
@@ -2158,12 +2839,68 @@ function RichTextEditor({
     onMouseDown: e => {
       e.preventDefault();
       e.stopPropagation();
+      saveSelection();
     },
     onChange: e => {
       e.stopPropagation();
-      handleColorChange(e.target.value);
+      applyTextColor(e.target.value);
     },
     className: "rte-color-input"
+  })), /*#__PURE__*/React.createElement("label", {
+    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${hasActiveTextBackground ? "" : " rte-bg-color-swatch-none"}`,
+    style: hasActiveTextBackground ? {
+      backgroundColor: bgColor,
+      color: fontColor
+    } : {
+      color: fontColor
+    }
+  }, "A"), /*#__PURE__*/React.createElement("input", {
+    type: "color",
+    value: bgColor,
+    onMouseDown: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!areaHighlightMode) saveSelection();
+    },
+    onChange: e => {
+      e.stopPropagation();
+      const color = e.target.value;
+      setBgColor(color);
+      if (!areaHighlightMode) {
+        applyBackgroundColor(color);
+      }
+    },
+    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" : ""}`,
+    onMouseDown: e => e.preventDefault(),
+    onClick: () => {
+      setAreaHighlightMode(prev => !prev);
+      setMarqueePreview(null);
+      areaDragRef.current = null;
+      focus();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "rte-area-highlight-icon",
+    "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       width: '1px',
@@ -2460,11 +3197,26 @@ function RichTextEditor({
     }
     return null;
   })()), /*#__PURE__*/React.createElement("div", {
-    className: "rte-content-wrapper",
+    ref: contentWrapperRef,
+    className: `rte-content-wrapper${areaHighlightMode ? " rte-area-highlight-mode" : ""}`,
     style: {
       position: 'relative'
+    },
+    onMouseDown: handleAreaSelectMouseDown
+  }, areaHighlightMode && /*#__PURE__*/React.createElement("div", {
+    className: "rte-area-highlight-hint",
+    "aria-hidden": "true"
+  }, "Drag to select an area, then release to apply highlight"), marqueePreview && /*#__PURE__*/React.createElement("div", {
+    className: "rte-marquee-preview",
+    style: {
+      left: marqueePreview.left,
+      top: marqueePreview.top,
+      width: marqueePreview.width,
+      height: marqueePreview.height,
+      backgroundColor: `${bgColor}55`,
+      borderColor: bgColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     contentEditable: editable && disabled !== true,
     suppressContentEditableWarning: true,
@@ -2477,6 +3229,11 @@ function RichTextEditor({
     onDragStart: e => e.preventDefault(),
     onDragOver: e => e.preventDefault(),
     onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onMouseUp: () => {
+      saveSelection();
+      setSelectionVersion(v => v + 1);
+    },
     onClick: handleEditorClick,
     onFocus: handleEditorFocus,
     onBlur: handleEditorBlur,
@@ -2492,7 +3249,7 @@ function RichTextEditor({
       left: paddingLeft || '12px'
     },
     "aria-hidden": "true"
-  }, placeholder)), renderMediaToolbar(), /*#__PURE__*/React.createElement("div", {
+  }, placeholder), renderMediaToolbar()), /*#__PURE__*/React.createElement("div", {
     className: "rte-footer"
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-footer-content"