Merge pull request #78 from OneNoteDev/bug/make-long-citations-readable-copyable

[Bug] Make long citations copy-able/fully readable

Author: leakymemory

src/scripts/clipperUI/components/previewViewer/bookmarkPreview.tsx

@@ -99,7 +99,7 @@ class BookmarkPreview extends PreviewComponentBase<{}, ClipperStateProp> {
 							{ this.renderTitleIfExists(result.title) }
 							<tr>
 								<td style={urlTdStyle}>
-									<a href={url} target="_blank">{url}</a>
+									<a href={url} target="_blank" title={url}>{url}</a>
 								</td>
 							</tr>
 							{ this.renderDescriptionIfExists(result.description) }

src/scripts/clipperUI/components/previewViewer/previewComponentBase.tsx

@@ -70,8 +70,10 @@ export abstract class PreviewComponentBase<TState, TProps extends ClipperStatePr
 	}
 
 	private getPreviewSubtitle(): any {
-		let sourceUrlCitation = Localization.getLocalizedString("WebClipper.FromCitation")
-			.replace("{0}", this.props.clipperState.pageInfo ? this.props.clipperState.pageInfo.rawUrl : "");
+		let sourceUrlCitationPrefix = Localization.getLocalizedString("WebClipper.FromCitation")
+			.replace("{0}", ""); // TODO can we change this loc string to remove the {0}?
+
+		let sourceUrl = this.props.clipperState.pageInfo ? this.props.clipperState.pageInfo.rawUrl : "";
 
 		return (
 			<div id={Constants.Ids.previewSubtitleContainer}>
@@ -80,7 +82,8 @@ export abstract class PreviewComponentBase<TState, TProps extends ClipperStatePr
 					: undefined}
 				{this.props.clipperState.currentMode.get() !== ClipMode.Bookmark
 					? <div id={Constants.Ids.previewUrlContainer}>
-						{sourceUrlCitation}
+						{sourceUrlCitationPrefix}
+						<a href={sourceUrl} target="_blank" title={sourceUrl}>{sourceUrl}</a>
 					</div>
 					: undefined}
 			</div>