ep_images_extended 1.0.0

package/static/js/contentCollection.js

@@ -0,0 +1,96 @@
+'use strict';
+
+// This hook is called **before** the text of a line/segment is processed by the Changeset library.
+const collectContentPre = (hook, context) => {
+  const classes = context.cls ? context.cls.split(' ') : [];
+  let escapedSrc = null;
+  let widthValue = null;
+  let heightValue = null;
+  let aspectRatioValue = null;
+  let floatValue = null;
+  let imageIdValue = null;
+
+  for (const cls of classes) {
+      if (cls.startsWith('image:')) {
+          escapedSrc = cls.substring(6);
+      } else if (cls.startsWith('image-width:')) {
+          const potentialWidth = cls.substring(12);
+          if (potentialWidth && (potentialWidth === 'auto' || /[0-9]+(%|px|em|rem|vw|vh)?$/.test(potentialWidth) || /^[0-9.]+$/.test(potentialWidth))) {
+             widthValue = potentialWidth;
+          }
+      } else if (cls.startsWith('image-height:')) {
+          const potentialHeight = cls.substring(13);
+          if (potentialHeight && (potentialHeight === 'auto' || /[0-9]+(%|px|em|rem|vw|vh)?$/.test(potentialHeight) || /^[0-9.]+$/.test(potentialHeight))) {
+             heightValue = potentialHeight;
+          }
+      } else if (cls.startsWith('imageCssAspectRatio:')) {
+          const potentialAspectRatio = cls.substring(20);
+          if (!isNaN(parseFloat(potentialAspectRatio))) {
+            aspectRatioValue = potentialAspectRatio;
+          }
+      } else if (cls.startsWith('image-float:')) {
+          const potentialFloat = cls.substring(12);
+          if (potentialFloat && ['none', 'left', 'right', 'inline'].includes(potentialFloat)) {
+            floatValue = potentialFloat;
+          }
+      } else if (cls.startsWith('image-id-')) {
+          const potentialId = cls.substring(9);
+          if (potentialId && potentialId.length > 10) {
+            imageIdValue = potentialId;
+          }
+      }
+  }
+
+  if (escapedSrc) {
+    try {
+      context.cc.doAttrib(context.state, `image::${escapedSrc}`);
+    } catch (e) {
+      console.error('[ep_images_extended collectContentPre] Error applying image attribute:', e);
+    }
+  }
+  if (widthValue) {
+    try {
+        context.cc.doAttrib(context.state, `image-width::${widthValue}`);
+    } catch (e) {
+        console.error('[ep_images_extended collectContentPre] Error applying image-width attribute:', e);
+    }
+  }
+  if (heightValue) {
+    try {
+        context.cc.doAttrib(context.state, `image-height::${heightValue}`);
+    } catch (e) {
+        console.error('[ep_images_extended collectContentPre] Error applying image-height attribute:', e);
+    }
+  }
+  if (aspectRatioValue) {
+    try {
+        context.cc.doAttrib(context.state, `imageCssAspectRatio::${aspectRatioValue}`);
+    } catch (e) {
+        console.error('[ep_images_extended collectContentPre] Error applying imageCssAspectRatio attribute:', e);
+    }
+  }
+  if (floatValue) {
+    try {
+        context.cc.doAttrib(context.state, `image-float::${floatValue}`);
+    } catch (e) {
+        console.error('[ep_images_extended collectContentPre] Error applying image-float attribute:', e);
+    }
+  }
+  if (imageIdValue) {
+    try {
+        context.cc.doAttrib(context.state, `image-id::${imageIdValue}`);
+    } catch (e) {
+        console.error('[ep_images_extended collectContentPre] Error applying image-id attribute:', e);
+    }
+  }
+};
+
+// This hook is called **after** the text of a line/segment is processed.
+// We don't need special post-processing for this attribute approach.
+const collectContentPost = (hook, context) => {};
+
+// Remove collectContentImage as it's not suitable for non-<img> elements
+// const collectContentImage = ... (Removed)
+
+exports.collectContentPre = collectContentPre;
+exports.collectContentPost = collectContentPost;

package/static/js/toolbar.js

