Correct handling of pasting tiddlers (#7215)

* First Pass Implementation

* Fix Check

* Fix Style

* Update drag-drop interop example to support copy tiddlers to clipboard

---------

Co-authored-by: jeremy@jermolene.com <jeremy@jermolene.com>

core/modules/utils/dom/dragndrop.js

@@ -159,7 +159,7 @@ exports.importDataTransfer = function(dataTransfer,fallbackTitle,callback) {
 		if(!$tw.browser.isIE || importDataTypes[t].IECompatible) {
 			// Get the data
 			var dataType = importDataTypes[t];
-				var data = dataTransfer.getData(dataType.type);
+			var data = dataTransfer.getData(dataType.type);
 			// Import the tiddlers in the data
 			if(data !== "" && data !== null) {
 				if($tw.log.IMPORT) {
@@ -173,6 +173,36 @@ exports.importDataTransfer = function(dataTransfer,fallbackTitle,callback) {
 	}
 };
 
+exports.importPaste = function(item,fallbackTitle,callback) {
+	// Try each provided data type in turn
+	for(var t=0; t<importDataTypes.length; t++) {
+		if(item.type === importDataTypes[t].type) {
+			// Get the data
+			var dataType = importDataTypes[t];
+
+			item.getAsString(function(data){
+				if($tw.log.IMPORT) {
+					console.log("Importing data type '" + dataType.type + "', data: '" + data + "'")
+				}
+				var tiddlerFields = dataType.toTiddlerFieldsArray(data,fallbackTitle);
+				callback(tiddlerFields);
+			});
+			return;
+		}
+	}
+};
+
+exports.itemHasValidDataType = function(item) {
+	for(var t=0; t<importDataTypes.length; t++) {
+		if(!$tw.browser.isIE || importDataTypes[t].IECompatible) {
+			if(item.type === importDataTypes[t].type) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
 var importDataTypes = [
 	{type: "text/vnd.tiddler", IECompatible: false, toTiddlerFieldsArray: function(data,fallbackTitle) {
 		return parseJSONTiddlers(data,fallbackTitle);
@@ -205,7 +235,13 @@ var importDataTypes = [
 		return [{title: fallbackTitle, text: data}];
 	}},
 	{type: "text/uri-list", IECompatible: false, toTiddlerFieldsArray: function(data,fallbackTitle) {
-		return [{title: fallbackTitle, text: data}];
+		// Check for tiddler data URI
+		var match = $tw.utils.decodeURIComponentSafe(data).match(/^data\:text\/vnd\.tiddler,(.*)/i);
+		if(match) {
+			return parseJSONTiddlers(match[1],fallbackTitle);
+		} else {
+			return [{title: fallbackTitle, text: data}]; // As URL string
+		}
 	}}
 ];
 

core/modules/widgets/dropzone.js

@@ -271,6 +271,20 @@ DropZoneWidget.prototype.handlePasteEvent  = function(event) {
 					callback: readFileCallback,
 					deserializer: this.dropzoneDeserializer
 				});
+			} else if(item.kind === "string" && !["text/html", "text/plain", "Text"].includes(item.type) && $tw.utils.itemHasValidDataType(item)) {
+				// Try to import the various data types we understand
+				var fallbackTitle = self.wiki.generateNewTitle("Untitled");
+				//Use the deserializer specified if any
+				if(this.dropzoneDeserializer) {
+					item.getAsString(function(str){
+						var tiddlerFields = self.wiki.deserializeTiddlers(null,str,{title: fallbackTitle},{deserializer:self.dropzoneDeserializer});
+						if(tiddlerFields && tiddlerFields.length) {
+							readFileCallback(tiddlerFields);
+						}
+					});
+				} else {
+					$tw.utils.importPaste(item,fallbackTitle,readFileCallback);
+				}
 			} else if(item.kind === "string") {
 				// Create tiddlers from string items
 				var tiddlerFields;

editions/dev/tiddlers/new/dragndropinterop.html

@@ -15,6 +15,10 @@
     <div id="draggable" draggable="true">
         Drag me to a TiddlyWiki window
     </div>
+    <button id="copy">
+        Click to copy two tiddlers to the clipboard
+    </button>
+
 </body>
 <script>
 
@@ -30,6 +34,18 @@
         event.stopPropagation();
         return false;
     });
-    
+
+    document.getElementById("copy").addEventListener("click",function(event) {
+
+    function listener(event) {
+        event.clipboardData.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(JSON.stringify(tiddlerData)));
+        event.preventDefault();
+    }
+
+    document.addEventListener("copy",listener);
+    document.execCommand("copy");
+    document.removeEventListener("copy",listener);
+
+    });
 </script>
 </html>