diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 813cdf73..07c1caf9 100644 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -9,6 +9,7 @@ import SequenceDiagram from 'js-sequence-diagrams' import eventEmitter from 'browser/main/lib/eventEmitter' import fs from 'fs' import htmlTextHelper from 'browser/lib/htmlTextHelper' +import copy from 'copy-to-clipboard' const { remote } = require('electron') const { app } = remote @@ -46,6 +47,24 @@ code { font-family: ${codeBlockFontFamily.join(', ')}; } +.clipboardButton { + color: #939395; + fill: #939395; + border-radius: 17px; + font-size: 14px; + margin: 13px 7px; + padding-top: 5px; + border: none; + background-color: transparent; + outline: none; + height: 34px; + width: 34px; +} + +.clipboardButton:hover { + background-color: #D9D9D9; +} + h1, h2 { border: none; } @@ -261,6 +280,12 @@ export default class MarkdownPreview extends React.Component { if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text') CodeMirror.requireMode(syntax.mode, () => { let content = htmlTextHelper.decodeEntities(el.innerHTML) + const copyIcon = document.createElement('i') + copyIcon.innerHTML = '' + copyIcon.onclick = (e) => { + copy(content) + } + el.parentNode.appendChild(copyIcon) el.innerHTML = '' el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror` CodeMirror.runMode(content, syntax.mime, el, { @@ -357,4 +382,4 @@ MarkdownPreview.propTypes = { onMouseDown: PropTypes.func, className: PropTypes.string, value: PropTypes.string -} +} \ No newline at end of file diff --git a/package.json b/package.json index 60234f0d..f5416dfb 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "babel-preset-react-hmre": "^1.0.1", "babel-register": "^6.11.6", "concurrently": "^3.4.0", + "copy-to-clipboard": "^3.0.6", "css-loader": "^0.19.0", "devtron": "^1.1.0", "dom-storage": "^2.0.2",