Fixed selection from highlight functionality

README.md

@@ -77,13 +77,13 @@ You can start using Just Read's built in auto-selection selection in four ways:
 
 You can select exactly the text you want to read if the built in method doesn't select what you want. If you want to use a visual selector, you can start selection mode in two ways:
 
-5. Right click the Just Read extension button, click "Select text to read", and then click the part of the page highlighted that you want to read.
+5. Right click the Just Read extension button, click "Select content to read", and then click the part of the page highlighted that you want to read.
 
 6. Use the shortcut <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>K</kbd> then click the part of the page highlighted that you want to read.
 
 ##### Highlight mode
 
-You can select specific text by highlighting it (by clicking and dragging over the text), then right click it and select "View this text in Just Read".
+You can select specific text by highlighting it (by clicking and dragging over the content), then right click it and select "View this content in Just Read".
 
 *[Back to FAQ question list](https://github.com/ZachSaucier/Just-Read/#faq)*
 
@@ -125,7 +125,9 @@ ___
 
 #### Q: How can I add a custom Google Font to Just Read?
 
-You can add a custom Google Font (or any other web-hosted font) by customizing the CSS for your theme. Go to Options then click on the theme that is currently in use (it should have a filled in circle next to the file name). Once there, you can follow [these instructions](https://graphicdesign.stackexchange.com/a/76551/23061) to get the necessary CSS code to use the font in your theme. The only change you'll have to make is replacing the `Font Name` with whatever font you want, and replacing `.someSelector` with whatever selector you want. The selectors you most likely want to change are `body, h3` and `h1, h2` because this is what Just Read changes by default.
+You can add a custom Google Font (or any other web-hosted font) by customizing the CSS for your theme. Go to Options then click on the theme that is currently in use (it should have a filled in circle next to the file name). 
+
+Once there, you can follow [these instructions](https://graphicdesign.stackexchange.com/a/76551/23061) to get the necessary CSS code to use the font in your theme. The only change you'll have to make is replacing the `Font Name` with whatever font you want, and replacing `.someSelector` with whatever selector you want. The selectors you most likely want to change are `body, h3` and `h1, h2` because this is what Just Read changes by default.
 
 Since you only have access to the CSS
 

background.js

@@ -53,7 +53,7 @@ function createPageCM() {
 function createHighlightCM() {
     // Create an entry to allow user to use currently selected text
     highlightCMId = chrome.contextMenus.create({
-        title: "View this text in Just Read",
+        title: "View this selection in Just Read",
         id: "highlightCM",
         contexts:["selection"],
         onclick: function(info, tab) {
@@ -214,7 +214,7 @@ chrome.runtime.onMessage.addListener(function(request, sender) {
 
 // Create an entry to allow user to select an element to read from
 chrome.contextMenus.create({
-    title: "Select text to read",
+    title: "Select content to read",
     contexts: ["browser_action"],
     onclick: function() {
         startSelectText();

content_script.js

@@ -50,6 +50,28 @@ function mutePage() {
     [].forEach.call(audios, function(audio) { muteMe(audio); });
 }
 
+// Select text from highlight functionality
+function getSelectionHtml() {
+    var html = "";
+    var sel = window.getSelection();
+    if (sel.rangeCount) {
+        var container = document.createElement("div");
+        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
+            container.appendChild(sel.getRangeAt(i).cloneContents());
+        }
+        html = container.innerHTML;
+    }
+    return html;
+}
+
+// Use the highlighted text if started from that
+var pageSelectedContainer;
+if(typeof textToRead !== "undefined" && textToRead) {  
+    pageSelectedContainer = document.createElement("div");
+    pageSelectedContainer.className = "highlighted-html";
+    pageSelectedContainer.innerHTML = getSelectionHtml();
+}
+
 
 /////////////////////////////////////
 // State functions
@@ -1002,7 +1024,6 @@ function addPremiumNofifier() {
 
 var simpleArticleIframe,
     isInDelMode = false;
-var pageSelectedContainer;
 function createSimplifiedOverlay() {
 
     // Create an iframe so we don't use old styles
@@ -1014,7 +1035,8 @@ function createSimplifiedOverlay() {
     container.className = "simple-container";
 
     // Try using the selected element's content
-    pageSelectedContainer = userSelected;
+    if(!pageSelectedContainer)
+        pageSelectedContainer = userSelected;
 
     // Use the highlighted text if started from that
     if(!pageSelectedContainer && typeof textToRead !== "undefined" && textToRead) {

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Just Read",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "manifest_version": 2,
   "description": "A customizable reader extension.",
   "homepage_url": "https://github.com/ZachSaucier/Just-Read",