summaryrefslogtreecommitdiffstats
path: root/packages/gitbook-plugin-copy-code
diff options
context:
space:
mode:
Diffstat (limited to 'packages/gitbook-plugin-copy-code')
-rw-r--r--packages/gitbook-plugin-copy-code/.gitignore31
-rw-r--r--packages/gitbook-plugin-copy-code/.npmignore2
-rw-r--r--packages/gitbook-plugin-copy-code/_assets/website/button.css27
-rw-r--r--packages/gitbook-plugin-copy-code/index.js10
-rw-r--r--packages/gitbook-plugin-copy-code/package.json29
-rw-r--r--packages/gitbook-plugin-copy-code/src/index.js82
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' }));
+ }
+});