Adding "Mode" to the text in the Share Modal

[kanishawilliams]

p5.js version

Web Editor version 1.11.8

What is your operating system?

MacOS

Web browser and version

Chrome 137.0.7151.120 & Firefox 141.0 (aarch64)

Actual Behavior

We (@team-epk & @kanishawilliams) were alerted to this issue during the Hands-On Activity included as part of the Open Source Software Contributor workshop hosted by Rachel Lim. The issue was documented here. We suggest updating the text in the Share Modal to be more clear for users in terms of share options available for their sketch. We think this provides more clarity & context for the output the user selects. Below, please find the current text followed by "becomes" and our suggested edit:

Suggested Changes

• "Embed" becomes "Embed sketch"
• "Fullscreen" becomes "Share sketch as view-only"
• "Edit" becomes "Share sketch and allow editing"

Expected Behavior

Once the changes are made, the labels in the Share Modal are more beginner-friendly.

Steps to reproduce

1. Open Share Modal
2. Review sharing options

[raclim]

Noting as assigned to both @kanishawilliams and @team-epk!

[team-epk]

At the end of yesterday's session, @kanishawilliams determined that the elements that would need to be tweaked live in client/modules/IDE/components/ShareModal.jsx. Upon looking in there I see line 23 label={t('ShareModal.Embed')}, line 33 label={t('ShareModal.Fullscreen')}, and line 38 label={t('ShareModal.Edit')}.

The "I can write HTML by hand" part of me thinks it could just be a matter of changing the name of those labels, but the "I've never done anything with React" part of me suspects it could be more complicated than that.

That being said, I'd like to see this all the way through, if possible. That may require me to shadow someone if the actual fix is a React-heavy one (assuming this change meets with everyone's approval, which is also a big assumption!).

[kanishawilliams]

Ditto-ing @team-epk -- might need some help making sure all instances are updated.

[freaug]

Hi @kanishawilliams and @team-epk, this is Eddie from the webinar yesterday.

I did some digging, and it looks like for each of the label={t('ShareModal.####')}, the HTML text is being referenced from a translations JSON file specific to the selected language. The t() is part of the react-i18next package

The translation files can be found at public>translations>locales, and then you would select the specific language you wanted to edit

If you wanted to update the US English version, then you would navigate to public>translations>locales>en-US>translations.json

Then, at line 477 in the en-US JSON file, you could update the text for "Embed", "Fullscreen", and "Edit" to the new text.

Here is an example:

"ShareModal": { "Embed": "Embed sketch", "Present": "Present", "Fullscreen": "Share sketch as view-only", "Edit": "Share sketch and allow editing"}

Then the ShareModal.jsx file would reference those changes and display the new text in the share Modal.

I tested locally, and it seems to work, but I think you would also need to go in and change all of the other translation files to update that language's text.

Hopefully this is helpful!

[raclim]

Thanks so much @kanishawilliams @team-epk @freaug for the quick dive into this!

Yes, the file to update is translations/locales/en-US/translations.json!

[team-epk]

Thanks for the help so far everyone! I had a chance (finally) to play with this some more.

• I made a "feature" branch in my local repository.
• I made edits to the translations.json file
• I started my local development version of the site
• I added some stuff to a sketch so I can save & share it
• I cannot save, therefore, I cannot share. Sadness swept over the land. (If the land is me.)