react-lite-rich-text-editor 1.1.2 → 1.1.3

package/README.md

@@ -1,18 +1,35 @@
-# React Lite Rich Text
+# React Lite Rich Text Editor
 
-A premium, lightweight, and highly customizable rich text editor for React.
+A **premium, zero-dependency**, and industry-standard rich text editor for React.
 
-![Rich Text Editor Preview](assets/preview.png)
+<div align="center">
+  <a href="https://elangodev.com/npm">
+    <img src="https://img.shields.io/badge/TRY%20IT-LIVE%20DEMO-blueviolet?style=for-the-badge&logo=rocket" alt="Try it out" />
+  </a>
+  <a href="https://www.npmjs.com/package/react-lite-rich-text-editor">
+    <img src="https://img.shields.io/npm/v/react-lite-rich-text-editor?style=for-the-badge" alt="NPM Version" />
+  </a>
+</div>
+
+---
+
+## Try it Out
+
+- **Live Demo**: [Industrial Rich Text Editor Demo](https://elangodev.com/npm)
+- **Local Preview**: Clone this repo and run `npm install && npm run dev` inside the `example/` folder.
+
+---
 
 ## Features
 
--   ✨ **Premium UI**: Modern, glassmorphism-inspired design with smooth transitions.
--   📝 **Rich Formatting**: Bold, italic, underline, font sizes, colors, and line heights.
--   🔗 **Smart Links**: Automatic protocol handling (prepends `https://`) and new window navigation.
--   🖼️ **Image Support**: Easy image uploads with delete functionality.
--   🎨 **Vanilla CSS**: Premium, dependency-free styling with a modern aesthetic.
--   ⚡ **Lightweight**: Zero-dependency core (except for React and Lucide-style icons).
--   🔍 **HTML Preview**: Real-time access to the underlying HTML content.
+-   ✨ **Zero-Dependency Core**: Built entirely with native Browser APIs for maximum performance and stability.
+-   📊 **Advanced Tables**: Insert tables, add/delete rows/columns, and merge cells with intuitive toolbar controls.
+-   🎥 **Universal Video Embedding**: Seamlessly embed videos from **YouTube, Vimeo, DailyMotion**, and more.
+-   📏 **Image Resizing**: Interactive 4-handle resizing system for uploaded images.
+-   🧮 **Content Metrics**: Stealthy, professional footer showing real-time **Word and Character counts**.
+-   📝 **Rich Formatting**: Bold, italic, underline, font sizes, colors, alignment, and lists.
+-   🔗 **Smart Links**: Automatic protocol handling and new window navigation.
+-   🎨 **Premium UI**: Modern, glassmorphism-inspired design with a polished Look & Feel.
 
 ## Installation
 

package/dist/index.cjs.js

@@ -526,11 +526,11 @@ var FaTable = function FaTable(_ref14) {
     }
   });
 };
-var FaYoutube = function FaYoutube(_ref15) {
-  var className = _ref15.className,
-    size = _ref15.size,
-    color = _ref15.color,
-    style = _ref15.style;
+var FaObjectGroup = function FaObjectGroup(_ref16) {
+  var className = _ref16.className,
+    size = _ref16.size,
+    color = _ref16.color,
+    style = _ref16.style;
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     style: _objectSpread2({
@@ -541,15 +541,15 @@ var FaYoutube = function FaYoutube(_ref15) {
       color: color || 'inherit'
     }, style),
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 576 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.781 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z\"></path></svg>"
+      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M480 320h-48v48c0 17.7-14.3 32-32 32h-48v32c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V160c0-26.5 21.5-48 48-48h32v-48c0-17.7 14.3-32 32-32h48V0h32c26.5 0 48 21.5 48 48v48h48c17.7 0 32 14.3 32 32v48h32c26.5 0 48 21.5 48 48v128c0 26.5-21.5 48-48 48z\"></path></svg>"
     }
   });
 };
