Copy-to-clipboard for examples about yari HOT 4 CLOSED

The examples are, confusingly, not React. It's a blob of HTML.
What you need to do is write some pure JavaScript code, that injects a <button> or something into each <pre> tag. Something like this:

React.useEffect(() => {
  if (!error) {
    [...document.querySelectorAll('#main pre')].forEach((element) => {
      const button = document.createElement("button");
      button.onclick = () => {
           copyToClipboard(element.textContent);
           button.classList.add('copied');
      };
    });
  }
}, [doc, error]);

from yari.

Not sure how this'd work if we server-side render the code examples.

from yari.

@peterbe I'd like to give this a shot. I was around when you implemented syntaxHighlight for highlighting <pre> tags so I was tinkering in there. When I log the output of line 80, we get the text that should copied once a clipboard icon is added and clicked.

Not sure how this'd work if we server-side render the code examples.

Im not entirely sure how this will work either since you mentioned the code examples are rendered server side. But here are some things I was thinking about: (ps i'm still a bit of a React noob but I'm trying to get more practice)

I remember that the page is rendered from state with React (or something close to this), so I when I refer to state in the examples below that's what I am trying to reference. If I understand correctly, we just need to supply the initial state with the code snippet content from the pre tags eg in cheerio$pre.text(), then once the code for each example is available in state, we can use a hover event or focus to make the clipboard icon appear and then finally a click event to copy that code examples content to keyboard.

1. Add an SVG of a clipboard icon to the code examples (ie <pre class="brush:*">) that get highlighted with syntaxHighlight. Icon could be placed in top right corner (or whichever corner) and downloaded from a free svg icon site like flaticon or somewhere in Yari if it already exists. Maybe using a onClick function to programmatically write data to the clipboard with the help of navigator like:

import React from 'react';
import ReactDOM from 'react-dom';

// Where clipboard is just the icon that will be added to code examples
class Clipboard extends React.Component {
state = { 
  value: "",
  copied: false
};
...
render() {
  return (
     // use setState to update state with the $pre.text() values)
    // window.clipboardData.setData(this.state.value, "copied!") only for IE 11 (security risks) - https://stackoverflow.com/questions/20509061/window-clipboarddata-getdatatext-doesnt-work-in-chrome/49830762
     <div onClick={() => { navigator.clipboard.writeText(this.state.value)}}>
       // or a background image with the svg instead of the element in markup
        <svg viewBox="" ... />
     </div>

  )
}
}

2. Use external npm package react-copy-to-clipboard

import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';

class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };

  render() {
     return (
         <div>
            <CopyToClipboard text={this.state.value}
              onCopy={() => this.setState({copied: true})}>
              <button>Copy to clipboard with button</button>
            </CopyToClipboard>
         </div>
      )
  }
}

I'm going to tinker with things in Yari to see if I can get close to a solution. Let me know your thoughts @peterbe, or maybe a good place for me to start looking at the areas that server side render code examples.

from yari.

Ah ok, that makes more sense. I will go down that path, thanks for the help!

from yari.