@@ -0,0 +1,177 @@
+'use strict';
+
+const _isValid = (file) => {
+  const mimedb = clientVars.ep_images_extended.mimeTypes;
+  const mimeType = mimedb[file.type];
+  let validMime = null;
+  const errorTitle = html10n.get('ep_images_extended.error.title');
+
+  if (clientVars.ep_images_extended && clientVars.ep_images_extended.fileTypes) {
+    validMime = false;
+    if (mimeType && mimeType.extensions) {
+      for (const fileType of clientVars.ep_images_extended.fileTypes) {
+        const exists = mimeType.extensions.indexOf(fileType);
+        if (exists > -1) {
+          validMime = true;
+          break; // Found a valid type
+        }
+      }
+    }
+    if (validMime === false) {
+      const errorMessage = html10n.get('ep_images_extended.error.fileType');
+      $.gritter.add({ title: errorTitle, text: errorMessage, sticky: true, class_name: 'error' });
+      return false;
+    }
+  }
+
+  if (clientVars.ep_images_extended && file.size > clientVars.ep_images_extended.maxFileSize) {
+    const allowedSize = (clientVars.ep_images_extended.maxFileSize / 1000000);
+    const errorText = html10n.get('ep_images_extended.error.fileSize', { maxallowed: allowedSize });
+    $.gritter.add({ title: errorTitle, text: errorText, sticky: true, class_name: 'error' });
+    return false;
+  }
+  return true;
+};
+
+// Helper function to insert the image attribute with ZWSP boundaries
+const insertInlineImage = (ace, imageData) => {
+  const ZWSP = '\u200b';       // Zero-Width Space
+  const placeholder = '\u00a0'; // Use NBSP as placeholder
+  const textToInsert = ZWSP + placeholder + ZWSP;
+
+  const escapedSrc = escape(imageData.src);
+  const attrKey = 'image'; // Standard attribute key
+  const attrValue = escapedSrc; // Escaped src is the value
+
+  // Get current selection to replace it (or insert if no selection)
+  const rep = ace.ace_getRep();
+  const start = rep.selStart;
+  const end = rep.selEnd;
+
+  // Add the placeholder characters, replacing selection if any
+  ace.ace_replaceRange(start, end, textToInsert);
+
+  // Define the range for the attribute: ONLY the middle character (the placeholder NBSP)
+  const attrStart = [start[0], start[1] + ZWSP.length]; // Start after the first ZWSP
+  const attrEnd = [start[0], start[1] + ZWSP.length + placeholder.length]; // End after the placeholder NBSP
+
+  // Apply the image attribute to the placeholder character
+  ace.ace_performDocumentApplyAttributesToRange(attrStart, attrEnd, [[attrKey, attrValue]]);
+
+  // Move cursor after all inserted characters
+  const finalEnd = [start[0], start[1] + textToInsert.length];
+  ace.ace_performSelectionChange(finalEnd, finalEnd, false);
+  ace.ace_focus();
+};
+
+
+exports.postToolbarInit = (hook, context) => {
+  const toolbar = context.toolbar;
+  toolbar.registerCommand('imageUpload', () => {
+    $(document).find('body').find('#imageInput').remove();
+    const fileInputHtml = `<input
+    style="width:1px;height:1px;z-index:-10000;"
+    id="imageInput" type="file" />`;
+    $(document).find('body').append(fileInputHtml);
+
+    $(document).find('body').find('#imageInput').on('change', (e) => {
+      const files = e.target.files;
+      if (!files.length) {
+        // No specific user message needed here, browser handles it or no file selected is not an error
+        return;
+      }
+      const file = files[0];
+
+      if (!_isValid(file)) {
+        return; // Validation errors are handled by _isValid
+      }
+
+      if (clientVars.ep_images_extended.storageType === 'base64') {
+        $('#imageUploadModalLoader').removeClass('popup-show'); // Ensure loader is hidden initially
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          const data = reader.result;
+          const img = new Image();
+          img.onload = () => {
+            const widthPx = `${img.naturalWidth}px`;
+            const heightPx = `${img.naturalHeight}px`;
+            context.ace.callWithAce((ace) => {
+              ace.ace_doInsertImage(data, widthPx, heightPx);
+            }, 'imgBase64', true);
+          };
+          img.onerror = () => {
+             console.error('[ep_images_extended toolbar] Failed to load Base64 image data to get dimensions. Inserting without dimensions.');
+             context.ace.callWithAce((ace) => {
+               ace.ace_doInsertImage(data);
+            }, 'imgBase64Error', true);
+          };
+          img.src = data;
+        };
+        reader.onerror = (error_evt) => { // Added error handling for FileReader
+            console.error('[ep_images_extended toolbar] FileReader error:', error_evt);
+            const errorTitle = html10n.get('ep_images_extended.error.title');
+            const errorMessage = html10n.get('ep_images_extended.error.fileRead'); // Generic file read error
+            $.gritter.add({ title: errorTitle, text: errorMessage, sticky: true, class_name: 'error' });
+        };
+      } else if (clientVars.ep_images_extended.storageType === 's3_presigned') {
+        // -------- Direct browser -> S3 upload via presigned URL --------
+        const queryParams = $.param({ name: file.name, type: file.type });
+        $('#imageUploadModalLoader').addClass('popup-show');
+
+        $.getJSON(`${clientVars.padId}/pluginfw/ep_images_extended/s3_presign?${queryParams}`)
+          .then((presignData) => {
+            if (!presignData || !presignData.signedUrl || !presignData.publicUrl) {
+              throw new Error('Invalid presign response');
+            }
+
+            // Upload the file directly to S3
+            return fetch(presignData.signedUrl, {
+              method: 'PUT',
+              headers: { 'Content-Type': file.type },
+              body: file,
+            }).then((response) => {
+              if (!response.ok) {
+                throw new Error(`S3 upload failed with status ${response.status}`);
+              }
+              return presignData.publicUrl;
+            });
+          })
+          .then((publicUrl) => {
+            // Remove loader
+            $('#imageUploadModalLoader').removeClass('popup-show');
+
+            // Obtain intrinsic dimensions by loading image
+            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);
+              }, 'imgUploadS3', true);
+            };
+            img.onerror = () => {
+              console.warn('[ep_images_extended toolbar] Could not load uploaded S3 image to measure size. Inserting without dimensions.');
+              context.ace.callWithAce((ace) => {
+                ace.ace_doInsertImage(publicUrl);
+              }, 'imgUploadS3Error', true);
+            };
+            img.src = publicUrl;
+          })
+          .catch((err) => {
+            console.error('[ep_images_extended toolbar] s3_presigned 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.`;
+        $.gritter.add({ title: errorTitle, text: errorText, sticky: true, class_name: 'error' });
+      }
+    });
+    $(document).find('body').find('#imageInput').trigger('click');
+  });
+};

