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

package/dist/index.esm.js

@@ -524,11 +524,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({
@@ -539,15 +539,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({
@@ -558,15 +558,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({
@@ -577,7 +577,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>'
     }
   });
 };
@@ -767,12 +767,12 @@ function RichTextEditor(_ref) {
     setIsUploading = _useState30[1];
   var _useState31 = useState(false),
     _useState32 = _slicedToArray(_useState31, 2),
-    youtubeModalOpen = _useState32[0],
-    setYoutubeModalOpen = _useState32[1];
+    videoModalOpen = _useState32[0],
+    setVideoModalOpen = _useState32[1];
   var _useState33 = useState(""),
     _useState34 = _slicedToArray(_useState33, 2),
-    youtubeUrl = _useState34[0],
-    setYoutubeUrl = _useState34[1];
+    videoUrl = _useState34[0],
+    setVideoUrl = _useState34[1];
   var _useState35 = useState(false),
     _useState36 = _slicedToArray(_useState35, 2),
     tableModalOpen = _useState36[0],
@@ -813,6 +813,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;
@@ -1230,13 +1237,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();
       }
@@ -1245,24 +1274,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;
@@ -2335,17 +2363,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;
@@ -2393,14 +2418,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",
@@ -2410,17 +2428,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'
         }
@@ -2434,10 +2457,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",
@@ -2448,12 +2470,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", {
@@ -2601,10 +2623,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",
@@ -2615,22 +2637,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"
@@ -2638,12 +2664,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