sel_setup.js

// createRange()

// surroundContents()
// compareBoundaryPoints()

//
// save the flashcard's question, and it's html 
// newNode.appendChild(range.extractContents());
// range.insertNode(newNode)
// 

//
// cloneContents() 
//

//
// How to check the DOM to see if it contains an object matching 
// the document fragment you saved 
// 

//
// write the notes in one place 
// reference the notes in a flashcard 
//

// https://stackoverflow.com/questions/18946573/save-selection-text-and-show-it-later-in-html-and-javascript
//

// http://eloquentjavascript.net/14_dom.html

// if it's an overlapping highlight, create a larger node that contains both highlights, and specify where the highlights begin and end for each highlight 
// create a container to hold these highlighted nodes 

//
// But HTML allows you to set any attribute you want on nodes. 
// This can be useful because it allows you to store extra information in a document. 
// If you make up your own attribute names, though, such attributes will not be present as properties on the element’s node. 
// Instead, you have to use the getAttribute and setAttribute methods to work with them.
//

function card(selection) {
  if (selection.anchorNode != null) {
      const range = selection.getRangeAt(0)
      const document = range.cloneContents()
      return {range, document}
   }
}

function walkTree(node, compNode) {
  var i = 0
  var nodes = []
  for (let node of document.body.childNodes) {
    nodes.push(node)
  }
  
  
  for (let node of nodes) {
    console.log(node)
    if (node == compNode) {
      console.log("found")
    }
    if (node != undefined) {
      for (const node of node.childNodes) {
        nodes.push(node)
      }
    }
    i++;
  }
  console.log(i)
}

class Game extends React.Component {
  constructor() {
    super()
    this.state = {divs: [0], cards: []}
  }
  
  render() {
    const {divs, cards} = this.state
    const addtext = () => {
       const prev = divs[divs.length - 1]
       this.setState({divs: divs.concat(prev + 1)})
    } 
    
    const c = () => {
      var s = window.getSelection()
      if (s.anchorNode != null) {
        this.setState({cards: cards.concat(card(s))})
      }
    }
    
    const printSelections= () => {
      cards.forEach((card) => {
        walkTree(document.body, card.document)
      })
    }
    
    return (
     <div>
        <h1>Hello Renee</h1>
        <button onClick={printSelections}> prinT selections</button>
        <button onClick={c}>Save Flashcard</button>
        <button onClick={addtext}> AddT</button>
      <h1>h1</h1>
      <p> text</p> 
      <p> text 1</p>
        {divs.map((d) => <div key={d}>extra text {d}</div>)}
      <p> text 2 with some extra text </p>
      <p> text 3</p>
      <p> text 4</p>
      <p> a paragraph of text a paragraph too paragraph of text a paragraph too a paragraph of text a paragraph too a paragraph of text a paragraph too a paragraph of text a paragraph too</p>
      <p> text 6</p>
      <p> text 7</p>  
     </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);