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

package/dist/index.esm.js

@@ -427,6 +427,7 @@ function RichTextEditor({
   const [editable, setEditable] = useState(initialEditable);
   const [editorFocused, setEditorFocused] = useState(false);
   const lastSynchronizedHtmlRef = useRef("");
+  const syncProcessedMediaRef = useRef(() => {});
   useEffect(() => {
     setEditable(initialEditable);
   }, [initialEditable]);
@@ -533,7 +534,7 @@ function RichTextEditor({
   }, [imageModalOpen]);
   useEffect(() => {
     if (editorRef.current && value && value !== lastSynchronizedHtmlRef.current) {
-      requestAnimationFrame(() => processExistingMedia(editorRef.current));
+      requestAnimationFrame(() => syncProcessedMediaRef.current(editorRef.current));
     }
   }, [value]);
 
@@ -542,7 +543,7 @@ function RichTextEditor({
     if (!editable) {
       setEditorFocused(false);
     }
-    processExistingMedia(editorRef.current);
+    syncProcessedMediaRef.current(editorRef.current);
   }, [editable]);
   useEffect(() => {
     if (!editorRef.current) return;
@@ -573,7 +574,7 @@ function RichTextEditor({
           if (editorRef.current && editorRef.current.innerHTML !== newContent) {
             editorRef.current.innerHTML = newContent;
           }
-          requestAnimationFrame(() => processExistingMedia(editorRef.current));
+          requestAnimationFrame(() => syncProcessedMediaRef.current(editorRef.current));
           updateMetrics();
         }
       } catch (e) {
@@ -588,10 +589,47 @@ 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;
+    if (!container) return false;
     processExistingImages(container);
     processExistingVideos(container);
+    return hoistBlockMediaOutOfListItems(container);
   };
   const getCleanHtml = () => {
     if (!editorRef.current) return "";
@@ -607,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) => {
@@ -1126,8 +1169,10 @@ function RichTextEditor({
       }
       setVideoModalOpen(false);
       setVideoUrl("");
-      triggerChange && triggerChange();
-      requestAnimationFrame(() => processExistingMedia(editorRef.current));
+      requestAnimationFrame(() => {
+        processExistingMedia(editorRef.current);
+        triggerChange();
+      });
     } else {
       console.warn("Invalid Video URL or Platform not supported");
     }
@@ -1374,6 +1419,12 @@ 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);
@@ -1418,7 +1469,7 @@ function RichTextEditor({
         // If we're at the end of a list item, add a new one
         if (range.collapsed && isCursorAtEndOfListItem(range, listItem)) {
           // If it's empty, create a regular paragraph instead
-          if (listItem.textContent.replace(/\u200B/g, '').trim() === '') {
+          if (isListItemEffectivelyEmpty(listItem)) {
             document.execCommand('insertHTML', false, '<div><br></div>');
             // Move the cursor to the new line
             const newRange = document.createRange();
@@ -1450,7 +1501,7 @@ function RichTextEditor({
           } else {
             list.appendChild(newItem);
           }
-          if (!newItem.textContent.replace(/\u200B/g, '').trim()) {
+          if (isListItemEffectivelyEmpty(newItem)) {
             newItem.textContent = "";
             prepareListItemForTyping(newItem, selection);
           } else {
@@ -1468,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") {