package/templates/editbarButton.ejs

@@ -0,0 +1,7 @@
+<li class="separator acl-write"></li>
+
+<li data-type="button" data-key="imageUpload" data-l10n-id="ep_images_extended.toolbar.image_upload.title">
+  <a class="grouped-left ep_images_extended" data-align="0" data-l10n-id="ep_images_extended.toolbar.image_upload.title" title="Upload Image" aria-label="Upload Image">
+    <button class="buttonicon ep_images_extended image_upload buttonicon-picture" data-align="0" aria-label="Upload Image"></button>
+  </a>
+</li>

package/templates/imageFormatMenu.ejs

@@ -0,0 +1,29 @@
+<div id="imageFormatMenu" class="image-format-menu">
+    <div class="image-format-menu-section">
+        <div class="image-format-menu-buttons">
+            <button class="image-format-button active" data-wrap="inline" title="In line with text">
+                <i class="bi bi-justify"></i>
+            </button>
+            <button class="image-format-button" data-wrap="left" title="Wrap text - Image on left">
+                <i class="bi bi-text-indent-left"></i>
+            </button>
+            <button class="image-format-button" data-wrap="right" title="Wrap text - Image on right">
+                <i class="bi bi-text-indent-right"></i>
+            </button>
+        </div>
+    </div>
+    <div class="image-format-menu-divider"></div>
+    <div class="image-format-menu-section">
+        <div class="image-format-menu-buttons">
+            <button class="image-format-button" data-action="copy" title="Copy image">
+                <i class="bi bi-copy"></i>
+            </button>
+            <button class="image-format-button" data-action="cut" title="Cut image">
+                <i class="bi bi-scissors"></i>
+            </button>
+            <button class="image-format-button image-delete-button" data-action="delete" title="Delete image">
+                <i class="bi bi-trash3"></i>
+            </button>
+        </div>
+    </div>
+</div> 

package/templates/modal.ejs

@@ -0,0 +1,13 @@
+<div id="imageUploadModalError" class="popup">
+  <div class="popup-content">
+    <h2 class="error"></h2>
+    <br>
+    <button id="closeErrorModalButton">Close</button>
+  </div>
+</div>
+
+<div id="imageUploadModalLoader" class="popup">
+  <div class="popup-content">
+    <p class="loadingAnimation"></p>
+  </div>
+</div>