teammates 🚀 - Instructor: enroll students: add a 'paste' option to the context menu

@tanhengyeow is this doable?

damithc on 19 Jul 2018

@damithc I looked at the Handsontable API briefly and it seems possible. I'll work on it first and note down any incompatibilities or issues faced.

tanhengyeow on 19 Jul 2018

@damithc I did a research on including a paste option and here are some findings.

This is an extract from the Handsontable website regarding the paste option in context menus:

Right-clicking in Handsontable to paste data is limited by browsers, for security reasons. Without these measures, different sites could use scripts to steal the data from users’ clipboards. Some companies, like Google, allow you to paste data between their applications, but it is a workaround, not a solution.

The recommended solution to copy paste in between applications as follows:

If you want to copy data from another page, web application (like Google Sheets) or MS Excel, use a keyboard shortcut instead.

Moreover, how Handsontable is currently handling copying and pasting of data through keyboard shortcuts is through a library named SheetClip. The library does not provide clipboard access through JavaScript (possibly due to security reasons mentioned above) and it mentioned how Handsontable is utilizing it:

This library was created with the intention to be used in Handsontable.

It does not provide you with clipboard access in JavaScript. That part still needs to be figured out by you. There are various ways to achieve it but none of them is perfect. Probably the most compatible with all the browsers is to keep a hidden on the page that is always focused. Then, you can fill it with value that can will be automatically copied to clipboard when the user presses CTRL+C. Analogously, pressing CTRL+V will fill the focused textarea with the value from clipboard.</p> </blockquote> <blockquote> <p>At least this is the way how Handsontable does it.</p> </blockquote> <p><strike>Given the potential security complications, would instructing the users to use keyboard shortcuts to facilitate copying and pasting data in spreadsheet interfaces be better?</strike> </p> <p><b>UPDATE</b>: Would propose a paste option in context menu and show a modal box to tell the users to use the <code>Paste (Ctrl + V)</code> keyboard shortcut instead upon click.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25320782?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="tanhengyeow picture"> <strong>tanhengyeow</strong> <span class="text-muted ml-1">on 20 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>We can say something like... 'Your Browser does not allow ... Please use Ctrl + V to paste ..'</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1673303?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="damithc picture"> <strong>damithc</strong> <span class="text-muted ml-1">on 20 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@damithc</strong> Require your input on this behavior:</p> <p><img loading="lazy" src="https://user-images.githubusercontent.com/25320782/42986516-646379f2-8c28-11e8-821d-6ba2faf7c06e.gif" alt="paste option" /></p> <p><img loading="lazy" src="https://user-images.githubusercontent.com/25320782/42986527-6e762ad4-8c28-11e8-8a4f-ee2eb7361e58.png" alt="image" /></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25320782?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="tanhengyeow picture"> <strong>tanhengyeow</strong> <span class="text-muted ml-1">on 20 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p><strong>@damithc</strong> Require your input on this behavior:</p> </blockquote> <p>Looks good!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1673303?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="damithc picture"> <strong>damithc</strong> <span class="text-muted ml-1">on 20 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@tanhengyeow</strong> I don't think it is true that browsers have no access to clipboard. See: <a rel="nofollow noopener" target="_blank" href="https://developers.google.com/web/updates/2018/03/clipboardapi">https://developers.google.com/web/updates/2018/03/clipboardapi</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13617389?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="LiHaoTan picture"> <strong>LiHaoTan</strong> <span class="text-muted ml-1">on 22 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@LiHaoTan</strong> Thanks for sharing the article, it was a good read :) Yup you're right on that. </p> <p>To summarize what I mentioned in <a rel="nofollow noopener" target="_blank" href="https://github.com/TEAMMATES/teammates/issues/8972#issuecomment">https://github.com/TEAMMATES/teammates/issues/8972#issuecomment</a>-406481827, <code>Handsontable</code> doesn't handle pasting through the <code>paste</code> option in its current context menu feature. </p> <p>This means that we have to implement the pasting workflow ourselves and one possible way is through what you linked. Also, we need to keep in mind that the implementation has to support different browsers (not just Chrome). </p> <p>Given that <code>Handsontable</code> already handles pasting through keyboard shortcuts <code>Ctrl + V</code>, thus I'm wondering if it is worth the effort implementing the pasting workflow ourselves on top of any potential security complications.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/25320782?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="tanhengyeow picture"> <strong>tanhengyeow</strong> <span class="text-muted ml-1">on 22 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>Given that Handsontable already handles pasting through keyboard shortcuts Ctrl + V, thus I'm wondering if it is worth the effort implementing the pasting workflow ourselves on top of any potential security complications.</p> </blockquote> <p>Probably no need. IIRC, even big guys (Google? I remember seeing it in several notable Web apps) simply ask the user to use keyboard shortcut instead. Still, it's good to have an accurate idea of the reasoning behind it. Thanks for the additional info <strong>@LiHaoTan</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1673303?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="damithc picture"> <strong>damithc</strong> <span class="text-muted ml-1">on 22 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I think it is unfortunate there is no easy way to implement clipboard access until very recently. And while it is true it appears that currently only Chrome supports the API, I think we can look forward to the API being supported in other browsers.</p> <p>On the other hand, practically speaking Chrome holds a very large market share and though I cannot guess the TEAMMATES demographics I would think its use is going to be pretty common. Pasting is an obvious feature to many but <code>Ctrl + V</code> isn't quite that obvious to many. Given that the work required to implement this is pretty trivial I think we should support it.</p> <p>Security complications however I don't believe is relevant because while it is true clipboard access pose security implications the new Clipboard API have considered way more on security than most of us would have.</p> <hr /> <p>All in all, clipboard access have finally started coming to browsers very recently and I think it is very important for user experience.</p> <p>Microsoft Office Online doesn't support paste across most if not all browsers.<br /> Google Docs supports paste on Chrome.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/13617389?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="LiHaoTan picture"> <strong>LiHaoTan</strong> <span class="text-muted ml-1">on 22 Jul 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Good point <strong>@LiHaoTan</strong> We can create an issue to add Paste support for Chrome, perhaps a low priority issue for new contributors to do. For the moment we can merge the simpler solution as <strong>@tanhengyeow</strong> has more urgent things to do in the next couple of weeks.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1673303?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="damithc picture"> <strong>damithc</strong> <span class="text-muted ml-1">on 23 Jul 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(342574950, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(342574950, 1);" onclick="rate(342574950, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(342574950, 2);" onclick="rate(342574950, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(342574950, 3);" onclick="rate(342574950, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(342574950, 4);" onclick="rate(342574950, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(342574950, 5);" onclick="rate(342574950, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/teammates/164788932/visibility-preview-not-shown-immediately-after-a-new">Visibility preview not shown immediately after a new question is added</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/9999077?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="JosephineKwa picture"> <strong class="pr-1" dir="ltr">JosephineKwa</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/teammates/298852168/studentfeedbackresultspage-separate-self-responses-from">StudentFeedbackResultsPage: separate self-responses from others' responses</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/12183503?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="craaaa picture"> <strong class="pr-1" dir="ltr">craaaa</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/teammates/234325992/dev-help-required-enabling-godmode-in-test-properties">Dev Help Required: enabling GodMode in test.properties</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/18088721?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="HirdayGupta picture"> <strong class="pr-1" dir="ltr">HirdayGupta</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/teammates/238377448/use-href-javascript-to-indicate-anchor-tags-without-link">Use href="javascript:;" to indicate anchor tags without link</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/7261051?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="wkurniawan07 picture"> <strong class="pr-1" dir="ltr">wkurniawan07</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/teammates/223981695/unclear-p-in-the-admin-email-compose-page">Unclear "p" in the Admin Email Compose Page</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/9781422?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="sujeet14108 picture"> <strong class="pr-1" dir="ltr">sujeet14108</strong> · <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/TEAMMATES/teammates/issues/8972" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>

Teammates: Instructor: enroll students: add a 'paste' option to the context menu

Most helpful comment

All 11 comments