Release v2.7.0

src/web/public/js/slides/slide-form-editor.js

@@ -11,6 +11,16 @@ export function createSlideFormEditorController(options) {
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () {
     return null;
   };
+  var imageUploadUrl = String(settings.imageUploadUrl || '/slides/uploads').trim() || '/slides/uploads';
+  var imageUploadMaxBytes = Math.max(1, Number(settings.imageUploadMaxBytes || 2 * 1024 * 1024));
+  var imageUploadLimitLabel = String(settings.imageUploadLimitLabel || '').trim() || Math.max(1, Math.round(imageUploadMaxBytes / (1024 * 1024))) + ' MB';
+  var imageUploadContext = String(settings.imageUploadContext || 'wysiwyg').trim() || 'wysiwyg';
+  var imageUploadAllowedExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'avif', 'tif', 'tiff'];
+  var imageUploadAllowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/bmp', 'image/avif', 'image/tiff'];
+  var imageUploadFileTypes = imageUploadAllowedExtensions.join(',');
+  var editorImageUploadPaths = new Set();
+  var committedEditorImageUploadPaths = new Set();
+  var pendingEditorImageUploadCleanupPaths = new Set();
   var getEditorBackgroundColor = typeof settings.getEditorBackgroundColor === 'function' ? settings.getEditorBackgroundColor : function () {
     return '#111111';
   };
@@ -29,6 +39,10 @@ export function createSlideFormEditorController(options) {
       return true;
     }
 
+    if (/<img\b/i.test(raw)) {
+      return false;
+    }
+
     var stripped = raw
       .replace(/<\s*br\s*\/?>/gi, '')
       .replace(/<p[^>]*>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi, '')
@@ -209,6 +223,191 @@ export function createSlideFormEditorController(options) {
       : themeAssets.contentCss;
   }
 
