Clipper: Resolves #641: Allow clipping selected part of the page

Clipper/joplin-webclipper/content_scripts/index.js

@@ -74,6 +74,17 @@
 	async function prepareCommandResponse(command) {
 		console.info('Got command: ' + command.name);
 
+		const clippedContentResponse = (title, html) => {
+			return {
+				name: 'clippedContent',
+				title: title,
+				html: html,
+				base_url: baseUrl(),
+				url: location.origin + location.pathname,
+				parent_id: command.parent_id,
+			};			
+		}
+
 		if (command.name === "simplifiedPageHtml") {
 
 			let article = null;
@@ -87,29 +98,20 @@
 				response.warning = 'Could not retrieve simplified version of page - full page has been saved instead.';
 				return response;
 			}
-
-			return {
-				name: 'clippedContent',
-				html: article.body,
-				title: article.title,
-				base_url: baseUrl(),
-				url: location.origin + location.pathname,
-				parent_id: command.parent_id,
-			};
+			return clippedContentResponse(article.title, article.body);
 
 		} else if (command.name === "completePageHtml") {
 
 			const cleanDocument = document.body.cloneNode(true);
 			cleanUpElement(cleanDocument);
+			return clippedContentResponse(pageTitle(), cleanDocument.innerHTML);
 
-			return {
-				name: 'clippedContent',
-				html: cleanDocument.innerHTML,
-				title: pageTitle(),
-				base_url: baseUrl(),
-				url: location.origin + location.pathname,
-				parent_id: command.parent_id,
-			};
+		} else if (command.name === "selectedHtml") {
+
+		    const range = window.getSelection().getRangeAt(0);
+		    const container = document.createElement('div');
+		    container.appendChild(range.cloneContents());
+		    return clippedContentResponse(pageTitle(), container.innerHTML);
 
 		} else if (command.name === 'screenshot') {
 

Clipper/joplin-webclipper/popup/src/App.js

@@ -41,6 +41,13 @@ class AppComponent extends Component {
 			});
 		}
 
+		this.clipSelection_click = () => {
+			bridge().sendCommandToActiveTab({
+				name: 'selectedHtml',
+				parent_id: this.props.selectedFolderId,
+			});
+		}
+
 		this.clipScreenshot_click = async () => {
 			try {
 				const baseUrl = await bridge().clipperServerBaseUrl();
@@ -195,6 +202,7 @@ class AppComponent extends Component {
 					<ul>
 						<li><a className="Button" onClick={this.clipSimplified_click}>Clip simplified page</a></li>
 						<li><a className="Button" onClick={this.clipComplete_click}>Clip complete page</a></li>
+						<li><a className="Button" onClick={this.clipSelection_click}>Clip selection</a></li>
 						<li><a className="Button" onClick={this.clipScreenshot_click}>Clip screenshot</a></li>
 					</ul>
 				</div>