-var FaObjectGroup = function FaObjectGroup(_ref16) {
-  var className = _ref16.className,
-    size = _ref16.size,
-    color = _ref16.color,
-    style = _ref16.style;
+var FaTrash = function FaTrash(_ref17) {
+  var className = _ref17.className,
+    size = _ref17.size,
+    color = _ref17.color,
+    style = _ref17.style;
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     style: _objectSpread2({
@@ -560,15 +560,15 @@ var FaObjectGroup = function FaObjectGroup(_ref16) {
       color: color || 'inherit'
     }, style),
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 512 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M480 320h-48v48c0 17.7-14.3 32-32 32h-48v32c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V160c0-26.5 21.5-48 48-48h32v-48c0-17.7 14.3-32 32-32h48V0h32c26.5 0 48 21.5 48 48v48h48c17.7 0 32 14.3 32 32v48h32c26.5 0 48 21.5 48 48v128c0 26.5-21.5 48-48 48z\"></path></svg>"
+      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z\"></path></svg>"
     }
   });
 };
-var FaTrash = function FaTrash(_ref17) {
-  var className = _ref17.className,
-    size = _ref17.size,
-    color = _ref17.color,
-    style = _ref17.style;
+var FaVideo = function FaVideo(_ref18) {
+  var className = _ref18.className,
+    size = _ref18.size,
+    color = _ref18.color,
+    style = _ref18.style;
   return /*#__PURE__*/React.createElement("span", {
     className: className,
     style: _objectSpread2({
@@ -579,7 +579,7 @@ var FaTrash = function FaTrash(_ref17) {
       color: color || 'inherit'
     }, style),
     dangerouslySetInnerHTML: {
-      __html: "<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 448 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z\"></path></svg>"
+      __html: '<svg stroke=\"currentColor\" fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 576 512\" height=\"1em\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.3 16.9 28.2V384c0 11.9-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V174.9l14.2-9.5 96-64c9.9-6.6 22.6-7.1 32.9-1.6z\"></path></svg>'
     }
   });
 };
@@ -769,12 +769,12 @@ function RichTextEditor(_ref) {
     setIsUploading = _useState30[1];
   var _useState31 = React.useState(false),
     _useState32 = _slicedToArray(_useState31, 2),
-    youtubeModalOpen = _useState32[0],
-    setYoutubeModalOpen = _useState32[1];
+    videoModalOpen = _useState32[0],
+    setVideoModalOpen = _useState32[1];
   var _useState33 = React.useState(""),
     _useState34 = _slicedToArray(_useState33, 2),
-    youtubeUrl = _useState34[0],
-    setYoutubeUrl = _useState34[1];
+    videoUrl = _useState34[0],
+    setVideoUrl = _useState34[1];
   var _useState35 = React.useState(false),
     _useState36 = _slicedToArray(_useState35, 2),
     tableModalOpen = _useState36[0],
@@ -815,6 +815,13 @@ function RichTextEditor(_ref) {
     setSelectedImageUrl("");
     setZoomLevel(1);
   };
+  var saveSelection = function saveSelection() {
+    if (typeof window === "undefined") return;
+    var sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
+    }
+  };
   var handleZoomIn = function handleZoomIn() {
     setZoomLevel(function (prevZoom) {
       return prevZoom + 0.1;
@@ -1232,13 +1239,35 @@ function RichTextEditor(_ref) {
     setTableModalOpen(false);
     triggerChange && triggerChange();
   };
-  var insertYoutube = function insertYoutube() {
-    var url = youtubeUrl.trim();
-    // More robust regex for various YouTube formats
-    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|watch\?vi=|\&vi=)([^#\&\?]*).*/;
-    var match = url.match(regExp);
-    var videoId = match && match[2].length === 11 ? match[2] : null;
-    if (videoId) {
+  var parseVideoUrl = function parseVideoUrl(url) {
+    url = url.trim();
+    if (!url) return null;
+
+    // YouTube
+    var ytRegExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|watch\?vi=|\&vi=)([^#\&\?]*).*/;
+    var ytMatch = url.match(ytRegExp);
+    if (ytMatch && ytMatch[2].length === 11) {
+      return "https://www.youtube.com/embed/".concat(ytMatch[2]);
+    }
+
+    // Vimeo
+    var vimeoRegExp = /vimeo\.com\/(?:channels\/(?:\w+\/)?|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)/;
+    var vimeoMatch = url.match(vimeoRegExp);
+    if (vimeoMatch && vimeoMatch[3]) {
+      return "https://player.vimeo.com/video/".concat(vimeoMatch[3]);
+    }
+
+    // DailyMotion
+    var dmRegExp = /dailymotion\.com\/video\/([a-zA-Z0-9]+)/;
+    var dmMatch = url.match(dmRegExp);
+    if (dmMatch && dmMatch[1]) {
+      return "https://www.dailymotion.com/embed/video/".concat(dmMatch[1]);
+    }
+    return null;
+  };
+  var insertVideo = function insertVideo() {
+    var embedUrl = parseVideoUrl(videoUrl);
+    if (embedUrl) {
       if (editorRef.current) {
         editorRef.current.focus();
       }
@@ -1247,24 +1276,23 @@ function RichTextEditor(_ref) {
         sel.removeAllRanges();
         sel.addRange(selectionRangeRef.current);
       }
-      var embedHtml = "<div class=\"video-container\">\n        <iframe \n          src=\"https://www.youtube.com/embed/".concat(videoId, "\" \n          frameborder=\"0\" \n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n          allowfullscreen\n        ></iframe>\n      </div><p>&nbsp;</p>");
+      var embedHtml = "<div class=\"video-container\">\n        <iframe \n          src=\"".concat(embedUrl, "\" \n          frameborder=\"0\" \n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n          allowfullscreen\n        ></iframe>\n      </div><p>&nbsp;</p>");
       try {
         document.execCommand("insertHTML", false, embedHtml);
       } catch (err) {
-        console.error("Failed to insert YouTube HTML:", err);
-        // Fallback: append to the end of the editor
+        console.error("Failed to insert Video HTML:", err);
         if (editorRef.current) {
           var div = document.createElement('div');
           div.innerHTML = embedHtml;
           editorRef.current.appendChild(div);
         }
       }
+      setVideoModalOpen(false);
+      setVideoUrl("");
+      triggerChange && triggerChange();
     } else {
-      console.warn("Invalid YouTube URL or Video ID not found");
+      console.warn("Invalid Video URL or Platform not supported");
     }
-    setYoutubeModalOpen(false);
-    setYoutubeUrl("");
-    triggerChange && triggerChange();
   };
   var processExistingImages = function processExistingImages(container) {
     if (!container) return;
@@ -2337,17 +2365,14 @@ function RichTextEditor(_ref) {
     size: 14
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    title: "Embed YouTube Video",
-    className: "rte-toolbar-button",
+    title: "Embed Video (YouTube, Vimeo, etc.)",
+    className: "rte-toolbar-button ".concat(videoModalOpen ? 'active' : ''),
     onMouseDown: function onMouseDown(e) {
       e.preventDefault();
-      var sel = window.getSelection();
-      if (sel && sel.rangeCount > 0) {
-        selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
-      }
-      setYoutubeModalOpen(true);
+      saveSelection();
+      setVideoModalOpen(true);
     }
-  }, /*#__PURE__*/React.createElement(FaYoutube, {
+  }, /*#__PURE__*/React.createElement(FaVideo, {
     size: 14
   })), function () {
     if (typeof window === "undefined") return null;
@@ -2395,14 +2420,7 @@ function RichTextEditor(_ref) {
           e.preventDefault();
           tableAction('addColAfter');
         }
-      }, "+C\u2192"), /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: '1px',
-          height: '20px',
-          backgroundColor: '#f3f4f6',
-          margin: '0 4px'
-        }
-      }), /*#__PURE__*/React.createElement("button", {
+      }, "+C\u2192"), /*#__PURE__*/React.createElement("button", {
         type: "button",
         title: "Merge Cells (Right)",
         className: "rte-toolbar-button",
@@ -2412,17 +2430,22 @@ function RichTextEditor(_ref) {
         }
       }, /*#__PURE__*/React.createElement(FaObjectGroup, {
         size: 14
-      })), /*#__PURE__*/React.createElement("button", {
+      })), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '10px'
+        }
+      }, /*#__PURE__*/React.createElement("button", {
         type: "button",
         title: "Delete Row",
-        className: "rte-toolbar-button rte-toolbar-button-danger ",
+        className: "rte-toolbar-button rte-toolbar-button-danger",
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
           tableAction('deleteRow');
         }
       }, /*#__PURE__*/React.createElement(FaTrash, {
         size: 12
-      }), " ", /*#__PURE__*/React.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         style: {
           fontSize: '10px'
         }
@@ -2436,10 +2459,9 @@ function RichTextEditor(_ref) {
         }
       }, /*#__PURE__*/React.createElement(FaTrash, {
         size: 12
-      }), " ", /*#__PURE__*/React.createElement("span", {
+      }), /*#__PURE__*/React.createElement("span", {
         style: {
-          fontSize: '10px',
-          marginRight: "5px"
+          fontSize: '10px'
         }
       }, "Col")), /*#__PURE__*/React.createElement("button", {
         type: "button",
@@ -2450,12 +2472,12 @@ function RichTextEditor(_ref) {
           tableAction('deleteTable');
         }
       }, /*#__PURE__*/React.createElement(FaTrash, {
-        size: 14
-      }), " ", /*#__PURE__*/React.createElement("span", {
+        size: 12
+      }), /*#__PURE__*/React.createElement("span", {
         style: {
-          fontWeight: '600'
+          fontSize: '10px'
         }
-      }, "Table")));
+      }, "Table"))));
     }
     return null;
   }()), /*#__PURE__*/React.createElement("div", {
@@ -2603,10 +2625,10 @@ function RichTextEditor(_ref) {
     type: "button",
     className: "rte-button rte-button-primary",
     onClick: insertTable
-  }, "Insert")))), youtubeModalOpen && /*#__PURE__*/React.createElement("div", {
+  }, "Insert")))), videoModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
     onClick: function onClick() {
-      return setYoutubeModalOpen(false);
+      return setVideoModalOpen(false);
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal",
@@ -2617,22 +2639,26 @@ function RichTextEditor(_ref) {
     className: "rte-modal-header"
   }, /*#__PURE__*/React.createElement("h3", {
     className: "rte-modal-title"
-  }, "Embed YouTube Video")), /*#__PURE__*/React.createElement("div", {
+  }, "Embed Video")), /*#__PURE__*/React.createElement("div", {
     className: "rte-form-group"
   }, /*#__PURE__*/React.createElement("label", {
     className: "rte-label"
-  }, "Paste YouTube Video URL"), /*#__PURE__*/React.createElement("input", {
+  }, "Paste Video URL (YouTube, Vimeo...) ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#ef4444'
+    }
+  }, "*")), /*#__PURE__*/React.createElement("input", {
     type: "text",
     className: "rte-input",
-    value: youtubeUrl,
+    value: videoUrl,
     onChange: function onChange(e) {
-      return setYoutubeUrl(e.target.value);
+      return setVideoUrl(e.target.value);
     },
-    placeholder: "https://www.youtube.com/watch?v=...",
+    placeholder: "Paste URL here...",
     autoFocus: true,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') insertYoutube();
-      if (e.key === 'Escape') setYoutubeModalOpen(false);
+      if (e.key === 'Enter' && videoUrl.trim()) insertVideo();
+      if (e.key === 'Escape') setVideoModalOpen(false);
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-actions"
@@ -2640,12 +2666,17 @@ function RichTextEditor(_ref) {
     type: "button",
     className: "rte-button rte-button-secondary",
     onClick: function onClick() {
-      return setYoutubeModalOpen(false);
+      return setVideoModalOpen(false);
     }
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-primary",
-    onClick: insertYoutube
+    onClick: function onClick() {
+      if (videoUrl.trim()) {
+        insertVideo();
+      }
+    },
+    disabled: !videoUrl.trim()
   }, "Embed Video")))), imageModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
     onClick: closeImageModal