Extend copy to clipborad function to support customized mime types (#8912)

* Extend copy to clipborad function to support customized mime types

* Remove function default parameter syntax

* Add plainText option

* Use plainText name

* Set "text/plain" data only when it exists

* Docs update

* Docs update

core/modules/startup/rootwidget.js

@@ -77,8 +77,9 @@ exports.startup = function() {
 	$tw.rootWidget.addEventListener("tm-copy-to-clipboard",function(event) {
 		$tw.utils.copyToClipboard(event.param,{
 			successNotification: event.paramObject && event.paramObject.successNotification,
-			failureNotification: event.paramObject && event.paramObject.failureNotification
-		});
+			failureNotification: event.paramObject && event.paramObject.failureNotification,
+			plainText: event.paramObject && event.paramObject.plainText
+		},event.paramObject.type);
 	});
 	// Install the tm-focus-selector message
 	$tw.rootWidget.addEventListener("tm-focus-selector",function(event) {

core/modules/utils/dom/dom.js

@@ -268,9 +268,10 @@ exports.copyStyles = function(srcDomNode,dstDomNode) {
 /*
 Copy plain text to the clipboard on browsers that support it
 */
-exports.copyToClipboard = function(text,options) {
-	options = options || {};
-	text = text || "";
+exports.copyToClipboard = function(text,options,type) {
+	var text = text || "";
+	var options = options || {};
+	var type = type || "text/plain";
 	var textArea = document.createElement("textarea");
 	textArea.style.position = "fixed";
 	textArea.style.top = 0;
@@ -283,10 +284,16 @@ exports.copyToClipboard = function(text,options) {
 	textArea.style.outline = "none";
 	textArea.style.boxShadow = "none";
 	textArea.style.background = "transparent";
-	textArea.value = text;
 	document.body.appendChild(textArea);
 	textArea.select();
 	textArea.setSelectionRange(0,text.length);
+	textArea.addEventListener("copy",function(event) {
+		event.preventDefault();
+		if (options.plainText) {
+			event.clipboardData.setData("text/plain",options.plainText);
+		}
+		event.clipboardData.setData(type,text);
+	});
 	var succeeded = false;
 	try {
 		succeeded = document.execCommand("copy");

core/wiki/macros/copy-to-clipboard.tid

@@ -3,9 +3,11 @@ tags: $:/tags/Macro
 
 \whitespace trim
 
-\procedure copy-to-clipboard(src,class:"tc-btn-invisible",style)
-<$button message="tm-copy-to-clipboard"
-	param=<<src>>
+\procedure copy-to-clipboard(src,class:"tc-btn-invisible",style,type:"text/plain",plain)
+\procedure copy-to-clipboard-actions()
+<$action-sendmessage $message="tm-copy-to-clipboard" $param=<<src>> type=<<type>> plainText=<<plain>>/>
+\end copy-to-clipboard-actions
+<$button actions=<<copy-to-clipboard-actions>>
 	class=<<class>>
 	style=<<style>>
 	tooltip={{$:/language/Buttons/CopyToClipboard/Hint}}
@@ -15,12 +17,12 @@ tags: $:/tags/Macro
 		<$text text={{$:/language/Buttons/CopyToClipboard/Caption}}/>
 	</span>
 </$button>
-\end
+\end copy-to-clipboard
 
-\procedure copy-to-clipboard-above-right(src,class:"tc-btn-invisible",style)
-<div style="position: relative;">
-	<div style="position: absolute; bottom: 0; right: 0;">
-		<$macrocall $name="copy-to-clipboard" src=<<src>> class=<<class>> style=<<style>>/>
+\procedure copy-to-clipboard-above-right(src,class:"tc-btn-invisible",style,type:"text/plain")
+<div style.position="relative">
+	<div style.position="absolute" style.bottom="0" style.right="0">
+		<$transclude $variable="copy-to-clipboard" src=<<src>> class=<<class>> style=<<style>> type=<<type>> plain=<<plain>>/>
 	</div>
 </div>
 \end

editions/tw5.com/tiddlers/macros/copy-to-clipboard Macro.tid

@@ -1,6 +1,6 @@
 caption: copy-to-clipboard
 created: 20171216104754967
-modified: 20171216104941967
+modified: 20250127133558352
 tags: Macros [[Core Macros]]
 title: copy-to-clipboard Macro
 type: text/vnd.tiddlywiki
@@ -15,5 +15,9 @@ The <<.def copy-to-clipboard>> [[macro|Macros]] displays a button that copies sp
 : Optional CSS classes to be assigned to the button (defaults to `tc-btn-invisible`)
 ;style
 : Optional CSS styles to be assigned to the button
+;type
+: <<.from-version "5.3.7">> MIME type of the text to be copied, defaults to `text/plain`
+;plain
+: <<.from-version "5.3.7">> Additional plain text to be copied when `type` attribute isn't `text/plain`
 
 <<.macro-examples "copy-to-clipboard">>

editions/tw5.com/tiddlers/macros/examples/copy-to-clipboard Macro (Examples).tid

@@ -1,8 +1,14 @@
 created: 20171216104946277
-modified: 20171216105109641
+modified: 20250127134344834
 tags: [[copy-to-clipboard Macro]] [[Macro Examples]]
 title: copy-to-clipboard Macro (Examples)
 type: text/vnd.tiddlywiki
 
 <$macrocall $name=".example" n="1" eg="""<<copy-to-clipboard "Mary had a little lamb">>"""/>
-<$macrocall $name=".example" n="2" eg="""<$macrocall $name="copy-to-clipboard" src={{$:/SiteTitle}}/>"""/>
+<$macrocall $name=".example" n="2" eg="""<$transclude $variable="copy-to-clipboard" src={{$:/SiteTitle}}/>"""/>
+
+In the following examples, press <kbd>ctrl-V</kbd> / <kbd>cmd-V</kbd> in tiddlywiki after copying to see its effects.
+
+<$macrocall $name=".example" n="3" eg="""<<copy-to-clipboard src:"<em>Test</em>" type:"text/html" plain:"Test">> """/>
+<$macrocall $name=".example" n="4" eg="""<<copy-to-clipboard src:"The ''quick'' //brown// __fox__ jumps over a `lazy` @@dog@@." type:"text/vnd.tiddlywiki" plain:"The quick brown box jumps over a lazy dog.">> """/>
+<$macrocall $name=".example" n="5" eg="""<$transclude $variable="copy-to-clipboard" src=<<jsontiddlers filter:"[tag[Concepts]]">> type="text/vnd.tiddler"/>"""/>

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-copy-to-clipboard.tid

@@ -1,6 +1,6 @@
 caption: tm-copy-to-clipboard
 created: 20171215150056004
-modified: 20240523174013095
+modified: 20250127134445040
 tags: Messages
 title: WidgetMessage: tm-copy-to-clipboard
 type: text/vnd.tiddlywiki
@@ -13,6 +13,8 @@ It requires the following properties on the `event` object:
 |param |Text to be copied to the clipboard |
 |successNotification |<<.from-version "5.3.4">> Optional title of tiddler containing notification to be used if the operation succeeds |
 |failureNotification |<<.from-version "5.3.4">> Optional title of tiddler containing notification to be used if the operation fails |
+|type |<<.from-version "5.3.7">> MIME type of the text to be copied, defaults to `text/plain` |
+|plainText |<<.from-version "5.3.7">> Additional plain text to be copied when `type` attribute isn't `text/plain` |
 
 This message is usually generated with the ButtonWidget. It is handled by the TiddlyWiki core.