Copy clipboard button for markdown code blocks #603
Conversation
| @@ -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' | |||
There was a problem hiding this comment.
You have to use clipboard, built in electron (https://github.com/electron/electron/blob/master/docs/api/clipboard.md), rather than another package.
| @@ -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 = '<button class="clipboardButton"><svg width="14" height="14" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>' | |||
There was a problem hiding this comment.
To the begin with, we have to decide its design ✏️
There was a problem hiding this comment.
What were you thinking it would look like?
Also I am switching the code to use the electron clipboard but when pressing the button in the preview mode, the handlePreviewMouseUp changes the view to CODE state so it doesn't stay in the PREVIEW state. It is hard to put a button inside the markdown preview because the onclick eats everything. I need to figure out some way that you can click on things inside the preview state without changing to the code state.
There was a problem hiding this comment.
@kazup01 will change the design, so you don't need to about it 😄
Well.... To be honest, I'm reluctant to add libraries. So I'll try to find any easy way to solve the issue in a few days. But if I give up, you can use the library.
|
Thanks for your PR @nadr0 ! I will improve this UI! |
|
@nadr0 Thank you! |
|
Thanks @nadr0 🎉 |
|
I improved layout at #622 |
|
Hey @nadr0 , we are introduce this feature on the official page.
|
|
Thanks for all the help @kazup01 , @asmsuechan! I look forward to working on new features with you in the future! |
(#582)
Simple implementation for "copy to clipboard" for markdown code blocks
The npm package uses document calls to copy the text so this should work on all OS. I have only tested on Windows and Mac OS X and the clip board copy works. I don't have a linux machine to test this on.