HFP-2072 Improve copy-paste API behavior

js/h5p.js

@@ -2051,17 +2051,49 @@ H5P.createTitle = function (rawTitle, maxLength) {
    * @returns {Object} Ready for the clipboard
    */
   H5P.ClipboardItem = function (parameters, genericProperty, specificKey) {
-    this.specific = parameters;
+    var self = this;
 
-    if (genericProperty && specificKey) {
-      this.from = specificKey;
-      if (parameters[genericProperty]) {
-        this.generic = genericProperty;
+    /**
+     * Set relative dimensions when params contains a file with a width and a height.
+     * Very useful to be compatible with wysiwyg editors.
+     *
+     * @private
+     */
+    var setDimensionsFromFile = function () {
+      if (!self.generic) {
+        return;
       }
+      var params = self.specific[self.generic];
+      if (!params.params.file || !params.params.file.width || !params.params.file.height) {
+        return;
+      }
+
+      self.width = 20; // %
+      self.height = (params.params.file.height / params.params.file.width) * self.width;
+    }
+
+    if (!genericProperty) {
+      genericProperty = 'action';
+      parameters = {
+        action: parameters
+      };
+    }
+
+    self.specific = parameters;
+
+    if (genericProperty && parameters[genericProperty]) {
+      self.generic = genericProperty;
+    }
+    if (specificKey) {
+      self.from = specificKey;
     }
 
     if (window.H5PEditor && H5PEditor.contentId) {
-      this.contentId = H5PEditor.contentId;
+      self.contentId = H5PEditor.contentId;
+    }
+
+    if (!self.specific.width && !self.specific.height) {
+      setDimensionsFromFile();
     }
   };
 
@@ -2077,16 +2109,40 @@ H5P.createTitle = function (rawTitle, maxLength) {
 
     localStorage.setItem('h5pClipboard', JSON.stringify(clipboardItem));
 
+    // Clear cache
+    parsedClipboard = null;
+
     // Trigger an event so all 'Paste' buttons may be enabled.
     H5P.externalDispatcher.trigger('datainclipboard', {reset: false});
   };
 
   /**
-   * Get item from the H5P Clipboard.
+   * This is a cache for pasted data to prevent parsing multiple times.
+   * @type {Object}
+   */
+  var parsedClipboard = null;
+
+  /**
+   * Retrieve parsed clipboard data.
    *
    * @return {Object}
    */
   H5P.getClipboard = function () {
+    if (!parsedClipboard) {
+      parsedClipboard = parseClipboard();
+    }
+
+    return parsedClipboard;
+  }
+
+  /**
+   * Get item from the H5P Clipboard.
+   *
+   * @private
+   * @param {boolean} [skipUpdateFileUrls]
+   * @return {Object}
+   */
+  var parseClipboard = function () {
     var clipboardData = localStorage.getItem('h5pClipboard');
     if (!clipboardData) {
       return;
@@ -2102,7 +2158,7 @@ H5P.createTitle = function (rawTitle, maxLength) {
     }
 
     // Update file URLs
-    H5P.updateFileUrls(clipboardData.specific, function (path) {
+    updateFileUrls(clipboardData.specific, function (path) {
       var isTmpFile = (path.substr(-4, 4) === '#tmp');
       if (!isTmpFile && clipboardData.contentId) {
         // Comes from existing content
@@ -2119,14 +2175,11 @@ H5P.createTitle = function (rawTitle, maxLength) {
       return path; // Will automatically be looked for in tmp folder
     });
 
-    if (clipboardData.from === undefined) {
-      clipboardData.generic = clipboardData.specific;
-    }
-    else if (clipboardData.generic) {
-      clipboardData.generic = clipboardData.specific[clipboardData.generic];
-    }
 
     if (clipboardData.generic) {
+      // Use reference instead of key
+      clipboardData.generic = clipboardData.specific[clipboardData.generic];
+
       // Avoid multiple content with same ID
       delete clipboardData.generic.subContentId;
     }
@@ -2137,10 +2190,11 @@ H5P.createTitle = function (rawTitle, maxLength) {
   /**
    * Update file URLs. Useful when copying content.
    *
+   * @private
    * @param {object} params Reference
    * @param {function} handler Modifies the path to work when pasted
    */
-  H5P.updateFileUrls = function (params, handler) {
+  var updateFileUrls = function (params, handler) {
     for (var prop in params) {
       if (params.hasOwnProperty(prop) && params[prop] instanceof Object) {
         var obj = params[prop];
@@ -2148,7 +2202,7 @@ H5P.createTitle = function (rawTitle, maxLength) {
           obj.path = handler(obj.path);
         }
         else {
-          H5P.updateFileUrls(obj, handler);
+          updateFileUrls(obj, handler);
         }
       }
     }
@@ -2160,6 +2214,10 @@ H5P.createTitle = function (rawTitle, maxLength) {
     window.addEventListener('storage', function (event) {
       // Pick up clipboard changes from other tabs
       if (event.key === 'h5pClipboard') {
+        // Clear cache
+        parsedClipboard = null;
+
+        // Trigger an event so all 'Paste' buttons may be enabled.
         H5P.externalDispatcher.trigger('datainclipboard', {reset: event.newValue === null});
       }
     });