From abb4e20ec3c2baa4242a17cb206bf40815e523ed Mon Sep 17 00:00:00 2001
From: Max G <admin@internet.com>
Date: Fri, 3 Jan 2020 01:26:55 +0000
Subject: [PATCH] I swear, I'm going to start doing regular commits + Added a
 ton of shit + About to add socket.io oh god.

---
 backupDatabase.sh                             |    7 +-
 client/build/webpack.base.conf.js             |    4 +-
 client/src/assets/semantic-helper.css         |    8 +-
 client/src/components/AttachmentEditor.vue    |  110 -
 client/src/components/FileUploadButton.vue    |   11 +-
 client/src/components/GlobalSiteMenu.vue      |   83 +-
 .../components/NoteDeleteButtonComponent.vue  |    6 +-
 client/src/components/NoteInputPanel.vue      |  195 +-
 client/src/components/NoteTagEdit.vue         |   42 +-
 .../src/components/NoteTitleDisplayCard.vue   |   59 +-
 client/src/components/SearchInput.vue         |   44 +
 client/src/main.js                            |    1 -
 client/src/pages/HomePage.vue                 |    6 +
 client/src/pages/NotesPage.vue                |  369 ++-
 client/src/router/index.js                    |    5 +-
 client/src/stores/mainStore.js                |   10 +-
 server/helpers/DiffMatchPatch.js              | 2236 +++++++++++++++++
 server/helpers/ProcessText.js                 |  132 +
 server/models/Attachment.js                   |    1 +
 server/models/Note.js                         |  170 +-
 server/models/Tag.js                          |   15 +
 server/routes/attachmentController.js         |    2 +-
 server/routes/noteController.js               |    9 +
 server/routes/tagController.js                |    6 +
 24 files changed, 3171 insertions(+), 360 deletions(-)
 delete mode 100644 client/src/components/AttachmentEditor.vue
 create mode 100644 client/src/components/SearchInput.vue
 create mode 100644 server/helpers/DiffMatchPatch.js

diff --git a/backupDatabase.sh b/backupDatabase.sh
index 8d188bb..4352f1b 100755
--- a/backupDatabase.sh
+++ b/backupDatabase.sh
@@ -1,8 +1,7 @@
 #!/bin/bash
 
-BACKUPDIR="databaseBackupPi"
+BACKUPDIR="/home/mab/databaseBackupPi"
 
-cd ..
 mkdir -p $BACKUPDIR
 cd $BACKUPDIR
 
@@ -11,9 +10,9 @@ ssh mab@avidhabit.com -p 13328 "mysqldump --all-databases --user root -p***REMOV
 
 cp "backup-$NOW.sql" "/mnt/Windows Data/DatabaseBackups/backup-$NOW.sql"
 
-echo "Database Backup Complete"
+echo "Database Backup Complete on $NOW"
 
 #Restore DB
 # copy file over, run restore
 # scp -P 13328 backup-2019-12-04_03-00.sql mab@avidhabit.com:/home/mab
-# mysql -u root -p < backup-2019-12-04_03-00.sql
\ No newline at end of file
+# mysql -u root -p < backup-2019-12-04_03-00.sql
diff --git a/client/build/webpack.base.conf.js b/client/build/webpack.base.conf.js
index d0c7197..08c0325 100644
--- a/client/build/webpack.base.conf.js
+++ b/client/build/webpack.base.conf.js
@@ -42,7 +42,7 @@ module.exports = {
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
-        test: /\.(png|jpe?g|gif)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
@@ -58,7 +58,7 @@ module.exports = {
         }
       },
       {
-        test: /\.(eot|ttf|otf|woff|woff2|svg)(\?.*)?$/,
+        test: /\.(eot|ttf|otf|woff|woff2)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 10000,
diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css
index 49ebdd5..348da08 100644
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@@ -97,12 +97,16 @@ div.ui.basic.green.label {
 /* Styles for public display pages */
 
 .note-status-indicator {
-  float: right;
+  position: absolute;
   width: 100px;
-  padding: 9px 0;
+  padding: 16px 0;
   box-sizing: border-box;
   text-align: center;
   color: var(--text_color);
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+  cursor: pointer;
 }
 
 
diff --git a/client/src/components/AttachmentEditor.vue b/client/src/components/AttachmentEditor.vue
deleted file mode 100644
index c31f41e..0000000
--- a/client/src/components/AttachmentEditor.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<style scoped>
-	.shade {
-		position: fixed;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: rgba(0,0,0,0.7);
-		z-index: 1200;
-		cursor: pointer;
-	}
-	.editor	{
-		position: fixed;
-		top: 10%;
-		bottom: 10%;
-		left: 10%;
-		right: 10%;
-		z-index: 1300;
-		overflow-y: scroll;
-		background-color: var(--background_color);
-		border: 3px solid;
-		border-color: var(--border_color);
-	}
-	.attachment-image {
-		width: 100%;
-	}
-</style>
-
-<template>
-	<div>
-		<div class="shade" v-on:click="closeAttachmentEditor"></div>
-		<div class="editor">
-			<div class="ui basic segment">
-
-				<h2>Edit Attachments</h2>
-
-				<div class="ui vertically divided grid">
-					<div v-for="item in attachments" class="row">
-
-						<div class="ui sixteen wide column">
-							<div class="ui form">
-								<div class="field">
-									<textarea v-on:blur="saveIt(item)" v-model="item.text" :key="item.id + 'text'"></textarea>
-								</div>
-							</div>
-						</div>
-
-						<div class="ui sixteen wide column">
-							<a v-if="item.url" :href="item.url" target="_blank">{{item.url}}</a>
-					
-							<!-- Display image -->
-							<div v-if="item.file_location && item.attachment_type == 2">
-								<img class="attachment-image" :src="`/api/static/${item.file_location}`">
-							</div>
-
-							<!-- provide link  -->
-							<a v-if="item.file_location" :href="`/api/static/${item.file_location}`" target="_blank">Download</a>
-
-						</div>
-
-					</div>
-				</div>
-
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-
-	import axios from 'axios'
-
-	export default {
-
-		name: 'AttachmentEditor',
-		props: [ 'noteId' ],
-		data: function(){ 
-			return {
-				attachments: []
-			}
-		},
-		beforeCreate: function(){
-		},
-		mounted: function(){
-
-			this.fetchAttachments()
-		},
-		methods: {
-			fetchAttachments(){
-				axios.post('/api/attachment/get', {'noteId':this.noteId})
-				.then(results => {
-					this.attachments = results.data
-				})
-			},
-			closeAttachmentEditor(){
-				this.$bus.$emit('close_edit_attachment')
-			},
-			saveIt(attachment){
-				const data = {
-					'attachmentId': attachment.id,
-					'updatedText': attachment.text,
-					'noteId': this.noteId
-				}
-				axios.post('/api/attachment/update', data)
-				.then(results => {})
-
-			},
-		}
-	}
-</script>
\ No newline at end of file
diff --git a/client/src/components/FileUploadButton.vue b/client/src/components/FileUploadButton.vue
index 6e14017..8f41cf3 100644
--- a/client/src/components/FileUploadButton.vue
+++ b/client/src/components/FileUploadButton.vue
@@ -7,9 +7,12 @@
 </style>
 
 <template>
-	<div class="ui clickable basic button">
+	<div class="ui small compact basic icon button clickable">
 		<form>
-			<label :for="`upfile-${noteId}`" class="clickable">File Yeet {{uploadPercentage}}</label>
+			<label :for="`upfile-${noteId}`" class="clickable">
+				<i class="upload icon"></i>
+				Upload File <span v-if="uploadPercentage != 0">{{uploadPercentage}}%</span>
+			</label>
 			<input class="hidden-up" type="file" :id="`upfile-${noteId}`" ref="file" v-on:change="handleFileUpload()" />
 		</form>
 		<!-- <button v-if="file" v-on:click="uploadFileToServer()">Submit</button> -->
@@ -47,7 +50,7 @@
 					      }
 					}
 				).then(results => {
-					this.uploadPercentage = 'DONE'
+					this.uploadPercentage = 0
 					this.file = null
 					console.log('SUCCESS!!');
 
@@ -76,7 +79,7 @@
 
 				})
 				.catch(results => {
-					this.uploadPercentage = 'FAIL'
+					this.uploadPercentage = 0
 					console.log('FAILURE!!');
 				})
 			},
diff --git a/client/src/components/GlobalSiteMenu.vue b/client/src/components/GlobalSiteMenu.vue
index 8594f32..a959f71 100644
--- a/client/src/components/GlobalSiteMenu.vue
+++ b/client/src/components/GlobalSiteMenu.vue
@@ -21,10 +21,10 @@
 
 		.menu-item {
 			color: #fff;
-			padding: 10px 0px 10px 10px;
+			padding: 0.8em 0px 0.8em 0.8em;
 			display: inline-block;
 			width: 100%;
-			font-size: 1.1rem;
+			font-size: 1.15em;
 			box-sizing: border-box;
 		}
 		.sub {
@@ -60,28 +60,60 @@
 			cursor: pointer;
 		}
 		.top-menu-bar {
-			color: var(--text_color);
-			width: calc(100% - 20px);
+			/*color: var(--text_color);*/
+			/*width: 100%;*/
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 999;
+			background-color: var(--background_color);
+			border-bottom: 1px solid;
+  			border-color: var(--border_color);
+  			padding: 5px 1rem 5px;
+		}
+		.place-holder {
+			width: 100%;
+			height: 50px;
 		}
 		.top-menu-bar img {
-			width: 20px;
-			height: 20px;
+			width: 30px;
+			height: 30px;
 		}
 
 </style>
 
 <template>
 	<div>
+		
+		<div class="place-holder" v-if="collapsed && !menuOpen"></div>
+
 		<!-- collapsed menu, appears as a bar  -->
-		<div class="top-menu-bar menu-item" v-if="collapsed || mobile" v-on:click="collapseMenu">
+		<div class="top-menu-bar" v-if="(collapsed || mobile) && !menuOpen">
 			<div class="ui grid">
-				<div class="five wide column">
-					<i class="bars icon"></i> Menu
+
+				<div class="three wide column">
+					<div class="ui large basic compact icon button" v-on:click="collapseMenu">
+						<i class="green bars icon"></i>
+					</div>
 				</div>
-				<div class="six wide center aligned column">
-					<img src="/api/static/assets/favicon.ico" alt="logo" />
+				<div class="ten wide center aligned column">
+					<img v-if="!loggedIn" src="/api/static/assets/favicon.ico" alt="logo" />
+					<search-input v-if="loggedIn"></search-input>
+				</div>
+				<div class="three wide right aligned column">
+
+					<!-- mobile create note button -->
+					<div v-if="loggedIn">
+						<div v-if="!disableNewNote" @click="createNote" class="ui large basic compact icon button">
+							<i class="green plus icon"></i>
+						</div>
+						<div v-if="disableNewNote" class="ui large basic compact icon button">
+							<i class="grey plus icon"></i>
+						</div>
+					</div>
+
 				</div>
-				<div class="five wide right aligned column"></div>
 			</div>
 		</div>
 
@@ -94,7 +126,7 @@
 
 			<div class="menu-section">
 				<div class="menu-item menu-button" v-on:click="collapseMenu">
-					<i class="caret square left icon"></i>
+					<i class="caret square left outline icon"></i>
 				</div>
 			</div>
 
@@ -108,7 +140,7 @@
 			</div>
 
 			<div class="menu-section" v-if="loggedIn">
-				<router-link exact-active-class="active" class="menu-item menu-button" to="/notes">
+				<router-link exact-active-class="active" class="menu-item menu-button" to="/notes" v-on:click.native="emitReloadEvent()">
 					<i class="file icon"></i>Notes
 				</router-link>
 				<div>
@@ -168,13 +200,16 @@
 	import axios from 'axios'
 
 	export default {
-
+		components: {
+			'search-input': require('@/components/SearchInput.vue').default,
+		},
 		data: function(){ 
 			return {
 				username: '',
 				collapsed: false,
 				mobile: false,
-				disableNewNote: false
+				disableNewNote: false,
+				menuOpen: true,
 			}
 		},
 		beforeCreate: function(){
@@ -182,6 +217,10 @@
 		mounted: function(){
 			this.mobile = this.$store.getters.getIsUserOnMobile
 			this.collapsed = this.$store.getters.getIsUserOnMobile
+
+			if(this.mobile){
+				this.menuOpen = false
+			}
 		},
 		computed: {
 			loggedIn () {
@@ -194,10 +233,18 @@
 				//Collapse menu when item is clicked in mobile
 				if(this.mobile && !this.collapsed){
 					this.collapsed = true
+					this.menuOpen = false
 				}
 			},
 			collapseMenu(){
 				this.collapsed = !this.collapsed
+
+				if(!this.collapsed){
+					this.menuOpen = true
+				} else {
+					this.menuOpen = false
+				}
+
 			},
 			createNote(event){
 				const title = ''
@@ -227,6 +274,10 @@
 					return $1.toUpperCase()
 				})
 			},
+			emitReloadEvent(){
+				//Reloads note page to initial state
+				this.$bus.$emit('note_reload')
+			},
 			updateFastFilters(index){
 
 				//A little hacky, brings user to notes page then filters on click
diff --git a/client/src/components/NoteDeleteButtonComponent.vue b/client/src/components/NoteDeleteButtonComponent.vue
index 8491186..ada8122 100644
--- a/client/src/components/NoteDeleteButtonComponent.vue
+++ b/client/src/components/NoteDeleteButtonComponent.vue
@@ -3,7 +3,7 @@
 		<span class="clickable" @click="confirmDelete()" v-if="click == 0" data-tooltip="Delete" data-inverted="" data-position="top right">
 			<i class="grey trash alternate icon"></i>
 		</span>
-		<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="left center" data-inverted="">
+		<span class="clickable" @click="actuallyDelete()" @mouseleave="reset" v-if="click == 1" data-tooltip="Click again to delete." data-position="top right" data-inverted="">
 			<i class="red trash alternate icon"></i>
 		</span>
 	</span>
@@ -26,9 +26,11 @@
 				this.click++
 			},
 			actuallyDelete(){
+
 				axios.post('/api/note/delete', {'noteId':this.noteId}).then(response => {
 					if(response.data == true){
-						this.$bus.$emit('note_deleted')
+						console.log('Lets delete this note!')
+						this.$bus.$emit('note_deleted', this.noteId)
 					}
 				})
 			},
diff --git a/client/src/components/NoteInputPanel.vue b/client/src/components/NoteInputPanel.vue
index 5090352..b2554a8 100644
--- a/client/src/components/NoteInputPanel.vue
+++ b/client/src/components/NoteInputPanel.vue
@@ -15,40 +15,12 @@
 			</div>
 		</div>
 
-		<!-- Menu  -->
-		<div class="note-top-menu">
-			<div @click="close" class="ui basic icon button" data-tooltip="Close" data-position="right center" data-inverted="">
-				<i class="close icon"></i>
-			</div>
+		<span class="note-status-indicator" v-on:click="save()">{{statusText}}</span>
 
-			<div @click="onTogglePinned" class="ui basic icon button" data-tooltip="Pin to Top" data-position="right center" data-inverted="">
-				<i class="pin icon" :class="{green:(pinned == 1)}"></i> {{(pinned == 1)?'Pinned':''}}
-			</div>
-			<div @click="onToggleArchived" class="ui basic icon button" data-tooltip="Hide on main" data-position="right center" data-inverted="">
-				<i class="archive icon" :class="{green:(archived == 1)}"></i> {{(archived == 1)?'Archived':''}}
-			</div>
-
-			<!-- <file-upload-button :noteId="noteid" /> -->
-
-			<span class="relative" v-on:click="showColorPicker">
-				<span class="ui basic icon button">
-					<i class="paint brush icon"></i>
-				</span>
-			</span>
-
-			<div v-if="attachmentCount > 0" class="ui basic icon button" v-on:click="openEditAttachment" data-tooltip="View Links/Images" data-position="right center" data-inverted="">
-				<i class="folder icon"></i>
-			</div>
-			
-			<span class="note-status-indicator">{{statusText}}</span>
+		<div class="tinymce-container">
+			<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
 		</div>
 
-
-
-		<textarea :id="noteid+'-tinymce-editor'">{{noteText}}</textarea>
-
-		<note-tag-edit v-if="!$store.getters.getIsUserOnMobile" :noteId="noteid" :key="'tags-for-note-'+noteid"/>
-
 		<color-picker 
 			v-if="colorPickerVisible" 
 			:location="colorPickerLocation" 
@@ -56,7 +28,51 @@
 			:style-object="styleObject" 
 		/>
 
+		<div v-if="$store.getters.getIsNoteSettingsOpen">
+			
+			<div class="all-settings">
+				<div class="ui grid">
+					<div class="row">
+						<div class="sixteen wide column">
 
+							<note-tag-edit :noteId="noteid" :key="'tags-for-note-'+noteid"/><br>
+
+							<!-- close button  -->
+							<div class="ui small compact basic icon button" v-on:click="$store.commit('toggleNoteSettingsPane')">
+								<i class="close icon"></i> Close Settings
+							</div>
+							<!-- Pin Button  -->
+							<div @click="onToggleArchived" class="ui small compact basic icon button">
+								<i class="archive icon" :class="{green:(archived == 1)}"></i> 
+								{{(archived == 1)?'Archived':'Archive'}}
+							</div>
+							<!-- archive button -->
+							<div @click="onTogglePinned" class="ui small compact basic icon button">
+								<i class="pin icon" :class="{green:(pinned == 1)}"></i> 
+								{{(pinned == 1)?'Pinned':'Pin'}}
+							</div>
+							<!-- colors button -->
+							<span class="relative" v-on:click="showColorPicker">
+								<span class="ui small compact basic icon button">
+									<i class="paint brush icon"></i>
+									Colors
+								</span>
+							</span>
+
+							<!-- attachment button -->
+							<div v-if="attachmentCount > 0" class="ui small compact basic icon button" v-on:click="openEditAttachment">
+								<i class="folder icon"></i> Attachments
+							</div>
+							<!-- file upload button  -->
+							<file-upload-button :noteId="noteid" />
+							
+						</div>
+					</div>
+
+				</div>
+			</div>
+			<!-- <div class="shade" v-on:click="showAllSettings = false"></div> -->
+		</div>
 
 	</div>
 </template>
@@ -72,6 +88,7 @@
 			'note-tag-edit': require('@/components/NoteTagEdit.vue').default,
 			'color-picker': require('@/components/ColorPicker.vue').default,
 			'file-upload-button': require('@/components/FileUploadButton.vue').default,
+			'delete-button': require('@/components/NoteDeleteButtonComponent.vue').default,
 		},
 		data(){
 			return {
@@ -95,6 +112,10 @@
 				colorPickerLocation: null,
 
                 tinymce: null, //Initialized editor instance
+
+                //Settings vars
+                showAllSettings: true,
+                lastVisibilityState: null,
 			}
 		},
 		watch: {
@@ -114,10 +135,21 @@
 			}
 		},
 		beforeMount(){
-
+			//Load tinymce into the page only do it once
+			if(document.querySelectorAll('[data-mceload]').length == 0){
+				let tinyMceIncluder = document.createElement('script')
+				tinyMceIncluder.setAttribute('src', '/api/static/assets/tinymce/tinymce.min.js')
+				tinyMceIncluder.setAttribute('data-mceload','loaded')
+				document.head.appendChild(tinyMceIncluder)
+			}
 		},
 		beforeDestroy(){
-			this.$bus.$off('toggle_night_mode', this.listener)
+
+			document.removeEventListener('visibilitychange', this.visibiltyChangeAction)
+
+			this.$off() // Remove all event listeners
+			this.$bus.$off()
+
 			//Trash editor instance on close
 			this.tinymce.remove()
 			
@@ -127,6 +159,8 @@
 			//Change TinyMce styles on nightmored change
 			this.$bus.$on('toggle_night_mode', this.setEditorTextColor )
 
+			document.addEventListener('visibilitychange', this.checkForUpdatedNote)
+
 			this.$nextTick(() => {
 				this.loadNote(this.noteid)
 			})
@@ -139,10 +173,17 @@
 				// {title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif'}
 				// ]
 
+				//Default plugin options for big browsers
+				let toolbarOptions = 'customCloseButton | mceTogglePinned | forecolor styleselect | bold italic underline | link | bullist numlist | outdent indent table | h | image'
+				let pluginOptions = 'paste, link, code, lists, table, hr, image'
+
 				//Tweak doc height for mobile
-				let docHeight = 'calc(100vh - 90px)'
+				let docHeight = 'calc(100vh - 1px)'
 				if(this.$store.getters.getIsUserOnMobile){
-					docHeight = 'calc(100vh - 37px)'
+					docHeight = 'calc(100vh - 1px)'
+
+					toolbarOptions = 'customCloseButton | bullist numlist | mceTogglePinned'
+					pluginOptions = 'lists'
 				}
 
 				//setup skin as dark if night mode is enabled
@@ -152,12 +193,13 @@
 				}
 
 				const editorId = '#'+this.noteid+'-tinymce-editor'
