Browse Source

fix: disable code block line break + copy button

NGPixel 5 years ago
parent
commit
a72a7b1cdf
4 changed files with 36 additions and 11 deletions
  1. 1 1
      .babelrc
  2. 26 2
      client/themes/default/components/page.vue
  3. 1 0
      package.json
  4. 8 8
      yarn.lock

+ 1 - 1
.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
       }

+ 26 - 2
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}`,

+ 1 - 0
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",

+ 8 - 8
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"