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

package/dist/index.cjs.js

@@ -233,6 +233,27 @@ const FaFont = ({
     }
   });
 };
+const FaLink = ({
+  className,
+  size,
+  color,
+  style
+}) => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    style: {
+      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="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg>`
+    }
+  });
+};
 const FaTable = ({
   className,
   size,
@@ -390,7 +411,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;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}";
+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-heading-select{width:112px}.rte-toolbar-button-text{font-size:12px;font-weight:700;min-width:32px;padding:0 8px;width:auto}.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-wrapper{position:relative}.rte-placeholder{color:#9ca3af;font-size:16px;line-height:1.6;pointer-events:none;position:absolute;top:12px;user-select:none}.rte-content ul{list-style-type:disc;margin-left:1.5rem}.rte-content ol{list-style-type:decimal;margin-left:1.5rem}.rte-content blockquote{background:#f8fafc;border-left:4px solid #bfdbfe;border-radius:0 8px 8px 0;color:#475569;margin:12px 0;padding:8px 14px}.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);display:block;height:0;line-height:0;margin:16px 0;max-width:100%;overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.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;box-sizing:border-box;font-size:14px;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{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%;position:relative;width:fit-content}.image-container.image-align-center,.video-container.image-align-center{margin-left:auto;margin-right:auto}.image-container.image-align-left,.video-container.image-align-left{margin-left:0;margin-right:auto}.image-container.image-align-right,.video-container.image-align-right{margin-left:auto;margin-right:0}.image-container.rte-media-selected,.video-container.rte-media-selected{border-radius:12px;outline:2px solid #3b82f6;outline-offset:2px}.image-media-frame{display:block;line-height:0;max-width:100%;position:relative;width:100%}.image-media-frame img{border-radius:12px;display:block;height:auto;margin:0;max-width:100%;width:auto}.image-container[data-width-percent] .image-media-frame,.image-container[data-width-percent] .image-media-frame img{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: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}.rte-content.rte-is-editable .video-container.rte-media-selected iframe{pointer-events:none}.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-handle{background:#3b82f6;border:2px solid #fff;border-radius:3px;bottom:2px;box-shadow:0 1px 3px rgba(15,23,42,.2);cursor:nwse-resize;height:12px;pointer-events:auto;position:absolute;right:2px;width:12px;z-index:60}.media-resize-handle:hover{background:#2563eb}.video-container .media-resize-handle{bottom:6px;right:6px}.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-media-toolbar{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:flex;gap:2px;padding:4px;pointer-events:auto}.rte-media-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:28px;padding:0 6px;transition:all .15s ease}.rte-media-toolbar button.active,.rte-media-toolbar button:hover{background-color:#eff6ff;color:#2563eb}.rte-media-toolbar button.danger{color:#ef4444}.rte-media-toolbar button.danger:hover{background-color:#fef2f2;color:#dc2626}.rte-media-toolbar-divider{background:#e5e7eb;height:18px;margin:0 2px;width:1px}.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
@@ -407,11 +428,12 @@ function RichTextEditor({
   showEditButton,
   onBlur,
   disabled = false,
-  editable: initialEditable = false,
+  editable: initialEditable = true,
   value,
   isLoading,
   isList = false,
   label,
+  placeholder = "Type here...",
   showBorder = true,
   paddingLeft,
   minHeight,
@@ -448,6 +470,7 @@ function RichTextEditor({
   // NEW: Track current line height
   const [currentLineHeight, setCurrentLineHeight] = React.useState("");
   const [activeAlign, setActiveAlign] = React.useState(null);
+  const [currentBlockFormat, setCurrentBlockFormat] = React.useState("div");
   const [imageModalOpen, setImageModalOpen] = React.useState(false);
   const [selectedImageUrl, setSelectedImageUrl] = React.useState("");
   const [zoomLevel, setZoomLevel] = React.useState(1);
@@ -459,11 +482,12 @@ function RichTextEditor({
   const [tableRows, setTableRows] = React.useState(3);
   const [tableCols, setTableCols] = React.useState(3);
   const [selectionVersion, setSelectionVersion] = React.useState(0);
-  const [selectedImage, setSelectedImage] = React.useState(null);
+  const [selectedMedia, setSelectedMedia] = React.useState(null);
   const [metrics, setMetrics] = React.useState({
     words: 0,
     chars: 0
   });
+  const [isEmpty, setIsEmpty] = React.useState(!value);
   const updateMetrics = React.useCallback(() => {
     if (!editorRef.current) return;
     // Calculate metrics immediately but outside of render path
@@ -475,6 +499,11 @@ function RichTextEditor({
       words,
       chars
     });
+
+    // Track emptiness for the placeholder. Account for media-only content.
+    const stripped = text.replace(/[\u200B\u00A0\s]/g, "");
+    const hasMedia = !!editorRef.current.querySelector("img, table, iframe");
+    setIsEmpty(stripped.length === 0 && !hasMedia);
   }, []);
   const openImageModal = url => {
     if (editorRef.current) {
@@ -539,11 +568,10 @@ function RichTextEditor({
       requestAnimationFrame(() => syncProcessedMediaRef.current(editorRef.current));
     }
   }, [value]);
-
-  // Runs whenever editable changes (toggles delete icon visibility)
   React.useEffect(() => {
     if (!editable) {
       setEditorFocused(false);
+      clearMediaSelection();
     }
     syncProcessedMediaRef.current(editorRef.current);
   }, [editable]);
@@ -707,17 +735,15 @@ function RichTextEditor({
     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());
+    root.querySelectorAll(".image-delete-button, .video-delete-button, .video-edit-overlay, .media-resize-handle").forEach(element => element.remove());
+    root.querySelectorAll(".rte-media-selected").forEach(element => {
+      element.classList.remove("rte-media-selected");
+    });
     return root;
   };
-  const getMediaSizeLimits = () => {
-    const maxWidth = editorRef.current ? editorRef.current.getBoundingClientRect().width - 24 : 800;
-    return {
-      minWidth: 120,
-      minHeight: 80,
-      maxWidth,
-      maxHeight: 720
-    };
+  const getEditorInnerWidth = () => {
+    if (!editorRef.current) return 800;
+    return Math.max(editorRef.current.clientWidth - 24, 200);
   };
   const ensureImageMediaFrame = imageContainer => {
     if (!imageContainer) return null;
@@ -725,160 +751,164 @@ function RichTextEditor({
     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 getMediaWidthPercent = container => {
+    if (!container) return 100;
+    if (container.dataset.widthPercent) {
+      return Number(container.dataset.widthPercent);
+    }
+    const width = container.style.width || "";
+    if (width.endsWith("%")) {
+      return parseInt(width, 10) || 100;
+    }
+    const editorWidth = getEditorInnerWidth();
+    const rect = container.getBoundingClientRect();
+    if (editorWidth > 0 && rect.width > 0) {
+      return Math.round(rect.width / editorWidth * 100);
+    }
+    return 100;
+  };
+  const applyMediaWidthPercent = (container, percent) => {
+    if (!container) return;
+    const clamped = Math.max(25, Math.min(100, Math.round(percent)));
+    container.dataset.widthPercent = String(clamped);
+    container.style.width = `${clamped}%`;
+    container.style.maxWidth = "100%";
+    container.style.marginLeft = "";
+    container.style.marginTop = "";
+    if (container.classList.contains("video-container")) {
+      container.style.height = "0";
+      container.style.paddingBottom = "56.25%";
+      return;
+    }
+    const frame = getImageMediaTarget(container);
+    if (!frame) return;
+    frame.style.width = "100%";
+    frame.style.height = "";
     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";
-      }
+    if (img) {
+      img.style.height = "auto";
+      img.style.objectFit = "";
+    }
+  };
+  const normalizeMediaWidth = container => {
+    if (!container) return;
+    if (container.classList.contains("image-small")) {
+      container.classList.remove("image-small");
+      applyMediaWidthPercent(container, 50);
       return;
     }
-    if (!frame.dataset.explicitHeight) {
-      frame.style.height = "";
+    if (container.dataset.widthPercent) {
+      applyMediaWidthPercent(container, Number(container.dataset.widthPercent));
+      return;
     }
-    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 width = container.style.width || "";
+    if (width.endsWith("%")) {
+      applyMediaWidthPercent(container, parseInt(width, 10) || 100);
+      return;
+    }
+    if (width.endsWith("px")) {
+      const editorWidth = getEditorInnerWidth();
+      const px = parseFloat(width);
+      if (editorWidth > 0 && px > 0) {
+        applyMediaWidthPercent(container, Math.round(px / editorWidth * 100));
       }
+      return;
+    }
+    if (container.classList.contains("video-container")) {
+      applyMediaWidthPercent(container, 100);
     }
   };
-  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 clearMediaSelection = () => {
+    var _editorRef$current;
+    (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.querySelectorAll(".rte-media-selected").forEach(element => {
+      element.classList.remove("rte-media-selected");
+    });
+    setSelectedMedia(null);
+  };
+  const selectMediaContainer = container => {
+    var _editorRef$current2;
+    if (!container || !((_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.contains(container))) return;
+    editorRef.current.querySelectorAll(".rte-media-selected").forEach(element => {
+      element.classList.remove("rte-media-selected");
+    });
+    container.classList.add("rte-media-selected");
+    setSelectedMedia(container);
   };
   const attachMediaResizeHandle = container => {
-    if (!container || container.querySelector(".media-resize-handles")) return;
-    const isVideo = container.classList.contains("video-container");
-    const resizeTarget = isVideo ? container : getImageMediaTarget(container);
+    var _resizeTarget$querySe;
+    if (!container) return;
+    const resizeTarget = container.classList.contains("video-container") ? 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$querySe = resizeTarget.querySelector(".media-resize-handle")) === null || _resizeTarget$querySe === void 0 || _resizeTarget$querySe.remove();
+    const handle = document.createElement("div");
+    handle.className = "media-resize-handle";
+    handle.title = "Drag to resize";
+    handle.setAttribute("contenteditable", "false");
+    handle.addEventListener("mousedown", event => {
+      if (!editable) return;
+      event.preventDefault();
+      event.stopPropagation();
+      selectMediaContainer(container);
+      const editorWidth = getEditorInnerWidth();
+      const startX = event.clientX;
+      const startWidth = container.getBoundingClientRect().width;
+      const onMouseMove = moveEvent => {
+        const nextWidth = Math.max(60, startWidth + (moveEvent.clientX - startX));
+        const percent = Math.round(nextWidth / editorWidth * 100);
+        applyMediaWidthPercent(container, percent);
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        triggerChange();
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
     });
-    resizeTarget.appendChild(handlesWrapper);
+    resizeTarget.appendChild(handle);
   };
   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))) {
+      var _editorRef$current3;
+      if (!((_editorRef$current3 = editorRef.current) !== null && _editorRef$current3 !== void 0 && _editorRef$current3.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 handle = container.querySelector(".media-resize-handle");
+    if (handle instanceof HTMLElement) {
+      handle.style.display = editable ? "block" : "none";
+      handle.style.pointerEvents = editable ? "auto" : "none";
     }
   };
+  const BLOCK_TAGS = ["P", "DIV", "H1", "H2", "H3", "BLOCKQUOTE", "LI"];
+  const getActiveBlock = node => {
+    if (!editorRef.current || !node) return null;
+    let current = node.nodeType === 3 ? node.parentNode : node;
+    while (current && current !== editorRef.current) {
+      if (current.nodeType === 1 && BLOCK_TAGS.includes(current.tagName)) {
+        return current;
+      }
+      current = current.parentNode;
+    }
+    return editorRef.current;
+  };
+  const getBlockFormat = node => {
+    const block = getActiveBlock(node);
+    if (!block || block === editorRef.current) return "div";
+    const tag = block.tagName.toLowerCase();
+    return tag === "p" || tag === "li" ? "div" : tag;
+  };
   const createMediaDeleteButton = (title, className, onRemove) => {
     const deleteBtn = document.createElement("button");
     deleteBtn.type = "button";
@@ -897,10 +927,10 @@ function RichTextEditor({
   // Listen for selection changes globally to update styles and list type in one pass
   React.useEffect(() => {
     const handleGlobalSelectionSync = () => {
-      var _editorRef$current2;
+      var _editorRef$current4;
       // Only sync if the editor has focus
       const sel = window.getSelection();
-      if (!sel || !sel.rangeCount || !((_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.contains(sel.anchorNode))) {
+      if (!sel || !sel.rangeCount || !((_editorRef$current4 = editorRef.current) !== null && _editorRef$current4 !== void 0 && _editorRef$current4.contains(sel.anchorNode))) {
         return;
       }
 
@@ -948,6 +978,7 @@ function RichTextEditor({
       } else {
         setCurrentFontSize("16");
       }
+      setCurrentBlockFormat(getBlockFormat(sel.anchorNode));
     };
     document.addEventListener("selectionchange", handleGlobalSelectionSync);
     return () => {
@@ -1185,11 +1216,25 @@ function RichTextEditor({
       if (!videoContainer.querySelector(".video-delete-button")) {
         const deleteBtn = createMediaDeleteButton("Remove video", "video-delete-button image-delete-button", () => {
           videoContainer.remove();
+          clearMediaSelection();
           triggerChange && triggerChange();
         });
         videoContainer.appendChild(deleteBtn);
       }
+      if (!videoContainer.dataset.mediaEnhanced) {
+        videoContainer.dataset.mediaEnhanced = "true";
+        if (!videoContainer.classList.contains("image-align-left") && !videoContainer.classList.contains("image-align-center") && !videoContainer.classList.contains("image-align-right")) {
+          videoContainer.classList.add("image-align-left");
+        }
+        videoContainer.addEventListener("click", event => {
+          if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+          event.preventDefault();
+          event.stopPropagation();
+          selectMediaContainer(videoContainer);
+        });
+      }
       attachMediaResizeHandle(videoContainer);
+      normalizeMediaWidth(videoContainer);
       updateMediaControlVisibility(videoContainer);
     });
   };
@@ -1209,6 +1254,7 @@ function RichTextEditor({
           }));
         }
         attachMediaResizeHandle(existingWrapper);
+        normalizeMediaWidth(existingWrapper);
         updateMediaControlVisibility(existingWrapper);
         return;
       }
@@ -1218,24 +1264,21 @@ function RichTextEditor({
       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 => {
+      img.style.height = "auto";
+      img.addEventListener("dblclick", event => {
         if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+        event.preventDefault();
+        event.stopPropagation();
         openImageModal(img.src);
       });
+      img.addEventListener("click", event => {
+        if (event.target.closest(".image-delete-button, .media-resize-handle")) return;
+        event.preventDefault();
+        event.stopPropagation();
+        selectMediaContainer(wrapper);
+      });
       const deleteBtn = createMediaDeleteButton("Remove image", "image-delete-button", () => {
         wrapper.remove();
         triggerChange && triggerChange();
@@ -1250,6 +1293,7 @@ function RichTextEditor({
         frame.appendChild(deleteBtn);
         wrapper.appendChild(frame);
         attachMediaResizeHandle(wrapper);
+        normalizeMediaWidth(wrapper);
         if (nextSibling) {
           parentNode.insertBefore(wrapper, nextSibling);
         } else {
@@ -1276,9 +1320,19 @@ function RichTextEditor({
         const img = document.createElement('img');
         img.src = dataUrl;
         img.alt = fileName || "image";
-        img.addEventListener("click", () => openImageModal(dataUrl));
+        img.addEventListener("dblclick", event => {
+          event.preventDefault();
+          event.stopPropagation();
+          openImageModal(dataUrl);
+        });
+        img.addEventListener("click", event => {
+          event.preventDefault();
+          event.stopPropagation();
+          selectMediaContainer(container);
+        });
         frame.appendChild(img);
         container.appendChild(frame);
+        applyMediaWidthPercent(container, 25);
 
         // Insert at cursor position
         insertNodeAtCursor(container);
@@ -1451,6 +1505,8 @@ function RichTextEditor({
     selection.addRange(newRange);
   };
   const handleKeyDown = React.useCallback(e => {
+    if (applyMarkdownShortcut(e)) return;
+
     // Handle Enter key
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -1522,7 +1578,7 @@ function RichTextEditor({
       return;
     }
     if (e.key === "Backspace") {
-      var _node$closest, _node, _editorRef$current3;
+      var _node$closest, _node, _editorRef$current5;
       const selection = window.getSelection();
       if (!(selection !== null && selection !== void 0 && selection.rangeCount)) return;
       const range = selection.getRangeAt(0);
@@ -1532,7 +1588,7 @@ function RichTextEditor({
         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;
+      if (!listItem || !((_editorRef$current5 = editorRef.current) !== null && _editorRef$current5 !== void 0 && _editorRef$current5.contains(listItem))) return;
       const list = listItem.parentNode;
       if (isListItemEffectivelyEmpty(listItem)) {
         e.preventDefault();
@@ -1609,6 +1665,65 @@ function RichTextEditor({
   const handleSelect = type => {
     exec(type === "unordered" ? "insertUnorderedList" : "insertOrderedList");
   };
+  const applyBlockFormat = format => {
+    document.execCommand("formatBlock", false, format);
+    setCurrentBlockFormat(format);
+    triggerChange();
+    focus();
+  };
+  const clearFormatting = () => {
+    document.execCommand("removeFormat", false, null);
+    document.execCommand("unlink", false, null);
+    document.execCommand("formatBlock", false, "div");
+    setCurrentBlockFormat("div");
+    setCurrentFontSize("16");
+    setCurrentLineHeight("");
+    setFontColor("#000000");
+    triggerChange();
+    focus();
+  };
+  const deleteTextBeforeCursorInBlock = (block, range, selection) => {
+    const prefixRange = document.createRange();
+    prefixRange.setStart(block, 0);
+    prefixRange.setEnd(range.startContainer, range.startOffset);
+    prefixRange.deleteContents();
+    const nextRange = document.createRange();
+    nextRange.setStart(block, 0);
+    nextRange.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(nextRange);
+  };
+  const applyMarkdownShortcut = event => {
+    if (event.key !== " " || event.ctrlKey || event.metaKey || event.altKey) {
+      return false;
+    }
+    const selection = window.getSelection();
+    if (!(selection !== null && selection !== void 0 && selection.rangeCount) || !selection.isCollapsed || !editorRef.current) {
+      return false;
+    }
+    const range = selection.getRangeAt(0);
+    const block = getActiveBlock(range.startContainer);
+    if (!block || !editorRef.current.contains(block)) return false;
+    const prefixRange = document.createRange();
+    prefixRange.setStart(block, 0);
+    prefixRange.setEnd(range.startContainer, range.startOffset);
+    const textBeforeCursor = prefixRange.toString().replace(/\u00A0/g, " ").trim();
+    const shortcuts = {
+      "#": () => applyBlockFormat("h1"),
+      "##": () => applyBlockFormat("h2"),
+      "###": () => applyBlockFormat("h3"),
+      ">": () => applyBlockFormat("blockquote"),
+      "-": () => handleSelect("unordered"),
+      "*": () => handleSelect("unordered"),
+      "1.": () => handleSelect("ordered")
+    };
+    const action = shortcuts[textBeforeCursor];
+    if (!action) return false;
+    event.preventDefault();
+    deleteTextBeforeCursorInBlock(block, range, selection);
+    action();
+    return true;
+  };
   const onLineHeightChange = value => {
     if (!value) return;
     const sel = window.getSelection();
@@ -1790,6 +1905,7 @@ function RichTextEditor({
     }
   }, [disabled]);
   const handleEditorClick = React.useCallback(e => {
+    var _editorRef$current6;
     setSelectionVersion(v => v + 1);
     const deleteBtn = e.target.closest('button[title="Remove image"], button[title="Remove video"]');
     if (deleteBtn && editable && editorFocused) {
@@ -1798,10 +1914,15 @@ function RichTextEditor({
       const wrapper = deleteBtn.closest('.image-container, .video-container');
       if (wrapper) {
         wrapper.remove();
+        clearMediaSelection();
         triggerChange();
       }
       return;
     }
+    const clickedMedia = e.target.closest('.image-container, .video-container');
+    if (clickedMedia && (_editorRef$current6 = editorRef.current) !== null && _editorRef$current6 !== void 0 && _editorRef$current6.contains(clickedMedia) && editable) {
+      return;
+    }
 
     // Check if the click is on a link
     const clickedLink = e.target.closest('a');
@@ -1811,13 +1932,8 @@ function RichTextEditor({
       window.open(clickedLink.href, '_blank');
       return;
     }
-
-    // NEW: Check if click is on an image for resizing
-    const clickedImg = e.target.closest('img');
-    if (clickedImg && !clickedImg.closest('.rte-modal')) {
-      setSelectedImage(clickedImg);
-    } else if (!e.target.closest('.rte-image-toolbar')) {
-      setSelectedImage(null);
+    if (!e.target.closest('.rte-media-toolbar')) {
+      clearMediaSelection();
     }
 
     // If disabled is true, prevent editing
@@ -1836,73 +1952,72 @@ function RichTextEditor({
       }, 0);
     }
   }, [editable, disabled, editorFocused, triggerChange]);
-  const renderImageToolbar = () => {
-    if (!selectedImage || !editorRef.current || !editable) return null;
+  const renderMediaToolbar = () => {
+    if (!selectedMedia || !editorRef.current || !editable) return null;
     const editorRect = editorRef.current.getBoundingClientRect();
-    const imgRect = selectedImage.getBoundingClientRect();
-    const top = imgRect.top - editorRect.top + editorRef.current.scrollTop;
-    const left = imgRect.left - editorRect.left + editorRef.current.scrollLeft;
-    const width = imgRect.width;
+    const mediaRect = selectedMedia.getBoundingClientRect();
+    const top = mediaRect.top - editorRect.top + editorRef.current.scrollTop;
+    const left = mediaRect.left - editorRect.left + editorRef.current.scrollLeft;
+    const width = mediaRect.width;
+    const currentPercent = getMediaWidthPercent(selectedMedia);
+    const widthPresets = [25, 50, 75, 100];
     const handleAlignment = align => {
-      const wrapper = selectedImage.closest('.image-container');
-      if (wrapper) {
-        // Remove all alignment classes first
-        wrapper.classList.remove('image-align-left', 'image-align-center', 'image-align-right');
-        // Add the new alignment class
-        wrapper.classList.add(`image-align-${align}`);
-        selectedImage.setAttribute('data-align', align);
-        triggerChange();
-      }
+      selectedMedia.classList.remove("image-align-left", "image-align-center", "image-align-right");
+      selectedMedia.classList.add(`image-align-${align}`);
+      const img = selectedMedia.querySelector("img");
+      if (img) img.setAttribute("data-align", align);
+      triggerChange();
     };
-    const removeImage = () => {
-      const wrapper = selectedImage.closest('.image-container');
-      if (wrapper) {
-        wrapper.remove();
-        setSelectedImage(null);
-        triggerChange();
-      }
+    const setWidth = percent => {
+      applyMediaWidthPercent(selectedMedia, percent);
+      triggerChange();
     };
-    const toggleSize = () => {
-      const wrapper = selectedImage.closest('.image-container');
-      if (wrapper) {
-        const isSmall = wrapper.classList.contains('image-small');
-        if (isSmall) {
-          wrapper.classList.remove('image-small');
-        } else {
-          wrapper.classList.add('image-small');
-        }
-        triggerChange();
+    const removeMedia = () => {
+      selectedMedia.remove();
+      clearMediaSelection();
+      triggerChange();
+    };
+    const isActivePercent = percent => {
+      if (!selectedMedia.dataset.widthPercent && !(selectedMedia.style.width || "").endsWith("%")) {
+        return false;
       }
+      return Math.abs(currentPercent - percent) <= 3;
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: "rte-image-toolbar",
+      className: "rte-media-toolbar",
       style: {
-        position: 'absolute',
-        top: Math.max(0, top - 45),
-        left: Math.max(0, left + width / 2 - 80),
+        position: "absolute",
+        top: Math.max(0, top - 44),
+        left: Math.max(8, left + width / 2 - 156),
         zIndex: 1000
       }
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
-      onClick: () => handleAlignment('left'),
+      onClick: () => handleAlignment("left"),
       title: "Align Left"
     }, "L"), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      onClick: () => handleAlignment('center'),
+      onClick: () => handleAlignment("center"),
       title: "Align Center"
     }, "C"), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      onClick: () => handleAlignment('right'),
+      onClick: () => handleAlignment("right"),
       title: "Align Right"
-    }, "R"), /*#__PURE__*/React.createElement("button", {
+    }, "R"), /*#__PURE__*/React.createElement("span", {
+      className: "rte-media-toolbar-divider"
+    }), widthPresets.map(percent => /*#__PURE__*/React.createElement("button", {
+      key: percent,
       type: "button",
-      onClick: toggleSize,
-      title: "Toggle 50% Width"
-    }, "50%"), /*#__PURE__*/React.createElement("button", {
+      className: isActivePercent(percent) ? "active" : "",
+      onClick: () => setWidth(percent),
+      title: `${percent}% width`
+    }, percent, "%")), /*#__PURE__*/React.createElement("span", {
+      className: "rte-media-toolbar-divider"
+    }), /*#__PURE__*/React.createElement("button", {
       type: "button",
-      onClick: removeImage,
+      onClick: removeMedia,
       className: "danger",
-      title: "Remove Image"
+      title: "Remove"
     }, "\xD7"));
   };
   if (isLoading) {
@@ -1938,17 +2053,14 @@ function RichTextEditor({
       e.preventDefault();
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !disabled && /*#__PURE__*/React.createElement("div", {
     className: "rte-toolbar"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Bold",
-    onClick: e => {
+    onMouseDown: e => {
       e.preventDefault();
-      e.stopPropagation();
-      document.execCommand("bold");
-      handleInput();
-      focus();
+      exec("bold");
     },
     className: `rte-toolbar-button ${isBold ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaBold, {
@@ -1956,12 +2068,9 @@ function RichTextEditor({
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Italic",
-    onClick: e => {
+    onMouseDown: e => {
       e.preventDefault();
-      e.stopPropagation();
-      document.execCommand("italic");
-      handleInput();
-      focus();
+      exec("italic");
     },
     className: `rte-toolbar-button ${isItalic ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaItalic, {
@@ -1969,12 +2078,9 @@ function RichTextEditor({
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: "Underline",
-    onClick: e => {
+    onMouseDown: e => {
       e.preventDefault();
-      e.stopPropagation();
-      document.execCommand("underline");
-      handleInput();
-      focus();
+      exec("underline");
     },
     className: `rte-toolbar-button ${isUnderline ? "active" : ""}`
   }, /*#__PURE__*/React.createElement(FaUnderline, {
@@ -1986,6 +2092,41 @@ function RichTextEditor({
       backgroundColor: '#e5e7eb',
       margin: '0 4px'
     }
+  }), /*#__PURE__*/React.createElement("select", {
+    value: currentBlockFormat,
+    onMouseDown: e => e.stopPropagation(),
+    onChange: e => {
+      e.preventDefault();
+      e.stopPropagation();
+      applyBlockFormat(e.target.value);
+    },
+    className: "rte-toolbar-select rte-heading-select",
+    title: "Text style"
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "div"
+  }, "Paragraph"), /*#__PURE__*/React.createElement("option", {
+    value: "h1"
+  }, "Heading 1"), /*#__PURE__*/React.createElement("option", {
+    value: "h2"
+  }, "Heading 2"), /*#__PURE__*/React.createElement("option", {
+    value: "h3"
+  }, "Heading 3"), /*#__PURE__*/React.createElement("option", {
+    value: "blockquote"
+  }, "Quote")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    title: "Clear Formatting",
+    className: "rte-toolbar-button rte-toolbar-button-text",
+    onMouseDown: e => {
+      e.preventDefault();
+      clearFormatting();
+    }
+  }, "Tx"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '1px',
+      height: '20px',
+      backgroundColor: '#e5e7eb',
+      margin: '0 4px'
+    }
   }), /*#__PURE__*/React.createElement("select", {
     value: currentFontSize,
     onMouseDown: e => e.stopPropagation(),
@@ -2152,11 +2293,9 @@ function RichTextEditor({
       e.preventDefault();
       addLink();
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: '16px'
-    }
-  }, "\uD83D\uDD17")), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement(FaLink, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("input", {
     ref: fileInputRef,
     type: "file",
     accept: "image/*",
@@ -2323,9 +2462,17 @@ function RichTextEditor({
     }
     return null;
   })()), /*#__PURE__*/React.createElement("div", {
+    className: "rte-content-wrapper",
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     contentEditable: editable && disabled !== true,
     suppressContentEditableWarning: true,
+    role: "textbox",
+    "aria-multiline": "true",
+    "aria-label": label || "Rich text editor",
     onInput: handleInput,
     onPaste: handlePaste,
     onDrop: handleDrop,
@@ -2341,7 +2488,13 @@ function RichTextEditor({
       paddingLeft: paddingLeft || '12px'
     },
     className: `rte-content${editable ? " rte-is-editable" : ""}${editorFocused ? " rte-is-focused" : ""}`
-  }), renderImageToolbar(), /*#__PURE__*/React.createElement("div", {
+  }), isEmpty && editable && disabled !== true && /*#__PURE__*/React.createElement("div", {
+    className: "rte-placeholder",
+    style: {
+      left: paddingLeft || '12px'
+    },
+    "aria-hidden": "true"
+  }, placeholder)), renderMediaToolbar(), /*#__PURE__*/React.createElement("div", {
     className: "rte-footer"
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-footer-content"
@@ -2357,13 +2510,11 @@ function RichTextEditor({
   }, /*#__PURE__*/React.createElement("div", {
     className: "rte-modal",
     onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "rte-modal-header"
   }, /*#__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", {
+  }, "Insert Link")), /*#__PURE__*/React.createElement("div", {
     className: "rte-form-group"
   }, /*#__PURE__*/React.createElement("label", {
     className: "rte-label"
@@ -2385,20 +2536,15 @@ function RichTextEditor({
     onChange: e => setLinkUrl(e.target.value),
     onKeyDown: e => 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("div", {
+    className: "rte-modal-actions"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "rte-btn rte-btn-secondary",
+    className: "rte-button rte-button-secondary",
     onClick: cancelLink
   }, "Cancel"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "rte-btn rte-btn-primary",
+    className: "rte-button rte-button-primary",
     onClick: confirmLink,
     disabled: !linkUrl
   }, "Insert")))), tableModalOpen && /*#__PURE__*/React.createElement("div", {