+				let vm = this
 
 				//Globally defined included in index HTML
 				tinymce.init({
 					selector: editorId,
-					toolbar: 'forecolor backcolor styleselect | bold italic underline | link image | code | undo redo | bullist numlist | outdent indent table, hr, searchreplace | removeformat',
-					plugins: 'paste, link, code, lists, table, hr, searchreplace, image',
+					toolbar: toolbarOptions,
+					plugins: pluginOptions,
 					browser_spellcheck: true,
 					menubar: false,
 					branding: false,
@@ -167,6 +209,25 @@
 					contextmenu: false,
 					init_instance_callback: this.editorInitCallback,
 					imagetools_toolbar: "imageoptions",
+					setup: editor => {
+						//Add custom buttons to tinymce instance
+						editor.ui.registry.addButton('customCloseButton', {
+							text: 'Close',
+							icon: 'close',
+							onAction: function (_) {
+								vm.close()
+							}
+						})
+
+						//Add custom buttons to tinymce instance
+						editor.ui.registry.addButton('mceTogglePinned', {
+							text: 'Note Settings',
+							icon: 'settings',
+							onAction: function (_) {
+								vm.$store.commit('toggleNoteSettingsPane')
+							}
+						})
+					}
 				})
 			},
 			editorInitCallback(editor){
@@ -197,7 +258,9 @@
 					}
 				}
 
-				
+			},
+			setText(inText){
+				return this.tinymce.setContent(inText)
 			},
 			getText(){
 				//Return text from tinyMce Editor
@@ -208,7 +271,6 @@
 				this.colorPickerLocation = {'x':event.clientX, 'y':event.clientY}
 			},
 			openEditAttachment(){
-				// this.$bus.$emit('open_edit_attachment', this.currentNoteId)
 				this.$router.push('/attachments/note/'+this.currentNoteId)
 			},
 			onTogglePinned(){
@@ -300,11 +362,12 @@
 			save(){
 				return new Promise((resolve, reject) => {
 					//Clear other debounced events to prevent double calling of save
-					clearTimeout(this.editDebounce)
+					// clearTimeout(this.editDebounce)
 
 					//Don't save note if its hash doesn't change
 					const currentNoteText = this.getText()
 					if( this.lastNoteHash == this.hashString( currentNoteText )){
+						this.statusText = 'Saved'
 						return resolve(true)
 					}
 
@@ -341,6 +404,34 @@
 				})
 				
 			},
+			checkForUpdatedNote(){
+
+				//If user leaves page then returns to page, reload the first batch
+				if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){
+					console.log('Checking for changes is note data')
+					const postData = { 
+						noteId:this.currentNoteId, 
+						text:this.getText(),
+						updated: this.updated
+					}
+
+					axios.post('/api/note/difftext', postData)
+					.then( ({data}) => {
+
+						//Don't do anything if nothing has changed
+						if(data == ''){ return }
+
+						if(data.diffs > 0){
+							//Update text and last updated time for note
+							this.setText(data.updatedText)
+							this.updated = data.updated
+						}
+					})
+				}
+
+				//Track visibility state 
+				this.lastVisibilityState = document.visibilityState
+			},
 			hashString(text){
 
 				var hash = 0;
@@ -369,7 +460,7 @@
 					this.sizeDown = true
 					//This timeout allows animation to play before closing 
 					setTimeout(() => {
-						this.$bus.$emit('close_active_note', this.position)
+						this.$bus.$emit('close_active_note', {position: this.position, noteId: this.noteid})
 						return
 					}, 300)
 				})
@@ -381,6 +472,28 @@
 
 <style type="text/css" scoped>
 
