ep_images_extended 1.0.2 → 1.0.4

package/README.md

@@ -4,6 +4,7 @@
 `ep_images_extended` builds on `ep_image_insert` and other image upload plugins.  
 The main difference is that images are built as custom span structures using the CSS background image attribute. This bypasses the Content Collector which always requires images to be block-level styles (so they couldn't share the line with text). As a result, we can now type around images, which allows the creation of more interactive pad content. The plugin includes some other features like click + drag resize, image float, and cut/copy/delete through a context menu. It was designed for compatibility with my forthcoming tables plugin. It's a pretty heavyweight plugin (some would say overengineered), because I was prioritizing meeting functional requirements for my project. Etherpad wizards might have tips for optimization, it would surely be appreciated.
 
+![Demo](https://i.imgur.com/uTpL9Za.png)
 ---
 
 ## Installation
@@ -30,10 +31,13 @@ Create (or merge) an **`ep_images_extended`** block at the root of `settings.jso
 
 1. **Embedded Base-64** (default – zero config)
    ```jsonc
-   "ep_images_extended": {
-     "fileTypes": ["jpeg", "jpg", "png", "gif", "bmp", "webp"],
-     "maxFileSize": 5000000
-   }
+      "ep_images_extended": {
+        "storage": {               
+          "type": "base64" 
+        },
+        "fileTypes": ["jpeg", "jpg", "png", "gif", "bmp", "webp"],
+        "maxFileSize": 5000000
+      }
    ```
    Images are converted to data-URIs and live inside the pad. This has a pretty big performance impact.
 
@@ -58,22 +62,22 @@ Create (or merge) an **`ep_images_extended`** block at the root of `settings.jso
    * `AWS_SECRET_ACCESS_KEY`
    * `AWS_SESSION_TOKEN` (if using temporary credentials)
    
-
----
-
-## Option reference – quick lookup
-
-```text
-fileTypes      ↠   Allowed extensions (array of strings)
-maxFileSize    ↠   Maximum upload size in bytes
-storage.type   ↠   "base64"  |  "s3_presigned"
-   ├─ bucket    ↠   S3 bucket name  (s3_presigned only)
-   ├─ region    ↠   AWS region      (s3_presigned only)
-   ├─ publicURL ↠   CDN / CloudFront base URL (optional)
-   └─ expires   ↠   URL lifetime in seconds (optional)
-```
-All other values are ignored.
-
+3. **Local disk storage** (files saved on the Etherpad server)
+   ```jsonc
+   "ep_images_extended": {
+     "storage": {
+       "type": "local",                 // enable disk uploads
+       "baseFolder": "static/images",   // optional – path relative to Etherpad root
+       "baseURL": "https://pad.example.com/etherpad-lite/static/images/" // optional – public URL prefix
+     },
+     "fileTypes": ["jpeg", "jpg", "png", "gif"],
+     "maxFileSize": 5000000
+   }
+   ```
+   The browser POSTs the file to `/pluginfw/ep_images_extended/upload`.
+   Etherpad writes it to `baseFolder/<padId>/<uuid>.ext` and returns the
+   public URL.
+   
 ---
 
 ## Contributing

package/ep.json

@@ -23,7 +23,6 @@
         "expressConfigure": "ep_images_extended/index",
         "eejsBlock_editbarMenuLeft": "ep_images_extended/editbar",
         "loadSettings": "ep_images_extended/settings",
-        "padRemove": "ep_images_extended/index",
         "collectContentPre": "ep_images_extended/static/js/contentCollection",
         "eejsBlock_styles": "ep_images_extended/index",
         "eejsBlock_timesliderStyles": "ep_images_extended/index",

package/index.js

@@ -103,76 +103,170 @@ exports.expressConfigure = (hookName, context) => {
    * New endpoint: GET /p/:padId/pluginfw/ep_images_extended/s3_presign
    * ------------------------------------------------------------------
    * Returns: { signedUrl: string, publicUrl: string }
-   * Only active when settings.ep_images_extended.storage.type === 's3_presigned'
+   * Register the route only when storage.type === 's3_presigned'
    */
-  context.app.get('/p/:padId/pluginfw/ep_images_extended/s3_presign', async (req, res) => {
-    /* ------------------ Basic auth check ------------------ */
-    const hasExpressSession = req.session && (req.session.user || req.session.authorId);
-    const hasPadCookie = req.cookies && (req.cookies.sessionID || req.cookies.token);
-    if (!hasExpressSession && !hasPadCookie) {
-      return res.status(401).json({ error: 'Authentication required' });
-    }
-
-    /* ------------------ Rate limiting --------------------- */
-    const ip = req.ip || req.headers['x-forwarded-for'] || req.connection?.remoteAddress || 'unknown';
-    if (!_rateLimitCheck(ip)) {
-      return res.status(429).json({ error: 'Too many presign requests' });
-    }
-
-    try {
-      const storageCfg = settings.ep_images_extended && settings.ep_images_extended.storage;
-      if (!storageCfg || storageCfg.type !== 's3_presigned') {
-        return res.status(400).json({ error: 's3_presigned storage not enabled' });
+  if (settings.ep_images_extended && settings.ep_images_extended.storage && settings.ep_images_extended.storage.type === 's3_presigned') {
+    context.app.get('/p/:padId/pluginfw/ep_images_extended/s3_presign', async (req, res) => {
+      /* ------------------ Basic auth check ------------------ */
+      const hasExpressSession = req.session && (req.session.user || req.session.authorId);
+      const hasPadCookie = req.cookies && (req.cookies.sessionID || req.cookies.token);
+      if (!hasExpressSession && !hasPadCookie) {
+        return res.status(401).json({ error: 'Authentication required' });
       }
 
-      if (!S3Client || !PutObjectCommand || !getSignedUrl) {
-        return res.status(500).json({ error: 'AWS SDK not available on server' });
+      /* ------------------ Rate limiting --------------------- */
+      const ip = req.ip || req.headers['x-forwarded-for'] || req.connection?.remoteAddress || 'unknown';
+      if (!_rateLimitCheck(ip)) {
+        return res.status(429).json({ error: 'Too many presign requests' });
       }
 
-      const { bucket, region, publicURL, expires } = storageCfg;
-      if (!bucket || !region) {
-        return res.status(500).json({ error: 'Invalid S3 configuration' });
+      try {
+        const storageCfg = settings.ep_images_extended && settings.ep_images_extended.storage;
+        if (!storageCfg || storageCfg.type !== 's3_presigned') {
+          return res.status(400).json({ error: 's3_presigned storage not enabled' });
+        }
+
+        if (!S3Client || !PutObjectCommand || !getSignedUrl) {
+          return res.status(500).json({ error: 'AWS SDK not available on server' });
+        }
+
+        const { bucket, region, publicURL, expires } = storageCfg;
+        if (!bucket || !region) {
+          return res.status(500).json({ error: 'Invalid S3 configuration' });
+        }
+
+        const { padId } = req.params;
+        const { name, type } = req.query;
+        if (!name || !type) {
+          return res.status(400).json({ error: 'Missing name or type' });
+        }
+
+        /* ------------- MIME / extension allow-list ------------ */
+        if (settings.ep_images_extended && settings.ep_images_extended.fileTypes && Array.isArray(settings.ep_images_extended.fileTypes)) {
+          const allowedExts = settings.ep_images_extended.fileTypes;
+          const extName = path.extname(name).replace('.', '').toLowerCase();
+          if (!allowedExts.includes(extName)) {
+            return res.status(400).json({ error: 'File type not allowed' });
+          }
+        }
+
+        const ext = path.extname(name);
+        // Ensure ext starts with '.'; if not, prefix it
+        const safeExt = ext.startsWith('.') ? ext : `.${ext}`;
+        const key = `${padId}/${randomUUID()}${safeExt}`;
+
+        const s3Client = new S3Client({ region }); // credentials from env / IAM role
+
+        const putCommand = new PutObjectCommand({
+          Bucket: bucket,
+          Key: key,
+          ContentType: type,
+        });
+
+        const signedUrl = await getSignedUrl(s3Client, putCommand, { expiresIn: expires || 600 });
+
+        const basePublic = publicURL || `https://${bucket}.s3.${region}.amazonaws.com/`;
+        const publicUrl = new url.URL(key, basePublic).toString();
+
+        return res.json({ signedUrl, publicUrl });
+      } catch (err) {
+        logger.error('[ep_images_extended] S3 presign error', err);
+        return res.status(500).json({ error: 'Failed to generate presigned URL' });
       }
+    });
+  }
 
-      const { padId } = req.params;
-      const { name, type } = req.query;
-      if (!name || !type) {
-        return res.status(400).json({ error: 'Missing name or type' });
+  // ADD LOCAL DISK STORAGE UPLOAD ENDPOINT ------------------------------
+  // Register the route only if storage.type === 'local'
+  if (settings.ep_images_extended && settings.ep_images_extended.storage && settings.ep_images_extended.storage.type === 'local') {
+    // Route: POST /p/:padId/pluginfw/ep_images_extended/upload
+    // Accepts multipart/form-data with field "file" and saves it to the
+    // configured baseFolder. Responds with the public URL of the uploaded file.
+    context.app.post('/p/:padId/pluginfw/ep_images_extended/upload', async (req, res) => {
+      /* ------------------ Basic auth check ------------------ */
+      const hasExpressSession = req.session && (req.session.user || req.session.authorId);
+      const hasPadCookie = req.cookies && (req.cookies.sessionID || req.cookies.token);
+      if (!hasExpressSession && !hasPadCookie) {
+        return res.status(401).json({ error: 'Authentication required' });
       }
 
-      /* ------------- MIME / extension allow-list ------------ */
-      if (settings.ep_images_extended && settings.ep_images_extended.fileTypes && Array.isArray(settings.ep_images_extended.fileTypes)) {
-        const allowedExts = settings.ep_images_extended.fileTypes;
-        const extName = path.extname(name).replace('.', '').toLowerCase();
-        if (!allowedExts.includes(extName)) {
-          return res.status(400).json({ error: 'File type not allowed' });
-        }
+      /* ------------------ Rate limiting --------------------- */
+      const ip = req.ip || req.headers['x-forwarded-for'] || req.connection?.remoteAddress || 'unknown';
+      if (!_rateLimitCheck(ip)) {
+        return res.status(429).json({ error: 'Too many uploads' });
       }
 
-      const ext = path.extname(name);
-      // Ensure ext starts with '.'; if not, prefix it
-      const safeExt = ext.startsWith('.') ? ext : `.${ext}`;
-      const key = `${padId}/${randomUUID()}${safeExt}`;
+      try {
+        // Dynamically require formidable only when needed
+        const formidableMod = require('formidable');
+        const IncomingForm = formidableMod.IncomingForm || formidableMod; // support both v1 and v2+ exports
+        const form = new IncomingForm({ multiples: false, maxFileSize: settings.ep_images_extended.maxFileSize || 1024 * 1024 * 20 /* 20 MB default */ });
 
-      const s3Client = new S3Client({ region }); // credentials from env / IAM role
+        form.parse(req, async (err, _fields, files) => {
+          if (err) {
+            logger.error('[ep_images_extended] formidable parse error', err);
+            return res.status(400).json({ error: 'Invalid form data' });
+          }
+          if (!files.file) {
+            return res.status(400).json({ error: 'No file provided' });
+          }
+          const uploaded = Array.isArray(files.file) ? files.file[0] : files.file;
+          const mimeType = uploaded.mimetype || uploaded.type || 'application/octet-stream';
 
-      const putCommand = new PutObjectCommand({
-        Bucket: bucket,
-        Key: key,
-        ContentType: type,
-      });
+          // Reject non-image MIME types
+          if (!mimeType.startsWith('image/')) {
+            return res.status(400).json({ error: 'Not an image MIME type' });
+          }
 
-      const signedUrl = await getSignedUrl(s3Client, putCommand, { expiresIn: expires || 600 });
+          // Enforce fileTypes allow-list if configured
+          if (settings.ep_images_extended && Array.isArray(settings.ep_images_extended.fileTypes)) {
+            const allowedExts = settings.ep_images_extended.fileTypes;
+            const extName = path.extname(uploaded.originalFilename || uploaded.name).replace('.', '').toLowerCase();
+            if (!allowedExts.includes(extName)) {
+              return res.status(400).json({ error: 'File type not allowed' });
+            }
+          }
 
-      const basePublic = publicURL || `https://${bucket}.s3.${region}.amazonaws.com/`;
-      const publicUrl = new url.URL(key, basePublic).toString();
+          const { padId } = req.params;
+          const safePad = path.basename(padId); // prevent path traversal
+          const baseFolder = settings.ep_images_extended.storage.baseFolder || path.join(settings.root || process.cwd(), 'src/static/images');
+          const destFolder = path.resolve(baseFolder, safePad);
+          await fsp.mkdir(destFolder, { recursive: true });
 
-      return res.json({ signedUrl, publicUrl });
-    } catch (err) {
-      logger.error('[ep_images_extended] S3 presign error', err);
-      return res.status(500).json({ error: 'Failed to generate presigned URL' });
-    }
-  });
+          const newFilename = `${randomUUID()}${path.extname(uploaded.originalFilename || uploaded.name)}`;
+          const destPath = path.join(destFolder, newFilename);
+
+          try {
+            await fsp.rename(uploaded.filepath || uploaded.path, destPath);
+          } catch (errMove) {
+            if (errMove.code === 'EXDEV') {
+              // Cross-device move: fallback to copy & unlink
+              await fsp.copyFile(uploaded.filepath || uploaded.path, destPath);
+              await fsp.unlink(uploaded.filepath || uploaded.path);
+            } else {
+              throw errMove;
+            }
+          }
+
+          // Build public URL
+          let publicUrl;
+          if (settings.ep_images_extended.storage.baseURL) {
+            publicUrl = new url.URL(path.posix.join(safePad, newFilename), settings.ep_images_extended.storage.baseURL).toString();
+          } else {
+            // Default to Etherpad static path assumption
+            const relStatic = path.posix.join('/static/images', safePad, newFilename);
+            publicUrl = relStatic;
+          }
+
+          return res.json({ url: publicUrl });
+        });
+      } catch (e) {
+        logger.error('[ep_images_extended] Local upload error', e);
+        return res.status(500).json({ error: 'Failed to process upload' });
+      }
+    });
+  }
+  // ---------------------------------------------------------------------
 };
 
 /**

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "ep_images_extended",
   "description": "Insert images inline with text, float them, resize them, and more.",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": {
     "name": "DCastelone",
-    "email": "daniel.m.castelone@gmail.com",
     "url": "https://github.com/dcastelone"
   },
   "contributors": [],
@@ -13,6 +12,15 @@
     "@aws-sdk/client-s3": "^3.555.0",
     "@aws-sdk/s3-request-presigner": "^3.555.0"
   },
+  "license": "Apache-2.0",
+  "keywords": [
+    "etherpad",
+    "plugin",
+    "ep",
+    "hyperlink",
+    "link",
+    "url"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dcastelone/ep_images_extended.git"

package/static/js/clientHooks.js

@@ -962,7 +962,7 @@ exports.postAceInit = function (hook, context) {
                             try {
                                 const formData = new FormData();
                                 formData.append('file', file, file.name);
-                                const uploadUrl = await $.ajax({
+                                const uploadResp = await $.ajax({
                                     type: 'POST',
                                     url: `${clientVars.padId}/pluginfw/ep_images_extended/upload`,
                                     data: formData,
@@ -970,12 +970,19 @@ exports.postAceInit = function (hook, context) {
                                     contentType: false,
                                     processData: false,
                                     timeout: 60000,
+                                    dataType: 'json',
                                 });
 
+                                if (!uploadResp || !uploadResp.url) {
+                                    throw new Error('Invalid upload response');
+                                }
+
+                                const publicUrl = uploadResp.url;
+
                                 const probeImg = new Image();
-                                probeImg.onload = () => insertIntoPad(uploadUrl, `${probeImg.naturalWidth}px`, `${probeImg.naturalHeight}px`);
-                                probeImg.onerror = () => insertIntoPad(uploadUrl);
-                                probeImg.src = uploadUrl;
+                                probeImg.onload = () => insertIntoPad(publicUrl, `${probeImg.naturalWidth}px`, `${probeImg.naturalHeight}px`);
+                                probeImg.onerror = () => insertIntoPad(publicUrl);
+                                probeImg.src = publicUrl;
                             } catch (err) {
                                 console.error('[ep_images_extended paste] Server upload failed, falling back to base64:', err);
                                 insertAsDataUrl(file);

package/static/js/toolbar.js

@@ -164,11 +164,52 @@ exports.postToolbarInit = (hook, context) => {
             const errorTitle = html10n.get('ep_images_extended.error.title');
             $.gritter.add({ title: errorTitle, text: err.message, sticky: true, class_name: 'error' });
           });
+      } else if (clientVars.ep_images_extended.storageType === 'local') {
+        // -------- Upload to server local storage endpoint --------
+        $('#imageUploadModalLoader').addClass('popup-show');
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+
+        fetch(`${clientVars.padId}/pluginfw/ep_images_extended/upload`, {
+          method: 'POST',
+          body: formData,
+        })
+          .then(async (response) => {
+            if (!response.ok) {
+              throw new Error(`Upload failed with status ${response.status}`);
+            }
+            const data = await response.json();
+            if (!data || !data.url) throw new Error('Invalid upload response');
+            return data.url;
+          })
+          .then((publicUrl) => {
+            $('#imageUploadModalLoader').removeClass('popup-show');
+            const img = new Image();
+            img.onload = () => {
+              const widthPx = `${img.naturalWidth}px`;
+              const heightPx = `${img.naturalHeight}px`;
+              context.ace.callWithAce((ace) => {
+                ace.ace_doInsertImage(publicUrl, widthPx, heightPx);
+              }, 'imgUploadLocal', true);
+            };
+            img.onerror = () => {
+              context.ace.callWithAce((ace) => {
+                ace.ace_doInsertImage(publicUrl);
+              }, 'imgUploadLocalError', true);
+            };
+            img.src = publicUrl;
+          })
+          .catch((err) => {
+            console.error('[ep_images_extended toolbar] local upload failed', err);
+            $('#imageUploadModalLoader').removeClass('popup-show');
+            const errorTitle = html10n.get('ep_images_extended.error.title');
+            $.gritter.add({ title: errorTitle, text: err.message, sticky: true, class_name: 'error' });
+          });
       } else {
         // Unsupported storage type – show error and abort
         $('#imageUploadModalLoader').removeClass('popup-show');
         const errorTitle = html10n.get('ep_images_extended.error.title');
-        const errorText = `Unsupported storageType: ${clientVars.ep_images_extended.storageType}. Only "base64" and "s3_presigned" are supported.`;
+        const errorText = `Unsupported storageType: ${clientVars.ep_images_extended.storageType}. Only "base64", "s3_presigned", and "local" are supported.`;
         $.gritter.add({ title: errorTitle, text: errorText, sticky: true, class_name: 'error' });
       }
     });