diff --git a/.babelrc b/.babelrc index 54f4a124..25113692 100644 --- a/.babelrc +++ b/.babelrc @@ -20,7 +20,7 @@ [ "prismjs", { "languages": ["clike", "markup"], - "plugins": ["line-numbers", "autoloader", "normalize-whitespace"], + "plugins": ["line-numbers", "autoloader", "normalize-whitespace", "copy-to-clipboard", "toolbar"], "theme": "twilight", "css": true } diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index c555a5b6..05a94085 100644 --- a/client/themes/default/components/page.vue +++ b/client/themes/default/components/page.vue @@ -232,6 +232,7 @@ import { StatusIndicator } from 'vue-status-indicator' import Prism from 'prismjs' import { get } from 'vuex-pathify' import _ from 'lodash' +import ClipboardJS from 'clipboard' Prism.plugins.autoloader.languages_path = '/js/prism/' Prism.plugins.NormalizeWhitespace.setDefaults({ @@ -239,10 +240,34 @@ Prism.plugins.NormalizeWhitespace.setDefaults({ 'remove-indent': true, 'left-trim': true, 'right-trim': true, - 'break-lines': 160, 'remove-initial-line-feed': true, 'tabs-to-spaces': 2 }) +Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => { + let linkCopy = document.createElement('button') + linkCopy.textContent = 'Copy' + + const clip = new ClipboardJS(linkCopy, { + text: () => { return env.code } + }) + + clip.on('success', () => { + linkCopy.textContent = 'Copied!' + resetClipboardText() + }) + clip.on('error', () => { + linkCopy.textContent = 'Press Ctrl+C to copy' + resetClipboardText() + }) + + return linkCopy + + function resetClipboardText() { + setTimeout(() => { + linkCopy.textContent = 'Copy' + }, 5000) + } +}) export default { components: { @@ -345,7 +370,6 @@ export default { } }, breadcrumbs() { - console.info(this.locale) return [{ path: '/', name: 'Home' }].concat(_.reduce(this.path.split('/'), (result, value, key) => { result.push({ path: _.get(_.last(result), 'path', `/${this.locale}`) + `/${value}`, diff --git a/package.json b/package.json index 9e6aabf9..9133354f 100644 --- a/package.json +++ b/package.json @@ -203,6 +203,7 @@ "cache-loader": "4.1.0", "chart.js": "2.9.0", "clean-webpack-plugin": "3.0.0", + "clipboard": "2.0.4", "codemirror": "5.49.2", "copy-webpack-plugin": "5.0.4", "core-js": "3.3.4", diff --git a/yarn.lock b/yarn.lock index a439fd54..b66852fe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3622,19 +3622,19 @@ cli-width@^2.0.0: resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk= -clipboard@^1.7.1: - version "1.7.1" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b" - integrity sha1-Ng1taUbpmnof7zleQrqStem1oWs= +clipboard@2.0.4, clipboard@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d" + integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ== dependencies: good-listener "^1.2.2" select "^1.1.2" tiny-emitter "^2.0.0" -clipboard@^2.0.0: - version "2.0.4" - resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d" - integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ== +clipboard@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b" + integrity sha1-Ng1taUbpmnof7zleQrqStem1oWs= dependencies: good-listener "^1.2.2" select "^1.1.2"