diff options
Diffstat (limited to 'packages/gitbook-plugin-copy-code')
-rw-r--r-- | packages/gitbook-plugin-copy-code/.gitignore | 31 | ||||
-rw-r--r-- | packages/gitbook-plugin-copy-code/.npmignore | 2 | ||||
-rw-r--r-- | packages/gitbook-plugin-copy-code/_assets/website/button.css | 27 | ||||
-rw-r--r-- | packages/gitbook-plugin-copy-code/index.js | 10 | ||||
-rw-r--r-- | packages/gitbook-plugin-copy-code/package.json | 29 | ||||
-rw-r--r-- | packages/gitbook-plugin-copy-code/src/index.js | 82 |
6 files changed, 181 insertions, 0 deletions
diff --git a/packages/gitbook-plugin-copy-code/.gitignore b/packages/gitbook-plugin-copy-code/.gitignore new file mode 100644 index 0000000..ef47881 --- /dev/null +++ b/packages/gitbook-plugin-copy-code/.gitignore @@ -0,0 +1,31 @@ +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directory +# Deployed apps should consider commenting this line out: +# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git +node_modules + +# vim swapfile +*.swp + +# Plugin assets +_assets/plugin.js diff --git a/packages/gitbook-plugin-copy-code/.npmignore b/packages/gitbook-plugin-copy-code/.npmignore new file mode 100644 index 0000000..a0e53cf --- /dev/null +++ b/packages/gitbook-plugin-copy-code/.npmignore @@ -0,0 +1,2 @@ +# Publish assets on NPM +!_assets/plugin.js diff --git a/packages/gitbook-plugin-copy-code/_assets/website/button.css b/packages/gitbook-plugin-copy-code/_assets/website/button.css new file mode 100644 index 0000000..2fd034e --- /dev/null +++ b/packages/gitbook-plugin-copy-code/_assets/website/button.css @@ -0,0 +1,27 @@ +.CodeBlockWithCopy-Container { + position: relative; +} + +.CodeBlockWithCopy-Button { + position: absolute; + top: 5px; + right: 5px; + padding: 3px 6px; + margin: 0px; + text-transform: uppercase; + border-radius: 3px; + line-height: 1em; + font-size: 12px; + border: 1px solid rgba(0,0,0, 0.1); + color: rgba(0,0,0, 0.4); + cursor: pointer; + display: none; +} + +.CodeBlockWithCopy-Container:hover .CodeBlockWithCopy-Button { + display: block; +} + +.CodeBlockWithCopy-Button:hover { + border-color: rgba(0,0,0, 0.2); +} diff --git a/packages/gitbook-plugin-copy-code/index.js b/packages/gitbook-plugin-copy-code/index.js new file mode 100644 index 0000000..e542ae8 --- /dev/null +++ b/packages/gitbook-plugin-copy-code/index.js @@ -0,0 +1,10 @@ + +module.exports = { + blocks: { + + }, + + hooks: { + + } +}; diff --git a/packages/gitbook-plugin-copy-code/package.json b/packages/gitbook-plugin-copy-code/package.json new file mode 100644 index 0000000..b25ca43 --- /dev/null +++ b/packages/gitbook-plugin-copy-code/package.json @@ -0,0 +1,29 @@ +{ + "name": "gitbook-plugin-copy-code", + "description": "Button to copy code blocks", + "main": "index.js", + "browser": "./_assets/plugin.js", + "version": "4.0.0", + "dependencies": { + "copy-to-clipboard": "^3.0.5", + "gitbook-core": "4.0.0" + }, + "devDependencies": { + "gitbook-plugin": "4.0.0" + }, + "engines": { + "gitbook": ">=3.0.0" + }, + "scripts": { + "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js", + "prepublish": "npm run build-js" + }, + "homepage": "https://github.com/GitbookIO/gitbook", + "repository": { + "type": "git", + "url": "https://github.com/GitbookIO/gitbook.git" + }, + "bugs": { + "url": "https://github.com/GitbookIO/gitbook/issues" + } +} diff --git a/packages/gitbook-plugin-copy-code/src/index.js b/packages/gitbook-plugin-copy-code/src/index.js new file mode 100644 index 0000000..73d46c6 --- /dev/null +++ b/packages/gitbook-plugin-copy-code/src/index.js @@ -0,0 +1,82 @@ +const copy = require('copy-to-clipboard'); +const GitBook = require('gitbook-core'); +const { React } = GitBook; + +const COPIED_TIMEOUT = 1000; + +/** + * Get children as text + * @param {React.Children} children + * @return {String} + */ +function getChildrenToText(children) { + return React.Children.map(children, child => { + if (typeof child === 'string') { + return child; + } else { + return child.props.children ? + getChildrenToText(child.props.children) : ''; + } + }).join(''); +} + +let CodeBlockWithCopy = React.createClass({ + propTypes: { + children: React.PropTypes.node, + i18n: GitBook.PropTypes.I18n + }, + + getInitialState() { + return { + copied: false + }; + }, + + onClick(event) { + const { children } = this.props; + + event.preventDefault(); + event.stopPropagation(); + + const text = getChildrenToText(children); + copy(text); + + this.setState({ copied: true }, () => { + this.timeout = setTimeout(() => { + this.setState({ + copied: false + }); + }, COPIED_TIMEOUT); + }); + }, + + componentWillUnmount() { + if (this.timeout) { + clearTimeout(this.timeout); + } + }, + + render() { + const { children, i18n } = this.props; + const { copied } = this.state; + + return ( + <div className="CodeBlockWithCopy-Container"> + <GitBook.ImportCSS href="gitbook/copy-code/button.css" /> + + {children} + <span className="CodeBlockWithCopy-Button" onClick={this.onClick}> + {copied ? i18n.t('COPIED') : i18n.t('COPY')} + </span> + </div> + ); + } +}); + +CodeBlockWithCopy = GitBook.connect(CodeBlockWithCopy); + +module.exports = GitBook.createPlugin({ + activate: (dispatch, getState, { Components }) => { + dispatch(Components.registerComponent(CodeBlockWithCopy, { role: 'html:pre' })); + } +}); |