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

package/dist/index.esm.js

@@ -505,6 +505,82 @@ var FaFont = function FaFont(_ref12) {
     }
   });
 };
+var FaTable = function FaTable(_ref14) {
+  var className = _ref14.className,
+    size = _ref14.size,
+    color = _ref14.color,
+    style = _ref14.style;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    style: _objectSpread2({
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size || '1em',
+      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=\"M64 448c-35.3 0-64-28.7-64-64V128c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64zm96-288H64v64h96v-64zm0 96H64v64h96v-64zm0 96H64c0 17.7 14.3 32 32 32h64v-32zm128-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v96h96v-96zm160-192h-96v64h96v-64zm0 96h-96v64h96v-64zm0 96h-96v64h64c17.7 0 32-14.3 32-32v-32z\"></path></svg>"
+    }
+  });
+};
+var FaYoutube = function FaYoutube(_ref15) {
+  var className = _ref15.className,
+    size = _ref15.size,
+    color = _ref15.color,
+    style = _ref15.style;
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    style: _objectSpread2({
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size || '1em',
+      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>"
+    }
+  });
+};
+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({
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size || '1em',
+      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>"
+    }
+  });
+};
+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({
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: size || '1em',
+      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>"
+    }
+  });
+};
 
 // DraftJS helper stubs
 // Since we are removing specific DraftJS dependencies for this package,
