react-lite-rich-text-editor 1.1.4 → 1.1.6

package/dist/index.esm.js

@@ -388,7 +388,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-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 ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.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);height:0;margin:16px 0;overflow:hidden;padding-bottom:56.25%;position:relative}.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;outline:none;padding:8px 12px;transition:all .15s ease;width:93%}.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:inline-block;line-height:0;margin:15px;max-width:100%;position:relative}.image-container.image-align-center{display:block;margin:24px auto;text-align:center}.image-container.image-align-left,.image-container.image-align-right{display:block}.image-container.image-align-left,.image-container.image-align-right{margin:15px 0}.image-container.image-align-left img{margin-left:0!important;margin-right:auto!important}.image-container.image-align-center img{margin-left:auto!important;margin-right:auto!important}.image-container.image-align-right img{margin-left:auto!important;margin-right:0!important}.image-container img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-container.image-small img{width:50%!important}.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:flex;font-size:18px;font-weight:700;height:26px;justify-content:center;line-height:1;padding:0;position:absolute;right:0;top:0;transform:translate(50%,-50%);transition:all .2s cubic-bezier(.4,0,.2,1);width:26px;z-index:50}.image-delete-button:hover{background:#b91c1c;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translate(50%,-50%) scale(1.1)}.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-image-toolbar{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:8px!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;display:flex;gap:4px!important;padding:4px!important;pointer-events:auto!important}.rte-image-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:32px;padding:0 4px;transition:all .15s ease}.rte-image-toolbar button:hover{background-color:#f3f4f6;color:#111827}.rte-image-toolbar button.danger{color:#ef4444!important}.rte-image-toolbar button.danger:hover{background-color:#fef2f2!important}.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-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 ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.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);height:0;margin:16px 0;max-width:100%;overflow:hidden;padding-bottom:56.25%;position:relative}.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;outline:none;padding:8px 12px;transition:all .15s ease;width:93%}.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%;width:fit-content}.image-container.image-align-center{margin-left:auto;margin-right:auto}.image-container.image-align-left{margin-left:0;margin-right:auto}.image-container.image-align-right{margin-left:auto;margin-right:0}.image-media-frame{display:block;line-height:0;max-width:100%;position:relative;width:fit-content}.image-media-frame img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-media-frame[style*=width] img{width:100%}.image-media-frame[data-explicit-height=true] img,.image-media-frame[style*=height] img{height:100%;object-fit:contain}.image-container.image-small .image-media-frame img{width:50%!important}.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}.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-handles{inset:0;pointer-events:none;position:absolute;z-index:55}.media-resize-handle{background:#dbeafe;border:2px solid #fff;border-radius:4px;box-shadow:0 1px 3px rgba(15,23,42,.12);pointer-events:auto;position:absolute;z-index:60}.media-resize-handle:hover{background:#bfdbfe}.media-resize-handle-left,.media-resize-handle-right{cursor:ew-resize;height:28px;top:50%;transform:translateY(-50%);width:10px}.media-resize-handle-right{right:-5px}.media-resize-handle-left{left:-5px}.media-resize-handle-bottom,.media-resize-handle-top{cursor:ns-resize;height:10px;left:50%;transform:translateX(-50%);width:28px}.media-resize-handle-top{top:-5px}.media-resize-handle-bottom{bottom:-5px}.video-container .media-resize-handle-right{right:4px}.video-container .media-resize-handle-left{left:4px}.video-container .media-resize-handle-top{top:4px}.video-container .media-resize-handle-bottom{bottom:4px}.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-image-toolbar{background:#fff!important;border:1px solid #e5e7eb!important;border-radius:8px!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important;display:flex;gap:4px!important;padding:4px!important;pointer-events:auto!important}.rte-image-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:32px;padding:0 4px;transition:all .15s ease}.rte-image-toolbar button:hover{background-color:#f3f4f6;color:#111827}.rte-image-toolbar button.danger{color:#ef4444!important}.rte-image-toolbar button.danger:hover{background-color:#fef2f2!important}.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
@@ -416,9 +416,6 @@ function RichTextEditor({
   maxHeight,
   onImageUpload
 }) {
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Spinner, null);
-  }
   const editorRef = useRef(null);
   const fileInputRef = useRef(null);
   const scrollTopRef = useRef(0);
