How to share user-generated text (with line breaks) to social media.

Hi there Wix community,

I have made a wordle-type game for anatomy and it basically generates the emojis in string format for each guess.

I have concat this into text with linebreaks. I have then used copyToClipboard API to copy the text with line breaks when a button is pressed. But when you press the button on your iPhone (it actually makes you manually copy) and sometimes on Mac it doesn’t maintain the line breaks so what should look like this:

MUSCULOSKELORDLE
Sun May 15 2022
8/8
:white_large_square::green_square::white_large_square::white_large_square::white_large_square::white_large_square::white_large_square:
:white_large_square::green_square::white_large_square::white_large_square::white_large_square::white_large_square::yellow_square:
:white_large_square::green_square::yellow_square::white_large_square::white_large_square::green_square::yellow_square:
:white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::green_square:
:white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::yellow_square:
:white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::yellow_square:
:white_large_square::green_square::yellow_square::white_large_square::white_large_square::green_square::yellow_square:
:green_square::green_square::green_square::green_square::green_square::green_square::green_square:

looks like:

MUSCULOSKELORDLE Sun May 15 2022 8/8 :white_large_square::green_square::white_large_square::white_large_square::white_large_square::white_large_square::white_large_square: :white_large_square::green_square::white_large_square::white_large_square::white_large_square::white_large_square::yellow_square: :white_large_square::green_square::yellow_square::white_large_square::white_large_square::green_square::yellow_square: :white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::green_square: :white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::yellow_square: :white_large_square::green_square::yellow_square::yellow_square::yellow_square::white_large_square::yellow_square: :white_large_square::green_square::yellow_square::white_large_square::white_large_square::green_square::yellow_square: :green_square::green_square::green_square::green_square::green_square::green_square::green_square:

here is the code:

$w ( ‘#shareButtonMusculoskelordle’ ). onClick (()=> {
$w ( ‘#shareBoxMusculoskelordle’ ). text = ‘MUSCULOSKELORDLE \r\n’ + today . toDateString () + ‘\r\n’ + count + ‘/8’ + ‘\r\n’ + $w ( ‘#shareLine1’ ). value + ‘\r\n’ + $w ( ‘#shareLine2’ ). value + ‘\r\n’ + $w ( ‘#shareLine3’ ). value + ‘\r\n’ + $w ( ‘#shareLine4’ ). value + ‘\r\n’ + $w ( ‘#shareLine5’ ). value + ‘\r\n’ + $w ( ‘#shareLine6’ ). value + ‘\r\n’ + $w ( ‘#shareLine7’ ). value + ‘\r\n’ + $w ( ‘#shareLine8’ ). value

**let**  shareMessage  =  $w ( '#shareBoxMusculoskelordle' ). text 

 wixWindow . copyToClipboard ( shareMessage ) 
. then ( () => { 
  // handle case where text was copied 
  $w ( '#shareButtonMusculoskelordle' ). label  =  'copied to clipboard!' 

} ) 
. **catch** ( ( err ) => { 
  // handle case where an error occurred 
} ); 

})

I am wondering if people know how to create a share button to fix this while still using copyToClipboard, another workaround or simply a share button for social media with dynamic text input?

Thanks

Hi @beau77bro ,

It is a known “problem” in the macOS with Wix’s copyToClipboard() function.

You can consider to use wix-window module to postMessage() to parent, then your custom code (under Wix dashboard) receive the data and run copyToClipboard() without Wix’s module.

This might override the limit of Wix, so custom code (not inside Velo) should solve the issue.

Certified Code

@certified-code I’m quite new to velo and to coding. I’m not sure how to implement the javascript code into Velo or how to implement the postMessage from parent function that you mentioned.

was there anyway you could demonstrate? Apologies, hopefully i will get more equipped soon

thanks

I have added all the code from the link you shared to the custom code panel in advanced settings as ‘copyToClipboardBypass’. I have not changed it at all.

I can’t work out how to properly share to parent from the editor console.

I’m trying to use postMessage, but then how does the javascript code take the data and process it? How do I reference it to properly pass it to the js and then how does it pass that info back/execute the process?

This is what I have:

$w ( ‘#shareButtonMusculoskelordle’ ). onClick (()=> {
$w ( ‘#shareBoxMusculoskelordle’ ). text = ‘MUSCULOSKELORDLE \r\n’ + today . toDateString () + ‘\r\n’ + count + ‘/10’ + ‘\r\n’ + $w ( ‘#shareLine1’ ). value + ‘\r\n’ + $w ( ‘#shareLine2’ ). value + ‘\r\n’ + $w ( ‘#shareLine3’ ). value + ‘\r\n’ + $w ( ‘#shareLine4’ ). value + ‘\r\n’ + $w ( ‘#shareLine5’ ). value + ‘\r\n’ + $w ( ‘#shareLine6’ ). value + ‘\r\n’ + $w ( ‘#shareLine7’ ). value + ‘\r\n’ + $w ( ‘#shareLine8’ ). value + ‘\r\n’ + $w ( ‘#shareLine9’ ). value + ‘\r\n’ + $w ( ‘#shareLine10’ ). value

**let**  shareMessage  =  $w ( '#shareBoxMusculoskelordle' ). text 

wixWindow . postMessage ( shareMessage ,  'copyToClipboardbypass' ) 

})

Any and all help would be appreciated.

(I understand this is not covered under wix support but if you could direct me to who else can help me, paid or unpaid that would be great)

It’s an interesting idea, you must have spent a lot of time on it. I have always been interested in artificial intelligence, neural networks, and different algorithms. How can they do the tasks we set them to do, and how do they define them if it’s just a line of code with 0 and 1. How does the quiz solver answer me, for example, if I just ask a question? It’s complicated for me, but that’s what makes it interesting.