@@ -577,7 +653,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-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;height:auto;max-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:24px;width:100%}.rte-modal-title{color:#111827;font-size:18px;font-weight:600;margin-bottom:4px}.rte-form-group{display:flex;flex-direction:column;gap:6px}.rte-label{color:#4b5563;font-size:14px;font-weight:500}.rte-input{border:1px solid #d1d5db;border-radius:8px;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{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}.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{background:#f9fafb;border:1px solid #f3f4f6;border-radius:12px;box-sizing:border-box;margin:15px;max-width:100%;position:relative;transition:all .2s ease}.image-container.image-align-center{display:block;height:300px;margin:24px auto;width:100%}.image-container.image-align-left,.image-container.image-align-right{display:inline-block;height:300px;width:350px}.image-container.image-align-left{float:left;margin-right:24px}.image-container.image-align-right{float:right;margin-left:24px}.image-container img{background:#fff;border-radius:12px;display:block;height:100%;margin:0 auto;object-fit:contain;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: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)}.image-container:after{clear:both;content:\"\";display:table}";
+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{background:#f9fafb;border:1px solid #f3f4f6;border-radius:12px;box-sizing:border-box;margin:15px;max-width:100%;position:relative;transition:all .2s ease}.image-container.image-align-center{display:block;height:300px;margin:24px auto;width:100%}.image-container.image-align-left,.image-container.image-align-right{display:inline-block;height:300px;width:350px}.image-container.image-align-left{float:left;margin-right:24px}.image-container.image-align-right{float:right;margin-left:24px}.image-container img{background:#fff;border-radius:12px;display:block;height:100%;margin:0 auto;object-fit:contain;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: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)}.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
@@ -593,9 +669,9 @@ var escapeAttr = function escapeAttr(str) {
 var URL_REGEX = /(https?:\/\/[^\s]+)/g;
 function RichTextEditor(_ref) {
   var onChange = _ref.onChange,
-    showEditButton = _ref.showEditButton,
-    onBlur = _ref.onBlur,
-    _ref$disabled = _ref.disabled,
+    showEditButton = _ref.showEditButton;
+    _ref.onBlur;
+    var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$editable = _ref.editable,
     defaultEditable = _ref$editable === void 0 ? false : _ref$editable,
@@ -689,6 +765,42 @@ function RichTextEditor(_ref) {
     _useState30 = _slicedToArray(_useState29, 2),
     isUploading = _useState30[0],
     setIsUploading = _useState30[1];
+  var _useState31 = useState(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    youtubeModalOpen = _useState32[0],
+    setYoutubeModalOpen = _useState32[1];
+  var _useState33 = useState(""),
+    _useState34 = _slicedToArray(_useState33, 2),
+    youtubeUrl = _useState34[0],
+    setYoutubeUrl = _useState34[1];
+  var _useState35 = useState(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    tableModalOpen = _useState36[0],
+    setTableModalOpen = _useState36[1];
+  var _useState37 = useState(null),
+    _useState38 = _slicedToArray(_useState37, 2);
+    _useState38[0];
+    var setHoveredTable = _useState38[1];
+  var _useState39 = useState(3),
+    _useState40 = _slicedToArray(_useState39, 2),
+    tableRows = _useState40[0],
+    setTableRows = _useState40[1];
+  var _useState41 = useState(3),
+    _useState42 = _slicedToArray(_useState41, 2),
+    tableCols = _useState42[0],
+    setTableCols = _useState42[1];
+  var _useState43 = useState(0),
+    _useState44 = _slicedToArray(_useState43, 2);
+    _useState44[0];
+    var setSelectionVersion = _useState44[1];
+  var _useState45 = useState(null),
+    _useState46 = _slicedToArray(_useState45, 2),
+    selectedImage = _useState46[0],
+    setSelectedImage = _useState46[1];
+  var _useState47 = useState(null),
+    _useState48 = _slicedToArray(_useState47, 2);
+    _useState48[0];
+    var setResizeData = _useState48[1];
   var openImageModal = function openImageModal(url) {
     if (editorRef.current) {
       scrollTopRef.current = editorRef.current.scrollTop;
@@ -746,6 +858,10 @@ function RichTextEditor(_ref) {
   }, [imageModalOpen]);
   useEffect(function () {
     var handleClick = function handleClick(e) {
+      // Trigger selection update for toolbar reactivity
+      setSelectionVersion(function (v) {
+        return v + 1;
+      });
       var deleteBtn = e.target.closest('button[title="Remove image"]');
       if (deleteBtn && editable) {
         e.preventDefault();
@@ -822,21 +938,6 @@ function RichTextEditor(_ref) {
     var next = getCleanHtml();
     setHtml(next);
   }, []);
-  var handleChange = function handleChange() {
-    if (!editorRef.current) return;
-
-    // Clone editor content
-    var tempDiv = document.createElement('div');
-    tempDiv.innerHTML = editorRef.current.innerHTML;
-
-    // Remove delete buttons from the clone
-    tempDiv.querySelectorAll('button[title="Remove image"]').forEach(function (btn) {
-      return btn.remove();
-    });
-
-    // Send cleaned HTML to onBlur
-    onBlur && onBlur(tempDiv.innerHTML);
-  };
 
   // Detect if selection is inside a list (ol or ul)
   var detectListType = function detectListType() {
@@ -969,10 +1070,10 @@ function RichTextEditor(_ref) {
     triggerChange();
     focus();
   };
-  var _useState31 = useState("#000000"),
-    _useState32 = _slicedToArray(_useState31, 2),
-    fontColor = _useState32[0],
-    setFontColor = _useState32[1];
+  var _useState49 = useState("#000000"),
+    _useState50 = _slicedToArray(_useState49, 2),
+    fontColor = _useState50[0],
+    setFontColor = _useState50[1];
   var handleColorChange = function handleColorChange(color) {
     setFontColor(color);
     exec("foreColor", color);
@@ -992,6 +1093,177 @@ function RichTextEditor(_ref) {
       setLinkModalOpen(true);
     }
   };
+  var findParentTag = function findParentTag(node, tagName) {
+    if (!node) return null;
+    var curr = node;
+    while (curr && curr !== editorRef.current) {
+      if (curr.tagName === tagName) return curr;
+      curr = curr.parentNode;
+    }
+    return null;
+  };
+  var tableAction = function tableAction(action) {
+    var sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return;
+    var cell = findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH');
+    if (!cell) return;
+    var row = cell.parentNode;
+    var table = row.parentNode.closest('table');
+    switch (action) {
+      case 'addRowAbove':
+        var newRowAbove = table.insertRow(row.rowIndex);
+        for (var i = 0; i < row.cells.length; i++) {
+          var newCell = newRowAbove.insertCell(i);
+          newCell.style.border = "1px solid #e5e7eb";
+          newCell.style.padding = "12px";
+          newCell.innerHTML = "&nbsp;";
+        }
+        break;
+      case 'addRowBelow':
+        var newRowBelow = table.insertRow(row.rowIndex + 1);
+        for (var _i = 0; _i < row.cells.length; _i++) {
+          var _newCell = newRowBelow.insertCell(_i);
+          _newCell.style.border = "1px solid #e5e7eb";
+          _newCell.style.padding = "12px";
+          _newCell.innerHTML = "&nbsp;";
+        }
+        break;
+      case 'addColBefore':
+        var cellIndex = cell.cellIndex;
+        for (var _i2 = 0; _i2 < table.rows.length; _i2++) {
+          var _newCell2 = table.rows[_i2].insertCell(cellIndex);
+          _newCell2.style.border = "1px solid #e5e7eb";
+          _newCell2.style.padding = "12px";
+          _newCell2.innerHTML = "&nbsp;";
+        }
+        break;
+      case 'addColAfter':
+        var cellIndexAfter = cell.cellIndex + 1;
+        for (var _i3 = 0; _i3 < table.rows.length; _i3++) {
+          var _newCell3 = table.rows[_i3].insertCell(cellIndexAfter);
+          _newCell3.style.border = "1px solid #e5e7eb";
+          _newCell3.style.padding = "12px";
+          _newCell3.innerHTML = "&nbsp;";
+        }
+        break;
+      case 'deleteRow':
+        {
+          var rowIndex = row.rowIndex;
+          var _cellIndex = cell.cellIndex;
+          table.deleteRow(rowIndex);
+          if (table.rows.length === 0) {
+            table.remove();
+          } else {
+            var targetRowIndex = Math.min(rowIndex, table.rows.length - 1);
+            var targetRow = table.rows[targetRowIndex];
+            var targetCell = targetRow.cells[Math.min(_cellIndex, targetRow.cells.length - 1)];
+            if (targetCell) {
+              var range = document.createRange();
+              range.selectNodeContents(targetCell);
+              range.collapse(true);
+              sel.removeAllRanges();
+              sel.addRange(range);
+              setSelectionVersion(function (v) {
+                return v + 1;
+              });
+            }
+          }
+          break;
+        }
+      case 'deleteCol':
+        {
+          var idx = cell.cellIndex;
+          var _rowIndex = row.rowIndex;
+          for (var _i4 = 0; _i4 < table.rows.length; _i4++) {
+            table.rows[_i4].deleteCell(idx);
+          }
+          if (table.rows[0].cells.length === 0) {
+            table.remove();
+          } else {
+            var _table$rows$_rowIndex;
+            var targetColIndex = Math.min(idx, table.rows[0].cells.length - 1);
+            var _targetCell = ((_table$rows$_rowIndex = table.rows[_rowIndex]) === null || _table$rows$_rowIndex === void 0 ? void 0 : _table$rows$_rowIndex.cells[targetColIndex]) || table.rows[0].cells[targetColIndex];
+            if (_targetCell) {
+              var _range = document.createRange();
+              _range.selectNodeContents(_targetCell);
+              _range.collapse(true);
+              sel.removeAllRanges();
+              sel.addRange(_range);
+              setSelectionVersion(function (v) {
+                return v + 1;
+              });
+            }
+          }
+          break;
+        }
+      case 'mergeRight':
+        if (cell.nextElementSibling) {
+          var nextCell = cell.nextElementSibling;
+          cell.colSpan = (cell.colSpan || 1) + (nextCell.colSpan || 1);
+          nextCell.remove();
+        }
+        break;
+      case 'deleteTable':
+        table.remove();
+        break;
+    }
+    triggerChange && triggerChange();
+  };
+  var insertTable = function insertTable() {
+    var rows = parseInt(tableRows) || 3;
+    var cols = parseInt(tableCols) || 3;
+    var tableHtml = '<table style="width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; margin: 16px 0;"><tbody>';
+    for (var i = 0; i < rows; i++) {
+      tableHtml += '<tr>';
+      for (var j = 0; j < cols; j++) {
+        tableHtml += '<td style="border: 1px solid #e5e7eb; padding: 12px; min-height: 20px;">&nbsp;</td>';
+      }
+      tableHtml += '</tr>';
+    }
+    tableHtml += '</tbody></table><p>&nbsp;</p>';
+    if (selectionRangeRef.current) {
+      var sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(selectionRangeRef.current);
+    }
+    document.execCommand("insertHTML", false, tableHtml);
+    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) {
+      if (editorRef.current) {
+        editorRef.current.focus();
+      }
+      if (selectionRangeRef.current) {
+        var sel = window.getSelection();
+        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>");
+      try {
+        document.execCommand("insertHTML", false, embedHtml);
+      } catch (err) {
+        console.error("Failed to insert YouTube HTML:", err);
+        // Fallback: append to the end of the editor
+        if (editorRef.current) {
+          var div = document.createElement('div');
+          div.innerHTML = embedHtml;
+          editorRef.current.appendChild(div);
+        }
+      }
+    } else {
+      console.warn("Invalid YouTube URL or Video ID not found");
+    }
+    setYoutubeModalOpen(false);
+    setYoutubeUrl("");
+    triggerChange && triggerChange();
+  };
   var processExistingImages = function processExistingImages(container) {
     if (!container) return;
     container.querySelectorAll("img").forEach(function (img) {
@@ -1514,8 +1786,8 @@ function RichTextEditor(_ref) {
       var lastInsertedNode = null;
 
       // Iterate through the selected text nodes and wrap them in spans
-      for (var _i = 0, _nodesToStyle = nodesToStyle; _i < _nodesToStyle.length; _i++) {
-        var textNode = _nodesToStyle[_i];
+      for (var _i5 = 0, _nodesToStyle = nodesToStyle; _i5 < _nodesToStyle.length; _i5++) {
+        var textNode = _nodesToStyle[_i5];
         var parent = textNode.parentNode;
 
         // This is important: check if the parent is a block-level element
@@ -1612,6 +1884,9 @@ function RichTextEditor(_ref) {
     }
   }, [disabled]);
   var handleEditorClick = useCallback(function (e) {
+    setSelectionVersion(function (v) {
+      return v + 1;
+    });
     // Check if the click is on a link
     var clickedLink = e.target.closest('a');
     if (clickedLink) {
@@ -1621,6 +1896,15 @@ function RichTextEditor(_ref) {
       return;
     }
 
+    // NEW: Check if click is on an image for resizing
+    var clickedImg = e.target.closest('img');
+    if (clickedImg && !clickedImg.closest('.rte-modal')) {
+      setSelectedImage(clickedImg);
+      setResizeData({});
+    } else if (!e.target.closest('.resize-handle')) {
+      setSelectedImage(null);
+    }
+
     // If disabled is true, prevent editing
     if (disabled === true) {
       e.preventDefault();
@@ -1637,14 +1921,138 @@ function RichTextEditor(_ref) {
       }, 0);
     }
   }, [editable, disabled]);
+  var startResize = function startResize(e, direction) {
+    e.preventDefault();
+    e.stopPropagation();
+    var img = selectedImage;
+    var startX = e.clientX;
+    var startY = e.clientY;
+    var startWidth = img.offsetWidth;
+    var startHeight = img.offsetHeight;
+    var onMouseMove = function onMouseMove(moveEvent) {
+      var newWidth = startWidth;
+      var newHeight = startHeight;
+      if (direction.includes('e')) newWidth = startWidth + (moveEvent.clientX - startX);
+      if (direction.includes('w')) newWidth = startWidth - (moveEvent.clientX - startX);
+      if (direction.includes('s')) newHeight = startHeight + (moveEvent.clientY - startY);
+      if (direction.includes('n')) newHeight = startHeight - (moveEvent.clientY - startY);
+      img.style.width = "".concat(newWidth, "px");
+      img.style.height = "".concat(newHeight, "px");
+      setResizeData({}); // Force re-render of handles
+    };
+    var _onMouseUp = function onMouseUp() {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', _onMouseUp);
+      triggerChange();
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', _onMouseUp);
+  };
+  var renderResizeHandles = function renderResizeHandles() {
+    if (!selectedImage || !editorRef.current) return null;
+    var editorRect = editorRef.current.getBoundingClientRect();
+    var imgRect = selectedImage.getBoundingClientRect();
+
+    // Relative position within editorRef using the more robust BoundingClientRect
+    var top = imgRect.top - editorRect.top + editorRef.current.scrollTop;
+    var left = imgRect.left - editorRect.left + editorRef.current.scrollLeft;
+    var width = imgRect.width;
+    var height = imgRect.height;
+    var handleStyles = {
+      position: 'absolute',
+      width: '10px',
+      height: '10px',
+      background: '#3b82f6',
+      border: '2px solid white',
+      borderRadius: '50%',
+      zIndex: 100
+    };
+    var handles = [{
+      id: 'nw',
+      style: {
+        top: top - 5,
+        left: left - 5,
+        cursor: 'nw-resize'
+      }
+    }, {
+      id: 'ne',
+      style: {
+        top: top - 5,
+        left: left + width - 5,
+        cursor: 'ne-resize'
+      }
+    }, {
+      id: 'sw',
+      style: {
+        top: top + height - 5,
+        left: left - 5,
+        cursor: 'sw-resize'
+      }
+    }, {
+      id: 'se',
+      style: {
+        top: top + height - 5,
+        left: left + width - 5,
+        cursor: 'se-resize'
+      }
+    }];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: top,
+        left: left,
+        width: width,
+        height: height,
+        border: '2px solid #3b82f6',
+        pointerEvents: 'none'
+      }
+    }), handles.map(function (h) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: h.id,
+        className: "resize-handle",
+        onMouseDown: function onMouseDown(e) {
+          return startResize(e, h.id);
+        },
+        style: _objectSpread2(_objectSpread2(_objectSpread2({}, handleStyles), h.style), {}, {
+          pointerEvents: 'auto'
+        })
+      });
+    }));
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "rte-main-wrapper",
     style: {
-      width: '100%'
+      width: '100%',
+      position: 'relative'
     }
   }, label && /*#__PURE__*/React.createElement(LabelComponent, null, label), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    },
     className: !showBorder ? "" : "rte-container",
     onClick: handleEditorClick,
+    onMouseOver: function onMouseOver(e) {
+      var table = e.target.closest('table');
+      if (table && editorRef.current.contains(table)) {
+        setHoveredTable(table);
+      }
+    },
+    onMouseOut: function onMouseOut(e) {
+      var table = e.target.closest('table');
+      var related = e.relatedTarget;
+      if (table && (!related || !table.contains(related)) && !(related !== null && related !== void 0 && related.closest('.rte-table-delete-hover'))) {
+        setHoveredTable(null);
+      }
+    },
     onDrop: handleDrop,
     onDragOver: function onDragOver(e) {
       e.preventDefault();
@@ -1659,7 +2067,7 @@ function RichTextEditor(_ref) {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("bold");
-      triggerChange();
+      handleInput();
       focus();
     },
     className: "rte-toolbar-button ".concat(isBold ? "active" : "")
@@ -1672,7 +2080,7 @@ function RichTextEditor(_ref) {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("italic");
-      triggerChange();
+      handleInput();
       focus();
     },
     className: "rte-toolbar-button ".concat(isItalic ? "active" : "")
@@ -1685,7 +2093,7 @@ function RichTextEditor(_ref) {
       e.preventDefault();
       e.stopPropagation();
       document.execCommand("underline");
-      triggerChange();
+      handleInput();
       focus();
     },
     className: "rte-toolbar-button ".concat(isUnderline ? "active" : "")
@@ -1857,6 +2265,13 @@ function RichTextEditor(_ref) {
       backgroundColor: '#e5e7eb',
       margin: '0 4px'
     }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: '#e5e7eb',
+      margin: '0 4px'
+    }
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Add Link",
@@ -1897,7 +2312,151 @@ function RichTextEditor(_ref) {
     }
   }) : /*#__PURE__*/React.createElement(FaImage, {
     size: 14
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: '#e5e7eb',
+      margin: '0 4px'
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    title: "Insert Table",
+    className: "rte-toolbar-button",
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+      var sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
+      }
+      setTableModalOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(FaTable, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    title: "Embed YouTube Video",
+    className: "rte-toolbar-button",
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+      var sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        selectionRangeRef.current = sel.getRangeAt(0).cloneRange();
+      }
+      setYoutubeModalOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(FaYoutube, {
+    size: 14
+  })), function () {
+    if (typeof window === "undefined") return null;
+    var sel = window.getSelection();
+    // Robust check: inside cell OR the table itself is selected
+    var isCell = sel && sel.rangeCount > 0 && sel.anchorNode && (findParentTag(sel.anchorNode, 'TD') || findParentTag(sel.anchorNode, 'TH'));
+    var isTable = sel && sel.rangeCount > 0 && sel.anchorNode && findParentTag(sel.anchorNode, 'TABLE');
+    if (isCell || isTable) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '1px',
+          height: '20px',
+          backgroundColor: '#e5e7eb',
+          margin: '0 4px'
+        }
+      }), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Add Row Above",
+        className: "rte-toolbar-button",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('addRowAbove');
+        }
+      }, "+R\u2191"), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Add Row Below",
+        className: "rte-toolbar-button",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('addRowBelow');
+        }
+      }, "+R\u2193"), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Add Col Before",
+        className: "rte-toolbar-button",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('addColBefore');
+        }
+      }, "+C\u2190"), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Add Col After",
+        className: "rte-toolbar-button",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('addColAfter');
+        }
+      }, "+C\u2192"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: '1px',
+          height: '20px',
+          backgroundColor: '#f3f4f6',
+          margin: '0 4px'
+        }
+      }), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Merge Cells (Right)",
+        className: "rte-toolbar-button",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('mergeRight');
+        }
+      }, /*#__PURE__*/React.createElement(FaObjectGroup, {
+        size: 14
+      })), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Delete Row",
+        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", {
+        style: {
+          fontSize: '10px'
+        }
+      }, "Row")), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Delete Column",
+        className: "rte-toolbar-button rte-toolbar-button-danger",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('deleteCol');
+        }
+      }, /*#__PURE__*/React.createElement(FaTrash, {
+        size: 12
+      }), " ", /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontSize: '10px',
+          marginRight: "5px"
+        }
+      }, "Col")), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        title: "Delete Table",
+        className: "rte-toolbar-button rte-toolbar-button-danger",
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+          tableAction('deleteTable');
+        }
+      }, /*#__PURE__*/React.createElement(FaTrash, {
+        size: 14
+      }), " ", /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontWeight: '600'
+        }
+      }, "Table")));
+    }
+    return null;
+  }()), /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     contentEditable: editable && disabled !== true,
     suppressContentEditableWarning: true,
