feat: add code-copy plugin

packages/saber-plugin-code-copy/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) EGOIST <[email protected]> (https://github.com/egoist)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

packages/saber-plugin-code-copy/README.md

@@ -0,0 +1,44 @@
+# saber-plugin-code-copy
+
+Copy code to clipboard.
+
+## Install
+
+```bash
+yarn add saber-plugin-code-copy
+```
+
+## Usage
+
+In your `saber-config.yml`:
+
+```yml
+plugins:
+  - resolve: saber-plugin-code-copy
+```
+
+## Options
+
+### statusAttribute
+
+- Type: `string`
+- Default: `title`
+
+By default the `title` attribute of the button is set to `Copy`, when code is copied we update it to `Copied`, you can specify another attribute name if you want, e.g. `aria-label`.
+
+### buttonStyle
+
+- Type: `object`
+- Default: `undefined`
+
+Assign custom style to the _Copy_ button, e.g.:
+
+```js
+{
+  backgroundColor: 'red'
+}
+```
+
+## License
+
+MIT.

packages/saber-plugin-code-copy/lib/index.js

@@ -0,0 +1,16 @@
+const path = require('path')
+
+const ID = 'copy-code'
+
+exports.name = ID
+
+exports.apply = (api, options) => {
+  api.browserApi.add(path.join(__dirname, 'saber-browser.js'))
+  api.hooks.chainWebpack.tap(ID, config => {
+    config.plugin('constants').tap(([constants]) => [
+      Object.assign(constants, {
+        __CODE_COPY_OPTIONS__: JSON.stringify(options)
+      })
+    ])
+  })
+}

packages/saber-plugin-code-copy/lib/saber-browser.js

@@ -0,0 +1,70 @@
+/* eslint-env browser */
+/* globals __CODE_COPY_OPTIONS__ */
+
+export default ({ router }) => {
+  if (process.browser) {
+    const copy = require('modern-copy').default
+
+    const forEach = (arr, fn) => Array.prototype.forEach.call(arr, fn)
+    const { statusAttribute = 'title', buttonStyle } = __CODE_COPY_OPTIONS__
+
+    let isStyleInjected = false
+    const injectStyle = () => {
+      if (isStyleInjected) {
+        return
+      }
+
+      const style = document.createElement('style')
+      style.id = 'saber-plugin-code-copy-style'
+      style.append(
+        document.createTextNode(`
+      .saber-highlight:hover:before {display: none !important;}
+      .saber-highlight:hover .saber-plugin-code-copy-button {
+        opacity: 1;
+      }
+      .saber-plugin-code-copy-button {
+        opacity: 0;
+        position: absolute;
+        right: 8px;
+        top: 8px;
+        z-index: 2000;
+        background: #f0f0f0;
+        color: inherit;
+        padding: 3px 6px;
+        border-radius: 4px;
+        cursor: pointer;
+        border: 1px solid #ccc;
+        transition: opacity .3s ease-in-out;
+      }
+      `)
+      )
+      document.head.append(style)
+      isStyleInjected = true
+    }
+
+    router.afterEach(() => {
+      setTimeout(() => {
+        forEach(document.querySelectorAll('.saber-highlight'), el => {
+          if (el.dataset.hasCopy) return
+          el.dataset.hasCopy = true
+          const copyButton = document.createElement('button')
+          copyButton.className = 'saber-plugin-code-copy-button'
+          copyButton.innerHTML = `<svg height="16" class="codecopy-btn-icon" viewBox="0 0 14 16" version="1.1" width="16" aria-hidden="true">
+          <path fill-rule="evenodd" d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path>
+        </svg>`
+          copyButton.setAttribute(statusAttribute, 'Copy')
+          copyButton.addEventListener('click', () => {
+            copy(el.querySelector('.saber-highlight-code').textContent)
+            copyButton.setAttribute(statusAttribute, 'Copied')
+          })
+          copyButton.addEventListener('mouseleave', () => {
+            copyButton.setAttribute(statusAttribute, 'Copy')
+          })
+          Object.assign(copyButton.style, buttonStyle)
+          injectStyle()
+          el.append(copyButton)
+        })
+      }, 100)
+    })
+  }
+}

packages/saber-plugin-code-copy/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "saber-plugin-copy-code",
+  "version": "0.1.0",
+  "description": "Allow to copy code into clipboard",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "xo": false,
+  "peerDependencies": {
+    "saber": ">=0.7.0"
+  },
+  "dependencies": {
+    "modern-copy": "^1.0.3"
+  }
+}

website/saber-config.js

@@ -99,6 +99,14 @@ module.exports = {
     },
     {
       resolve: '../packages/saber-plugin-image'
+    },
+    {
+      resolve: '../packages/saber-plugin-code-copy',
+      options: {
+        buttonStyle: {
+          border: 'none'
+        }
+      }
     }
   ]
 }

yarn.lock

@@ -8734,6 +8734,11 @@ mkdirp@*, [email protected], mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+modern-copy@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/modern-copy/-/modern-copy-1.0.3.tgz#1b0a3e8548316cae95e76f9f75cacb561d193b8e"
+  integrity sha512-2JGQcw7PFY74QsVupT1xzR09w7JGWjO9/XxFr42gCVuqPdeSmtRUlfcJnZTTPyRi0dbIXJ5Gotp1Pij4llMNWQ==
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"