Copy code snippet button (#183)

* copy button

* empty lines at the end

* copy button position

* copy button position
This commit is contained in:
Abrar Ahmad 2022-07-28 16:30:56 +05:00 committed by GitHub
parent e9aef34d94
commit d3cba2955d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 268 additions and 10 deletions

68
package-lock.json generated
View file

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"clipboard": "^2.0.11",
"turbolinks": "^5.2.0"
},
"devDependencies": {
@ -3548,6 +3549,16 @@
"node": ">=6"
}
},
"node_modules/clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"node_modules/cliui": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@ -4824,6 +4835,11 @@
"node": ">=0.4.0"
}
},
"node_modules/delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"node_modules/depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@ -7332,6 +7348,14 @@
"glob": "^7.1.1"
}
},
"node_modules/good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"dependencies": {
"delegate": "^3.1.2"
}
},
"node_modules/graceful-fs": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -13553,6 +13577,11 @@
"node": ">= 4"
}
},
"node_modules/select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -15188,6 +15217,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"node_modules/tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"node_modules/to-array": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
@ -20419,6 +20453,16 @@
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
"dev": true
},
"clipboard": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@ -21479,6 +21523,11 @@
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@ -23553,6 +23602,14 @@
"glob": "^7.1.1"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@ -24911,6 +24968,7 @@
},
"laravel-mix-jigsaw": {
"version": "git+ssh://git@github.com/iskrisis/laravel-mix-jigsaw.git#7c81913bc5cb6f3c8ab238c97443f059182bce7f",
"integrity": "sha512-sC8G4X8zfRMXNuZGUhxRIkkIA/EXyIkXNk3V1aVasT1paoV6rLwUXqLSaRW/3Q08ZYQFtJTJrRfssywe8s8Zvw==",
"dev": true,
"from": "laravel-mix-jigsaw@github:iskrisis/laravel-mix-jigsaw",
"requires": {
@ -28675,6 +28733,11 @@
"ajv-keywords": "^3.1.0"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA=="
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -30044,6 +30107,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-array": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",

View file

@ -23,6 +23,7 @@
"@splitbee/web": "^0.3.0"
},
"dependencies": {
"clipboard": "^2.0.11",
"turbolinks": "^5.2.0"
}
}

View file

@ -0,0 +1,11 @@
.code-block-wrapper .copyBtn {
@apply absolute right-2 top-5 outline-none text-gray-200 opacity-25;
}
.code-block-wrapper .copyBtn:hover {
@apply text-gray-500 opacity-100;
}
.code-block-wrapper .copyBtn:active {
@apply text-white outline-none opacity-100;
}

View file

@ -7,6 +7,6 @@
@import 'base';
@import 'navigation';
@import 'search';
@import 'clipboard';
@tailwind utilities;

View file

@ -0,0 +1,53 @@
import ClipboardJS from 'clipboard/dist/clipboard';
// These icons must be inline to avoid rendering bugs.
const clipboardIcon = `<svg class="fill-current h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path><path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path></svg>`;
const clipboardCopiedIcon = `<svg fill="currentColor" class="fill-current text-white h-5 w-5" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>`;
// Copy to Clipboard.
let codeBlocks = document.querySelectorAll('.markdown pre');
codeBlocks.forEach((element, key) => {
// Add wrapper to code block.
var wrapper = document.createElement('div');
['relative', 'code-block-wrapper'].forEach((value) => {
wrapper.classList.add(value);
});
element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);
// Copy to clipboard button.
let copyToClipboardBtn = document.createElement('button');
copyToClipboardBtn.innerHTML = clipboardIcon;
copyToClipboardBtn.id = `clipButton-${key}`;
['md:block', 'hidden'].forEach((value) => {
copyToClipboardBtn.classList.add(value);
});
copyToClipboardBtn.setAttribute('aria-label', 'Copy to Clipboard');
copyToClipboardBtn.setAttribute('title', 'Copy to Clipboard');
copyToClipboardBtn.classList.add('copyBtn');
wrapper.appendChild(copyToClipboardBtn);
let copyToClipboard = new ClipboardJS(`#${copyToClipboardBtn.id}`);
copyToClipboard.on('success', (element) => {
copyToClipboardBtn.innerHTML = clipboardCopiedIcon;
element.clearSelection();
setTimeout(() => {
copyToClipboardBtn.innerHTML = clipboardIcon;
}, 1500);
});
// Code Element.
let codeElement = element.querySelector('code');
codeElement.id = `clipText-${key}`;
copyToClipboardBtn.dataset.clipboardTarget = `#${codeElement.id}`;
});

View file

@ -1,4 +1,5 @@
import hljs from 'highlight.js/lib/highlight';
import './clipboard';
hljs.registerLanguage('bash', require('highlight.js/lib/languages/bash'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,7 +1,6 @@
/*!
* @overview es6-promise - a tiny implementation of Promises/A+.
* @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald)
* @license Licensed under MIT license
* See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE
* @version v4.2.8+1e68dce6
* clipboard.js v2.0.11
* https://clipboardjs.com/
*
* Licensed MIT © Zeno Rocha
*/

File diff suppressed because one or more lines are too long