@@ -1918,7 +2477,23 @@ function RichTextEditor(_ref) {
       paddingLeft: paddingLeft || '12px'
     },
     className: "rte-content"
-  }), linkModalOpen && /*#__PURE__*/React.createElement("div", {
+  }), renderResizeHandles(), /*#__PURE__*/React.createElement("div", {
+    className: "rte-footer"
+  }, function (_editorRef$current) {
+    var text = ((_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.innerText) || "";
+    var cleanText = text.replace(/[\n\r]/g, ' ').trim();
+    var words = cleanText ? cleanText.split(/\s+/).length : 0;
+    var chars = text.length;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "rte-footer-content"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "rte-footer-item"
+    }, /*#__PURE__*/React.createElement("b", null, words), " words"), /*#__PURE__*/React.createElement("span", {
+      className: "rte-footer-separator"
+    }, "\u2022"), /*#__PURE__*/React.createElement("span", {
+      className: "rte-footer-item"
+    }, /*#__PURE__*/React.createElement("b", null, chars), " characters"));
+  }()), linkModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
     onClick: cancelLink
   }, /*#__PURE__*/React.createElement("div", {
@@ -1929,42 +2504,147 @@ function RichTextEditor(_ref) {
   }, /*#__PURE__*/React.createElement("h3", {
     className: "rte-modal-title"
   }, "Insert Link"), /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-form-group"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rte-label"
+  }, "Link Text"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    className: "rte-input",
+    placeholder: "e.g. Google",
+    value: linkText,
+    onChange: function onChange(e) {
+      return setLinkText(e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
     className: "rte-form-group"
   }, /*#__PURE__*/React.createElement("label", {
     className: "rte-label"
   }, "URL"), /*#__PURE__*/React.createElement("input", {
-    type: "url",
+    type: "text",
     className: "rte-input",
+    placeholder: "https://example.com",
     value: linkUrl,
     onChange: function onChange(e) {
       return setLinkUrl(e.target.value);
     },
-    autoFocus: true,
-    placeholder: "https://example.com"
+    onKeyDown: function onKeyDown(e) {
+      return e.key === 'Enter' && confirmLink();
+    },
+    autoFocus: true
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-divider",
+    style: {
+      margin: '8px 0 20px 0'
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-footer"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "rte-btn rte-btn-secondary",
+    onClick: cancelLink
+  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "rte-btn rte-btn-primary",
+    onClick: confirmLink,
+    disabled: !linkUrl
+  }, "Insert")))), tableModalOpen && /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-overlay",
+    onClick: function onClick() {
+      return setTableModalOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "rte-modal-title"
+  }, "Insert Table"), /*#__PURE__*/React.createElement("div", {
+    className: "rte-form-group"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rte-label"
+  }, "Rows"), /*#__PURE__*/React.createElement("input", {
+    type: "number",
+    className: "rte-input",
+    value: tableRows,
+    onChange: function onChange(e) {
+      return setTableRows(e.target.value);
+    },
+    min: "1",
+    max: "10"
   })), /*#__PURE__*/React.createElement("div", {
     className: "rte-form-group"
   }, /*#__PURE__*/React.createElement("label", {
     className: "rte-label"
-  }, "Display Text"), /*#__PURE__*/React.createElement("input", {
+  }, "Columns"), /*#__PURE__*/React.createElement("input", {
+    type: "number",
+    className: "rte-input",
+    value: tableCols,
+    onChange: function onChange(e) {
+      return setTableCols(e.target.value);
+    },
+    min: "1",
+    max: "10"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "rte-button rte-button-secondary",
+    onClick: function onClick() {
+      return setTableModalOpen(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "rte-button rte-button-primary",
+    onClick: insertTable
+  }, "Insert")))), youtubeModalOpen && /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-overlay",
+    onClick: function onClick() {
+      return setYoutubeModalOpen(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "rte-modal-title"
+  }, "Embed YouTube Video")), /*#__PURE__*/React.createElement("div", {
+    className: "rte-form-group"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "rte-label"
+  }, "Paste YouTube Video URL"), /*#__PURE__*/React.createElement("input", {
     type: "text",
     className: "rte-input",
-    value: linkText,
+    value: youtubeUrl,
     onChange: function onChange(e) {
-      return setLinkText(e.target.value);
+      return setYoutubeUrl(e.target.value);
     },
-    placeholder: "Link text"
+    placeholder: "https://www.youtube.com/watch?v=...",
+    autoFocus: true,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Enter') insertYoutube();
+      if (e.key === 'Escape') setYoutubeModalOpen(false);
+    }
   })), /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-actions"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-secondary",
-    onClick: cancelLink
+    onClick: function onClick() {
+      return setYoutubeModalOpen(false);
+    }
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "rte-button rte-button-primary",
-    onClick: confirmLink,
-    disabled: !linkUrl
-  }, "Insert")))), imageModalOpen && /*#__PURE__*/React.createElement("div", {
+    onClick: insertYoutube
+  }, "Embed Video")))), imageModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "rte-modal-overlay",
     onClick: closeImageModal
   }, /*#__PURE__*/React.createElement("div", {
@@ -2004,7 +2684,7 @@ function RichTextEditor(_ref) {
     type: "button",
     className: "rte-button rte-button-primary",
     onClick: function onClick() {
-      handleChange && handleChange();
+      onChange && onChange(html);
       setEditable(false);
     }
   }, "Save Changes")));