adds a small button to every code block which allows you to copy the code
block content to the clipboard.
Closes T16036
Differential D25966
Add a Copy-to-Clipboard Button to code blocks mturdus on Wed, Apr 16, 12:40. Authored by Tags None Referenced Files
Details
adds a small button to every code block which allows you to copy the code Closes T16036
Diff Detail
Event Timeline
Comment Actions Comments from z1 chat: mturdus I already tried the existing one: it doesn't work with cached objects (e.g. when you press F5) as the code block is on a cached wiki page. The behavior metadata isn't initialized anymore in the cached page. bekay 15:11 bekay That is true... but you can still use this behavior. I had the same problem but have solved it with setting the data with JS. Here my code - of course, you have to adapt this: /** * @provides copy-network-path */ JX.onload(function() { // Remarkup is cached and can't hold metadata JX.Stratcom.listen( 'mousedown', ['network-path'], function(evt) { const node = evt.getNode('network-path'); const text = node.parentNode.getAttribute('title'); JX.Stratcom.addData(node, { text: text, successMessage: 'Path copied.', errorMessage: 'Copy of path failed.' }) } ); }); mousedown because it will be fired before the click of the copy behavior. This way your behavior will be slim because you use already codes core components. Comment Actions @bekay
Comment Actions That is something like e.kill() in Javelin https://we.phorge.it/source/phorge/browse/master/webroot/rsrc/externals/javelin/core/Event.js Comment Actions First of all: you should create the copy button server side. Ideally inside the remark rule for creating a code block. There you can attach the ressources too. And you can add sigils to the button. Javelin uses sigils to attach behaviors and listen to events. This comment was removed by mturdus.
Comment Actions I'm still creating the button via javascript because if I do if on server side I may break some remarkup unit tests like the ones that use src/infrastructure/markup/remarkup/__tests__/remarkup/code-block-guess-from-name.txt. Comment Actions That's not a really good reason for that - the test should be updated... At least the button element should be added from PHP, to allow styling/layout; The implementation can be added in JS (I think that's done for hovercards) You can trigger the tests using arc unit src/infrastructure/markup/remarkup/; Each test file is input ~~~~~ output-for-web ~~~~~ output-for-plain-text You should have the javelinesymbols binary available for this change.
Comment Actions @avivey is right... you should add the button where the remarkup code block is created. The remarkup tests should be edited and the markup of the button added in every txt file testing the code block! src\infrastructure\markup\remarkup\__tests__\remarkup\backticks-whitespace.txt src\infrastructure\markup\remarkup\__tests__\remarkup\block-then-list.txt src\infrastructure\markup\remarkup\__tests__\remarkup\code-block-guess-from-name.txt src\infrastructure\markup\remarkup\__tests__\remarkup\code-block-whitespace.txt src\infrastructure\markup\remarkup\__tests__\remarkup\diff.txt src\infrastructure\markup\remarkup\__tests__\remarkup\just-backticks.txt src\infrastructure\markup\remarkup\__tests__\remarkup\newline-then-block.txt src\infrastructure\markup\remarkup\__tests__\remarkup\quoted-code-block.txt src\infrastructure\markup\remarkup\__tests__\remarkup\quoted-indent-block.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block-flavored.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block-multi-flavored-comment.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block-multi-flavored-empty.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block-multi-flavored.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block-multi.txt src\infrastructure\markup\remarkup\__tests__\remarkup\tick-block.txt src\infrastructure\markup\remarkup\__tests__\remarkup\trailing-whitespace-codeblock.txt Seperation of concerns: Markup is created server side, behavior is added with JS!
|