WebClip

Basic Usage


  import WebClip from 'webclip'
  let webclip = new WebClip(document.querySelector('#your-container'))

  const google = {
    name: 'Google',
    description: 'Search on Google',
    action(value) {
      // `value` is the selected content
      window.open(`https://www.google.com.hk/#safe=strict&q=${value}`)
    }
  }
  
  const bing = {
    name: 'Bing',
    description: 'Search on Bing',
    action(value) {
      window.open(`http://bing.com/search?q=${value}`)
    }
  }

  webclip.use([google, bing])

Demo

You must be shapeless, formless, like water. When you pour water in a cup, it becomes the cup. When you pour water in a bottle, it becomes the bottle. When you pour water in a teapot, it becomes the teapot. Water can drip and it can crash. Become like water my friend.

Bruce Lee

Use the Range

WebClip will pass the Range in action(). You can use it to do a lot, such as wrapping a highlight wrapper.


  const highlight = {
    name: 'highlight',
    description: 'Highlight content',
    action(value, range) {
      const $highlight = document.createElement('span')
      $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
      // or just add a class
      // $highlight.classList.add('your-class')
      range.surroundContents($highlight)      
    }
  }
  
  webclip.use([highlight, google, bing])

Demo

I went to the woods because I wished to live deliberately, to front only the essential facts of life, and see if I could not learn what it had to teach, and not, when I came to die, discover that I had not lived.

Henry David Thoreau

Plugin icon

You can config a font-awesome icon for a plugin, instead of the uppercase-first-character


  const highlight = {
    name: 'highlight',
    description: 'Highlight content',
    icon: 'pencil',
    action(value, range) {
      const $highlight = document.createElement('span')
      $highlight.style.backgroundColor = 'rgba(92,255,160,.5)'
      // or just add a class
      // $highlight.classList.add('your-class')
      range.surroundContents($highlight)      
    }
  }
  
  const remove = {
    name: 'remove',
    description: 'Remove content',
    icon: 'trash',
    action(value, range) {
      range.deleteContents()
    }
  }
  
  webclip.use([highlight, remove, google, bing])

Demo

All that city. You just couldn't see the end to it. The end? Please? You please just show me where it ends? It was all very fine on that gangway. And I was grand too, in my overcoat. I cut quite a figure. And I was getting off. Guaranteed. There was no problem. It wasn't what I saw that stopped me, Max. It was what I didn't see. You understand that? What I didn't see. In all that sprawling city there was everything except an end. There was no end. What I did not see was where the whole thing came to an end. The end of the world...

The Legend of 1900