JSFiddle - React, Tailwind, and code Playground

by Lestrae

HTML

<h1>Select text below :)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada nibh ut massa suscipit gravida. Proin non elementum tellus. Phasellus dignissim sagittis orci eget rhoncus. Vestibulum vel enim non nulla scelerisque vestibulum sed vel nisl. Vestibulum eget congue mi. Aenean ac tellus in sapien rutrum mattis. Sed congue erat sem, vel semper urna tempor ac. Fusce vestibulum, tortor quis vehicula volutpat, mi sapien rutrum urna, eu vehicula dolor ante ac turpis. Suspendisse vel hendrerit mauris. Phasellus dictum dui in mauris commodo, vel fringilla elit aliquam. Suspendisse malesuada ac diam vitae tristique. Pellentesque fermentum luctus libero, at rhoncus elit faucibus a. Donec quis risus egestas, euismod neque eget, semper lorem. Aenean nec euismod odio. Morbi mollis ante a enim feugiat aliquam.</p>

<p>Aenean in scelerisque lectus, et egestas risus. Ut nec dolor congue, pretium sapien ut, elementum mi. Sed aliquet tellus id purus volutpat convallis. Nullam magna urna, aliquam sit amet est et, pellentesque ultricies est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam mollis aliquam vulputate. Nullam vitae sodales enim. Sed quis lacus ac enim tempus gravida non ut ligula. Curabitur dapibus enim eu mi molestie, vel eleifend magna suscipit. Suspendisse potenti. Vestibulum ac justo ut ligula vulputate bibendum. Aliquam ullamcorper nisi a justo porta, id rutrum libero mattis.</p>

<p>Nulla orci est, consectetur sit amet nisi vel, interdum elementum magna. Suspendisse potenti. Duis vel molestie nisl. Quisque eu posuere dolor, id laoreet dolor. Pellentesque tempor nisl lacus, eget ornare quam tincidunt at. Nam sit amet pulvinar nisl. Nullam non nulla enim. Cras suscipit eget quam quis sodales. Morbi vitae cursus lorem. Integer vestibulum consectetur augue vel bibendum.</p>

<div id="marked-block" class="mark-container">
  <button id="make-bold"><i class="fa fa-pencil"...

CSS

body {
    background-color: linen;
    font-size: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#marked-block {
  display: none;
}

#marked-block button {
  background: #242424;
  border: 0;
}

#marked-block::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-left: 16px solid #242424;
  border-right: 10px solid transparent;
  border-top: 0 solid #fff;
  border-bottom: 17px solid transparent;
  left: 23px;
  bottom: -15px;
}

#copy-text {
  display: inline-block;
  margin: 5px;
  background: #7afa76;
  font-size: 0.9em;
  border: 1px solid #006400;
}

#copy-text:hover {
  box-shadow: 1px 0 9px #198f2b;
}

mark {
  background: #56b4ff;
  padding: 2px;
  border-radius: 2px;
}

#copied {
  position: fixed;
  bottom: 1px;
  right: 5px;
  padding: 20px;
  background: #242424;
  color: #fff;
  z-index: 99999999;
  border-radius: 1px;
}

.hide-me {
  display: none;
}

.fas.fa-copy {
  color: #fff;
  font-size: 24px;
  padding: 5px;
  cursor: pointer;
}

.fa.fa-pencil {
  font-size: 24px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
}

.fas.fa-copy:hover,
.fa.fa-pencil:hover {
  opacity: 0.7;
}

#mark-wrap {
  display: none;
  position: fixed;
  bottom: 1px;
  right: 5px;
  min-width: 15em;
  max-width: 20em;
  max-height: 20em;
  background: #287abc;
  color: #fff;
  overflow-y: auto;
  border: 1px solid #287abc;
  z-index: 999999;
}

.hidden-list {
  display: none;
}

#list-header {
  margin: 10px;
  cursor: pointer;
}

#mark-list {
  background: #fff;
  color: #000;
}

#mark-list ol {
  margin-bottom: 4px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 0.9em;
}

#num-of-marks {
  background: #fff;
  color: #000;
  font-size: 0.8em;
  border-radius: 50px;
  padding: 2px 7px;
}

button:focus,
button:active{
	outline: none;
}

JavaScript

const TEXTARRAY = [''];
const MARKLIST = document.getElementById('mark-list');
const OPENLIST = document.getElementById('mark-wrap');
const LISTHEADER = document.getElementById('list-header');
const MARKNUMS = document.getElementById('num-of-marks');

let numOfMarks = 0;

if (!window.x) {
  x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
  var t = '';
  if (window.getSelection) {
    t = window.getSelection();
  } else if (document.getSelection) {
    t = document.getSelection();
  } else if (document.selection) {
    t = document.selection.createRange().text;
  }
  return t;
};

let pageX;
let pageY;

$(document).ready(function() {
  $(document).bind("mouseup", function() {
    var selectedText = x.Selector.getSelected();
    if (selectedText != '') {
      $('#marked-block').css({
        'left': pageX + 5,
        'top': pageY - 55,
        'position': 'absolute',
        'background': '#242424',
        'color': 'white',
        'padding': '5px',
        'border-radius': '5px',
        'opacity': 1
      }).fadeIn(200);

    } else {
      $('#marked-block').fadeOut(200);
    }

  });
  $(document).on("mousedown", function(e) {
    pageX = e.pageX;
    pageY = e.pageY;
  });
});


function makeBold() {
  let selection = window.getSelection().getRangeAt(0);
  let selectedText = selection.extractContents();
  let newNode = document.createElement('mark');
  newNode.appendChild(selectedText);
  selection.insertNode(newNode);
  $('#marked-block').fadeOut();
  $('#mark-wrap').fadeIn(500);
  TEXTARRAY.push(newNode.innerHTML);
  MARKLIST.innerHTML = '<ol>' + TEXTARRAY.join('<li>') + '</ol>';
  MARKNUMS.innerHTML = ++numOfMarks;
}

document.getElementById('make-bold').addEventListener('click', makeBold);

function toggleMarkList() {
  OPENLIST.classList.toggle('list-clicked');
  MARKLIST.classList.toggle('hidden-list');
}
LISTHEADER.addEventListener('click', toggleMarkList);

function copyText() {
  let selection = window.getSelection();
  if...