@overlap/rte 1.0.0 → 1.0.3

package/dist/index.d.ts

@@ -75,6 +75,7 @@ interface EditorSettings {
         numberedList?: boolean;
         quote?: boolean;
         codeBlock?: boolean;
+        horizontalRule?: boolean;
         check?: boolean;
         /** Heading levels to enable, e.g. ["h1", "h2", "h3"] */
         typography?: string[];

package/dist/index.esm.js

@@ -3179,9 +3179,9 @@ function createImagePlugin(onImageUpload) {
                     alert('Please enter an image URL');
                     return;
                 }
-                // Validate URL safety
+                // Validate URL safety (allow data:image/* for base64-encoded uploads)
                 const srcWithoutMeta = src.split('|__aid__:')[0];
-                if (!isUrlSafe(srcWithoutMeta)) {
+                if (!isUrlSafe(srcWithoutMeta) && !srcWithoutMeta.startsWith('data:image/')) {
                     alert('Invalid image URL');
                     return;
                 }
@@ -3227,9 +3227,8 @@ function createImagePlugin(onImageUpload) {
                             if (e.target === e.currentTarget) {
                                 setShowModal(false);
                             }
-                        }, children: jsxs("div", { className: "rte-image-modal", children: [jsxs("div", { className: "rte-image-modal-header", children: [jsx("h3", { children: "Insert Image" }), jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-close", "aria-label": "Close", children: jsx(IconWrapper, { icon: "mdi:close", width: 20, height: 20 }) })] }), jsxs("div", { className: "rte-image-modal-content", children: [onImageUpload && (jsx("div", { className: "rte-image-upload-section", children: jsxs("label", { className: "rte-image-upload-label", children: [jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, style: { display: 'none' } }), jsx("div", { className: "rte-image-upload-button", children: isUploading ? (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:loading", width: 24, height: 24, className: "rte-spin" }), jsx("span", { children: "Uploading..." })] })) : (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:upload", width: 24, height: 24 }), jsx("span", { children: "Choose File" })] })) })] }) })), jsx("div", { className: "rte-image-url-section", children: jsxs("label", { children: ["Image URL", jsx("input", { type: "url", value: imageUrl, onChange: (e) => {
+                        }, children: jsxs("div", { className: "rte-image-modal", children: [jsxs("div", { className: "rte-image-modal-header", children: [jsx("h3", { children: "Insert Image" }), jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-close", "aria-label": "Close", children: jsx(IconWrapper, { icon: "mdi:close", width: 20, height: 20 }) })] }), jsxs("div", { className: "rte-image-modal-content", children: [onImageUpload && (jsx("div", { className: "rte-image-upload-section", children: jsxs("label", { className: "rte-image-upload-label", children: [jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileSelect, style: { display: 'none' } }), jsx("div", { className: "rte-image-upload-button", children: isUploading ? (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:loading", width: 24, height: 24, className: "rte-spin" }), jsx("span", { children: "Uploading..." })] })) : (jsxs(Fragment, { children: [jsx(IconWrapper, { icon: "mdi:upload", width: 24, height: 24 }), jsx("span", { children: "Choose File" })] })) })] }) })), jsx("div", { className: "rte-image-url-section", children: jsxs("label", { children: ["Image URL", jsx("input", { type: "text", value: imageUrl, onChange: (e) => {
                                                             setImageUrl(e.target.value);
-                                                            // Clear raw URL when user manually edits
                                                             setRawUrl('');
                                                         }, placeholder: "https://example.com/image.jpg", className: "rte-image-url-input" })] }) }), jsx("div", { className: "rte-image-alt-section", children: jsxs("label", { children: ["Alt Text (optional)", jsx("input", { type: "text", value: altText, onChange: (e) => setAltText(e.target.value), placeholder: "Image description", className: "rte-image-alt-input" })] }) }), imageUrl && (jsx("div", { className: "rte-image-preview", children: jsx("img", { src: imageUrl, alt: altText || 'Preview' }) }))] }), jsxs("div", { className: "rte-image-modal-footer", children: [jsx("button", { type: "button", onClick: () => setShowModal(false), className: "rte-image-modal-cancel", children: "Cancel" }), jsx("button", { type: "button", onClick: handleInsertImage, disabled: !imageUrl.trim() || isUploading, className: "rte-image-modal-insert", children: "Insert" })] })] }) }))] }));
         },
@@ -4114,6 +4113,7 @@ const defaultEditorSettings = {
         numberedList: true,
         quote: true,
         codeBlock: true,
+        horizontalRule: true,
         check: true,
         typography: ["h1", "h2", "h3", "h4", "h5", "h6"],
         colors: [
@@ -4192,6 +4192,9 @@ function buildPluginsFromSettings(settings = defaultEditorSettings, options = {}
         plugins.push(subscriptPlugin);
     if (fmt.superscript)
         plugins.push(superscriptPlugin);
+    // Horizontal rule
+    if (fmt.horizontalRule)
+        plugins.push(horizontalRulePlugin);
     // Table
     if (settings.table?.enabled) {
         plugins.push(tablePlugin);