DEV: Switch to using uppy uploads in composer by default (discourse#1…

…5058)

This is a big change to change over to using the uppy
upload mixin in the composer by default. This gets rid
of the temporary composer-editor-uppy component, as well
as removing the old ComposerUpload mixin and copying over
any missing functions that were not yet implemented by
ComposerUploadUppy. This has been working well on our
hosting for some time now and has led us to several
bug fixes.

This commit also deletes the old plugin API for adding
preprocessors for the uploads. The accepted method of doing
this now is via an uppy preprocessor plugin, which we have
several examples of in the core codebase.

Leaving the `enable_experimental_composer_uploader` site setting
intact for now because some plugins still rely on it, this
will be removed at a later date.

One step closer to ending the jQuery file uploader saga...

app/assets/javascripts/discourse/app/components/composer-editor.js

@@ -3,6 +3,7 @@ import {
   authorizesAllExtensions,
   authorizesOneOrMoreImageExtensions,
 } from "discourse/lib/uploads";
+import { alias } from "@ember/object/computed";
 import { BasePlugin } from "@uppy/core";
 import { resolveAllShortUrls } from "pretty-text/upload-short-url";
 import {
@@ -27,7 +28,7 @@ import {
 import { later, next, schedule, throttle } from "@ember/runloop";
 import Component from "@ember/component";
 import Composer from "discourse/models/composer";
-import ComposerUpload from "discourse/mixins/composer-upload";
+import ComposerUploadUppy from "discourse/mixins/composer-upload-uppy";
 import EmberObject from "@ember/object";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
@@ -71,17 +72,6 @@ export function cleanUpComposerUploadHandler() {
   uploadHandlers.length = 0;
 }
 
-let uploadProcessorQueue = [];
-let uploadProcessorActions = {};
-export function addComposerUploadProcessor(queueItem, actionItem) {
-  uploadProcessorQueue.push(queueItem);
-  Object.assign(uploadProcessorActions, actionItem);
-}
-export function cleanUpComposerUploadProcessor() {
-  uploadProcessorQueue = [];
-  uploadProcessorActions = {};
-}
-
 let uploadPreProcessors = [];
 export function addComposerUploadPreProcessor(pluginClass, optionsResolverFn) {
   if (!(pluginClass.prototype instanceof BasePlugin)) {
@@ -107,18 +97,22 @@ export function cleanUpComposerUploadMarkdownResolver() {
   uploadMarkdownResolvers = [];
 }
 
-export default Component.extend(ComposerUpload, {
+export default Component.extend(ComposerUploadUppy, {
   classNameBindings: ["showToolbar:toolbar-visible", ":wmd-controls"],
 
   fileUploadElementId: "file-uploader",
   mobileFileUploaderId: "mobile-file-upload",
+  eventPrefix: "composer",
+  uploadType: "composer",
+  uppyId: "composer-editor-uppy",
+  composerModel: alias("composer"),
+  composerModelContentKey: "reply",
+  editorInputClass: ".d-editor-input",
   shouldBuildScrollMap: true,
   scrollMap: null,
   processPreview: true,
 
   uploadMarkdownResolvers,
-  uploadProcessorActions,
-  uploadProcessorQueue,
   uploadPreProcessors,
   uploadHandlers,
 

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -296,15 +296,6 @@ export default Controller.extend({
     return option;
   },
 
-  @discourseComputed()
-  composerComponent() {
-    const defaultComposer = "composer-editor";
-    if (this.siteSettings.enable_experimental_composer_uploader) {
-      return "composer-editor-uppy";
-    }
-    return defaultComposer;
-  },
-
   @discourseComputed("model.requiredCategoryMissing", "model.replyLength")
   disableTextarea(requiredCategoryMissing, replyLength) {
     return requiredCategoryMissing && replyLength === 0;

app/assets/javascripts/discourse/app/initializers/register-media-optimization-upload-processor.js

@@ -1,7 +1,4 @@
-import {
-  addComposerUploadPreProcessor,
-  addComposerUploadProcessor,
-} from "discourse/components/composer-editor";
+import { addComposerUploadPreProcessor } from "discourse/components/composer-editor";
 import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin";
 
 export default {
@@ -10,30 +7,18 @@ export default {
   initialize(container) {
     let siteSettings = container.lookup("site-settings:main");
     if (siteSettings.composer_media_optimization_image_enabled) {
-      if (!siteSettings.enable_experimental_composer_uploader) {
-        addComposerUploadProcessor(
-          { action: "optimizeJPEG" },
-          {
-            optimizeJPEG: (data, opts) =>
+      addComposerUploadPreProcessor(
+        UppyMediaOptimization,
+        ({ isMobileDevice }) => {
+          return {
+            optimizeFn: (data, opts) =>
               container
                 .lookup("service:media-optimization-worker")
                 .optimizeImage(data, opts),
-          }
-        );
-      } else {
-        addComposerUploadPreProcessor(
-          UppyMediaOptimization,
-          ({ isMobileDevice }) => {
-            return {
-              optimizeFn: (data, opts) =>
-                container
-                  .lookup("service:media-optimization-worker")
-                  .optimizeImage(data, opts),
-              runParallel: !isMobileDevice,
-            };
-          }
-        );
-      }
+            runParallel: !isMobileDevice,
+          };
+        }
+      );
     }
   },
 };

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -2,7 +2,6 @@ import ComposerEditor, {
   addComposerUploadHandler,
   addComposerUploadMarkdownResolver,
   addComposerUploadPreProcessor,
-  addComposerUploadProcessor,
 } from "discourse/components/composer-editor";
 import {
   addButton,
@@ -94,8 +93,10 @@ import { CUSTOM_USER_SEARCH_OPTIONS } from "select-kit/components/user-chooser";
 import { downloadCalendar } from "discourse/lib/download-calendar";
 
 // If you add any methods to the API ensure you bump up the version number
-// based on Semantic Versioning 2.0.0.
-const PLUGIN_API_VERSION = "0.14.0";
+// based on Semantic Versioning 2.0.0. Please up the changelog at
+// docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
+// using the format described at https://keepachangelog.com/en/1.0.0/.
+const PLUGIN_API_VERSION = "1.0.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {
@@ -1021,44 +1022,22 @@ class PluginApi {
   }
 
   /**
-   * Registers a function to handle uploads for specified file types
+   * Registers a function to handle uploads for specified file types.
    * The normal uploading functionality will be bypassed if function returns
    * a falsy value.
-   * This only for uploads of individual files
    *
    * Example:
    *
-   * api.addComposerUploadHandler(["mp4", "mov"], (file, editor) => {
-   *   console.log("Handling upload for", file.name);
+   * api.addComposerUploadHandler(["mp4", "mov"], (files, editor) => {
+   *   files.forEach((file) => {
+   *     console.log("Handling upload for", file.name);
+   *   });
    * })
    */
   addComposerUploadHandler(extensions, method) {
     addComposerUploadHandler(extensions, method);
   }
 
-  /**
-   * Registers a pre-processor for file uploads
-   * See https://github.com/blueimp/jQuery-File-Upload/wiki/Options#file-processing-options
-   *
-   * Useful for transforming to-be uploaded files client-side
-   *
-   * Example:
-   *
-   * api.addComposerUploadProcessor({action: 'myFileTransformation'}, {
-   *    myFileTransformation(data, options) {
-   *      let p = new Promise((resolve, reject) => {
-   *        let file = data.files[data.index];
-   *        console.log(`Transforming ${file.name}`);
-   *        // do work...
-   *        resolve(data);
-   *      });
-   *      return p;
-   * });
-   */
-  addComposerUploadProcessor(queueItem, actionItem) {
-    addComposerUploadProcessor(queueItem, actionItem);
-  }
-
   /**
    * Registers a pre-processor for file uploads in the form
    * of an Uppy preprocessor plugin.

app/assets/javascripts/discourse/app/mixins/composer-upload-uppy.js

@@ -549,4 +549,35 @@ export default Mixin.create(ExtendableUploader, UppyS3Multipart, {
   showUploadSelector(toolbarEvent) {
     this.send("showUploadSelector", toolbarEvent);
   },
+
+  _bindMobileUploadButton() {
+    if (this.site.mobileView) {
+      this.mobileUploadButton = document.getElementById(
+        this.mobileFileUploaderId
+      );
+      this.mobileUploadButtonEventListener = () => {
+        document.getElementById(this.fileUploadElementId).click();
+      };
+      this.mobileUploadButton.addEventListener(
+        "click",
+        this.mobileUploadButtonEventListener,
+        false
+      );
+    }
+  },
+
+  _unbindMobileUploadButton() {
+    this.mobileUploadButton?.removeEventListener(
+      "click",
+      this.mobileUploadButtonEventListener
+    );
+  },
+
+  _filenamePlaceholder(data) {
+    return data.name.replace(/\u200B-\u200D\uFEFF]/g, "");
+  },
+
+  _resetUploadFilenamePlaceholder() {
+    this.set("uploadFilenamePlaceholder", null);
+  },
 });