copy code example to clipboard #37
Conversation
| ); | ||
| } | ||
| } | ||
|
|
||
| const StyledCopyButton = styled.button` |
There was a problem hiding this comment.
A tento copy button by nemohol byt rovnaky ako code-toggle?
There was a problem hiding this comment.
mohol ale bohužiaľ nie sú na rovnakej vetve tak ho nemôžem použiť. Budem to musieť potom prerobiť na ten button. či mám to nejak cherry picknúť a použiť to aj tu? alebo rovno na vetve s buttonom robiť copy button?
There was a problem hiding this comment.
Tak skusme dotlacit tlacidlo, potom to mergneme do tohoto :) Moze byt? Ci by si radsej toto uzatvoril takto a potom neskor to zosuladil.
There was a problem hiding this comment.
asi to bude vpohode ak spravíme najprv button a potom mergneme
| <StyledCopyButton onClick={e => this.handleCopyCode(e, '#code-block')}> | ||
| {this.state.copyButtonText} | ||
| </StyledCopyButton> | ||
| <CodeBlock id="code-block" language={this.state.codePreviewType}> |
There was a problem hiding this comment.
Tu nemoze byt idcko, lebo ak budem mat viac <Preview /> na stranke, idecka budu kolidovat.
There was a problem hiding this comment.
ano aj ja by som požil ref ale nejak mi to nechcelo fungovať. skúsim sa na to pozrieť bližšie. možno si lepšie naštudovať ref. 👍
| newClass = 'error'; | ||
| } | ||
|
|
||
| button.classList.add(newClass); |
There was a problem hiding this comment.
Toto by sa malo v react idelane riesit cez state a zmenu propu toho kompenentu. Nemanipulovat s classname, to by mal byt implementacny detail.
| document.execCommand('copy'); | ||
| // selection.removeAllRanges(); | ||
| } catch (e) { | ||
| newText = 'Error! Press Ctrl + C'; |
There was a problem hiding this comment.
Paci sa mi takyto handling, ked exec nie je podporovany :)
| { | ||
| copyButtonText: newText | ||
| }, | ||
| () => { |
There was a problem hiding this comment.
Toto je super, takto sa mozes spolahnut ze druhy set state sa urcite zavola po prvom.
There was a problem hiding this comment.
Tak tak, aby nenastalo že bude človek klikať a ostane mu tam zlý state
|
Inak pekne naimplementovane! |
|
nahodil som verziu kde sa používajú propsy a bohužiaľ som musel použiť ReactDom.findDOMNode kvôli tomu selectovaniu. Inak sa nedalo. ešte som pridal aj error classu pre button nech sa tiež vysvieti na červeno ak je error |
|
Videl som že si mergol Button tak som vyriešil konflikty tuto a už je to podľa Buttonu spravené ten copy button. |
Copy to clipboard button for code example