+  function normalizeUploadPath(value) {
+    return String(value || '').trim();
+  }
+
+  function collectEditorImageUploadPaths(html) {
+    var matches = String(html || '').match(/\/media\/uploads\/[^^\s"'<>]+/g);
+    return matches ? Array.from(new Set(matches.map(normalizeUploadPath).filter(Boolean))) : [];
+  }
+
+  function collectCurrentEditorImageUploadPaths() {
+    var currentPaths = new Set();
+
+    editorInstances.forEach(function (editor, regionId) {
+      var hidden = getEditorHiddenInput(regionId);
+      var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
+      var fallbackContent = hidden && hidden.value !== undefined ? hidden.value : (sourceElm && sourceElm.value !== undefined ? sourceElm.value : '');
+      collectEditorImageUploadPaths(getEditorContentSafely(editor, fallbackContent)).forEach(function (path) {
+        currentPaths.add(path);
+      });
+    });
+
+    return currentPaths;
+  }
+
+  function getImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(editorImageUploadPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function getCommittedImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(committedEditorImageUploadPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function getPendingImageUploadPaths() {
+    return Array.from(editorImageUploadPaths).filter(function (path) {
+      return !committedEditorImageUploadPaths.has(path);
+    });
+  }
+
+  function queueImageUploadCleanupPaths(paths) {
+    Array.from(new Set((paths || []).map(normalizeUploadPath).filter(Boolean))).forEach(function (path) {
+      pendingEditorImageUploadCleanupPaths.add(path);
+    });
+  }
+
+  function getPendingImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(pendingEditorImageUploadCleanupPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function markImageUploadsCommitted() {
+    committedEditorImageUploadPaths = collectCurrentEditorImageUploadPaths();
+  }
+
+  function getAllImageUploadPaths() {
+    return Array.from(editorImageUploadPaths);
+  }
+
+  function clearImageUploadPaths() {
+    editorImageUploadPaths.clear();
+    committedEditorImageUploadPaths.clear();
+    pendingEditorImageUploadCleanupPaths.clear();
+  }
+
+  function getFileExtension(fileName) {
+    var match = String(fileName || '').toLowerCase().match(/\.([a-z0-9]+)$/);
+    return match ? String(match[1] || '') : '';
+  }
+
+  function getImageUploadValidationMessage(blobInfo) {
+    var blob = blobInfo && typeof blobInfo.blob === 'function' ? blobInfo.blob() : null;
+    var fileName = blobInfo && typeof blobInfo.filename === 'function' ? String(blobInfo.filename() || '') : '';
+    var mimeType = blob && blob.type ? String(blob.type || '').trim().toLowerCase() : '';
+    var extension = getFileExtension(fileName);
+
+    if (!blob) {
+      return 'No image file was provided.';
+    }
+
+    if (Number(blob.size || 0) > imageUploadMaxBytes) {
+      return 'Image must be ' + imageUploadLimitLabel + ' or smaller. Larger images should use the dedicated Image region.';
+    }
+
+    if (mimeType && imageUploadAllowedMimeTypes.indexOf(mimeType) === -1) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+    }
+
+    if (!mimeType && extension && imageUploadAllowedExtensions.indexOf(extension) === -1) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+    }
+
+    if (!mimeType && !extension) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+    }
+
+    return '';
+  }
+
+  function uploadEditorImage(blobInfo, progress) {
+    var validationError = getImageUploadValidationMessage(blobInfo);
+    if (validationError) {
+      return Promise.reject(new Error(validationError));
+    }
+
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      var formData = new FormData();
+      var blob = blobInfo.blob();
+      var fileName = typeof blobInfo.filename === 'function' ? String(blobInfo.filename() || 'image') : 'image';
+
+      formData.append('file', blob, fileName);
+
+      xhr.open('POST', imageUploadUrl, true);
+      xhr.responseType = 'text';
+      xhr.withCredentials = true;
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+      xhr.setRequestHeader('X-Upload-Context', imageUploadContext);
+
+      xhr.upload.onprogress = function (event) {
+        if (!progress) {
+          return;
+        }
+
+        if (!event || !event.lengthComputable || !event.total) {
+          progress(0);
+          return;
+        }
+
+        progress(Math.round((event.loaded / event.total) * 100));
+      };
+
+      xhr.onload = function () {
+        var responseText = String(xhr.responseText || '');
+        if (xhr.status < 200 || xhr.status >= 300) {
+          reject(new Error(responseText || 'Unable to upload image.'));
+          return;
+        }
+
+        if (responseText.trim().toLowerCase().indexOf('<!doctype html') === 0 || responseText.toLowerCase().indexOf('<html') !== -1) {
+          reject(new Error('Upload redirected to an HTML page. Please sign in again and retry.'));
+          return;
+        }
+
+        var payload = {};
+        try {
+          payload = JSON.parse(responseText || '{}') || {};
+        } catch (_error) {
+          reject(new Error('Unable to parse the upload response.'));
+          return;
+        }
+
+        if (!payload.path) {
+          reject(new Error('Unable to upload image.'));
+          return;
+        }
+
+        if (progress) {
+          progress(100);
+        }
+
+        editorImageUploadPaths.add(String(payload.path || '').trim());
+
+        resolve(String(payload.path || ''));
+      };
+
+      xhr.onerror = function () {
+        reject(new Error('Unable to upload image.'));
+      };
+
+      xhr.ontimeout = function () {
+        reject(new Error('Upload timed out. Please try again.'));
+      };
+
+      xhr.send(formData);
+    });
+  }
+
   function attachEditorEvents(regionId, editor) {
     var hidden = getEditorHiddenInput(regionId);
     var source = editor && editor.targetElm ? editor.targetElm : null;
@@ -305,16 +504,27 @@ export function createSlideFormEditorController(options) {
       menubar: false,
       branding: false,
       promotion: false,
+      relative_urls: false,
+      remove_script_host: false,
+      convert_urls: true,
       paste_data_images: false,
-      plugins: 'lists code advlist fullscreen table',
-      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table chip | fullscreen',
+      automatic_uploads: true,
+      images_file_types: imageUploadFileTypes,
+      images_upload_handler: uploadEditorImage,
+      plugins: 'lists code advlist fullscreen table image',
+      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table image chip | fullscreen',
       toolbar_mode: 'sliding',
       license_key: 'gpl',
+      table_default_attributes: {
+        border: '1',
+        cellpadding: '0',
+        cellspacing: '0'
+      },
       skin: themeAssets.skinName,
       skin_url: themeAssets.skinUrl,
       content_css: getContentCss(),
       body_class: themeAssets.bodyClass,
-      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; } table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid currentColor; padding: 0.35em 0.5em; vertical-align: top; } th { font-weight: 700; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
+      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } td, th { border: 1px solid currentColor; padding: 0; vertical-align: top; } th { font-weight: 700; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
       font_family_formats: getFontFamilyFormats(),
       font_size_input_default_unit: 'px',
       invalid_elements: 'a',
@@ -394,6 +604,7 @@ export function createSlideFormEditorController(options) {
       if (editor.targetElm) {
         editor.targetElm.value = editor.getContent({ format: 'html' });
       }
+      markImageUploadsCommitted();
       return editor;
     }).catch(function (error) {
       console.error('Failed to initialize TinyMCE.', error);
@@ -431,7 +642,10 @@ export function createSlideFormEditorController(options) {
       return Promise.resolve();
     });
 
-    return Promise.all(saves);
+    return Promise.all(saves).then(function (results) {
+      getCommittedImageUploadCleanupPaths();
+      return results;
+    });
   }
 
   function destroyEditors() {
@@ -469,6 +683,14 @@ export function createSlideFormEditorController(options) {
   return {
     renderEditors: renderEditors,
     syncEditors: syncEditors,
+    getImageUploadCleanupPaths: getImageUploadCleanupPaths,
+    getCommittedImageUploadCleanupPaths: getCommittedImageUploadCleanupPaths,
+    getPendingImageUploadPaths: getPendingImageUploadPaths,
+    getPendingImageUploadCleanupPaths: getPendingImageUploadCleanupPaths,
+    getAllImageUploadPaths: getAllImageUploadPaths,
+    queueImageUploadCleanupPaths: queueImageUploadCleanupPaths,
+    markImageUploadsCommitted: markImageUploadsCommitted,
+    clearImageUploadPaths: clearImageUploadPaths,
     destroyEditors: function () {
       if (themeObserver) {
         themeObserver.disconnect();