+	/*Settings manager styles */
+	.all-settings {
+		position: absolute;
+		bottom: -5px;
+		right: 10px;
+		left: 10px;
+		z-index: 99;
+		border: 1px solid;
+		background-color: var(--background_color);
+		border-color: var(--border_color);
+		box-sizing: border-box;
+		border-radius: 7px;
+		box-shadow: 0px 3px 7px 0px rgba(140,140,140,1);
+		padding: 1em;
+	}
+	/*End Settings manager styles */
+
+	.tinymce-container {
+		/* Uncomment this to see the  */
+		/*border-bottom: 2px solid green !important;*/
+	}
+
 	.note-top-menu {
 		width: 100%;
 		display: inline-block;
diff --git a/client/src/components/NoteTagEdit.vue b/client/src/components/NoteTagEdit.vue
index 0e501cf..10ce605 100644
--- a/client/src/components/NoteTagEdit.vue
+++ b/client/src/components/NoteTagEdit.vue
@@ -1,8 +1,9 @@
 <template>
-	<div v-on:mouseover="fullTagEdit = true">
+	<div v-on:click="fullTagEdit = true">
 
 		<!-- simple string view  -->
-		<div v-if="!fullTagEdit" class="ui basic segment">
+		<!-- class="ui basic segment" -->
+		<div v-if="!fullTagEdit"> 
 			<div class="simple-tag-display">
 
 				<!-- Show Loading  -->
@@ -10,11 +11,11 @@
 
 				<!-- Default count  -->
 				<span v-if="loaded">
-					<i class="tags icon"></i> <b>{{tags.length}} Tags</b> 
+					<i class="tags icon"></i> <b>{{tags.length}} Tag<span v-if="tags.length > 1">s</span></b> 
 				</span>
 				
 				<!-- No tags default text  -->
-				<span v-if="tags.length == 0 && loaded" class="ui small compact green button">
+				<span v-if="tags.length == 0 && loaded" class="ui small compact basic green button">
 					<i class="plus icon"></i> Add a tag
 				</span>
 
@@ -28,6 +29,13 @@
 		<!-- hover over view -->
 		<div v-if="fullTagEdit" class="full-tag-area fade-in-fwd" v-on:mouseleave="fullTagEdit = false; clearSuggestions()">
 
+			<!-- existing tags -->
+			<div class="delete-tag-display" v-if="tags.length > 0">
+				<div class="ui icon large label" v-for="tag in tags" :class="{ 'green':(newTagInput == tag.text) }">
+					 {{ucWords(tag.text)}} <i class="delete icon" v-on:click="removeTag(tag.id)"></i>
+				</div>
+			</div>
+
 			<!-- tag input and suggestion popup -->
 			<div class="ui form">
 				<input 
@@ -45,13 +53,6 @@
 				</div>
 			</div>
 
-			<!-- existing tags -->
-			<div class="delete-tag-display" v-if="tags.length > 0">
-				<div class="ui icon large label" v-for="tag in tags" :class="{ 'green':(newTagInput == tag.text) }">
-					 {{ucWords(tag.text)}} <i class="delete icon" v-on:click="removeTag(tag.id)"></i>
-				</div>
-			</div>
-
 		</div>
 	</div>
 </template>
@@ -233,28 +234,27 @@
 
 	/* note tag edit area */
 	.full-tag-area {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
+		
 		color: var(--text_color);
 		background-color: var(--background_color);
-		padding: 15px;
-		border: 1px solid;
+		/*padding: 15px;*/
+		/*border: 1px solid;*/
 		border-color: var(--border_color);
 	}
 	.full-tag-area .delete-tag-display {
-		margin-top: 15px;
+		/*margin-top: 15px;*/
 	}
 	.full-tag-area .ui.label {
 		margin-bottom: 5px;
 	}
 	.simple-tag-display {
-		width: 100%;
+		width: calc(100% - 0px);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		max-height: 35px;
+		color: var(--text_color);
+		cursor: pointer;
 	}
 
 	/* tag suggestion box styles */
@@ -269,8 +269,8 @@
 		height: 40px;
 		padding: 10px 15px;
 		cursor: pointer;
-		background: white;
-		color: black;
+		background-color: var(--background_color);
+		color: var(--text_color);
 	}
 	.suggestion-item.active {
 		background: green;
diff --git a/client/src/components/NoteTitleDisplayCard.vue b/client/src/components/NoteTitleDisplayCard.vue
index 1421645..8406496 100644
--- a/client/src/components/NoteTitleDisplayCard.vue
+++ b/client/src/components/NoteTitleDisplayCard.vue
@@ -11,33 +11,45 @@
 		<div class="ui grid max-height">
 
 			<!-- Show title and snippet below it -->
-			<div class="top aligned row" @click.stop="onClick(note.id)">
+			<div class="top aligned row" @click.self="onClick(note.id)">
+
+				<div class="sixteen wide column overflow-hidden" @click="e => onClick(note.id, e)">
+
+					<!-- Title display  -->
+					<div v-if="note.title.length > 0" 
+						data-test-id="title"
+						:class="{ 'big-text':(note.titleLength <= 100), 'small-text-title':(note.titleLength >= 100) }"
+						v-html="note.title"></div>
+
+					<!-- Sub text display -->
+					<div v-if="note.subtext.length > 0 && !isShowingSearchResults()"
+						data-test-id="subtext"
+						:class="{ 'big-text':(note.subtextLength <= 100 && note.titleLength <= 100), 'small-text':(note.subtextLength >= 100) }"
+						v-html="note.subtext"></div>
 
-				<div class="sixteen wide column overflow-hidden">
-					<h3  class="clickable">{{note.title}}</h3>
-					<p v-if="!isShowingSearchResults()" class="clickable">{{note.subtext}}</p>
 					<!-- Display highlights from solr results  -->
 					<div v-if="note.note_highlights.length > 0 && textResults" class="term-usage">
-						<div class="usage-row" v-for="highlight in note.note_highlights" v-html="cleanHighlight(highlight)"></div>
+						<div 
+						class="usage-row" 
+						v-for="highlight in note.note_highlights"
+						:class="{ 'big-text':(highlight <= 100), 'small-text-title':(highlight >= 100) }"
+						v-html="cleanHighlight(highlight)"></div>
 					</div>
+
 				</div>
 				
-<!-- 				<div class="sixteen wide column overflow-hidden" v-if="isShowingSearchResults()">
-					
-				</div> -->
-
 			</div>
 
 			<!-- Toolbar on the bottom  -->
-			<div class="bottom aligned row icon-bar" @click.self.stop="onClick(note.id)">
-				<div class="six wide column clickable" @click.stop="onClick(note.id)">
+			<div class="bottom aligned row icon-bar" @click.self="onClick(note.id)">
+				<div class="six wide column clickable" @click="onClick(note.id)">
 					{{$helpers.timeAgo(note.updated)}} 
-					<!-- {{(note.chars.toLocaleString())}} -->
 				</div>
 
-				<div class="ten wide right aligned column split-spans">
+				<div class="ten wide right aligned column">
 					
-					<delete-button class="hover-hide" :note-id="note.id" />
+					<!-- ALways show delete button on mobile -->
+					<delete-button :class="{ 'hover-hide':(!$store.getters.getIsUserOnMobile) }" :note-id="note.id" />
 
 					<span v-if="note.pinned == 1" data-position="top right" data-tooltip="Pinned" data-inverted="">
 						<i class="green pin icon"></i>
@@ -45,7 +57,7 @@
 					<span v-if="note.archived == 1" data-position="top right" data-tooltip="Archived" data-inverted="">
 						<i class="green archive icon"></i>
 					</span>
-					<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment">
+					<span v-if="note.attachment_count > 0" v-on:click.stop="openEditAttachment" class="clickable">
 						<i class="linkify icon"></i> {{note.attachment_count}}
 					</span>
 					<span v-if="note.tag_count == 1" data-position="top right" data-tooltip="Note has 1 tag" data-inverted="">
@@ -88,7 +100,6 @@
 			},
 			openEditAttachment(){
 				this.$router.push('/attachments/note/'+this.note.id)
-				// this.$bus.$emit('open_edit_attachment', this.note.id)
 			},
 		},
 		data () {
@@ -132,6 +143,20 @@
 </script>
 <style type="text/css">
 
+	/*Strict font sizes for card display*/
+	.small-text, .small-text > p, .small-text > h1, .small-text > h2 {
+		font-size: 1.0em !important;
+	}
+	.small-text > p, , .small-text > h1, .small-text > h2 {
+		margin-bottom: 0.5em;
+	}
+	.big-text, .big-text > p, .big-text > h1, .big-text > h2 {
+		font-size: 1.3em !important;
+	}
+	.big-text > p, .big-text > h1, .big-text > h2 {
+		margin-bottom: 0.3em;
+	}
+
 	.note-title-display-card h3 {
 		font-size: 1rem;
 		font-weight: bold;
@@ -166,7 +191,7 @@
 		border: 1px solid;
 		border-color: var(--border_color);
 		width: calc(33.333% - 10px);
-		transition: box-shadow 0.3s;
+		/*transition: box-shadow 0.3s;*/
 		box-sizing: border-box;
 		cursor: pointer;
 
diff --git a/client/src/components/SearchInput.vue b/client/src/components/SearchInput.vue
new file mode 100644
index 0000000..ab63dae
--- /dev/null
+++ b/client/src/components/SearchInput.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="ui form">
+		<div class="fields">
+			<div class="sixteen wide field">
+				<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+	export default {
+
+		data: function(){ 
+			return {
+				searchTerm: '',
+				searchTimeout: null,
+				searchDebounceDuration: 300,
+			}
+		},
+		beforeCreate: function(){
+		},
+		mounted: function(){
+
+			//search clear 
+			this.$bus.$on('reset_fast_filters', () => {
+				this.searchTerm = ''
+			})
+
+		},
+		methods: {
+			searchKeyUp(){
+				clearTimeout(this.searchTimeout)
+				this.searchTimeout = setTimeout(() => {
+					this.search()
+				}, this.searchDebounceDuration)
+			},
+			search(){
+				this.$bus.$emit('update_search_term', this.searchTerm)
+			},
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/client/src/main.js b/client/src/main.js
index f222c62..44a2522 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -32,7 +32,6 @@ require('./assets/themes/default/assets/fonts/outline-icons.woff2')
 
 
 
-
 // This callback runs before every route change, including on page load.
 // Sets the title of the page using vue router
 router.beforeEach((to, from, next) => {
diff --git a/client/src/pages/HomePage.vue b/client/src/pages/HomePage.vue
index 95a5fae..cf3195e 100644
--- a/client/src/pages/HomePage.vue
+++ b/client/src/pages/HomePage.vue
@@ -62,6 +62,12 @@
 	    100%{background-position:0% 50%}
 	}
 
+	/*safari fix - prevents page from being below the menu */
+	.dont-pad-me {
+		margin-right: 0 !important;
+		margin-left: 0 !important;
+	}
+
 </style>
 
 <template>
diff --git a/client/src/pages/NotesPage.vue b/client/src/pages/NotesPage.vue
index c312af1..ffe922e 100644
--- a/client/src/pages/NotesPage.vue
+++ b/client/src/pages/NotesPage.vue
@@ -4,15 +4,14 @@
 		<div class="ui grid" :class="{ 'mush-it-up':showOneColumn() }" ref="content">
 
 			<!-- Note filter options  -->
-			<div class="row">
+			<div class="row" v-if="!$store.getters.getIsUserOnMobile">
 				
-				<div 
-					:class="{ 'sixteen wide column':showOneColumn(), 'eight wide column':!showOneColumn() }"
-				>
+				<div :class="{ 'sixteen wide column':showOneColumn(), 'eight wide column':!showOneColumn() }">
 					<div class="ui form">
 						<div class="fields">
 							<div class="ten wide field">
-								<input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" />
+								<search-input></search-input>
+								<!-- <input v-model="searchTerm" @keyup="searchKeyUp" @:keyup.enter="search" placeholder="Search Notes" /> -->
 							</div>
 							<div class="six wide field">
 								<span class="ui fluid green button" 
@@ -20,16 +19,19 @@
 									@click="reset">
 									<i class="undo icon"></i>Reset Filters
 								</span>
+								<!-- <fast-filters /> -->
 							</div>
 						</div>
 					</div>
 				</div>
-				<div 
-					:class="{ 'sixteen wide column':showOneColumn(), 'eight wide column':!showOneColumn() }"
-				>
-					<h2 class="ui right floated">
-						<fast-filters />
-					</h2>
+			</div>
+
+			<div v-if="$store.getters.getIsUserOnMobile && showClear" class="row">
+				<div class="sixteen wide column">
+					<span class="ui fluid green button"
+						@click="reset">
+						<i class="undo icon"></i>Reset Filters
+					</span>
 				</div>
 			</div>
 
@@ -64,7 +66,8 @@
 
 					<!-- pinned notes -->
 					<div v-if="containsPinnednotes > 0" class="note-card-section">
-						<h4><i class="green pin icon"></i>Pinned <span v-if="!working">({{containsPinnednotes}})</span></h4>
+						<!-- ({{containsPinnednotes}}) -->
+						<h4><i class="green pin icon"></i>Pinned <span v-if="!working"></span></h4>
 						<div class="note-card-display-area">
 							<note-title-display-card 
 								v-for="note in notes"
@@ -79,7 +82,8 @@
 
 					<!-- normal notes  -->
 					<div v-if="containsNormalNotes > 0" class="note-card-section">
-						<h4>Notes <span v-if="!working">({{containsNormalNotes}})</span></h4>
+						<!-- ({{containsNormalNotes}}) -->
+						<h4><i class="green file icon"></i>Notes <span v-if="!working"></span></h4>
 						<div class="note-card-display-area">
 							<note-title-display-card 
 								v-for="note in notes"
@@ -114,12 +118,8 @@
 		</div>
 
 		
-		<input-notes v-if="activeNoteId1 != null" :noteid="activeNoteId1" :position="activeNote1Position" />
-		<input-notes v-if="activeNoteId2 != null" :noteid="activeNoteId2" :position="activeNote2Position" />
-
-		<div v-if="openAttachmentEdit">
-			<edit-attachment :note-id="editAttchmentId" :key="editAttchmentId" />
-		</div>
+		<input-notes v-if="activeNoteId1 != null" :noteid="activeNoteId1" :position="activeNote1Position" ref="note1" />
+		<input-notes v-if="activeNoteId2 != null" :noteid="activeNoteId2" :position="activeNote2Position" ref="note2" />
 
 	</div>
 </template>
@@ -134,7 +134,7 @@
 			'input-notes': require('@/components/NoteInputPanel.vue').default,
 			'note-title-display-card': require('@/components/NoteTitleDisplayCard.vue').default,
 			'fast-filters': require('@/components/FastFilters.vue').default,
-			'edit-attachment': require('@/components/AttachmentEditor.vue').default,
+			'search-input': require('@/components/SearchInput.vue').default,
 		},
 		data () {
 			return {
@@ -153,6 +153,7 @@
 				batchOffset: 0, //Tracks the current batch that has been loaded
 				loadingBatchTimeout: null, //Limit how quickly batches can be loaded
 				loadingInProgress: false,
+				fetchTags: false,
 
 				//Clear button is not visible 
 				showClear: false,
@@ -162,8 +163,8 @@
 				containsNormalNotes: 0,
 				containsPinnednotes: 0,
 				containsTextResults: 0,
-				containsTagResults: 0,
-				containsAttachmentResults: 0,
+				// containsTagResults: 0,
+				// containsAttachmentResults: 0,
 
 				//Currently open notes in app
 				activeNoteId1: null,
@@ -173,47 +174,14 @@
 				activeNote1Position: 0,
 				activeNote2Position: 0,
 
-				//Attchment to edit. Only 1 for now
-				openAttachmentEdit: false,
-				editAttchmentId: null,
+				lastVisibilityState: null,
+
 			}
 		},
 		beforeMount(){
 
 			this.$parent.loginGateway()
 
-			this.$bus.$on('open_edit_attachment', noteId => {
-				this.openAttachmentEdit = true
-				this.editAttchmentId = noteId
-			})
-			this.$bus.$on('close_edit_attachment', noteId => {
-				this.openAttachmentEdit = false
-				this.editAttchmentId = null
-			})
-
-			this.$bus.$on('close_active_note', position => {
-				this.closeNote(position)
-			})
-			this.$bus.$on('note_deleted', () => {
-				this.search()
-			})
-			this.$bus.$on('update_fast_filters', newFilter => {
-				this.fastFilters = newFilter
-				this.search(true, this.batchSize, false)
-			})
-
-			//New note button pushes open note event
-			this.$bus.$on('open_note', noteId => {
-				this.openNote(noteId)
-			})
-
-			//Mount notes on load if note ID is set
-			if(this.$route.params && this.$route.params.id){
-				const id = this.$route.params.id
-				this.openNote(id)
-			}
-			window.addEventListener('scroll', this.onScroll)
-
 			//Load tinymce into the page only do it once
 			if(document.querySelectorAll('[data-mceload]').length == 0){
 				let tinyMceIncluder = document.createElement('script')
@@ -222,21 +190,75 @@
 				document.head.appendChild(tinyMceIncluder)
 			}
 
-		},
-		beforeDestroy(){
-			window.removeEventListener('scroll', this.onScroll)
-		},
-		mounted() {
-
-			//Load a super fast batch
-			this.search(true, this.firstLoadBatchSize, 0)
-			.then( () => {
-				//Load a larger batch once first batch has loaded
-				this.search(false, this.batchSize, true).then( () => {
-
+			this.$bus.$on('close_active_note', ({position, noteId}) => {
+				this.closeNote(position)
+				this.updateSingleNote(noteId)
+			})
+			this.$bus.$on('note_deleted', (noteId) => {
+				//Remove deleted note from set, its deleted
+				this.notes.forEach( (note, index) => {
+					if(note.id == noteId){
+						if(note.pinned == 1){
+							this.containsPinnednotes--
+						} else {
+							this.containsNormalNotes--
+						}
+						this.notes.splice(index, 1)
+					}
+				})
+			})
+			this.$bus.$on('update_fast_filters', newFilter => {
+				this.fastFilters = newFilter
+				//Fast filters always return all the results and tags
+				this.search(true, this.batchSize, false).then( () => {
+					return this.fetchUserTags()
 				})
 			})
 
+			//Event to update search from other areas
+			this.$bus.$on('update_search_term', sentInSearchTerm => {
+				this.searchTerm = sentInSearchTerm
+				this.search(true, this.batchSize)
+					.then( () => {
+						return this.fetchUserTags()
+					})
+			})
+
+			//New note button pushes open note event
+			this.$bus.$on('open_note', noteId => {
+				this.openNote(noteId)
+			})
+
+			//Reload page content
+			this.$bus.$on('note_reload', () => {
+				this.reset()
+			})
+
+			//Mount notes on load if note ID is set
+			if(this.$route.params && this.$route.params.id){
+				const id = this.$route.params.id
+				this.openNote(id)
+			}
+			window.addEventListener('scroll', this.onScroll)
+
+			//Close notes when back button is pressed
+			window.addEventListener('hashchange', this.hashChangeAction)
+
+
+			document.addEventListener('visibilitychange', this.visibiltyChangeAction);
+
+		},
+		beforeDestroy(){
+			console.log('Unbinging all events')
+			window.removeEventListener('scroll', this.onScroll)
+			window.removeEventListener('hashchange', this.hashChangeAction)
+			document.removeEventListener('visibilitychange', this.visibiltyChangeAction)
+			this.$off() // Remove all event listeners
+			this.$bus.$off()
+		},
+		mounted() {
+			//Loads initial batch and tags
+			this.reset()
 		},
 		methods: {
 			showOneColumn(){
@@ -244,7 +266,13 @@
 				return (this.activeNoteId1 != null || this.activeNoteId2 != null) &&
 						!this.$store.getters.getIsUserOnMobile
 			},
-			openNote(id){
+			openNote(id, event = null){
+
+				//Don't open note if a link is clicked in display card
+				if(event && event.target && event.target.nodeName){
+					const nodeClick = event.target.nodeName
+					if(nodeClick == 'A'){ return }	
+				}
 
 				//Do not open same note twice
 				if(this.activeNoteId1 == id || this.activeNoteId2 == id){
@@ -287,12 +315,17 @@
 					this.activeNoteId2 = null
 				}
 
-				this.$router.push('/notes')
+				//IF two notes get opened, update ID of open note
+				if(this.activeNoteId1 || this.activeNoteId2){
+					this.$router.push('/notes/open/'+Math.max(this.activeNoteId1,this.activeNoteId2))
+				} else {
+					//No notes are open, just show notes page
+					this.$router.push('/notes')
+				}
 
 				this.activeNote1Position = 0
 				this.activeNote2Position = 0
 
-				this.search(false)
 			},
 			toggleTagFilter(tagId){
 
@@ -302,7 +335,15 @@
 					this.searchTags.push(tagId)
 				}
 
-				this.search()
+				//Reset note set and load up notes and tags
+				if(this.searchTags.length > 0){
+					this.search(true, this.batchSize)
+					return
+				}
+
+				//If no tags are selected, reset entire page
+				this.reset()
+
 			},
 			onScroll(e){
 
@@ -325,7 +366,7 @@
 					//If greater than 80 of the way down the page, load the next batch
 					if(percentageDown >= 80){
 
-						console.log('loading batch')
+						console.log('loading next batch')
 						this.search(false, this.batchSize, true)
 					}
 
@@ -334,14 +375,120 @@
 				
 				return
 			},
+			//Try to close notes on URL hash change /notes/open/123 to /notes - parse 123, close note id 123
+			hashChangeAction(event){
+				//Clean up path of hash change
+				let path = window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash
+				let newPath = event.newURL.replace(path,'')
+				let oldPath = event.oldURL.replace(path,'')
+
+				//If we go from open note ID to no note ID, close the note
+				if(newPath == '' && oldPath.indexOf('/open/') != -1){
+					//Pull note ID out of URL
+					const noteIdToClose = oldPath.split('/').pop()
+						
+					if(this.$refs.note1 && this.$refs.note1.currentNoteId == noteIdToClose){
+						this.$refs.note1.close()
+					}
+
+					if(this.$refs.note2 && this.$refs.note2.currentNoteId == noteIdToClose){
+						this.$refs.note2.close()
+					}	
+				}
+			},
+			visibiltyChangeAction(event){
+
+				//@TODO - set a timeout on this like 2 minutes or just dont do shit and update it via socket.io
+				//If user leaves page then returns to page, reload the first batch
+				if(this.lastVisibilityState == 'hidden' && document.visibilityState == 'visible'){
+					// console.log('Welcome back. Reloading a batch')
+					//Load initial batch, then tags, then other batch
+					this.search(false, this.firstLoadBatchSize)
+					.then( () => {
+						return this.fetchUserTags()
+					})
+				}
+
+				this.lastVisibilityState = document.visibilityState
+
+			},
+			// @TODO Don't even trigger this if the note wasn't changed
+			updateSingleNote(noteId){
+
+				//Lookup one note using passed in ID
+				const postData = {
+					searchQuery: this.searchTerm,
+					searchTags: this.searchTags,
+					fastFilters:{
+						noteIdSet:[noteId]
+					}
+				}
+
+				axios.post('/api/note/search', postData)
+				.then(results => {
+
+					//Pull note data out of note set
+					let newNote = results.data.notes[0]
+					let foundNote = false
+
+					if(newNote === undefined){
+						console.log('Note not visible on this page')
+						return
+					}
+
+					//Go through each note and find the one just updated
+					this.notes.forEach( (note,index) => {
+
+						if(note.id == noteId){
+							foundNote = true
+
+							//Don't move notes that were not changed
+							if(note.updated == newNote.updated){
+								return
+							}
+
+							//Compare note tags, if they changed, reload tags
+							if(newNote.tag_count != note.tag_count){
+								console.log('Tags changed, update those bitches')
+								this.fetchUserTags()
+							}
+
+							//go through each prop and update it with new values
+							Object.keys(newNote).forEach(prop => {
+								note[prop] = newNote[prop]
+							})
+
+							this.notes.splice(index, 1)
+							this.notes.unshift(note)
+						}
+					})
+
+					//This note was not found, update it in list
+					if(foundNote == false){
+						if(newNote.pinned == 1){
+							this.containsPinnednotes++
+						} else {
+							this.containsNormalNotes++
+						}
+						this.notes.unshift(newNote)
+					}
+				})
+			},
 			search(showLoading = true, notesInNextLoad = null, mergeExisting = false){
 				return new Promise((resolve, reject) => {
 
+					//Don't double load note batches
 					if(this.loadingInProgress){
 						return resolve()
 					}
 
-					//Remove all filter limits
+					//Reset a lot of stuff if we are not merging batches
+					if(!mergeExisting){
+						this.batchOffset = 0 // Reset batch offset if we are not merging note batches
+						// this.commonTags = [] //Don't reset tags, if search returns tags, they will be set
+					}
+
+					//Remove all filter limits from previous queries
 					delete this.fastFilters.limitSize
 					delete this.fastFilters.limitOffset
 
@@ -375,39 +522,49 @@
 					axios.post('/api/note/search', postData).
 					then(response => {
 
-						if(!mergeExisting){
-							this.containsNormalNotes = 0
-							this.containsPinnednotes = 0
-							this.containsTextResults = 0
-							this.batchOffset = 0 // Reset batch offset if we are not merging note batches
-							
-							this.commonTags = []
-							this.notes = []
-						}
-
 						//Save the number of notes just loaded
 						this.batchOffset += response.data.notes.length
 
-						//Mush the two new sets of data together
-						this.commonTags = this.commonTags.concat(response.data.tags)
-						this.notes = this.notes.concat(response.data.notes)
-
+						//Mush the two new sets of data together (set will be empty is reset is on)
+						if(response.data.tags.length > 0){
+							this.commonTags = response.data.tags
+						}
+						
+						//Either reload all notes with return data or merge return data
+						if(!mergeExisting){ 
+							this.notes = response.data.notes
+						} else {
+							this.notes = this.notes.concat(response.data.notes)
+						}
 
 						//Go through each note and see which section to display
+						let textResultsCount = 0
+						let pinnedResultsCount = 0
+						let normalNotesCount = 0
 						response.data.notes.forEach(note => {
 
 							if(note.note_highlights.length > 0){
-								this.containsTextResults++
+								textResultsCount++
 								return
 							}
 
 							if(note.pinned == 1){
-								this.containsPinnednotes++
+								pinnedResultsCount++
 								return
 							}
 
-							this.containsNormalNotes++
+							normalNotesCount++
 						})
+
+						if(!mergeExisting){
+							this.containsNormalNotes = normalNotesCount
+							this.containsPinnednotes = pinnedResultsCount
+							this.containsTextResults = textResultsCount
+						} else {
+							this.containsNormalNotes += normalNotesCount
+							this.containsPinnednotes += pinnedResultsCount
+							this.containsTextResults += textResultsCount
+						}
 						
 						this.working = false
 						this.loadingInProgress = false
@@ -420,7 +577,10 @@
 				let vm = this
 				clearTimeout(vm.searchDebounce)
 				vm.searchDebounce = setTimeout(() => {
-					vm.search()
+					this.search(true, this.batchSize)
+					.then( () => {
+						return this.fetchUserTags()
+					})
 				}, 500)
 			},
 			ucWords(str){
@@ -435,7 +595,28 @@
 				this.searchTags = []
 				this.fastFilters = {}
 				this.$bus.$emit('reset_fast_filters')
-				this.search(true, this.firstLoadBatchSize, 0)
+
+				//Load initial batch, then tags, then other batch
+				this.search(true, this.firstLoadBatchSize)
+				.then( () => {
+					return this.fetchUserTags()
+				})
+				.then( () => {
+					//Load a larger batch once first batch has loaded
+					return this.search(false, this.batchSize, true)
+				})
+				.then( i => { 
+					//Thats how you promise chain
+				})
+			},
+			fetchUserTags(){
+				return new Promise((resolve, reject) => {
+					axios.post('/api/tag/usertags')
+					.then( ({data}) => {
+						this.commonTags = data
+						resolve(data)
+					})
+				})
 			}
 		}
 	}
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 177809c..2f1aa2d 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -11,8 +11,11 @@ const LoginPage = () => import('@/pages/LoginPage')
 // import HelpPage from '@/pages/HelpPage'
 const HelpPage = () => import('@/pages/HelpPage')
 
+// import SharePage from '@/pages/SharePage'
+const SharePage = () => import('@/pages/SharePage')
+
+//These guys can all be loaded as a chunk
 import NotesPage from '@/pages/NotesPage'
-import SharePage from '@/pages/SharePage'
 import QuickPage from '@/pages/QuickPage'
 import AttachmentsPage from '@/pages/AttachmentsPage'
 
diff --git a/client/src/stores/mainStore.js b/client/src/stores/mainStore.js
index 654f6de..f1fee6a 100644
--- a/client/src/stores/mainStore.js
+++ b/client/src/stores/mainStore.js
@@ -10,6 +10,7 @@ export default new Vuex.Store({
 		username: null,
 		nightMode: false,
 		isUserOnMobile: false,
+		isNoteSettingsOpen: false, //Little note settings pane
 	},
 	mutations: {
 		setLoginToken(state, userData){
@@ -77,7 +78,9 @@ export default new Vuex.Store({
   					state.isUserOnMobile = true
   				}
   			})(navigator.userAgent||navigator.vendor||window.opera, state);
-
+		},
+		toggleNoteSettingsPane(state){
+			state.isNoteSettingsOpen = !state.isNoteSettingsOpen
 		}
 	},
 	getters: {
@@ -96,6 +99,9 @@ export default new Vuex.Store({
 		},
 		getIsUserOnMobile: state => {
 			return state.isUserOnMobile
-		}
+		},
+		getIsNoteSettingsOpen: state => {
+			return state.isNoteSettingsOpen
+		},
 	}
 })
\ No newline at end of file
diff --git a/server/helpers/DiffMatchPatch.js b/server/helpers/DiffMatchPatch.js
new file mode 100644
index 0000000..88a702c
--- /dev/null
+++ b/server/helpers/DiffMatchPatch.js
@@ -0,0 +1,2236 @@
+/**
+ * Diff Match and Patch
+ * Copyright 2018 The diff-match-patch Authors.
+ * https://github.com/google/diff-match-patch
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Computes the difference between two texts to create a patch.
+ * Applies the patch onto another text, allowing for errors.
+ * @author fraser@google.com (Neil Fraser)
+ */
+
+/**
+ * Class containing the diff, match and patch methods.
+ * @constructor
+ */
+var diff_match_patch = function() {
+
+  // Defaults.
+  // Redefine these in your program to override the defaults.
+
+  // Number of seconds to map a diff before giving up (0 for infinity).
+  this.Diff_Timeout = 1.0;
+  // Cost of an empty edit operation in terms of edit characters.
+  this.Diff_EditCost = 4;
+  // At what point is no match declared (0.0 = perfection, 1.0 = very loose).
+  this.Match_Threshold = 0.5;
+  // How far to search for a match (0 = exact location, 1000+ = broad match).
+  // A match this many characters away from the expected location will add
+  // 1.0 to the score (0.0 is a perfect match).
+  this.Match_Distance = 1000;
+  // When deleting a large block of text (over ~64 characters), how close do
+  // the contents have to be to match the expected contents. (0.0 = perfection,
+  // 1.0 = very loose).  Note that Match_Threshold controls how closely the
+  // end points of a delete need to match.
+  this.Patch_DeleteThreshold = 0.5;
+  // Chunk size for context length.
+  this.Patch_Margin = 4;
+
+  // The number of bits in an int.
+  this.Match_MaxBits = 32;
+};
+
+
+//  DIFF FUNCTIONS
+
+
+/**
+ * The data structure representing a diff is an array of tuples:
+ * [[DIFF_DELETE, 'Hello'], [DIFF_INSERT, 'Goodbye'], [DIFF_EQUAL, ' world.']]
+ * which means: delete 'Hello', add 'Goodbye' and keep ' world.'
+ */
+var DIFF_DELETE = -1;
+var DIFF_INSERT = 1;
+var DIFF_EQUAL = 0;
+
+/**
+ * Class representing one diff tuple.
+ * Attempts to look like a two-element array (which is what this used to be).
+ * @param {number} op Operation, one of: DIFF_DELETE, DIFF_INSERT, DIFF_EQUAL.
+ * @param {string} text Text to be deleted, inserted, or retained.
+ * @constructor
+ */
+diff_match_patch.Diff = function(op, text) {
+  this[0] = op;
+  this[1] = text;
+};
+
+diff_match_patch.Diff.prototype.length = 2;
+
+/**
+ * Emulate the output of a two-element array.
+ * @return {string} Diff operation as a string.
+ */
+diff_match_patch.Diff.prototype.toString = function() {
+  return this[0] + ',' + this[1];
+};
+
+
+/**
+ * Find the differences between two texts.  Simplifies the problem by stripping
+ * any common prefix or suffix off the texts before diffing.
+ * @param {string} text1 Old string to be diffed.
+ * @param {string} text2 New string to be diffed.
+ * @param {boolean=} opt_checklines Optional speedup flag. If present and false,
+ *     then don't run a line-level diff first to identify the changed areas.
+ *     Defaults to true, which does a faster, slightly less optimal diff.
+ * @param {number=} opt_deadline Optional time when the diff should be complete
+ *     by.  Used internally for recursive calls.  Users should set DiffTimeout
+ *     instead.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ */
+diff_match_patch.prototype.diff_main = function(text1, text2, opt_checklines,
+    opt_deadline) {
+  // Set a deadline by which time the diff must be complete.
+  if (typeof opt_deadline == 'undefined') {
+    if (this.Diff_Timeout <= 0) {
+      opt_deadline = Number.MAX_VALUE;
+    } else {
+      opt_deadline = (new Date).getTime() + this.Diff_Timeout * 1000;
+    }
+  }
+  var deadline = opt_deadline;
+
+  // Check for null inputs.
+  if (text1 == null || text2 == null) {
+    throw new Error('Null input. (diff_main)');
+  }
+
+  // Check for equality (speedup).
+  if (text1 == text2) {
+    if (text1) {
+      return [new diff_match_patch.Diff(DIFF_EQUAL, text1)];
+    }
+    return [];
+  }
+
+  if (typeof opt_checklines == 'undefined') {
+    opt_checklines = true;
+  }
+  var checklines = opt_checklines;
+
+  // Trim off common prefix (speedup).
+  var commonlength = this.diff_commonPrefix(text1, text2);
+  var commonprefix = text1.substring(0, commonlength);
+  text1 = text1.substring(commonlength);
+  text2 = text2.substring(commonlength);
+
+  // Trim off common suffix (speedup).
+  commonlength = this.diff_commonSuffix(text1, text2);
+  var commonsuffix = text1.substring(text1.length - commonlength);
+  text1 = text1.substring(0, text1.length - commonlength);
+  text2 = text2.substring(0, text2.length - commonlength);
+
+  // Compute the diff on the middle block.
+  var diffs = this.diff_compute_(text1, text2, checklines, deadline);
+
+  // Restore the prefix and suffix.
+  if (commonprefix) {
+    diffs.unshift(new diff_match_patch.Diff(DIFF_EQUAL, commonprefix));
+  }
+  if (commonsuffix) {
+    diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, commonsuffix));
+  }
+  this.diff_cleanupMerge(diffs);
+  return diffs;
+};
+
+
+/**
+ * Find the differences between two texts.  Assumes that the texts do not
+ * have any common prefix or suffix.
+ * @param {string} text1 Old string to be diffed.
+ * @param {string} text2 New string to be diffed.
+ * @param {boolean} checklines Speedup flag.  If false, then don't run a
+ *     line-level diff first to identify the changed areas.
+ *     If true, then run a faster, slightly less optimal diff.
+ * @param {number} deadline Time when the diff should be complete by.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ * @private
+ */
+diff_match_patch.prototype.diff_compute_ = function(text1, text2, checklines,
+    deadline) {
+  var diffs;
+
+  if (!text1) {
+    // Just add some text (speedup).
+    return [new diff_match_patch.Diff(DIFF_INSERT, text2)];
+  }
+
+  if (!text2) {
+    // Just delete some text (speedup).
+    return [new diff_match_patch.Diff(DIFF_DELETE, text1)];
+  }
+
+  var longtext = text1.length > text2.length ? text1 : text2;
+  var shorttext = text1.length > text2.length ? text2 : text1;
+  var i = longtext.indexOf(shorttext);
+  if (i != -1) {
+    // Shorter text is inside the longer text (speedup).
+    diffs = [new diff_match_patch.Diff(DIFF_INSERT, longtext.substring(0, i)),
+             new diff_match_patch.Diff(DIFF_EQUAL, shorttext),
+             new diff_match_patch.Diff(DIFF_INSERT,
+                 longtext.substring(i + shorttext.length))];
+    // Swap insertions for deletions if diff is reversed.
+    if (text1.length > text2.length) {
+      diffs[0][0] = diffs[2][0] = DIFF_DELETE;
+    }
+    return diffs;
+  }
+
+  if (shorttext.length == 1) {
+    // Single character string.
+    // After the previous speedup, the character can't be an equality.
+    return [new diff_match_patch.Diff(DIFF_DELETE, text1),
+            new diff_match_patch.Diff(DIFF_INSERT, text2)];
+  }
+
+  // Check to see if the problem can be split in two.
+  var hm = this.diff_halfMatch_(text1, text2);
+  if (hm) {
+    // A half-match was found, sort out the return data.
+    var text1_a = hm[0];
+    var text1_b = hm[1];
+    var text2_a = hm[2];
+    var text2_b = hm[3];
+    var mid_common = hm[4];
+    // Send both pairs off for separate processing.
+    var diffs_a = this.diff_main(text1_a, text2_a, checklines, deadline);
+    var diffs_b = this.diff_main(text1_b, text2_b, checklines, deadline);
+    // Merge the results.
+    return diffs_a.concat([new diff_match_patch.Diff(DIFF_EQUAL, mid_common)],
+                          diffs_b);
+  }
+
+  if (checklines && text1.length > 100 && text2.length > 100) {
+    return this.diff_lineMode_(text1, text2, deadline);
+  }
+
+  return this.diff_bisect_(text1, text2, deadline);
+};
+
+
+/**
+ * Do a quick line-level diff on both strings, then rediff the parts for
+ * greater accuracy.
+ * This speedup can produce non-minimal diffs.
+ * @param {string} text1 Old string to be diffed.
+ * @param {string} text2 New string to be diffed.
+ * @param {number} deadline Time when the diff should be complete by.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ * @private
+ */
+diff_match_patch.prototype.diff_lineMode_ = function(text1, text2, deadline) {
+  // Scan the text on a line-by-line basis first.
+  var a = this.diff_linesToChars_(text1, text2);
+  text1 = a.chars1;
+  text2 = a.chars2;
+  var linearray = a.lineArray;
+
+  var diffs = this.diff_main(text1, text2, false, deadline);
+
+  // Convert the diff back to original text.
+  this.diff_charsToLines_(diffs, linearray);
+  // Eliminate freak matches (e.g. blank lines)
+  this.diff_cleanupSemantic(diffs);
+
+  // Rediff any replacement blocks, this time character-by-character.
+  // Add a dummy entry at the end.
+  diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, ''));
+  var pointer = 0;
+  var count_delete = 0;
+  var count_insert = 0;
+  var text_delete = '';
+  var text_insert = '';
+  while (pointer < diffs.length) {
+    switch (diffs[pointer][0]) {
+      case DIFF_INSERT:
+        count_insert++;
+        text_insert += diffs[pointer][1];
+        break;
+      case DIFF_DELETE:
+        count_delete++;
+        text_delete += diffs[pointer][1];
+        break;
+      case DIFF_EQUAL:
+        // Upon reaching an equality, check for prior redundancies.
+        if (count_delete >= 1 && count_insert >= 1) {
+          // Delete the offending records and add the merged ones.
+          diffs.splice(pointer - count_delete - count_insert,
+                       count_delete + count_insert);
+          pointer = pointer - count_delete - count_insert;
+          var subDiff =
+              this.diff_main(text_delete, text_insert, false, deadline);
+          for (var j = subDiff.length - 1; j >= 0; j--) {
+            diffs.splice(pointer, 0, subDiff[j]);
+          }
+          pointer = pointer + subDiff.length;
+        }
+        count_insert = 0;
+        count_delete = 0;
+        text_delete = '';
+        text_insert = '';
+        break;
+    }
+    pointer++;
+  }
+  diffs.pop();  // Remove the dummy entry at the end.
+
+  return diffs;
+};
+
+
+/**
+ * Find the 'middle snake' of a diff, split the problem in two
+ * and return the recursively constructed diff.
+ * See Myers 1986 paper: An O(ND) Difference Algorithm and Its Variations.
+ * @param {string} text1 Old string to be diffed.
+ * @param {string} text2 New string to be diffed.
+ * @param {number} deadline Time at which to bail if not yet complete.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ * @private
+ */
+diff_match_patch.prototype.diff_bisect_ = function(text1, text2, deadline) {
+  // Cache the text lengths to prevent multiple calls.
+  var text1_length = text1.length;
+  var text2_length = text2.length;
+  var max_d = Math.ceil((text1_length + text2_length) / 2);
+  var v_offset = max_d;
+  var v_length = 2 * max_d;
+  var v1 = new Array(v_length);
+  var v2 = new Array(v_length);
+  // Setting all elements to -1 is faster in Chrome & Firefox than mixing
+  // integers and undefined.
+  for (var x = 0; x < v_length; x++) {
+    v1[x] = -1;
+    v2[x] = -1;
+  }
+  v1[v_offset + 1] = 0;
+  v2[v_offset + 1] = 0;
+  var delta = text1_length - text2_length;
+  // If the total number of characters is odd, then the front path will collide
+  // with the reverse path.
+  var front = (delta % 2 != 0);
+  // Offsets for start and end of k loop.
+  // Prevents mapping of space beyond the grid.
+  var k1start = 0;
+  var k1end = 0;
+  var k2start = 0;
+  var k2end = 0;
+  for (var d = 0; d < max_d; d++) {
+    // Bail out if deadline is reached.
+    if ((new Date()).getTime() > deadline) {
+      break;
+    }
+
+    // Walk the front path one step.
+    for (var k1 = -d + k1start; k1 <= d - k1end; k1 += 2) {
+      var k1_offset = v_offset + k1;
+      var x1;
+      if (k1 == -d || (k1 != d && v1[k1_offset - 1] < v1[k1_offset + 1])) {
+        x1 = v1[k1_offset + 1];
+      } else {
+        x1 = v1[k1_offset - 1] + 1;
+      }
+      var y1 = x1 - k1;
+      while (x1 < text1_length && y1 < text2_length &&
+             text1.charAt(x1) == text2.charAt(y1)) {
+        x1++;
+        y1++;
+      }
+      v1[k1_offset] = x1;
+      if (x1 > text1_length) {
+        // Ran off the right of the graph.
+        k1end += 2;
+      } else if (y1 > text2_length) {
+        // Ran off the bottom of the graph.
+        k1start += 2;
+      } else if (front) {
+        var k2_offset = v_offset + delta - k1;
+        if (k2_offset >= 0 && k2_offset < v_length && v2[k2_offset] != -1) {
+          // Mirror x2 onto top-left coordinate system.
+          var x2 = text1_length - v2[k2_offset];
+          if (x1 >= x2) {
+            // Overlap detected.
+            return this.diff_bisectSplit_(text1, text2, x1, y1, deadline);
+          }
+        }
+      }
+    }
+
+    // Walk the reverse path one step.
+    for (var k2 = -d + k2start; k2 <= d - k2end; k2 += 2) {
+      var k2_offset = v_offset + k2;
+      var x2;
+      if (k2 == -d || (k2 != d && v2[k2_offset - 1] < v2[k2_offset + 1])) {
+        x2 = v2[k2_offset + 1];
+      } else {
+        x2 = v2[k2_offset - 1] + 1;
+      }
+      var y2 = x2 - k2;
+      while (x2 < text1_length && y2 < text2_length &&
+             text1.charAt(text1_length - x2 - 1) ==
+             text2.charAt(text2_length - y2 - 1)) {
+        x2++;
+        y2++;
+      }
+      v2[k2_offset] = x2;
+      if (x2 > text1_length) {
+        // Ran off the left of the graph.
+        k2end += 2;
+      } else if (y2 > text2_length) {
+        // Ran off the top of the graph.
+        k2start += 2;
+      } else if (!front) {
+        var k1_offset = v_offset + delta - k2;
+        if (k1_offset >= 0 && k1_offset < v_length && v1[k1_offset] != -1) {
+          var x1 = v1[k1_offset];
+          var y1 = v_offset + x1 - k1_offset;
+          // Mirror x2 onto top-left coordinate system.
+          x2 = text1_length - x2;
+          if (x1 >= x2) {
+            // Overlap detected.
+            return this.diff_bisectSplit_(text1, text2, x1, y1, deadline);
+          }
+        }
+      }
+    }
+  }
+  // Diff took too long and hit the deadline or
+  // number of diffs equals number of characters, no commonality at all.
+  return [new diff_match_patch.Diff(DIFF_DELETE, text1),
+          new diff_match_patch.Diff(DIFF_INSERT, text2)];
+};
+
+
+/**
+ * Given the location of the 'middle snake', split the diff in two parts
+ * and recurse.
+ * @param {string} text1 Old string to be diffed.
+ * @param {string} text2 New string to be diffed.
+ * @param {number} x Index of split point in text1.
+ * @param {number} y Index of split point in text2.
+ * @param {number} deadline Time at which to bail if not yet complete.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ * @private
+ */
+diff_match_patch.prototype.diff_bisectSplit_ = function(text1, text2, x, y,
+    deadline) {
+  var text1a = text1.substring(0, x);
+  var text2a = text2.substring(0, y);
+  var text1b = text1.substring(x);
+  var text2b = text2.substring(y);
+
+  // Compute both diffs serially.
+  var diffs = this.diff_main(text1a, text2a, false, deadline);
+  var diffsb = this.diff_main(text1b, text2b, false, deadline);
+
+  return diffs.concat(diffsb);
+};
+
+
+/**
+ * Split two texts into an array of strings.  Reduce the texts to a string of
+ * hashes where each Unicode character represents one line.
+ * @param {string} text1 First string.
+ * @param {string} text2 Second string.
+ * @return {{chars1: string, chars2: string, lineArray: !Array.<string>}}
+ *     An object containing the encoded text1, the encoded text2 and
+ *     the array of unique strings.
+ *     The zeroth element of the array of unique strings is intentionally blank.
+ * @private
+ */
+diff_match_patch.prototype.diff_linesToChars_ = function(text1, text2) {
+  var lineArray = [];  // e.g. lineArray[4] == 'Hello\n'
+  var lineHash = {};   // e.g. lineHash['Hello\n'] == 4
+
+  // '\x00' is a valid character, but various debuggers don't like it.
+  // So we'll insert a junk entry to avoid generating a null character.
+  lineArray[0] = '';
+
+  /**
+   * Split a text into an array of strings.  Reduce the texts to a string of
+   * hashes where each Unicode character represents one line.
+   * Modifies linearray and linehash through being a closure.
+   * @param {string} text String to encode.
+   * @return {string} Encoded string.
+   * @private
+   */
+  function diff_linesToCharsMunge_(text) {
+    var chars = '';
+    // Walk the text, pulling out a substring for each line.
+    // text.split('\n') would would temporarily double our memory footprint.
+    // Modifying text would create many large strings to garbage collect.
+    var lineStart = 0;
+    var lineEnd = -1;
+    // Keeping our own length variable is faster than looking it up.
+    var lineArrayLength = lineArray.length;
+    while (lineEnd < text.length - 1) {
+      lineEnd = text.indexOf('\n', lineStart);
+      if (lineEnd == -1) {
+        lineEnd = text.length - 1;
+      }
+      var line = text.substring(lineStart, lineEnd + 1);
+
+      if (lineHash.hasOwnProperty ? lineHash.hasOwnProperty(line) :
+          (lineHash[line] !== undefined)) {
+        chars += String.fromCharCode(lineHash[line]);
+      } else {
+        if (lineArrayLength == maxLines) {
+          // Bail out at 65535 because
+          // String.fromCharCode(65536) == String.fromCharCode(0)
+          line = text.substring(lineStart);
+          lineEnd = text.length;
+        }
+        chars += String.fromCharCode(lineArrayLength);
+        lineHash[line] = lineArrayLength;
+        lineArray[lineArrayLength++] = line;
+      }
+      lineStart = lineEnd + 1;
+    }
+    return chars;
+  }
+  // Allocate 2/3rds of the space for text1, the rest for text2.
+  var maxLines = 40000;
+  var chars1 = diff_linesToCharsMunge_(text1);
+  maxLines = 65535;
+  var chars2 = diff_linesToCharsMunge_(text2);
+  return {chars1: chars1, chars2: chars2, lineArray: lineArray};
+};
+
+
+/**
+ * Rehydrate the text in a diff from a string of line hashes to real lines of
+ * text.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @param {!Array.<string>} lineArray Array of unique strings.
+ * @private
+ */
+diff_match_patch.prototype.diff_charsToLines_ = function(diffs, lineArray) {
+  for (var i = 0; i < diffs.length; i++) {
+    var chars = diffs[i][1];
+    var text = [];
+    for (var j = 0; j < chars.length; j++) {
+      text[j] = lineArray[chars.charCodeAt(j)];
+    }
+    diffs[i][1] = text.join('');
+  }
+};
+
+
+/**
+ * Determine the common prefix of two strings.
+ * @param {string} text1 First string.
+ * @param {string} text2 Second string.
+ * @return {number} The number of characters common to the start of each
+ *     string.
+ */
+diff_match_patch.prototype.diff_commonPrefix = function(text1, text2) {
+  // Quick check for common null cases.
+  if (!text1 || !text2 || text1.charAt(0) != text2.charAt(0)) {
+    return 0;
+  }
+  // Binary search.
+  // Performance analysis: https://neil.fraser.name/news/2007/10/09/
+  var pointermin = 0;
+  var pointermax = Math.min(text1.length, text2.length);
+  var pointermid = pointermax;
+  var pointerstart = 0;
+  while (pointermin < pointermid) {
+    if (text1.substring(pointerstart, pointermid) ==
+        text2.substring(pointerstart, pointermid)) {
+      pointermin = pointermid;
+      pointerstart = pointermin;
+    } else {
+      pointermax = pointermid;
+    }
+    pointermid = Math.floor((pointermax - pointermin) / 2 + pointermin);
+  }
+  return pointermid;
+};
+
+
+/**
+ * Determine the common suffix of two strings.
+ * @param {string} text1 First string.
+ * @param {string} text2 Second string.
+ * @return {number} The number of characters common to the end of each string.
+ */
+diff_match_patch.prototype.diff_commonSuffix = function(text1, text2) {
+  // Quick check for common null cases.
+  if (!text1 || !text2 ||
+      text1.charAt(text1.length - 1) != text2.charAt(text2.length - 1)) {
+    return 0;
+  }
+  // Binary search.
+  // Performance analysis: https://neil.fraser.name/news/2007/10/09/
+  var pointermin = 0;
+  var pointermax = Math.min(text1.length, text2.length);
+  var pointermid = pointermax;
+  var pointerend = 0;
+  while (pointermin < pointermid) {
+    if (text1.substring(text1.length - pointermid, text1.length - pointerend) ==
+        text2.substring(text2.length - pointermid, text2.length - pointerend)) {
+      pointermin = pointermid;
+      pointerend = pointermin;
+    } else {
+      pointermax = pointermid;
+    }
+    pointermid = Math.floor((pointermax - pointermin) / 2 + pointermin);
+  }
+  return pointermid;
+};
+
+
+/**
+ * Determine if the suffix of one string is the prefix of another.
+ * @param {string} text1 First string.
+ * @param {string} text2 Second string.
+ * @return {number} The number of characters common to the end of the first
+ *     string and the start of the second string.
+ * @private
+ */
+diff_match_patch.prototype.diff_commonOverlap_ = function(text1, text2) {
+  // Cache the text lengths to prevent multiple calls.
+  var text1_length = text1.length;
+  var text2_length = text2.length;
+  // Eliminate the null case.
+  if (text1_length == 0 || text2_length == 0) {
+    return 0;
+  }
+  // Truncate the longer string.
+  if (text1_length > text2_length) {
+    text1 = text1.substring(text1_length - text2_length);
+  } else if (text1_length < text2_length) {
+    text2 = text2.substring(0, text1_length);
+  }
+  var text_length = Math.min(text1_length, text2_length);
+  // Quick check for the worst case.
+  if (text1 == text2) {
+    return text_length;
+  }
+
+  // Start by looking for a single character match
+  // and increase length until no match is found.
+  // Performance analysis: https://neil.fraser.name/news/2010/11/04/
+  var best = 0;
+  var length = 1;
+  while (true) {
+    var pattern = text1.substring(text_length - length);
+    var found = text2.indexOf(pattern);
+    if (found == -1) {
+      return best;
+    }
+    length += found;
+    if (found == 0 || text1.substring(text_length - length) ==
+        text2.substring(0, length)) {
+      best = length;
+      length++;
+    }
+  }
+};
+
+
+/**
+ * Do the two texts share a substring which is at least half the length of the
+ * longer text?
+ * This speedup can produce non-minimal diffs.
+ * @param {string} text1 First string.
+ * @param {string} text2 Second string.
+ * @return {Array.<string>} Five element Array, containing the prefix of
+ *     text1, the suffix of text1, the prefix of text2, the suffix of
+ *     text2 and the common middle.  Or null if there was no match.
+ * @private
+ */
+diff_match_patch.prototype.diff_halfMatch_ = function(text1, text2) {
+  if (this.Diff_Timeout <= 0) {
+    // Don't risk returning a non-optimal diff if we have unlimited time.
+    return null;
+  }
+  var longtext = text1.length > text2.length ? text1 : text2;
+  var shorttext = text1.length > text2.length ? text2 : text1;
+  if (longtext.length < 4 || shorttext.length * 2 < longtext.length) {
+    return null;  // Pointless.
+  }
+  var dmp = this;  // 'this' becomes 'window' in a closure.
+
+  /**
+   * Does a substring of shorttext exist within longtext such that the substring
+   * is at least half the length of longtext?
+   * Closure, but does not reference any external variables.
+   * @param {string} longtext Longer string.
+   * @param {string} shorttext Shorter string.
+   * @param {number} i Start index of quarter length substring within longtext.
+   * @return {Array.<string>} Five element Array, containing the prefix of
+   *     longtext, the suffix of longtext, the prefix of shorttext, the suffix
+   *     of shorttext and the common middle.  Or null if there was no match.
+   * @private
+   */
+  function diff_halfMatchI_(longtext, shorttext, i) {
+    // Start with a 1/4 length substring at position i as a seed.
+    var seed = longtext.substring(i, i + Math.floor(longtext.length / 4));
+    var j = -1;
+    var best_common = '';
+    var best_longtext_a, best_longtext_b, best_shorttext_a, best_shorttext_b;
+    while ((j = shorttext.indexOf(seed, j + 1)) != -1) {
+      var prefixLength = dmp.diff_commonPrefix(longtext.substring(i),
+                                               shorttext.substring(j));
+      var suffixLength = dmp.diff_commonSuffix(longtext.substring(0, i),
+                                               shorttext.substring(0, j));
+      if (best_common.length < suffixLength + prefixLength) {
+        best_common = shorttext.substring(j - suffixLength, j) +
+            shorttext.substring(j, j + prefixLength);
+        best_longtext_a = longtext.substring(0, i - suffixLength);
+        best_longtext_b = longtext.substring(i + prefixLength);
+        best_shorttext_a = shorttext.substring(0, j - suffixLength);
+        best_shorttext_b = shorttext.substring(j + prefixLength);
+      }
+    }
+    if (best_common.length * 2 >= longtext.length) {
+      return [best_longtext_a, best_longtext_b,
+              best_shorttext_a, best_shorttext_b, best_common];
+    } else {
+      return null;
+    }
+  }
+
+  // First check if the second quarter is the seed for a half-match.
+  var hm1 = diff_halfMatchI_(longtext, shorttext,
+                             Math.ceil(longtext.length / 4));
+  // Check again based on the third quarter.
+  var hm2 = diff_halfMatchI_(longtext, shorttext,
+                             Math.ceil(longtext.length / 2));
+  var hm;
+  if (!hm1 && !hm2) {
+    return null;
+  } else if (!hm2) {
+    hm = hm1;
+  } else if (!hm1) {
+    hm = hm2;
+  } else {
+    // Both matched.  Select the longest.
+    hm = hm1[4].length > hm2[4].length ? hm1 : hm2;
+  }
+
+  // A half-match was found, sort out the return data.
+  var text1_a, text1_b, text2_a, text2_b;
+  if (text1.length > text2.length) {
+    text1_a = hm[0];
+    text1_b = hm[1];
+    text2_a = hm[2];
+    text2_b = hm[3];
+  } else {
+    text2_a = hm[0];
+    text2_b = hm[1];
+    text1_a = hm[2];
+    text1_b = hm[3];
+  }
+  var mid_common = hm[4];
+  return [text1_a, text1_b, text2_a, text2_b, mid_common];
+};
+
+
+/**
+ * Reduce the number of edits by eliminating semantically trivial equalities.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ */
+diff_match_patch.prototype.diff_cleanupSemantic = function(diffs) {
+  var changes = false;
+  var equalities = [];  // Stack of indices where equalities are found.
+  var equalitiesLength = 0;  // Keeping our own length var is faster in JS.
+  /** @type {?string} */
+  var lastEquality = null;
+  // Always equal to diffs[equalities[equalitiesLength - 1]][1]
+  var pointer = 0;  // Index of current position.
+  // Number of characters that changed prior to the equality.
+  var length_insertions1 = 0;
+  var length_deletions1 = 0;
+  // Number of characters that changed after the equality.
+  var length_insertions2 = 0;
+  var length_deletions2 = 0;
+  while (pointer < diffs.length) {
+    if (diffs[pointer][0] == DIFF_EQUAL) {  // Equality found.
+      equalities[equalitiesLength++] = pointer;
+      length_insertions1 = length_insertions2;
+      length_deletions1 = length_deletions2;
+      length_insertions2 = 0;
+      length_deletions2 = 0;
+      lastEquality = diffs[pointer][1];
+    } else {  // An insertion or deletion.
+      if (diffs[pointer][0] == DIFF_INSERT) {
+        length_insertions2 += diffs[pointer][1].length;
+      } else {
+        length_deletions2 += diffs[pointer][1].length;
+      }
+      // Eliminate an equality that is smaller or equal to the edits on both
+      // sides of it.
+      if (lastEquality && (lastEquality.length <=
+          Math.max(length_insertions1, length_deletions1)) &&
+          (lastEquality.length <= Math.max(length_insertions2,
+                                           length_deletions2))) {
+        // Duplicate record.
+        diffs.splice(equalities[equalitiesLength - 1], 0,
+                     new diff_match_patch.Diff(DIFF_DELETE, lastEquality));
+        // Change second copy to insert.
+        diffs[equalities[equalitiesLength - 1] + 1][0] = DIFF_INSERT;
+        // Throw away the equality we just deleted.
+        equalitiesLength--;
+        // Throw away the previous equality (it needs to be reevaluated).
+        equalitiesLength--;
+        pointer = equalitiesLength > 0 ? equalities[equalitiesLength - 1] : -1;
+        length_insertions1 = 0;  // Reset the counters.
+        length_deletions1 = 0;
+        length_insertions2 = 0;
+        length_deletions2 = 0;
+        lastEquality = null;
+        changes = true;
+      }
+    }
+    pointer++;
+  }
+
+  // Normalize the diff.
+  if (changes) {
+    this.diff_cleanupMerge(diffs);
+  }
+  this.diff_cleanupSemanticLossless(diffs);
+
+  // Find any overlaps between deletions and insertions.
+  // e.g: <del>abcxxx</del><ins>xxxdef</ins>
+  //   -> <del>abc</del>xxx<ins>def</ins>
+  // e.g: <del>xxxabc</del><ins>defxxx</ins>
+  //   -> <ins>def</ins>xxx<del>abc</del>
+  // Only extract an overlap if it is as big as the edit ahead or behind it.
+  pointer = 1;
+  while (pointer < diffs.length) {
+    if (diffs[pointer - 1][0] == DIFF_DELETE &&
+        diffs[pointer][0] == DIFF_INSERT) {
+      var deletion = diffs[pointer - 1][1];
+      var insertion = diffs[pointer][1];
+      var overlap_length1 = this.diff_commonOverlap_(deletion, insertion);
+      var overlap_length2 = this.diff_commonOverlap_(insertion, deletion);
+      if (overlap_length1 >= overlap_length2) {
+        if (overlap_length1 >= deletion.length / 2 ||
+            overlap_length1 >= insertion.length / 2) {
+          // Overlap found.  Insert an equality and trim the surrounding edits.
+          diffs.splice(pointer, 0, new diff_match_patch.Diff(DIFF_EQUAL,
+              insertion.substring(0, overlap_length1)));
+          diffs[pointer - 1][1] =
+              deletion.substring(0, deletion.length - overlap_length1);
+          diffs[pointer + 1][1] = insertion.substring(overlap_length1);
+          pointer++;
+        }
+      } else {
+        if (overlap_length2 >= deletion.length / 2 ||
+            overlap_length2 >= insertion.length / 2) {
+          // Reverse overlap found.
+          // Insert an equality and swap and trim the surrounding edits.
+          diffs.splice(pointer, 0, new diff_match_patch.Diff(DIFF_EQUAL,
+              deletion.substring(0, overlap_length2)));
+          diffs[pointer - 1][0] = DIFF_INSERT;
+          diffs[pointer - 1][1] =
+              insertion.substring(0, insertion.length - overlap_length2);
+          diffs[pointer + 1][0] = DIFF_DELETE;
+          diffs[pointer + 1][1] =
+              deletion.substring(overlap_length2);
+          pointer++;
+        }
+      }
+      pointer++;
+    }
+    pointer++;
+  }
+};
+
+
+/**
+ * Look for single edits surrounded on both sides by equalities
+ * which can be shifted sideways to align the edit to a word boundary.
+ * e.g: The c<ins>at c</ins>ame. -> The <ins>cat </ins>came.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ */
+diff_match_patch.prototype.diff_cleanupSemanticLossless = function(diffs) {
+  /**
+   * Given two strings, compute a score representing whether the internal
+   * boundary falls on logical boundaries.
+   * Scores range from 6 (best) to 0 (worst).
+   * Closure, but does not reference any external variables.
+   * @param {string} one First string.
+   * @param {string} two Second string.
+   * @return {number} The score.
+   * @private
+   */
+  function diff_cleanupSemanticScore_(one, two) {
+    if (!one || !two) {
+      // Edges are the best.
+      return 6;
+    }
+
+    // Each port of this function behaves slightly differently due to
+    // subtle differences in each language's definition of things like
+    // 'whitespace'.  Since this function's purpose is largely cosmetic,
+    // the choice has been made to use each language's native features
+    // rather than force total conformity.
+    var char1 = one.charAt(one.length - 1);
+    var char2 = two.charAt(0);
+    var nonAlphaNumeric1 = char1.match(diff_match_patch.nonAlphaNumericRegex_);
+    var nonAlphaNumeric2 = char2.match(diff_match_patch.nonAlphaNumericRegex_);
+    var whitespace1 = nonAlphaNumeric1 &&
+        char1.match(diff_match_patch.whitespaceRegex_);
+    var whitespace2 = nonAlphaNumeric2 &&
+        char2.match(diff_match_patch.whitespaceRegex_);
+    var lineBreak1 = whitespace1 &&
+        char1.match(diff_match_patch.linebreakRegex_);
+    var lineBreak2 = whitespace2 &&
+        char2.match(diff_match_patch.linebreakRegex_);
+    var blankLine1 = lineBreak1 &&
+        one.match(diff_match_patch.blanklineEndRegex_);
+    var blankLine2 = lineBreak2 &&
+        two.match(diff_match_patch.blanklineStartRegex_);
+
+    if (blankLine1 || blankLine2) {
+      // Five points for blank lines.
+      return 5;
+    } else if (lineBreak1 || lineBreak2) {
+      // Four points for line breaks.
+      return 4;
+    } else if (nonAlphaNumeric1 && !whitespace1 && whitespace2) {
+      // Three points for end of sentences.
+      return 3;
+    } else if (whitespace1 || whitespace2) {
+      // Two points for whitespace.
+      return 2;
+    } else if (nonAlphaNumeric1 || nonAlphaNumeric2) {
+      // One point for non-alphanumeric.
+      return 1;
+    }
+    return 0;
+  }
+
+  var pointer = 1;
+  // Intentionally ignore the first and last element (don't need checking).
+  while (pointer < diffs.length - 1) {
+    if (diffs[pointer - 1][0] == DIFF_EQUAL &&
+        diffs[pointer + 1][0] == DIFF_EQUAL) {
+      // This is a single edit surrounded by equalities.
+      var equality1 = diffs[pointer - 1][1];
+      var edit = diffs[pointer][1];
+      var equality2 = diffs[pointer + 1][1];
+
+      // First, shift the edit as far left as possible.
+      var commonOffset = this.diff_commonSuffix(equality1, edit);
+      if (commonOffset) {
+        var commonString = edit.substring(edit.length - commonOffset);
+        equality1 = equality1.substring(0, equality1.length - commonOffset);
+        edit = commonString + edit.substring(0, edit.length - commonOffset);
+        equality2 = commonString + equality2;
+      }
+
+      // Second, step character by character right, looking for the best fit.
+      var bestEquality1 = equality1;
+      var bestEdit = edit;
+      var bestEquality2 = equality2;
+      var bestScore = diff_cleanupSemanticScore_(equality1, edit) +
+          diff_cleanupSemanticScore_(edit, equality2);
+      while (edit.charAt(0) === equality2.charAt(0)) {
+        equality1 += edit.charAt(0);
+        edit = edit.substring(1) + equality2.charAt(0);
+        equality2 = equality2.substring(1);
+        var score = diff_cleanupSemanticScore_(equality1, edit) +
+            diff_cleanupSemanticScore_(edit, equality2);
+        // The >= encourages trailing rather than leading whitespace on edits.
+        if (score >= bestScore) {
+          bestScore = score;
+          bestEquality1 = equality1;
+          bestEdit = edit;
+          bestEquality2 = equality2;
+        }
+      }
+
+      if (diffs[pointer - 1][1] != bestEquality1) {
+        // We have an improvement, save it back to the diff.
+        if (bestEquality1) {
+          diffs[pointer - 1][1] = bestEquality1;
+        } else {
+          diffs.splice(pointer - 1, 1);
+          pointer--;
+        }
+        diffs[pointer][1] = bestEdit;
+        if (bestEquality2) {
+          diffs[pointer + 1][1] = bestEquality2;
+        } else {
+          diffs.splice(pointer + 1, 1);
+          pointer--;
+        }
+      }
+    }
+    pointer++;
+  }
+};
+
+// Define some regex patterns for matching boundaries.
+diff_match_patch.nonAlphaNumericRegex_ = /[^a-zA-Z0-9]/;
+diff_match_patch.whitespaceRegex_ = /\s/;
+diff_match_patch.linebreakRegex_ = /[\r\n]/;
+diff_match_patch.blanklineEndRegex_ = /\n\r?\n$/;
+diff_match_patch.blanklineStartRegex_ = /^\r?\n\r?\n/;
+
+/**
+ * Reduce the number of edits by eliminating operationally trivial equalities.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ */
+diff_match_patch.prototype.diff_cleanupEfficiency = function(diffs) {
+  var changes = false;
+  var equalities = [];  // Stack of indices where equalities are found.
+  var equalitiesLength = 0;  // Keeping our own length var is faster in JS.
+  /** @type {?string} */
+  var lastEquality = null;
+  // Always equal to diffs[equalities[equalitiesLength - 1]][1]
+  var pointer = 0;  // Index of current position.
+  // Is there an insertion operation before the last equality.
+  var pre_ins = false;
+  // Is there a deletion operation before the last equality.
+  var pre_del = false;
+  // Is there an insertion operation after the last equality.
+  var post_ins = false;
+  // Is there a deletion operation after the last equality.
+  var post_del = false;
+  while (pointer < diffs.length) {
+    if (diffs[pointer][0] == DIFF_EQUAL) {  // Equality found.
+      if (diffs[pointer][1].length < this.Diff_EditCost &&
+          (post_ins || post_del)) {
+        // Candidate found.
+        equalities[equalitiesLength++] = pointer;
+        pre_ins = post_ins;
+        pre_del = post_del;
+        lastEquality = diffs[pointer][1];
+      } else {
+        // Not a candidate, and can never become one.
+        equalitiesLength = 0;
+        lastEquality = null;
+      }
+      post_ins = post_del = false;
+    } else {  // An insertion or deletion.
+      if (diffs[pointer][0] == DIFF_DELETE) {
+        post_del = true;
+      } else {
+        post_ins = true;
+      }
+      /*
+       * Five types to be split:
+       * <ins>A</ins><del>B</del>XY<ins>C</ins><del>D</del>
+       * <ins>A</ins>X<ins>C</ins><del>D</del>
+       * <ins>A</ins><del>B</del>X<ins>C</ins>
+       * <ins>A</del>X<ins>C</ins><del>D</del>
+       * <ins>A</ins><del>B</del>X<del>C</del>
+       */
+      if (lastEquality && ((pre_ins && pre_del && post_ins && post_del) ||
+                           ((lastEquality.length < this.Diff_EditCost / 2) &&
+                            (pre_ins + pre_del + post_ins + post_del) == 3))) {
+        // Duplicate record.
+        diffs.splice(equalities[equalitiesLength - 1], 0,
+                     new diff_match_patch.Diff(DIFF_DELETE, lastEquality));
+        // Change second copy to insert.
+        diffs[equalities[equalitiesLength - 1] + 1][0] = DIFF_INSERT;
+        equalitiesLength--;  // Throw away the equality we just deleted;
+        lastEquality = null;
+        if (pre_ins && pre_del) {
+          // No changes made which could affect previous entry, keep going.
+          post_ins = post_del = true;
+          equalitiesLength = 0;
+        } else {
+          equalitiesLength--;  // Throw away the previous equality.
+          pointer = equalitiesLength > 0 ?
+              equalities[equalitiesLength - 1] : -1;
+          post_ins = post_del = false;
+        }
+        changes = true;
+      }
+    }
+    pointer++;
+  }
+
+  if (changes) {
+    this.diff_cleanupMerge(diffs);
+  }
+};
+
+
+/**
+ * Reorder and merge like edit sections.  Merge equalities.
+ * Any edit section can move as long as it doesn't cross an equality.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ */
+diff_match_patch.prototype.diff_cleanupMerge = function(diffs) {
+  // Add a dummy entry at the end.
+  diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, ''));
+  var pointer = 0;
+  var count_delete = 0;
+  var count_insert = 0;
+  var text_delete = '';
+  var text_insert = '';
+  var commonlength;
+  while (pointer < diffs.length) {
+    switch (diffs[pointer][0]) {
+      case DIFF_INSERT:
+        count_insert++;
+        text_insert += diffs[pointer][1];
+        pointer++;
+        break;
+      case DIFF_DELETE:
+        count_delete++;
+        text_delete += diffs[pointer][1];
+        pointer++;
+        break;
+      case DIFF_EQUAL:
+        // Upon reaching an equality, check for prior redundancies.
+        if (count_delete + count_insert > 1) {
+          if (count_delete !== 0 && count_insert !== 0) {
+            // Factor out any common prefixies.
+            commonlength = this.diff_commonPrefix(text_insert, text_delete);
+            if (commonlength !== 0) {
+              if ((pointer - count_delete - count_insert) > 0 &&
+                  diffs[pointer - count_delete - count_insert - 1][0] ==
+                  DIFF_EQUAL) {
+                diffs[pointer - count_delete - count_insert - 1][1] +=
+                    text_insert.substring(0, commonlength);
+              } else {
+                diffs.splice(0, 0, new diff_match_patch.Diff(DIFF_EQUAL,
+                    text_insert.substring(0, commonlength)));
+                pointer++;
+              }
+              text_insert = text_insert.substring(commonlength);
+              text_delete = text_delete.substring(commonlength);
+            }
+            // Factor out any common suffixies.
+            commonlength = this.diff_commonSuffix(text_insert, text_delete);
+            if (commonlength !== 0) {
+              diffs[pointer][1] = text_insert.substring(text_insert.length -
+                  commonlength) + diffs[pointer][1];
+              text_insert = text_insert.substring(0, text_insert.length -
+                  commonlength);
+              text_delete = text_delete.substring(0, text_delete.length -
+                  commonlength);
+            }
+          }
+          // Delete the offending records and add the merged ones.
+          pointer -= count_delete + count_insert;
+          diffs.splice(pointer, count_delete + count_insert);
+          if (text_delete.length) {
+            diffs.splice(pointer, 0,
+                new diff_match_patch.Diff(DIFF_DELETE, text_delete));
+            pointer++;
+          }
+          if (text_insert.length) {
+            diffs.splice(pointer, 0,
+                new diff_match_patch.Diff(DIFF_INSERT, text_insert));
+            pointer++;
+          }
+          pointer++;
+        } else if (pointer !== 0 && diffs[pointer - 1][0] == DIFF_EQUAL) {
+          // Merge this equality with the previous one.
+          diffs[pointer - 1][1] += diffs[pointer][1];
+          diffs.splice(pointer, 1);
+        } else {
+          pointer++;
+        }
+        count_insert = 0;
+        count_delete = 0;
+        text_delete = '';
+        text_insert = '';
+        break;
+    }
+  }
+  if (diffs[diffs.length - 1][1] === '') {
+    diffs.pop();  // Remove the dummy entry at the end.
+  }
+
+  // Second pass: look for single edits surrounded on both sides by equalities
+  // which can be shifted sideways to eliminate an equality.
+  // e.g: A<ins>BA</ins>C -> <ins>AB</ins>AC
+  var changes = false;
+  pointer = 1;
+  // Intentionally ignore the first and last element (don't need checking).
+  while (pointer < diffs.length - 1) {
+    if (diffs[pointer - 1][0] == DIFF_EQUAL &&
+        diffs[pointer + 1][0] == DIFF_EQUAL) {
+      // This is a single edit surrounded by equalities.
+      if (diffs[pointer][1].substring(diffs[pointer][1].length -
+          diffs[pointer - 1][1].length) == diffs[pointer - 1][1]) {
+        // Shift the edit over the previous equality.
+        diffs[pointer][1] = diffs[pointer - 1][1] +
+            diffs[pointer][1].substring(0, diffs[pointer][1].length -
+                                        diffs[pointer - 1][1].length);
+        diffs[pointer + 1][1] = diffs[pointer - 1][1] + diffs[pointer + 1][1];
+        diffs.splice(pointer - 1, 1);
+        changes = true;
+      } else if (diffs[pointer][1].substring(0, diffs[pointer + 1][1].length) ==
+          diffs[pointer + 1][1]) {
+        // Shift the edit over the next equality.
+        diffs[pointer - 1][1] += diffs[pointer + 1][1];
+        diffs[pointer][1] =
+            diffs[pointer][1].substring(diffs[pointer + 1][1].length) +
+            diffs[pointer + 1][1];
+        diffs.splice(pointer + 1, 1);
+        changes = true;
+      }
+    }
+    pointer++;
+  }
+  // If shifts were made, the diff needs reordering and another shift sweep.
+  if (changes) {
+    this.diff_cleanupMerge(diffs);
+  }
+};
+
+
+/**
+ * loc is a location in text1, compute and return the equivalent location in
+ * text2.
+ * e.g. 'The cat' vs 'The big cat', 1->1, 5->8
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @param {number} loc Location within text1.
+ * @return {number} Location within text2.
+ */
+diff_match_patch.prototype.diff_xIndex = function(diffs, loc) {
+  var chars1 = 0;
+  var chars2 = 0;
+  var last_chars1 = 0;
+  var last_chars2 = 0;
+  var x;
+  for (x = 0; x < diffs.length; x++) {
+    if (diffs[x][0] !== DIFF_INSERT) {  // Equality or deletion.
+      chars1 += diffs[x][1].length;
+    }
+    if (diffs[x][0] !== DIFF_DELETE) {  // Equality or insertion.
+      chars2 += diffs[x][1].length;
+    }
+    if (chars1 > loc) {  // Overshot the location.
+      break;
+    }
+    last_chars1 = chars1;
+    last_chars2 = chars2;
+  }
+  // Was the location was deleted?
+  if (diffs.length != x && diffs[x][0] === DIFF_DELETE) {
+    return last_chars2;
+  }
+  // Add the remaining character length.
+  return last_chars2 + (loc - last_chars1);
+};
+
+
+/**
+ * Convert a diff array into a pretty HTML report.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @return {string} HTML representation.
+ */
+diff_match_patch.prototype.diff_prettyHtml = function(diffs) {
+  var html = [];
+  var pattern_amp = /&/g;
+  var pattern_lt = /</g;
+  var pattern_gt = />/g;
+  var pattern_para = /\n/g;
+  for (var x = 0; x < diffs.length; x++) {
+    var op = diffs[x][0];    // Operation (insert, delete, equal)
+    var data = diffs[x][1];  // Text of change.
+    var text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;')
+        .replace(pattern_gt, '&gt;').replace(pattern_para, '&para;<br>');
+    switch (op) {
+      case DIFF_INSERT:
+        html[x] = '<ins style="background:#e6ffe6;">' + text + '</ins>';
+        break;
+      case DIFF_DELETE:
+        html[x] = '<del style="background:#ffe6e6;">' + text + '</del>';
+        break;
+      case DIFF_EQUAL:
+        html[x] = '<span>' + text + '</span>';
+        break;
+    }
+  }
+  return html.join('');
+};
+
+
+/**
+ * Compute and return the source text (all equalities and deletions).
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @return {string} Source text.
+ */
+diff_match_patch.prototype.diff_text1 = function(diffs) {
+  var text = [];
+  for (var x = 0; x < diffs.length; x++) {
+    if (diffs[x][0] !== DIFF_INSERT) {
+      text[x] = diffs[x][1];
+    }
+  }
+  return text.join('');
+};
+
+
+/**
+ * Compute and return the destination text (all equalities and insertions).
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @return {string} Destination text.
+ */
+diff_match_patch.prototype.diff_text2 = function(diffs) {
+  var text = [];
+  for (var x = 0; x < diffs.length; x++) {
+    if (diffs[x][0] !== DIFF_DELETE) {
+      text[x] = diffs[x][1];
+    }
+  }
+  return text.join('');
+};
+
+
+/**
+ * Compute the Levenshtein distance; the number of inserted, deleted or
+ * substituted characters.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @return {number} Number of changes.
+ */
+diff_match_patch.prototype.diff_levenshtein = function(diffs) {
+  var levenshtein = 0;
+  var insertions = 0;
+  var deletions = 0;
+  for (var x = 0; x < diffs.length; x++) {
+    var op = diffs[x][0];
+    var data = diffs[x][1];
+    switch (op) {
+      case DIFF_INSERT:
+        insertions += data.length;
+        break;
+      case DIFF_DELETE:
+        deletions += data.length;
+        break;
+      case DIFF_EQUAL:
+        // A deletion and an insertion is one substitution.
+        levenshtein += Math.max(insertions, deletions);
+        insertions = 0;
+        deletions = 0;
+        break;
+    }
+  }
+  levenshtein += Math.max(insertions, deletions);
+  return levenshtein;
+};
+
+
+/**
+ * Crush the diff into an encoded string which describes the operations
+ * required to transform text1 into text2.
+ * E.g. =3\t-2\t+ing  -> Keep 3 chars, delete 2 chars, insert 'ing'.
+ * Operations are tab-separated.  Inserted text is escaped using %xx notation.
+ * @param {!Array.<!diff_match_patch.Diff>} diffs Array of diff tuples.
+ * @return {string} Delta text.
+ */
+diff_match_patch.prototype.diff_toDelta = function(diffs) {
+  var text = [];
+  for (var x = 0; x < diffs.length; x++) {
+    switch (diffs[x][0]) {
+      case DIFF_INSERT:
+        text[x] = '+' + encodeURI(diffs[x][1]);
+        break;
+      case DIFF_DELETE:
+        text[x] = '-' + diffs[x][1].length;
+        break;
+      case DIFF_EQUAL:
+        text[x] = '=' + diffs[x][1].length;
+        break;
+    }
+  }
+  return text.join('\t').replace(/%20/g, ' ');
+};
+
+
+/**
+ * Given the original text1, and an encoded string which describes the
+ * operations required to transform text1 into text2, compute the full diff.
+ * @param {string} text1 Source string for the diff.
+ * @param {string} delta Delta text.
+ * @return {!Array.<!diff_match_patch.Diff>} Array of diff tuples.
+ * @throws {!Error} If invalid input.
+ */
+diff_match_patch.prototype.diff_fromDelta = function(text1, delta) {
+  var diffs = [];
+  var diffsLength = 0;  // Keeping our own length var is faster in JS.
+  var pointer = 0;  // Cursor in text1
+  var tokens = delta.split(/\t/g);
+  for (var x = 0; x < tokens.length; x++) {
+    // Each token begins with a one character parameter which specifies the
+    // operation of this token (delete, insert, equality).
+    var param = tokens[x].substring(1);
+    switch (tokens[x].charAt(0)) {
+      case '+':
+        try {
+          diffs[diffsLength++] =
+              new diff_match_patch.Diff(DIFF_INSERT, decodeURI(param));
+        } catch (ex) {
+          // Malformed URI sequence.
+          throw new Error('Illegal escape in diff_fromDelta: ' + param);
+        }
+        break;
+      case '-':
+        // Fall through.
+      case '=':
+        var n = parseInt(param, 10);
+        if (isNaN(n) || n < 0) {
+          throw new Error('Invalid number in diff_fromDelta: ' + param);
+        }
+        var text = text1.substring(pointer, pointer += n);
+        if (tokens[x].charAt(0) == '=') {
+          diffs[diffsLength++] = new diff_match_patch.Diff(DIFF_EQUAL, text);
+        } else {
+          diffs[diffsLength++] = new diff_match_patch.Diff(DIFF_DELETE, text);
+        }
+        break;
+      default:
+        // Blank tokens are ok (from a trailing \t).
+        // Anything else is an error.
+        if (tokens[x]) {
+          throw new Error('Invalid diff operation in diff_fromDelta: ' +
+                          tokens[x]);
+        }
+    }
+  }
+  if (pointer != text1.length) {
+    throw new Error('Delta length (' + pointer +
+        ') does not equal source text length (' + text1.length + ').');
+  }
+  return diffs;
+};
+
+
+//  MATCH FUNCTIONS
+
+
+/**
+ * Locate the best instance of 'pattern' in 'text' near 'loc'.
+ * @param {string} text The text to search.
+ * @param {string} pattern The pattern to search for.
+ * @param {number} loc The location to search around.
+ * @return {number} Best match index or -1.
+ */
+diff_match_patch.prototype.match_main = function(text, pattern, loc) {
+  // Check for null inputs.
+  if (text == null || pattern == null || loc == null) {
+    throw new Error('Null input. (match_main)');
+  }
+
+  loc = Math.max(0, Math.min(loc, text.length));
+  if (text == pattern) {
+    // Shortcut (potentially not guaranteed by the algorithm)
+    return 0;
+  } else if (!text.length) {
+    // Nothing to match.
+    return -1;
+  } else if (text.substring(loc, loc + pattern.length) == pattern) {
+    // Perfect match at the perfect spot!  (Includes case of null pattern)
+    return loc;
+  } else {
+    // Do a fuzzy compare.
+    return this.match_bitap_(text, pattern, loc);
+  }
+};
+
+
+/**
+ * Locate the best instance of 'pattern' in 'text' near 'loc' using the
+ * Bitap algorithm.
+ * @param {string} text The text to search.
+ * @param {string} pattern The pattern to search for.
+ * @param {number} loc The location to search around.
+ * @return {number} Best match index or -1.
+ * @private
+ */
+diff_match_patch.prototype.match_bitap_ = function(text, pattern, loc) {
+  if (pattern.length > this.Match_MaxBits) {
+    throw new Error('Pattern too long for this browser.');
+  }
+
+  // Initialise the alphabet.
+  var s = this.match_alphabet_(pattern);
+
+  var dmp = this;  // 'this' becomes 'window' in a closure.
+
+  /**
+   * Compute and return the score for a match with e errors and x location.
+   * Accesses loc and pattern through being a closure.
+   * @param {number} e Number of errors in match.
+   * @param {number} x Location of match.
+   * @return {number} Overall score for match (0.0 = good, 1.0 = bad).
+   * @private
+   */
+  function match_bitapScore_(e, x) {
+    var accuracy = e / pattern.length;
+    var proximity = Math.abs(loc - x);
+    if (!dmp.Match_Distance) {
+      // Dodge divide by zero error.
+      return proximity ? 1.0 : accuracy;
+    }
+    return accuracy + (proximity / dmp.Match_Distance);
+  }
+
+  // Highest score beyond which we give up.
+  var score_threshold = this.Match_Threshold;
+  // Is there a nearby exact match? (speedup)
+  var best_loc = text.indexOf(pattern, loc);
+  if (best_loc != -1) {
+    score_threshold = Math.min(match_bitapScore_(0, best_loc), score_threshold);
+    // What about in the other direction? (speedup)
+    best_loc = text.lastIndexOf(pattern, loc + pattern.length);
+    if (best_loc != -1) {
+      score_threshold =
+          Math.min(match_bitapScore_(0, best_loc), score_threshold);
+    }
+  }
+
+  // Initialise the bit arrays.
+  var matchmask = 1 << (pattern.length - 1);
+  best_loc = -1;
+
+  var bin_min, bin_mid;
+  var bin_max = pattern.length + text.length;
+  var last_rd;
+  for (var d = 0; d < pattern.length; d++) {
+    // Scan for the best match; each iteration allows for one more error.
+    // Run a binary search to determine how far from 'loc' we can stray at this
+    // error level.
+    bin_min = 0;
+    bin_mid = bin_max;
+    while (bin_min < bin_mid) {
+      if (match_bitapScore_(d, loc + bin_mid) <= score_threshold) {
+        bin_min = bin_mid;
+      } else {
+        bin_max = bin_mid;
+      }
+      bin_mid = Math.floor((bin_max - bin_min) / 2 + bin_min);
+    }
+    // Use the result from this iteration as the maximum for the next.
+    bin_max = bin_mid;
+    var start = Math.max(1, loc - bin_mid + 1);
+    var finish = Math.min(loc + bin_mid, text.length) + pattern.length;
+
+    var rd = Array(finish + 2);
+    rd[finish + 1] = (1 << d) - 1;
+    for (var j = finish; j >= start; j--) {
+      // The alphabet (s) is a sparse hash, so the following line generates
+      // warnings.
+      var charMatch = s[text.charAt(j - 1)];
+      if (d === 0) {  // First pass: exact match.
+        rd[j] = ((rd[j + 1] << 1) | 1) & charMatch;
+      } else {  // Subsequent passes: fuzzy match.
+        rd[j] = (((rd[j + 1] << 1) | 1) & charMatch) |
+                (((last_rd[j + 1] | last_rd[j]) << 1) | 1) |
+                last_rd[j + 1];
+      }
+      if (rd[j] & matchmask) {
+        var score = match_bitapScore_(d, j - 1);
+        // This match will almost certainly be better than any existing match.
+        // But check anyway.
+        if (score <= score_threshold) {
+          // Told you so.
+          score_threshold = score;
+          best_loc = j - 1;
+          if (best_loc > loc) {
+            // When passing loc, don't exceed our current distance from loc.
+            start = Math.max(1, 2 * loc - best_loc);
+          } else {
+            // Already passed loc, downhill from here on in.
+            break;
+          }
+        }
+      }
+    }
+    // No hope for a (better) match at greater error levels.
+    if (match_bitapScore_(d + 1, loc) > score_threshold) {
+      break;
+    }
+    last_rd = rd;
+  }
+  return best_loc;
+};
+
+
+/**
+ * Initialise the alphabet for the Bitap algorithm.
+ * @param {string} pattern The text to encode.
+ * @return {!Object} Hash of character locations.
+ * @private
+ */
+diff_match_patch.prototype.match_alphabet_ = function(pattern) {
+  var s = {};
+  for (var i = 0; i < pattern.length; i++) {
+    s[pattern.charAt(i)] = 0;
+  }
+  for (var i = 0; i < pattern.length; i++) {
+    s[pattern.charAt(i)] |= 1 << (pattern.length - i - 1);
+  }
+  return s;
+};
+
+
+//  PATCH FUNCTIONS
+
+
+/**
+ * Increase the context until it is unique,
+ * but don't let the pattern expand beyond Match_MaxBits.
+ * @param {!diff_match_patch.patch_obj} patch The patch to grow.
+ * @param {string} text Source text.
+ * @private
+ */
+diff_match_patch.prototype.patch_addContext_ = function(patch, text) {
+  if (text.length == 0) {
+    return;
+  }
+  if (patch.start2 === null) {
+    throw Error('patch not initialized');
+  }
+  var pattern = text.substring(patch.start2, patch.start2 + patch.length1);
+  var padding = 0;
+
+  // Look for the first and last matches of pattern in text.  If two different
+  // matches are found, increase the pattern length.
+  while (text.indexOf(pattern) != text.lastIndexOf(pattern) &&
+         pattern.length < this.Match_MaxBits - this.Patch_Margin -
+         this.Patch_Margin) {
+    padding += this.Patch_Margin;
+    pattern = text.substring(patch.start2 - padding,
+                             patch.start2 + patch.length1 + padding);
+  }
+  // Add one chunk for good luck.
+  padding += this.Patch_Margin;
+
+  // Add the prefix.
+  var prefix = text.substring(patch.start2 - padding, patch.start2);
+  if (prefix) {
+    patch.diffs.unshift(new diff_match_patch.Diff(DIFF_EQUAL, prefix));
+  }
+  // Add the suffix.
+  var suffix = text.substring(patch.start2 + patch.length1,
+                              patch.start2 + patch.length1 + padding);
+  if (suffix) {
+    patch.diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, suffix));
+  }
+
+  // Roll back the start points.
+  patch.start1 -= prefix.length;
+  patch.start2 -= prefix.length;
+  // Extend the lengths.
+  patch.length1 += prefix.length + suffix.length;
+  patch.length2 += prefix.length + suffix.length;
+};
+
+
+/**
+ * Compute a list of patches to turn text1 into text2.
+ * Use diffs if provided, otherwise compute it ourselves.
+ * There are four ways to call this function, depending on what data is
+ * available to the caller:
+ * Method 1:
+ * a = text1, b = text2
+ * Method 2:
+ * a = diffs
+ * Method 3 (optimal):
+ * a = text1, b = diffs
+ * Method 4 (deprecated, use method 3):
+ * a = text1, b = text2, c = diffs
+ *
+ * @param {string|!Array.<!diff_match_patch.Diff>} a text1 (methods 1,3,4) or
+ * Array of diff tuples for text1 to text2 (method 2).
+ * @param {string|!Array.<!diff_match_patch.Diff>=} opt_b text2 (methods 1,4) or
+ * Array of diff tuples for text1 to text2 (method 3) or undefined (method 2).
+ * @param {string|!Array.<!diff_match_patch.Diff>=} opt_c Array of diff tuples
+ * for text1 to text2 (method 4) or undefined (methods 1,2,3).
+ * @return {!Array.<!diff_match_patch.patch_obj>} Array of Patch objects.
+ */
+diff_match_patch.prototype.patch_make = function(a, opt_b, opt_c) {
+  var text1, diffs;
+  if (typeof a == 'string' && typeof opt_b == 'string' &&
+      typeof opt_c == 'undefined') {
+    // Method 1: text1, text2
+    // Compute diffs from text1 and text2.
+    text1 = /** @type {string} */(a);
+    diffs = this.diff_main(text1, /** @type {string} */(opt_b), true);
+    if (diffs.length > 2) {
+      this.diff_cleanupSemantic(diffs);
+      this.diff_cleanupEfficiency(diffs);
+    }
+  } else if (a && typeof a == 'object' && typeof opt_b == 'undefined' &&
+      typeof opt_c == 'undefined') {
+    // Method 2: diffs
+    // Compute text1 from diffs.
+    diffs = /** @type {!Array.<!diff_match_patch.Diff>} */(a);
+    text1 = this.diff_text1(diffs);
+  } else if (typeof a == 'string' && opt_b && typeof opt_b == 'object' &&
+      typeof opt_c == 'undefined') {
+    // Method 3: text1, diffs
+    text1 = /** @type {string} */(a);
+    diffs = /** @type {!Array.<!diff_match_patch.Diff>} */(opt_b);
+  } else if (typeof a == 'string' && typeof opt_b == 'string' &&
+      opt_c && typeof opt_c == 'object') {
+    // Method 4: text1, text2, diffs
+    // text2 is not used.
+    text1 = /** @type {string} */(a);
+    diffs = /** @type {!Array.<!diff_match_patch.Diff>} */(opt_c);
+  } else {
+    throw new Error('Unknown call format to patch_make.');
+  }
+
+  if (diffs.length === 0) {
+    return [];  // Get rid of the null case.
+  }
+  var patches = [];
+  var patch = new diff_match_patch.patch_obj();
+  var patchDiffLength = 0;  // Keeping our own length var is faster in JS.
+  var char_count1 = 0;  // Number of characters into the text1 string.
+  var char_count2 = 0;  // Number of characters into the text2 string.
+  // Start with text1 (prepatch_text) and apply the diffs until we arrive at
+  // text2 (postpatch_text).  We recreate the patches one by one to determine
+  // context info.
+  var prepatch_text = text1;
+  var postpatch_text = text1;
+  for (var x = 0; x < diffs.length; x++) {
+    var diff_type = diffs[x][0];
+    var diff_text = diffs[x][1];
+
+    if (!patchDiffLength && diff_type !== DIFF_EQUAL) {
+      // A new patch starts here.
+      patch.start1 = char_count1;
+      patch.start2 = char_count2;
+    }
+
+    switch (diff_type) {
+      case DIFF_INSERT:
+        patch.diffs[patchDiffLength++] = diffs[x];
+        patch.length2 += diff_text.length;
+        postpatch_text = postpatch_text.substring(0, char_count2) + diff_text +
+                         postpatch_text.substring(char_count2);
+        break;
+      case DIFF_DELETE:
+        patch.length1 += diff_text.length;
+        patch.diffs[patchDiffLength++] = diffs[x];
+        postpatch_text = postpatch_text.substring(0, char_count2) +
+                         postpatch_text.substring(char_count2 +
+                             diff_text.length);
+        break;
+      case DIFF_EQUAL:
+        if (diff_text.length <= 2 * this.Patch_Margin &&
+            patchDiffLength && diffs.length != x + 1) {
+          // Small equality inside a patch.
+          patch.diffs[patchDiffLength++] = diffs[x];
+          patch.length1 += diff_text.length;
+          patch.length2 += diff_text.length;
+        } else if (diff_text.length >= 2 * this.Patch_Margin) {
+          // Time for a new patch.
+          if (patchDiffLength) {
+            this.patch_addContext_(patch, prepatch_text);
+            patches.push(patch);
+            patch = new diff_match_patch.patch_obj();
+            patchDiffLength = 0;
+            // Unlike Unidiff, our patch lists have a rolling context.
+            // https://github.com/google/diff-match-patch/wiki/Unidiff
+            // Update prepatch text & pos to reflect the application of the
+            // just completed patch.
+            prepatch_text = postpatch_text;
+            char_count1 = char_count2;
+          }
+        }
+        break;
+    }
+
+    // Update the current character count.
+    if (diff_type !== DIFF_INSERT) {
+      char_count1 += diff_text.length;
+    }
+    if (diff_type !== DIFF_DELETE) {
+      char_count2 += diff_text.length;
+    }
+  }
+  // Pick up the leftover patch if not empty.
+  if (patchDiffLength) {
+    this.patch_addContext_(patch, prepatch_text);
+    patches.push(patch);
+  }
+
+  return patches;
+};
+
+
+/**
+ * Given an array of patches, return another array that is identical.
+ * @param {!Array.<!diff_match_patch.patch_obj>} patches Array of Patch objects.
+ * @return {!Array.<!diff_match_patch.patch_obj>} Array of Patch objects.
+ */
+diff_match_patch.prototype.patch_deepCopy = function(patches) {
+  // Making deep copies is hard in JavaScript.
+  var patchesCopy = [];
+  for (var x = 0; x < patches.length; x++) {
+    var patch = patches[x];
+    var patchCopy = new diff_match_patch.patch_obj();
+    patchCopy.diffs = [];
+    for (var y = 0; y < patch.diffs.length; y++) {
+      patchCopy.diffs[y] =
+          new diff_match_patch.Diff(patch.diffs[y][0], patch.diffs[y][1]);
+    }
+    patchCopy.start1 = patch.start1;
+    patchCopy.start2 = patch.start2;
+    patchCopy.length1 = patch.length1;
+    patchCopy.length2 = patch.length2;
+    patchesCopy[x] = patchCopy;
+  }
+  return patchesCopy;
+};
+
+
+/**
+ * Merge a set of patches onto the text.  Return a patched text, as well
+ * as a list of true/false values indicating which patches were applied.
+ * @param {!Array.<!diff_match_patch.patch_obj>} patches Array of Patch objects.
+ * @param {string} text Old text.
+ * @return {!Array.<string|!Array.<boolean>>} Two element Array, containing the
+ *      new text and an array of boolean values.
+ */
+diff_match_patch.prototype.patch_apply = function(patches, text) {
+  if (patches.length == 0) {
+    return [text, []];
+  }
+
+  // Deep copy the patches so that no changes are made to originals.
+  patches = this.patch_deepCopy(patches);
+
+  var nullPadding = this.patch_addPadding(patches);
+  text = nullPadding + text + nullPadding;
+
+  this.patch_splitMax(patches);
+  // delta keeps track of the offset between the expected and actual location
+  // of the previous patch.  If there are patches expected at positions 10 and
+  // 20, but the first patch was found at 12, delta is 2 and the second patch
+  // has an effective expected position of 22.
+  var delta = 0;
+  var results = [];
+  for (var x = 0; x < patches.length; x++) {
+    var expected_loc = patches[x].start2 + delta;
+    var text1 = this.diff_text1(patches[x].diffs);
+    var start_loc;
+    var end_loc = -1;
+    if (text1.length > this.Match_MaxBits) {
+      // patch_splitMax will only provide an oversized pattern in the case of
+      // a monster delete.
+      start_loc = this.match_main(text, text1.substring(0, this.Match_MaxBits),
+                                  expected_loc);
+      if (start_loc != -1) {
+        end_loc = this.match_main(text,
+            text1.substring(text1.length - this.Match_MaxBits),
+            expected_loc + text1.length - this.Match_MaxBits);
+        if (end_loc == -1 || start_loc >= end_loc) {
+          // Can't find valid trailing context.  Drop this patch.
+          start_loc = -1;
+        }
+      }
+    } else {
+      start_loc = this.match_main(text, text1, expected_loc);
+    }
+    if (start_loc == -1) {
+      // No match found.  :(
+      results[x] = false;
+      // Subtract the delta for this failed patch from subsequent patches.
+      delta -= patches[x].length2 - patches[x].length1;
+    } else {
+      // Found a match.  :)
+      results[x] = true;
+      delta = start_loc - expected_loc;
+      var text2;
+      if (end_loc == -1) {
+        text2 = text.substring(start_loc, start_loc + text1.length);
+      } else {
+        text2 = text.substring(start_loc, end_loc + this.Match_MaxBits);
+      }
+      if (text1 == text2) {
+        // Perfect match, just shove the replacement text in.
+        text = text.substring(0, start_loc) +
+               this.diff_text2(patches[x].diffs) +
+               text.substring(start_loc + text1.length);
+      } else {
+        // Imperfect match.  Run a diff to get a framework of equivalent
+        // indices.
+        var diffs = this.diff_main(text1, text2, false);
+        if (text1.length > this.Match_MaxBits &&
+            this.diff_levenshtein(diffs) / text1.length >
+            this.Patch_DeleteThreshold) {
+          // The end points match, but the content is unacceptably bad.
+          results[x] = false;
+        } else {
+          this.diff_cleanupSemanticLossless(diffs);
+          var index1 = 0;
+          var index2;
+          for (var y = 0; y < patches[x].diffs.length; y++) {
+            var mod = patches[x].diffs[y];
+            if (mod[0] !== DIFF_EQUAL) {
+              index2 = this.diff_xIndex(diffs, index1);
+            }
+            if (mod[0] === DIFF_INSERT) {  // Insertion
+              text = text.substring(0, start_loc + index2) + mod[1] +
+                     text.substring(start_loc + index2);
+            } else if (mod[0] === DIFF_DELETE) {  // Deletion
+              text = text.substring(0, start_loc + index2) +
+                     text.substring(start_loc + this.diff_xIndex(diffs,
+                         index1 + mod[1].length));
+            }
+            if (mod[0] !== DIFF_DELETE) {
+              index1 += mod[1].length;
+            }
+          }
+        }
+      }
+    }
+  }
+  // Strip the padding off.
+  text = text.substring(nullPadding.length, text.length - nullPadding.length);
+  return [text, results];
+};
+
+
+/**
+ * Add some padding on text start and end so that edges can match something.
+ * Intended to be called only from within patch_apply.
+ * @param {!Array.<!diff_match_patch.patch_obj>} patches Array of Patch objects.
+ * @return {string} The padding string added to each side.
+ */
+diff_match_patch.prototype.patch_addPadding = function(patches) {
+  var paddingLength = this.Patch_Margin;
+  var nullPadding = '';
+  for (var x = 1; x <= paddingLength; x++) {
+    nullPadding += String.fromCharCode(x);
+  }
+
+  // Bump all the patches forward.
+  for (var x = 0; x < patches.length; x++) {
+    patches[x].start1 += paddingLength;
+    patches[x].start2 += paddingLength;
+  }
+
+  // Add some padding on start of first diff.
+  var patch = patches[0];
+  var diffs = patch.diffs;
+  if (diffs.length == 0 || diffs[0][0] != DIFF_EQUAL) {
+    // Add nullPadding equality.
+    diffs.unshift(new diff_match_patch.Diff(DIFF_EQUAL, nullPadding));
+    patch.start1 -= paddingLength;  // Should be 0.
+    patch.start2 -= paddingLength;  // Should be 0.
+    patch.length1 += paddingLength;
+    patch.length2 += paddingLength;
+  } else if (paddingLength > diffs[0][1].length) {
+    // Grow first equality.
+    var extraLength = paddingLength - diffs[0][1].length;
+    diffs[0][1] = nullPadding.substring(diffs[0][1].length) + diffs[0][1];
+    patch.start1 -= extraLength;
+    patch.start2 -= extraLength;
+    patch.length1 += extraLength;
+    patch.length2 += extraLength;
+  }
+
+  // Add some padding on end of last diff.
+  patch = patches[patches.length - 1];
+  diffs = patch.diffs;
+  if (diffs.length == 0 || diffs[diffs.length - 1][0] != DIFF_EQUAL) {
+    // Add nullPadding equality.
+    diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, nullPadding));
+    patch.length1 += paddingLength;
+    patch.length2 += paddingLength;
+  } else if (paddingLength > diffs[diffs.length - 1][1].length) {
+    // Grow last equality.
+    var extraLength = paddingLength - diffs[diffs.length - 1][1].length;
+    diffs[diffs.length - 1][1] += nullPadding.substring(0, extraLength);
+    patch.length1 += extraLength;
+    patch.length2 += extraLength;
+  }
+
+  return nullPadding;
+};
+
+
+/**
+ * Look through the patches and break up any which are longer than the maximum
+ * limit of the match algorithm.
+ * Intended to be called only from within patch_apply.
+ * @param {!Array.<!diff_match_patch.patch_obj>} patches Array of Patch objects.
+ */
+diff_match_patch.prototype.patch_splitMax = function(patches) {
+  var patch_size = this.Match_MaxBits;
+  for (var x = 0; x < patches.length; x++) {
+    if (patches[x].length1 <= patch_size) {
+      continue;
+    }
+    var bigpatch = patches[x];
+    // Remove the big old patch.
+    patches.splice(x--, 1);
+    var start1 = bigpatch.start1;
+    var start2 = bigpatch.start2;
+    var precontext = '';
+    while (bigpatch.diffs.length !== 0) {
+      // Create one of several smaller patches.
+      var patch = new diff_match_patch.patch_obj();
+      var empty = true;
+      patch.start1 = start1 - precontext.length;
+      patch.start2 = start2 - precontext.length;
+      if (precontext !== '') {
+        patch.length1 = patch.length2 = precontext.length;
+        patch.diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, precontext));
+      }
+      while (bigpatch.diffs.length !== 0 &&
+             patch.length1 < patch_size - this.Patch_Margin) {
+        var diff_type = bigpatch.diffs[0][0];
+        var diff_text = bigpatch.diffs[0][1];
+        if (diff_type === DIFF_INSERT) {
+          // Insertions are harmless.
+          patch.length2 += diff_text.length;
+          start2 += diff_text.length;
+          patch.diffs.push(bigpatch.diffs.shift());
+          empty = false;
+        } else if (diff_type === DIFF_DELETE && patch.diffs.length == 1 &&
+                   patch.diffs[0][0] == DIFF_EQUAL &&
+                   diff_text.length > 2 * patch_size) {
+          // This is a large deletion.  Let it pass in one chunk.
+          patch.length1 += diff_text.length;
+          start1 += diff_text.length;
+          empty = false;
+          patch.diffs.push(new diff_match_patch.Diff(diff_type, diff_text));
+          bigpatch.diffs.shift();
+        } else {
+          // Deletion or equality.  Only take as much as we can stomach.
+          diff_text = diff_text.substring(0,
+              patch_size - patch.length1 - this.Patch_Margin);
+          patch.length1 += diff_text.length;
+          start1 += diff_text.length;
+          if (diff_type === DIFF_EQUAL) {
+            patch.length2 += diff_text.length;
+            start2 += diff_text.length;
+          } else {
+            empty = false;
+          }
+          patch.diffs.push(new diff_match_patch.Diff(diff_type, diff_text));
+          if (diff_text == bigpatch.diffs[0][1]) {
+            bigpatch.diffs.shift();
+          } else {
+            bigpatch.diffs[0][1] =
+                bigpatch.diffs[0][1].substring(diff_text.length);
+          }
+        }
+      }
+      // Compute the head context for the next patch.
+      precontext = this.diff_text2(patch.diffs);
+      precontext =
+          precontext.substring(precontext.length - this.Patch_Margin);
+      // Append the end context for this patch.
+      var postcontext = this.diff_text1(bigpatch.diffs)
+                            .substring(0, this.Patch_Margin);
+      if (postcontext !== '') {
+        patch.length1 += postcontext.length;
+        patch.length2 += postcontext.length;
+        if (patch.diffs.length !== 0 &&
+            patch.diffs[patch.diffs.length - 1][0] === DIFF_EQUAL) {
+          patch.diffs[patch.diffs.length - 1][1] += postcontext;
+        } else {
+          patch.diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, postcontext));
+        }
+      }
+      if (!empty) {
+        patches.splice(++x, 0, patch);
+      }
+    }
+  }
+};
+
+
+/**
+ * Take a list of patches and return a textual representation.
+ * @param {!Array.<!diff_match_patch.patch_obj>} patches Array of Patch objects.
+ * @return {string} Text representation of patches.
+ */
+diff_match_patch.prototype.patch_toText = function(patches) {
+  var text = [];
+  for (var x = 0; x < patches.length; x++) {
+    text[x] = patches[x];
+  }
+  return text.join('');
+};
+
+
+/**
+ * Parse a textual representation of patches and return a list of Patch objects.
+ * @param {string} textline Text representation of patches.
+ * @return {!Array.<!diff_match_patch.patch_obj>} Array of Patch objects.
+ * @throws {!Error} If invalid input.
+ */
+diff_match_patch.prototype.patch_fromText = function(textline) {
+  var patches = [];
+  if (!textline) {
+    return patches;
+  }
+  var text = textline.split('\n');
+  var textPointer = 0;
+  var patchHeader = /^@@ -(\d+),?(\d*) \+(\d+),?(\d*) @@$/;
+  while (textPointer < text.length) {
+    var m = text[textPointer].match(patchHeader);
+    if (!m) {
+      throw new Error('Invalid patch string: ' + text[textPointer]);
+    }
+    var patch = new diff_match_patch.patch_obj();
+    patches.push(patch);
+    patch.start1 = parseInt(m[1], 10);
+    if (m[2] === '') {
+      patch.start1--;
+      patch.length1 = 1;
+    } else if (m[2] == '0') {
+      patch.length1 = 0;
+    } else {
+      patch.start1--;
+      patch.length1 = parseInt(m[2], 10);
+    }
+
+    patch.start2 = parseInt(m[3], 10);
+    if (m[4] === '') {
+      patch.start2--;
+      patch.length2 = 1;
+    } else if (m[4] == '0') {
+      patch.length2 = 0;
+    } else {
+      patch.start2--;
+      patch.length2 = parseInt(m[4], 10);
+    }
+    textPointer++;
+
+    while (textPointer < text.length) {
+      var sign = text[textPointer].charAt(0);
+      try {
+        var line = decodeURI(text[textPointer].substring(1));
+      } catch (ex) {
+        // Malformed URI sequence.
+        throw new Error('Illegal escape in patch_fromText: ' + line);
+      }
+      if (sign == '-') {
+        // Deletion.
+        patch.diffs.push(new diff_match_patch.Diff(DIFF_DELETE, line));
+      } else if (sign == '+') {
+        // Insertion.
+        patch.diffs.push(new diff_match_patch.Diff(DIFF_INSERT, line));
+      } else if (sign == ' ') {
+        // Minor equality.
+        patch.diffs.push(new diff_match_patch.Diff(DIFF_EQUAL, line));
+      } else if (sign == '@') {
+        // Start of next patch.
+        break;
+      } else if (sign === '') {
+        // Blank line?  Whatever.
+      } else {
+        // WTF?
+        throw new Error('Invalid patch mode "' + sign + '" in: ' + line);
+      }
+      textPointer++;
+    }
+  }
+  return patches;
+};
+
+
+/**
+ * Class representing one patch operation.
+ * @constructor
+ */
+diff_match_patch.patch_obj = function() {
+  /** @type {!Array.<!diff_match_patch.Diff>} */
+  this.diffs = [];
+  /** @type {?number} */
+  this.start1 = null;
+  /** @type {?number} */
+  this.start2 = null;
+  /** @type {number} */
+  this.length1 = 0;
+  /** @type {number} */
+  this.length2 = 0;
+};
+
+
+/**
+ * Emulate GNU diff's format.
+ * Header: @@ -382,8 +481,9 @@
+ * Indices are printed as 1-based, not 0-based.
+ * @return {string} The GNU diff string.
+ */
+diff_match_patch.patch_obj.prototype.toString = function() {
+  var coords1, coords2;
+  if (this.length1 === 0) {
+    coords1 = this.start1 + ',0';
+  } else if (this.length1 == 1) {
+    coords1 = this.start1 + 1;
+  } else {
+    coords1 = (this.start1 + 1) + ',' + this.length1;
+  }
+  if (this.length2 === 0) {
+    coords2 = this.start2 + ',0';
+  } else if (this.length2 == 1) {
+    coords2 = this.start2 + 1;
+  } else {
+    coords2 = (this.start2 + 1) + ',' + this.length2;
+  }
+  var text = ['@@ -' + coords1 + ' +' + coords2 + ' @@\n'];
+  var op;
+  // Escape the body of the patch with %xx notation.
+  for (var x = 0; x < this.diffs.length; x++) {
+    switch (this.diffs[x][0]) {
+      case DIFF_INSERT:
+        op = '+';
+        break;
+      case DIFF_DELETE:
+        op = '-';
+        break;
+      case DIFF_EQUAL:
+        op = ' ';
+        break;
+    }
+    text[x + 1] = op + encodeURI(this.diffs[x][1]) + '\n';
+  }
+  return text.join('').replace(/%20/g, ' ');
+};
+
+// CLOSURE:begin_strip
+// Lines below here will not be included in the Closure-compatible library.
+
+// Export these global variables so that they survive Google's JS compiler.
+// In a browser, 'this' will be 'window'.
+// Users of node.js should 'require' the uncompressed version since Google's
+// JS compiler may break the following exports for non-browser environments.
+/** @suppress {globalThis} */
+this['diff_match_patch'] = diff_match_patch;
+/** @suppress {globalThis} */
+this['DIFF_DELETE'] = DIFF_DELETE;
+/** @suppress {globalThis} */
+this['DIFF_INSERT'] = DIFF_INSERT;
+/** @suppress {globalThis} */
+this['DIFF_EQUAL'] = DIFF_EQUAL;
diff --git a/server/helpers/ProcessText.js b/server/helpers/ProcessText.js
index fc482a6..cfd04ca 100644
--- a/server/helpers/ProcessText.js
+++ b/server/helpers/ProcessText.js
@@ -2,8 +2,140 @@
 let ProcessText = module.exports = {}
 
 ProcessText.removeHtml = (string) => {
+
+	if(string == undefined || string == null || string.length == 0){
+		return ''
+	}
+
 	return string
 		.replace(/&[#A-Za-z0-9]+;/g,' ') //Rip out all HTML entities
 		.replace(/<[^>]+>/g, ' ') //Rip out all HTML tags
 		.replace(/\s+/g, ' ') //Remove all whitespace
+		.trim()
+}
+
+ProcessText.getUrlsFromString = (string) => {
+	const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
+	return string.match(urlPattern)
+}
+
+/* 
+	Pulls out title and subtext of note 
+		+ Title is always first line
+		+ Empty lines are skipped
+		+ URLs are turned into links
+		+ All URLs are givent the target="_blank" property
+*/
+
+ProcessText.deduceNoteTitle = (inString) => {
+
+	let title = '' //Title of note
+	let sub = '' //sub text below note
+
+	if(!inString || inString == null || inString.length == 0){
+		return {title, sub}
+	}
+
+	let lines = inString.match(/[^\r\n]+/g)
+	let finalLines = []
+
+	const startTags = ['<ol','<li','<ul']
+	const endTags = ['</o','</l','</u']
+
+	let totalLines = Math.min(lines.length, 6)
+	let charLimit = 250
+	let listStart = false
+
+	for(let i=0; i < totalLines; i++){
+
+		//Just in case 'i' gets bigger than array
+		if(lines[i] === undefined){
+			continue
+		}
+
+		const cleanLine = ProcessText.removeHtml(lines[i]).trim().replace('&nbsp','')
+		const lineStart = lines[i].trim().substring(0, 3)
+		charLimit -= cleanLine.length
+
+		//Close out list if char limit is hit
+		if(charLimit <= 0 && listStart){
+			finalLines.push(lines[i])
+			break
+		}
+
+		//Images appear as empty, push em!
+		if(cleanLine.length == 0 && lines[i].indexOf('<img') != -1){
+			finalLines.push(lines[i])
+			continue
+		}
+
+		//Empty line, may be a list open or close
+		if(cleanLine.length == 0 && (startTags.includes(lineStart) || endTags.includes(lineStart) )){
+			if(listStart == false){
+				charLimit = 400 //Double size for list notes
+			}
+			finalLines.push(lines[i])
+			totalLines++
+			listStart = true
+			continue
+		}
+
+		//If line is part of a list, up counter, we want the whole list
+		if(startTags.includes(lineStart)){
+			totalLines++
+		}
+
+		//Skip empty lines
+		if(!cleanLine || cleanLine.length == 0 || cleanLine == '&nbsp;'){
+			totalLines++
+			continue
+		}
+
+		//turn urls into links, don't process if its already an <a href=
+		const containsUrls = ProcessText.getUrlsFromString(cleanLine)
+		if(containsUrls && containsUrls.length == 1 && lines[i].indexOf('</a>') == -1){
+			const url = containsUrls[0]
+			lines[i] = lines[i].replace(url, `<a href="${url}">${url}</a>`)
+		}
+
+		//Insert target=_blank into links if set, do it for every link in line
+		if(lines[i].indexOf('</a>') > 0){
+			lines[i] = lines[i].replace(/<a /g, '<a target="_blank" ')
+		}
+
+		//Limit output characters
+		//Check character limit
+		if(charLimit <= 0 && listStart == false){
+
+			//Cut the string down to character limit
+			const cutString = lines[i].substring(0, lines[i].length+charLimit)
+			//Find last space and cut off everything after it
+			let cleanCutString = cutString.substring(0, cutString.lastIndexOf(' '))
+
+			//Some strings may not contain a space resulting in no string
+			if(cleanCutString.length == 0){
+				cleanCutString = cutString
+			}
+
+			finalLines.push(cleanCutString + '...')
+			break;
+		}
+
+		finalLines.push(lines[i])
+
+	}
+
+	//Pull out title if its not an empty string
+	if(ProcessText.removeHtml(finalLines[0]).trim().replace('&nbsp','').length > 0){
+		title = finalLines.shift()
+	}
+	
+	sub = finalLines.join('')
+
+	//Return final display lengths
+	let titleLength = ProcessText.removeHtml(title).trim().replace('&nbsp','').length
+	let subtextLength = ProcessText.removeHtml(sub).trim().replace('&nbsp','').length
+
+
+	return { title, sub, titleLength, subtextLength }
 }
\ No newline at end of file
diff --git a/server/models/Attachment.js b/server/models/Attachment.js
index ec98b0f..51cbaf3 100644
--- a/server/models/Attachment.js
+++ b/server/models/Attachment.js
@@ -117,6 +117,7 @@ Attachment.scanTextForWebsites = (userId, noteId, noteText) => {
 		Attachment.urlForNote(userId, noteId).then(attachments => {
 
 			//Find all URLs in text
+			//@TODO - Use the process text library for this function
 			const urlPattern = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])/igm
 			let allUrls = noteText.match(urlPattern)
 
diff --git a/server/models/Note.js b/server/models/Note.js
index 489da2e..6d24a79 100644
--- a/server/models/Note.js
+++ b/server/models/Note.js
@@ -5,7 +5,10 @@ let Attachment = require('@models/Attachment')
 
 let ProcessText = require('@helpers/ProcessText')
 
+const DiffMatchPatch = require('@helpers/DiffMatchPatch')
+
 var rp = require('request-promise');
+const fs = require('fs')
 
 let Note = module.exports = {}
 
@@ -137,21 +140,96 @@ Note.update = (userId, noteId, noteText, color, pinned, archived) => {
 	})
 }
 
+
+//
+// Delete a note and all its remaining parts
+//
 Note.delete = (userId, noteId) => {
 	return new Promise((resolve, reject) => {
-	db.promise().query('DELETE FROM note WHERE note.id = ? AND note.user_id = ?', [noteId,userId])
-	.then((rows, fields) => {
-		db.promise().query('DELETE FROM attachment WHERE attachment.note_id = ? AND attachment.user_id = ?', [noteId,userId])
-		.then((rows, fields)=> {
-			db.promise().query('DELETE FROM note_tag WHERE note_tag.note_id = ? AND note_tag.user_id = ?', [noteId,userId])
-				.then((rows, fields)=> {
-					resolve(true)
-				})
+
+		db.promise().query('DELETE FROM note WHERE note.id = ? AND note.user_id = ?', [noteId,userId])
+		.then((rows, fields) => {
+			return db.promise().query('DELETE FROM note_text_index WHERE note_text_index.note_id = ? AND note_text_index.user_id = ?', [noteId,userId])	
+		})
+		.then((rows, fields) => {
+			//Select all attachments with files
+			return db.promise().query('SELECT file_location FROM attachment WHERE attachment.note_id = ? AND attachment.user_id = ?', [noteId,userId])
+		})
+		.then((attachmentRows, fields) => {
+
+			//Go through each selected attachment and delete the files
+			attachmentRows[0].forEach( location => {
+				const fileName = location['file_location']
+				if(fileName != null && fileName.length > 1){
+					fs.unlink('../staticFiles/'+fileName ,function(err){ //Async, just rip through them.
+						if(err) return console.log(err);
+						// console.log('file deleted successfully => ', fileName);
+					})
+				}	
 			})
+
+			return db.promise().query('DELETE FROM attachment WHERE attachment.note_id = ? AND attachment.user_id = ?', [noteId,userId])
+		})
+		.then((rows, fields) => {
+			return db.promise().query('DELETE FROM note_tag WHERE note_tag.note_id = ? AND note_tag.user_id = ?', [noteId,userId])	
+		})
+		.then((rows, fields) => {
+			resolve(true)
 		})
 	})
 }
 
+//text is the current text for the note that will be compared to the text in the database
+Note.getDiffText = (userId, noteId, usersCurrentText, lastUpdated) => {
+	return new Promise((resolve, reject) => {
+		Note.get(userId, noteId)
+		.then(noteObject => {
+
+
+			let oldText = noteObject.text.replace(/(\r\n|\n|\r)/gm,"")
+			let newText = usersCurrentText.replace(/(\r\n|\n|\r)/gm,"")
+
+			if(noteObject.updated == lastUpdated){
+				console.log('No note diff')
+				resolve(null)
+			}
+
+			if(noteObject.updated > lastUpdated){
+				newText = noteObject.text.replace(/(\r\n|\n|\r)/gm,"")
+				oldText = usersCurrentText.replace(/(\r\n|\n|\r)/gm,"")
+			}
+
+			const dmp = new DiffMatchPatch.diff_match_patch()
+			const diff = dmp.diff_main(oldText, newText)
+
+			dmp.diff_cleanupSemantic(diff)
+			const patch_list = dmp.patch_make(oldText, newText, diff);
+  			const patch_text = dmp.patch_toText(patch_list);
+  			
+  			//Patch text -  shows a list of changes
+  			var patches = dmp.patch_fromText(patch_text);
+  			// console.log(patch_text)
+
+  			//results[1] - contains diagnostic data for patch apply, its possible it can fail
+  			var results = dmp.patch_apply(patches, oldText);
+  			
+  			//Compile return data for front end
+  			const returnData = {
+  				updatedText: results[0],
+  				diffs: results[1].length, //Only use length for now
+  				updated: Math.max(noteObject.updated,lastUpdated) //Return most recently updated date
+
+  			}
+  			
+  			//Final change in notes
+  			console.log(returnData)
+
+			resolve(returnData)
+		})
+	})
+
+}
+
 Note.get = (userId, noteId) => {
 	return new Promise((resolve, reject) => {
 		db.promise()
@@ -184,6 +262,7 @@ Note.getShared = (noteId) => {
 	})
 }
 
+// Searches text index, returns nothing if there is no search query
 Note.solrQuery = (userId, searchQuery, searchTags) => {
 	return new Promise((resolve, reject) => {
 
@@ -243,27 +322,28 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 
 		Note.solrQuery(userId, searchQuery, searchTags).then( (textSearchResults) => {
 
+			//Pull out search results from previous query
 			let textSearchIds = []
 			let highlights = {}
+			let returnTagResults = false
 
 			if(textSearchResults != null){
 				textSearchIds = textSearchResults['ids']
 				highlights = textSearchResults['snippets']
 			}
 
-			
-
 		    //No results, return empty data
 			if(textSearchIds.length == 0 && searchQuery.length > 0){
 				return resolve(returnData)
 			}
 
-			//Default note lookup gets all notes
+			// Base of the query, modified with fastFilters
 			// Add to query for character counts -> CHAR_LENGTH(note.text) as chars
 			let noteSearchQuery = `
 				SELECT note.id, 
-					SUBSTRING(note.text, 1, 400) as text, 
-					updated, color, 
+					SUBSTRING(note.text, 1, 1500) as text, 
+					updated, 
+					color, 
 					count(distinct note_tag.id) as tag_count, 
 					count(distinct attachment.id) as attachment_count,
 					note.pinned,
@@ -274,22 +354,26 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 				WHERE note.user_id = ?`
 			let searchParams = [userId]
 
+			//If text search returned results, limit search to those ids			
 			if(textSearchIds.length > 0){
 				searchParams.push(textSearchIds)
 				noteSearchQuery += ' AND note.id IN (?)'
 			}
 
+			if(fastFilters.noteIdSet && fastFilters.noteIdSet.length > 0){
+				searchParams.push(fastFilters.noteIdSet)
+				noteSearchQuery += ' AND note.id IN (?)'
+			}
+
+			//If tags are passed, use those tags in search
 			if(searchTags.length > 0){
-				//If tags are passed, use those tags in search
 				searchParams.push(searchTags)
 				noteSearchQuery += ' AND note_tag.tag_id IN (?)'
 			}
 
-			//Toggle archived, show archived if tags are searched
-			// - archived will show archived in search results
-			// - onlyArchive will exclude notes that are not archived
-			if(fastFilters.archived == 1 || searchTags.length > 0 || fastFilters.onlyArchived == 1){
-				//Do nothing
+			//Show archived notes, only if fast filter is set, default to not archived
+			if(fastFilters.onlyArchived == 1){
+				noteSearchQuery += ' AND note.archived = 1' //Show Archived
 			} else {
 				noteSearchQuery += ' AND note.archived = 0' //Exclude archived
 			}
@@ -299,14 +383,17 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 
 			//Only show notes with Tags
 			if(fastFilters.withTags == 1){
+				returnTagResults = true
 				noteSearchQuery += ' HAVING tag_count > 0'
 			}
 			//Only show notes with links
 			if(fastFilters.withLinks == 1){
+				returnTagResults = true
 				noteSearchQuery += ' HAVING attachment_count > 0'
 			}
 			//Only show archived notes
 			if(fastFilters.onlyArchived == 1){
+				returnTagResults = true
 				noteSearchQuery += ' HAVING note.archived = 1'
 			}
 
@@ -336,10 +423,13 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 				const limitOffset = parseInt(fastFilters.limitOffset, 10) || 0 //Either parse int, or use zero
 
 
-				console.log(` LIMIT ${limitOffset}, ${limitSize}`)
+				// console.log(` LIMIT ${limitOffset}, ${limitSize}`)
 				noteSearchQuery += ` LIMIT ${limitOffset}, ${limitSize}`
 			}
 			
+			// console.log('------------- Final Query --------------')
+			// console.log(noteSearchQuery)
+			// console.log('------------- ----------- --------------')
 
 			db.promise()
 			.query(noteSearchQuery, searchParams)
@@ -356,38 +446,27 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 					noteIds.push(note.id)
 
 					if(note.text == null){ note.text = '' }
+
+					//Deduce note title
+					const textData = ProcessText.deduceNoteTitle(note.text)
+
+					// console.log(textData)
 					
-					//Attempt to pull string out of first tag in note
-					let reg = note.text.match(/<([\w]+)[^>]*>(.*?)<\/\1>/g)
-
-					//Pull out first html tag contents, that is the title
-					if(reg != null && reg[0]){
-						note.title = reg[0] //First line from HTML
-					} else {
-						note.title = note.text //Entire note
-					}
-
-					//Clean up html title 
-					note.title = ProcessText.removeHtml(note.title)
-
-					//Generate Subtext
-					note.subtext = ''
-					if(note.text != '' && note.title != ''){
-						note.subtext = ProcessText.removeHtml(note.text)
-							.substring(note.title.length)
-					}
-					
+					note.title = textData.title
+					note.subtext = textData.sub
+					note.titleLength = textData.titleLength
+					note.subtextLength = textData.subtextLength
 
 					note.note_highlights = []
 					note.attachment_highlights = []
 					note.tag_highlights = []
 
-					//Push in solr highlights
+					//Push in search highlights
 					if(highlights && highlights[note.id]){
 						note['note_highlights'] = [highlights[note.id]]
 					}
 
-					//Clear out note.text before sending it to front end
+					//Clear out note.text before sending it to front end, its being used in title and subtext
 					delete note.text
 				})
 
@@ -396,6 +475,13 @@ Note.search = (userId, searchQuery, searchTags, fastFilters) => {
 					return resolve(returnData)
 				}
 
+				//Return all notes, tags are not being searched
+				// if tags are being searched, continue
+				// if notes are being filtered, return tags
+				if(searchTags.length == 0 && returnTagResults == false){
+					return resolve(returnData)
+				}
+
 				//Only show tags of selected notes
 				db.promise()
 				.query(`SELECT tag.id, tag.text, count(tag.id) as usages FROM note_tag
diff --git a/server/models/Tag.js b/server/models/Tag.js
index df50386..a7e17c4 100644
--- a/server/models/Tag.js
+++ b/server/models/Tag.js
@@ -2,6 +2,21 @@ let db = require('@config/database')
 
 let Tag = module.exports = {}
 
+Tag.userTags = (userId) => {
+	return new Promise((resolve, reject) => {
+		db.promise()
+		.query(`
+			SELECT tag.id, text, COUNT(note_tag.note_id) as usages FROM tag
+			JOIN note_tag ON tag.id = note_tag.tag_id
+			WHERE note_tag.user_id = ?
+			GROUP BY tag.id
+			ORDER BY usages DESC
+		`, [userId])
+		.then( (rows, fields) => {
+			resolve(rows[0])
+		})
+	})
+}
 
 Tag.removeTagFromNote = (userId, tagId) => {
 	return new Promise((resolve, reject) => {
diff --git a/server/routes/attachmentController.js b/server/routes/attachmentController.js
index 5991854..f65dd91 100644
--- a/server/routes/attachmentController.js
+++ b/server/routes/attachmentController.js
@@ -1,7 +1,7 @@
 let express = require('express')
 
 var multer  = require('multer')
-var upload = multer({ dest: '../staticFiles/' })
+var upload = multer({ dest: '../staticFiles/' }) //@TODO make this a global value
 let router = express.Router()
 
 let Attachment = require('@models/Attachment');
diff --git a/server/routes/noteController.js b/server/routes/noteController.js
index 380ead5..5e9765c 100644
--- a/server/routes/noteController.js
+++ b/server/routes/noteController.js
@@ -38,6 +38,15 @@ router.post('/search', function (req, res) {
 	.then( notesAndTags => res.send(notesAndTags))
 })
 
+router.post('/difftext', function (req, res) {
+
+	Notes.getDiffText(userId, req.body.noteId, req.body.text, req.body.updated)
+	.then( fullDiffText => {
+		//Response should be full diff text
+		res.send(fullDiffText)
+	})
+})
+
 //Reindex all notes. Not a very good function, not public
 router.get('/reindex5yu43prchuj903mrc', function (req, res) {
 
diff --git a/server/routes/tagController.js b/server/routes/tagController.js
index 76a4391..3f81ad3 100644
--- a/server/routes/tagController.js
+++ b/server/routes/tagController.js
@@ -42,4 +42,10 @@ router.post('/get', function (req, res) {
 	.then( data => res.send(data) )
 })
 
+//Get all the tags for this user in order of usage
+router.post('/usertags', function (req, res) {
+	Tags.userTags(userId)
+	.then( data => res.send(data) )
+})
+
 module.exports = router
\ No newline at end of file