@@ -428,7 +425,9 @@ function RichTextEditor({
   const [linkText, setLinkText] = useState("");
   const selectionRangeRef = useRef(null);
   const [editable, setEditable] = useState(initialEditable);
+  const [editorFocused, setEditorFocused] = useState(false);
   const lastSynchronizedHtmlRef = useRef("");
+  const syncProcessedMediaRef = useRef(() => {});
   useEffect(() => {
     setEditable(initialEditable);
   }, [initialEditable]);
@@ -533,40 +532,25 @@ function RichTextEditor({
       window.removeEventListener('wheel', handleWheel);
     };
   }, [imageModalOpen]);
-  useEffect(() => {
-    const handleClick = e => {
-      // Trigger selection update for toolbar reactivity
-      setSelectionVersion(v => v + 1);
-      const deleteBtn = e.target.closest('button[title="Remove image"]');
-      if (deleteBtn && editable) {
-        e.preventDefault();
-        e.stopPropagation();
-        const wrapper = deleteBtn.closest('.image-container');
-        if (wrapper && wrapper.parentNode) {
-          wrapper.parentNode.removeChild(wrapper);
-          triggerChange && triggerChange();
-        }
-      }
-    };
-    const editor = editorRef.current;
-    if (editor) {
-      editor.addEventListener('click', handleClick);
-      return () => {
-        editor.removeEventListener('click', handleClick);
-      };
-    }
-    // Removed dependency on editable to minimize listener churn
-  }, []);
   useEffect(() => {
     if (editorRef.current && value && value !== lastSynchronizedHtmlRef.current) {
-      requestAnimationFrame(() => processExistingImages(editorRef.current));
+      requestAnimationFrame(() => syncProcessedMediaRef.current(editorRef.current));
     }
   }, [value]);
 
   // Runs whenever editable changes (toggles delete icon visibility)
   useEffect(() => {
-    processExistingImages(editorRef.current);
+    if (!editable) {
+      setEditorFocused(false);
+    }
+    syncProcessedMediaRef.current(editorRef.current);
   }, [editable]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    editorRef.current.querySelectorAll(".image-container, .video-container").forEach(container => {
+      updateMediaControlVisibility(container);
+    });
+  }, [editorFocused, editable]);
   useEffect(() => {
     // Only update if value is different from our last known synced state
     if (value && value !== lastSynchronizedHtmlRef.current) {
@@ -590,6 +574,7 @@ function RichTextEditor({
           if (editorRef.current && editorRef.current.innerHTML !== newContent) {
             editorRef.current.innerHTML = newContent;
           }
+          requestAnimationFrame(() => syncProcessedMediaRef.current(editorRef.current));
           updateMetrics();
         }
       } catch (e) {
@@ -604,6 +589,54 @@ function RichTextEditor({
       }
     }
   }, [value, initialEditable, updateMetrics]);
+  const LIST_BLOCK_MEDIA_SELECTOR = ".video-container, .image-container, table";
+  const isListItemEffectivelyEmpty = listItem => {
+    if (!listItem) return true;
+    const clone = listItem.cloneNode(true);
+    clone.querySelectorAll(LIST_BLOCK_MEDIA_SELECTOR).forEach(el => el.remove());
+    clone.querySelectorAll("br").forEach(el => el.remove());
+    return clone.textContent.replace(/[\u200B\u00A0\s]/g, "").length === 0;
+  };
+  const hoistBlockMediaOutOfListItems = container => {
+    if (!container) return false;
+    let changed = false;
+    container.querySelectorAll("ol, ul").forEach(list => {
+      const items = Array.from(list.children).filter(child => child.tagName === "LI");
+      items.forEach(listItem => {
+        const blockMedia = Array.from(listItem.querySelectorAll(LIST_BLOCK_MEDIA_SELECTOR));
+        if (blockMedia.length === 0) return;
+        const hadText = !isListItemEffectivelyEmpty(listItem);
+        blockMedia.forEach(media => {
+          listItem.removeChild(media);
+          if (list.parentNode) {
+            list.parentNode.insertBefore(media, list.nextSibling);
+          }
+          changed = true;
+        });
+        if (!hadText || isListItemEffectivelyEmpty(listItem)) {
+          listItem.remove();
+          changed = true;
+        }
+      });
+      if (list.children.length === 0 && list.parentNode) {
+        list.remove();
+        changed = true;
+      }
+    });
+    return changed;
+  };
+  const processExistingMedia = container => {
+    if (!container) return false;
+    processExistingImages(container);
+    processExistingVideos(container);
+    return hoistBlockMediaOutOfListItems(container);
+  };
+  const getCleanHtml = () => {
+    if (!editorRef.current) return "";
+    const clone = editorRef.current.cloneNode(true);
+    stripEditorChrome(clone);
+    return clone.innerHTML;
+  };
 
   // Trigger change manually
   const triggerChange = useCallback(() => {
@@ -612,6 +645,11 @@ function RichTextEditor({
     lastSynchronizedHtmlRef.current = next;
     onChange && onChange(next);
   }, [onChange]);
+  syncProcessedMediaRef.current = container => {
+    if (processExistingMedia(container)) {
+      triggerChange();
+    }
+  };
 
   // Helper to walk up DOM to find style tags or CSS style:
   const isParentStyle = (node, ...tagNames) => {
@@ -647,14 +685,220 @@ function RichTextEditor({
       return hex.length === 1 ? "0" + hex : hex;
     }).join("");
   }
+  const getColorAtCursor = () => {
+    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) {
+        if (node.style && node.style.color) {
+          return rgbToHex(node.style.color);
+        }
+        if (node.tagName === "FONT" && node.getAttribute("color")) {
+          return node.getAttribute("color");
+        }
+      }
+      node = node.parentNode;
+    }
+    const computedColor = window.getComputedStyle(sel.anchorNode.nodeType === 3 ? sel.anchorNode.parentNode : sel.anchorNode).color;
+    return rgbToHex(computedColor);
+  };
+  const stripEditorChrome = root => {
+    root.querySelectorAll(".image-delete-button, .video-delete-button, .video-edit-overlay, .media-resize-handles, .media-resize-handle").forEach(element => element.remove());
+    return root;
+  };
+  const getMediaSizeLimits = () => {
+    const maxWidth = editorRef.current ? editorRef.current.getBoundingClientRect().width - 24 : 800;
+    return {
+      minWidth: 120,
+      minHeight: 80,
+      maxWidth,
+      maxHeight: 720
+    };
+  };
+  const ensureImageMediaFrame = imageContainer => {
+    if (!imageContainer) return null;
+    let frame = imageContainer.querySelector(":scope > .image-media-frame");
+    if (frame) return frame;
+    frame = document.createElement("div");
+    frame.className = "image-media-frame";
+    ["width", "height", "marginLeft", "marginTop", "maxWidth"].forEach(prop => {
+      if (imageContainer.style[prop]) {
+        frame.style[prop] = imageContainer.style[prop];
+        imageContainer.style[prop] = "";
+      }
+    });
+    if (imageContainer.dataset.explicitHeight) {
+      frame.dataset.explicitHeight = imageContainer.dataset.explicitHeight;
+      delete imageContainer.dataset.explicitHeight;
+    }
+    const children = Array.from(imageContainer.children);
+    imageContainer.appendChild(frame);
+    children.forEach(child => frame.appendChild(child));
+    return frame;
+  };
+  const getImageMediaTarget = imageContainer => ensureImageMediaFrame(imageContainer) || imageContainer;
+  const applyImageMediaSize = (frame, width, height, edge) => {
+    const img = frame.querySelector("img");
+    const isVertical = edge === "top" || edge === "bottom";
+    frame.style.width = `${Math.round(width)}px`;
+    frame.style.maxWidth = "100%";
+    if (isVertical) {
+      frame.style.height = `${Math.round(height)}px`;
+      frame.dataset.explicitHeight = "true";
+      if (img) {
+        img.style.width = "100%";
+        img.style.height = "100%";
+        img.style.objectFit = "contain";
+      }
+      return;
+    }
+    if (!frame.dataset.explicitHeight) {
+      frame.style.height = "";
+    }
+    if (img) {
+      img.style.width = "100%";
+      if (frame.dataset.explicitHeight) {
+        img.style.height = "100%";
+        img.style.objectFit = "contain";
+      } else {
+        img.style.height = "auto";
+        img.style.objectFit = "";
+      }
+    }
+  };
+  const applyVideoMediaSize = (container, width, height) => {
+    container.style.paddingBottom = "0";
+    container.style.width = `${Math.round(width)}px`;
+    container.style.maxWidth = "100%";
+    container.style.height = `${Math.round(height)}px`;
+  };
+  const attachMediaResizeHandle = container => {
+    if (!container || container.querySelector(".media-resize-handles")) return;
+    const isVideo = container.classList.contains("video-container");
+    const resizeTarget = isVideo ? container : getImageMediaTarget(container);
+    if (!resizeTarget) return;
+    const handlesWrapper = document.createElement("div");
+    handlesWrapper.className = "media-resize-handles";
+    handlesWrapper.setAttribute("contenteditable", "false");
+    const edges = [{
+      edge: "left",
+      title: "Drag to resize width"
+    }, {
+      edge: "right",
+      title: "Drag to resize width"
+    }, {
+      edge: "top",
+      title: "Drag to resize height"
+    }, {
+      edge: "bottom",
+      title: "Drag to resize height"
+    }];
+    edges.forEach(({
+      edge,
+      title
+    }) => {
+      const handle = document.createElement("div");
+      handle.className = `media-resize-handle media-resize-handle-${edge}`;
+      handle.title = title;
+      handle.setAttribute("contenteditable", "false");
+      handle.dataset.edge = edge;
+      handle.addEventListener("mousedown", event => {
+        if (!editable) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const limits = getMediaSizeLimits();
+        const rect = resizeTarget.getBoundingClientRect();
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const startWidth = rect.width;
+        const startHeight = rect.height;
+        const startMarginLeft = Number.parseFloat(resizeTarget.style.marginLeft) || 0;
+        const startMarginTop = Number.parseFloat(resizeTarget.style.marginTop) || 0;
+        if (isVideo) {
+          resizeTarget.style.paddingBottom = "0";
+        }
+        const onMouseMove = moveEvent => {
+          const deltaX = moveEvent.clientX - startX;
+          const deltaY = moveEvent.clientY - startY;
+          let nextWidth = startWidth;
+          let nextHeight = startHeight;
+          if (edge === "right") {
+            nextWidth = startWidth + deltaX;
+          } else if (edge === "left") {
+            nextWidth = startWidth - deltaX;
+          } else if (edge === "bottom") {
+            nextHeight = startHeight + deltaY;
+          } else if (edge === "top") {
+            nextHeight = startHeight - deltaY;
+          }
+          nextWidth = Math.max(limits.minWidth, Math.min(nextWidth, limits.maxWidth));
+          nextHeight = Math.max(limits.minHeight, Math.min(nextHeight, limits.maxHeight));
+          if (edge === "left") {
+            resizeTarget.style.marginLeft = `${Math.round(startMarginLeft + (startWidth - nextWidth))}px`;
+          }
+          if (edge === "top") {
+            resizeTarget.style.marginTop = `${Math.round(startMarginTop + (startHeight - nextHeight))}px`;
+          }
+          if (isVideo) {
+            applyVideoMediaSize(resizeTarget, nextWidth, nextHeight);
+          } else {
+            applyImageMediaSize(resizeTarget, nextWidth, nextHeight, edge);
+          }
+        };
+        const onMouseUp = () => {
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+          triggerChange();
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      });
+      handlesWrapper.appendChild(handle);
+    });
+    resizeTarget.appendChild(handlesWrapper);
+  };
+  const handleEditorFocus = () => {
+    setEditorFocused(true);
+  };
+  const handleEditorBlur = () => {
+    requestAnimationFrame(() => {
+      var _editorRef$current;
+      if (!((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.contains(document.activeElement))) {
+        setEditorFocused(false);
+      }
+    });
+  };
+  const updateMediaControlVisibility = container => {
+    const handles = container.querySelector(".media-resize-handles");
+    if (handles instanceof HTMLElement) {
+      handles.style.display = editable ? "block" : "none";
+      handles.style.pointerEvents = editable ? "auto" : "none";
+    }
+  };
+  const createMediaDeleteButton = (title, className, onRemove) => {
+    const deleteBtn = document.createElement("button");
+    deleteBtn.type = "button";
+    deleteBtn.innerHTML = "×";
+    deleteBtn.className = className;
+    deleteBtn.title = title;
+    deleteBtn.setAttribute("contenteditable", "false");
+    deleteBtn.onclick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      onRemove();
+    };
+    return deleteBtn;
+  };
 
   // Listen for selection changes globally to update styles and list type in one pass
   useEffect(() => {
     const handleGlobalSelectionSync = () => {
-      var _editorRef$current;
+      var _editorRef$current2;
       // Only sync if the editor has focus
       const sel = window.getSelection();
-      if (!sel || !sel.rangeCount || !((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.contains(sel.anchorNode))) {
+      if (!sel || !sel.rangeCount || !((_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.contains(sel.anchorNode))) {
         return;
       }
 
@@ -715,6 +959,7 @@ function RichTextEditor({
     focus();
   };
   const [fontColor, setFontColor] = useState("#000000");
+  const getActiveTextColor = () => getColorAtCursor() || fontColor;
   const handleColorChange = color => {
     setFontColor(color);
     exec("foreColor", color);
@@ -924,59 +1169,85 @@ function RichTextEditor({
       }
       setVideoModalOpen(false);
       setVideoUrl("");
-      triggerChange && triggerChange();
+      requestAnimationFrame(() => {
+        processExistingMedia(editorRef.current);
+        triggerChange();
+      });
     } else {
       console.warn("Invalid Video URL or Platform not supported");
     }
   };
+  const processExistingVideos = container => {
+    if (!container) return;
+    container.querySelectorAll(".video-container").forEach(videoContainer => {
+      if (!videoContainer.querySelector(".video-delete-button")) {
+        const deleteBtn = createMediaDeleteButton("Remove video", "video-delete-button image-delete-button", () => {
+          videoContainer.remove();
+          triggerChange && triggerChange();
+        });
+        videoContainer.appendChild(deleteBtn);
+      }
+      attachMediaResizeHandle(videoContainer);
+      updateMediaControlVisibility(videoContainer);
+    });
+  };
   const processExistingImages = container => {
     if (!container) return;
     container.querySelectorAll("img").forEach(img => {
-      // ONLY wrap if it's not already inside a wrapper
+      var _img$closest;
+      if (img.closest(".rte-modal")) return;
       const existingWrapper = img.closest(".image-container");
       if (existingWrapper) {
-        // Just update existing wrapper state if needed
-        existingWrapper.style.cursor = editable ? 'pointer' : 'default';
-        const deleteBtn = existingWrapper.querySelector('.image-delete-button');
-        if (deleteBtn) {
-          deleteBtn.style.display = editable ? 'flex' : 'none';
+        existingWrapper.style.cursor = editable ? "pointer" : "default";
+        const frame = ensureImageMediaFrame(existingWrapper);
+        if (frame && !frame.querySelector(".image-delete-button")) {
+          frame.appendChild(createMediaDeleteButton("Remove image", "image-delete-button", () => {
+            existingWrapper.remove();
+            triggerChange && triggerChange();
+          }));
         }
+        attachMediaResizeHandle(existingWrapper);
+        updateMediaControlVisibility(existingWrapper);
         return;
       }
       const wrapper = document.createElement("div");
-      const align = img.getAttribute('data-align') || 'center';
+      const align = img.getAttribute("data-align") || ((_img$closest = img.closest("[data-align]")) === null || _img$closest === void 0 ? void 0 : _img$closest.getAttribute("data-align")) || "left";
       wrapper.className = `image-container image-align-${align}`;
-      wrapper.style.cursor = editable ? 'pointer' : 'default';
-      img.className = "rte-image";
-      img.style.cssText = ""; // Reset inline styles
-      img.setAttribute('data-align', align);
-      img.dataset.hasDeleteButton = "true";
-
-      // Add click listener to open modal
-      img.addEventListener("click", () => openImageModal(img.src));
-      const deleteBtn = document.createElement("button");
-      deleteBtn.innerHTML = "×";
-      deleteBtn.className = "image-delete-button";
-      deleteBtn.style.display = editable ? 'flex' : 'none';
-      deleteBtn.style.pointerEvents = editable ? 'auto' : 'none';
-      deleteBtn.title = "Remove image";
-      deleteBtn.onclick = e => {
-        e.preventDefault();
-        e.stopPropagation();
-        const wrapper = e.currentTarget.closest(".image-container");
-        if (wrapper && wrapper.parentNode) {
-          wrapper.parentNode.removeChild(wrapper);
-          triggerChange && triggerChange();
-        }
-      };
+      wrapper.style.cursor = editable ? "pointer" : "default";
+      const frame = document.createElement("div");
+      frame.className = "image-media-frame";
+      if (img.getAttribute("width") && !frame.style.width) {
+        frame.style.width = `${img.getAttribute("width")}px`;
+      } else if (img.style.width && img.style.width.endsWith("px")) {
+        frame.style.width = img.style.width;
+      }
+      img.classList.add("rte-image");
+      img.setAttribute("data-align", align);
+      if (frame.style.width) {
+        img.style.width = "100%";
+        img.style.height = frame.dataset.explicitHeight ? "100%" : "auto";
+      } else {
+        img.style.width = "";
+        img.style.height = "auto";
+      }
+      img.addEventListener("click", event => {
+        if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+        openImageModal(img.src);
+      });
+      const deleteBtn = createMediaDeleteButton("Remove image", "image-delete-button", () => {
+        wrapper.remove();
+        triggerChange && triggerChange();
+      });
       const {
         parentNode,
         nextSibling
       } = img;
       if (parentNode) {
         parentNode.removeChild(img);
-        wrapper.appendChild(img);
-        wrapper.appendChild(deleteBtn);
+        frame.appendChild(img);
+        frame.appendChild(deleteBtn);
+        wrapper.appendChild(frame);
+        attachMediaResizeHandle(wrapper);
         if (nextSibling) {
           parentNode.insertBefore(wrapper, nextSibling);
         } else {
@@ -985,11 +1256,6 @@ function RichTextEditor({
       }
     });
   };
-  useEffect(() => {
-    if (editorRef.current && value) {
-      requestAnimationFrame(() => processExistingImages(editorRef.current));
-    }
-  }, [value]);
 
   /* 
      Advanced Tip: Use the 'onImageUpload' prop to handle file uploads to a server 
@@ -1000,24 +1266,23 @@ function RichTextEditor({
       if (editable) {
         // Create container for the image
         const container = document.createElement('div');
-        container.className = 'image-container';
+        container.className = 'image-container image-align-left';
+        const frame = document.createElement('div');
+        frame.className = 'image-media-frame';
 
         // Create image element
         const img = document.createElement('img');
         img.src = dataUrl;
         img.alt = fileName || "image";
         img.addEventListener("click", () => openImageModal(dataUrl));
-
-        // Add elements to container
-        container.appendChild(img);
+        frame.appendChild(img);
+        container.appendChild(frame);
 
         // Insert at cursor position
         insertNodeAtCursor(container);
-        triggerChange();
-
-        // Immediately process newly inserted image so delete button appears
         requestAnimationFrame(() => {
-          processExistingImages(editorRef.current);
+          processExistingMedia(editorRef.current);
+          triggerChange();
         });
       }
     } catch (err) {
@@ -1146,10 +1411,6 @@ function RichTextEditor({
       }
     }
   };
-  const getCleanHtml = () => {
-    if (!editorRef.current) return "";
-    return editorRef.current.innerHTML;
-  };
 
   // Helper function to unescape HTML entities
   const unescapeHtml = html => {
@@ -1158,6 +1419,35 @@ function RichTextEditor({
     txt.innerHTML = html;
     return txt.value;
   };
+  const isCursorAtStartOfListItem = (range, listItem) => {
+    const prefixRange = document.createRange();
+    prefixRange.setStart(listItem, 0);
+    prefixRange.setEnd(range.startContainer, range.startOffset);
+    return prefixRange.toString().replace(/[\u200B\u00A0\s]/g, "").length === 0;
+  };
+  const isCursorAtEndOfListItem = (range, listItem) => {
+    const suffixRange = document.createRange();
+    suffixRange.setStart(range.startContainer, range.startOffset);
+    suffixRange.setEnd(listItem, listItem.childNodes.length);
+    return suffixRange.toString().replace(/\u200B/g, "").length === 0;
+  };
+  const prepareListItemForTyping = (listItem, selection) => {
+    const activeColor = getActiveTextColor();
+    const newRange = document.createRange();
+    if (activeColor && activeColor.toLowerCase() !== "#000000") {
+      const span = document.createElement("span");
+      span.style.color = activeColor;
+      span.appendChild(document.createTextNode("\u200B"));
+      listItem.appendChild(span);
+      newRange.setStart(span.firstChild, 1);
+    } else {
+      listItem.appendChild(document.createTextNode("\u200B"));
+      newRange.setStart(listItem.firstChild, 1);
+    }
+    newRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  };
   const handleKeyDown = useCallback(e => {
     // Handle Enter key
     if (e.key === 'Enter') {
@@ -1172,15 +1462,14 @@ function RichTextEditor({
       const listItem = parent.closest('li');
       if (listItem) {
         const list = listItem.parentNode;
-        list.tagName === 'OL';
 
         // Create a new list item
         const newItem = document.createElement('li');
 
         // If we're at the end of a list item, add a new one
-        if (range.collapsed && range.endOffset === node.length) {
+        if (range.collapsed && isCursorAtEndOfListItem(range, listItem)) {
           // If it's empty, create a regular paragraph instead
-          if (listItem.textContent.trim() === '') {
+          if (isListItemEffectivelyEmpty(listItem)) {
             document.execCommand('insertHTML', false, '<div><br></div>');
             // Move the cursor to the new line
             const newRange = document.createRange();
@@ -1189,6 +1478,7 @@ function RichTextEditor({
             newRange.collapse(true);
             selection.removeAllRanges();
             selection.addRange(newRange);
+            triggerChange();
             return;
           }
 
@@ -1198,35 +1488,29 @@ function RichTextEditor({
           } else {
             list.appendChild(newItem);
           }
-
-          // Move cursor to the new list item
-          const newRange = document.createRange();
-          newRange.setStart(newItem, 0);
-          newRange.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(newRange);
+          prepareListItemForTyping(newItem, selection);
         } else {
-          // If we're in the middle of text, split the list item
-          const textBefore = node.textContent.substring(0, range.startOffset);
-          const textAfter = node.textContent.substring(range.startOffset);
-
-          // Update current item
-          node.textContent = textBefore;
-
-          // Insert new item after current one
-          newItem.textContent = textAfter;
+          // If we're in the middle of text, split the list item while preserving formatting
+          const afterRange = document.createRange();
+          afterRange.setStart(range.startContainer, range.startOffset);
+          afterRange.setEnd(listItem, listItem.childNodes.length);
+          const movedFragment = afterRange.extractContents();
+          newItem.appendChild(movedFragment);
           if (listItem.nextSibling) {
             list.insertBefore(newItem, listItem.nextSibling);
           } else {
             list.appendChild(newItem);
           }
-
-          // Move cursor to the new list item
-          const newRange = document.createRange();
-          newRange.setStart(newItem.firstChild || newItem, 0);
-          newRange.collapse(true);
-          selection.removeAllRanges();
-          selection.addRange(newRange);
+          if (isListItemEffectivelyEmpty(newItem)) {
+            newItem.textContent = "";
+            prepareListItemForTyping(newItem, selection);
+          } else {
+            const newRange = document.createRange();
+            newRange.setStart(newItem, 0);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+          }
         }
       } else {
         // Regular text, insert a new paragraph
@@ -1235,6 +1519,54 @@ function RichTextEditor({
       triggerChange();
       return;
     }
+    if (e.key === "Backspace") {
+      var _node$closest, _node, _editorRef$current3;
+      const selection = window.getSelection();
+      if (!(selection !== null && selection !== void 0 && selection.rangeCount)) return;
+      const range = selection.getRangeAt(0);
+      if (!range.collapsed) return;
+      let node = range.startContainer;
+      if (node.nodeType === 3) {
+        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$current3 = editorRef.current) !== null && _editorRef$current3 !== void 0 && _editorRef$current3.contains(listItem))) return;
+      const list = listItem.parentNode;
+      if (isListItemEffectivelyEmpty(listItem)) {
+        e.preventDefault();
+        const prevLi = listItem.previousElementSibling;
+        const blockMedia = Array.from(listItem.querySelectorAll(LIST_BLOCK_MEDIA_SELECTOR));
+        blockMedia.forEach(media => {
+          var _list$parentNode;
+          (_list$parentNode = list.parentNode) === null || _list$parentNode === void 0 || _list$parentNode.insertBefore(media, list.nextSibling);
+        });
+        listItem.remove();
+        if (list.children.length === 0) {
+          list.remove();
+        }
+        if ((prevLi === null || prevLi === void 0 ? void 0 : prevLi.tagName) === "LI") {
+          const newRange = document.createRange();
+          newRange.selectNodeContents(prevLi);
+          newRange.collapse(false);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+        }
+        triggerChange();
+        return;
+      }
+      if (isCursorAtStartOfListItem(range, listItem)) {
+        const prevLi = listItem.previousElementSibling;
+        if ((prevLi === null || prevLi === void 0 ? void 0 : prevLi.tagName) === "LI" && isListItemEffectivelyEmpty(prevLi)) {
+          e.preventDefault();
+          prevLi.remove();
+          if (list.children.length === 0) {
+            list.remove();
+          }
+          triggerChange();
+        }
+      }
+      return;
+    }
 
     // Handle Ctrl/Cmd + B/I/U for bold/italic/underline
     if ((e.ctrlKey || e.metaKey) && e.key === "b") {
@@ -1247,7 +1579,7 @@ function RichTextEditor({
       e.preventDefault();
       exec("underline");
     }
-  }, [exec, triggerChange]);
+  }, [exec, triggerChange, fontColor]);
   const confirmLink = () => {
     // Add protocol if missing
     let url = linkUrl.trim();
@@ -1420,7 +1752,7 @@ function RichTextEditor({
   };
   const handleInput = useCallback(() => {
     if (editorRef.current) {
-      const next = editorRef.current.innerHTML;
+      const next = getCleanHtml();
       setHtml(next);
       lastSynchronizedHtmlRef.current = next;
       onChange && onChange(next);
@@ -1457,6 +1789,18 @@ function RichTextEditor({
   }, [disabled]);
   const handleEditorClick = useCallback(e => {
     setSelectionVersion(v => v + 1);
+    const deleteBtn = e.target.closest('button[title="Remove image"], button[title="Remove video"]');
+    if (deleteBtn && editable && editorFocused) {
+      e.preventDefault();
+      e.stopPropagation();
+      const wrapper = deleteBtn.closest('.image-container, .video-container');
+      if (wrapper) {
+        wrapper.remove();
+        triggerChange();
+      }
+      return;
+    }
+
     // Check if the click is on a link
     const clickedLink = e.target.closest('a');
     if (clickedLink) {
@@ -1489,7 +1833,7 @@ function RichTextEditor({
         }
       }, 0);
     }
-  }, [editable, disabled]);
+  }, [editable, disabled, editorFocused, triggerChange]);
   const renderImageToolbar = () => {
     if (!selectedImage || !editorRef.current || !editable) return null;
     const editorRect = editorRef.current.getBoundingClientRect();
@@ -1559,6 +1903,9 @@ function RichTextEditor({
       title: "Remove Image"
     }, "\xD7"));
   };
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Spinner, null);
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "rte-main-wrapper",
     style: {
@@ -1984,12 +2331,14 @@ function RichTextEditor({
     onDragOver: e => e.preventDefault(),
     onKeyDown: handleKeyDown,
     onClick: handleEditorClick,
+    onFocus: handleEditorFocus,
+    onBlur: handleEditorBlur,
     style: {
       minHeight: minHeight || '150px',
       maxHeight: maxHeight || '500px',
       paddingLeft: paddingLeft || '12px'
     },
-    className: "rte-content"
+    className: `rte-content${editable ? " rte-is-editable" : ""}${editorFocused ? " rte-is-focused" : ""}`
   }), renderImageToolbar(), /*#__PURE__*/React.createElement("div", {
     className: "rte-footer"
   }, /*#__PURE__*/React.createElement("div", {