Max/SolidScribe
1
0
Fork 0
Code Issues 24 Pull Requests Releases Wiki Activity

+ Giant update to multiple users editing notes.

Browse Source 
- Edits are done per DOM element, making diffs smaller and faster
- Multiple users can now edit the same note witheout it turning into a gaint mess
- Caret position is saved better and wont jump around as much

+ Removed Active sessions text
This commit is contained in:
Max
2023-07-30 04:18:17 +00:00
parent c61f0c0198
commit b5ef64485f
4 changed files with 231 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/assets/semantic-helper.css
View File

@@ -592,6 +592,15 @@ padding-right: 10px;
color: var(--main-accent);
opacity: 1;
}
/* Remove indent line on mobile */
.note-card-text > ol > ol,
.squire-box > ol > ol,
.note-card-text > ul > ul,
.squire-box > ul > ul
{
border-left: none;
}
}

295
client/src/components/NoteInputPanel.vue
View File

@@ -173,7 +173,8 @@
<span class="status-menu" v-on:click=" hash=0; save()">
<span v-if="diffsApplied > 0">
+{{ diffsApplied }} Unsaved Changes
<i class="blue wave square icon"></i>
+{{ diffsApplied }}
</span>
<span v-if="usersOnNote > 1" :data-tooltip="`Viewers`" data-position="left center">
@@ -360,6 +361,8 @@
import SquireButtonFunctions from '@/mixins/SquireButtonFunctions.js'
let rawNoteText = '' // Used for comparing and generating diffs
export default {
name: 'NoteInputPanel',
props: [ 'noteid', 'position', 'openMenu', 'urlData', 'openNotes'],
@@ -390,7 +393,6 @@
created: '',
updated: '',
shareUsername: null,
// diffNoteText: '',
statusText: 'saved',
lastNoteHash: null,
saveDebounce: null, //Prevent save from being called numerous times quickly
@@ -428,6 +430,7 @@
//Used to restore caret position
lastRange: null,
startOffset: 0,
childIndex: null,
//Tag Display
allTags: [],
@@ -570,33 +573,31 @@
})
},
initSquire(){
initSquireEvents(){
//Set up squire and load note text
this.setText(this.noteText)
// Use squire box HTML for diff/patch changes
rawNoteText = document.getElementById('squire-id').innerHTML
//focus on open, not on mobile, it causes the keyboard to pop up, thats annoying
if(!this.$store.getters.getIsUserOnMobile){
this.editor.focus()
this.editor.moveCursorToEnd()
}
//Set up websockets after squire is set up
setTimeout(() => {
this.setupWebSockets()
}, 500)
this.editor.addEventListener('cursor', e => {
//Save range to replace cursor if someone else makes an update
this.lastRange = e.range
this.startOffset = parseInt(e.range.startOffset)
return
this.saveCaretPosition(e)
})
//Change button states on editor when element is active
//eg; Bold button turns green when on bold text
this.editor.addEventListener('pathChange', e => this.pathChangeEvent(e))
this.editor.addEventListener('pathChange', e => {
this.pathChangeEvent(e)
this.diffText(e)
})
//Click Event - Open links when clicked in editor or toggle checks
this.editor.addEventListener('click', e => {
@@ -681,10 +682,17 @@
})
})
//Bind event handlers
this.editor.addEventListener('keyup', event => {
this.onKeyup(event)
this.diffText(event)
})
this.editor.addEventListener('focus', e => {
// this.diffText(e)
})
this.editor.addEventListener('blur', e => {
this.diffText(e)
})
// this.editor.addEventListener("dragstart", e => {
@@ -692,12 +700,6 @@
// console.log(e)
// if(){}
// });
//Show and hide additional toolbars
// this.editor.addEventListener('focus', e => {
// })
// this.editor.addEventListener('blur', e => {
// })
},
openEditAttachment(){
@@ -760,13 +762,18 @@
//Setup all responsive vue data
this.setupLoadedNoteData(response)
this.loading = false
this.$nextTick(() => {
//Adjust note title size after load
this.titleResize()
this.initSquire()
this.initSquireEvents()
//Set up websockets after squire is set up
setTimeout(() => {
this.initWebsocketEvents()
this.loading = false
}, 500)
})
})
@@ -786,14 +793,11 @@
this.created = response.data.created
this.updated = response.data.updated
this.lastInteractionTimestamp = +new Date
this.noteTitle = ''
if(response.data.title){
this.noteTitle = response.data.title
}
this.noteTitle = response.data.title || ''
this.noteText = response.data.text
this.lastNoteHash = this.hashString( response.data.text )
// this.diffNoteText = response.data.text
//Setup note tags
this.allTags = response.data.tags ? response.data.tags.split(','):[]
@@ -811,77 +815,167 @@
return true
},
generateSelector(el){
if (!(el instanceof Element))
return;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
path.unshift(selector);
break;
} else {
var sib = el, nth = 1;
while (sib = sib.previousElementSibling) {
if (sib.nodeName.toLowerCase() == selector)
nth++;
}
if (nth != 1)
selector += ":nth-of-type("+nth+")";
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
},
//Called on squire event for keyup
diffText(event){
// console.log(event.type)
//Diff the changed lines only
const diffEvents = ['keyup','pathChange', 'click']
let oldText = this.noteText
// let newText = this.getText()
let newText = document.getElementById('squire-id').innerHTML
// only process changes on certain events
if( !diffEvents.includes(event?.type) ){
return
}
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);
clearTimeout(this.diffTextTimeout)
this.diffTextTimeout = setTimeout(() => {
if(patch_text == ''){ return }
// Current Editor Text
const liveEditorElm = document.getElementById('squire-id')
//Save computed diff text
this.noteText = newText
// virtual element for selecting div
let virtualEditorElm = document.createElement('div')
virtualEditorElm.innerHTML = rawNoteText
// element at cursor
const elmAtCaret = window.getSelection().getRangeAt(0).startContainer.parentNode
// Remove beginngin selector from path, make it more generic
const path = this.generateSelector(elmAtCaret).replace('div#squire-id > ','')
let workingPath = ''
// default to entire note text, select down if path
let selectedDivText = virtualEditorElm
let newSelectedDivText = liveEditorElm
if( path != ''){
const pathParts = path.split(' > ')
let testedPathParts = []
let workingPathParts = []
for (var i = 0; i < pathParts.length; i++) {
testedPathParts.push(pathParts[i])
let currentTestPath = testedPathParts.join(' > ')
// console.log('elm test ',i,currentTestPath)
let elmTest = virtualEditorElm.querySelector(currentTestPath)
if(!elmTest){
break
}
workingPathParts.push(pathParts[i])
}
workingPath = workingPathParts.join(' > ')
if(workingPath){
// Select text from virtual editor text
selectedDivText = selectedDivText.querySelector(workingPath)
// select text from current editor text
newSelectedDivText = newSelectedDivText.querySelector(workingPath)
}
}
const oldDivText = selectedDivText.innerHTML
const newDivText = newSelectedDivText.innerHTML
if(oldDivText == newDivText){ return }
const diff = dmp.diff_main(oldDivText, newDivText)
const patch_list = dmp.patch_make(oldDivText, newDivText, diff)
const patch_text = dmp.patch_toText(patch_list)
// save raw text for future diffs
rawNoteText = liveEditorElm.innerHTML
let newPatch = {
id: this.rawTextId,
diff: patch_text,
path: path,
// testing metrics
'old text':oldDivText,
'new text':newDivText,
'starting path':path,
'working path':workingPath,
}
// console.log('Sending out patch', newPatch)
this.$io.emit('note_diff', newPatch)
}, 100)
},
patchText(incomingPatchs){
// console.log('incoming patches ', incomingPatchs)
return new Promise((resolve, reject) => {
if(incomingPatchs == null){ return resolve(true) }
if(incomingPatchs.length == 0){ return resolve(true) }
const editorElement = document.getElementById('squire-id')
// let currentText = this.getText()
let currentText = document.getElementById('squire-id').innerHTML
//Convert text of all new patches into patches array
let patches = []
// iterate over incoming patches because they apply to specific divs
incomingPatchs.forEach(patch => {
if(patch.time <= this.updated){
return
// default to parent element, change to child if set
let editedElement = editorElement
if(patch.path){
editedElement = editorElement.querySelector(patch.path)
}
patches.push(...dmp.patch_fromText(patch.diff))
if( !editedElement ){
editedElement = editorElement
}
// convert patch from text and then apply to selected element
const patches = dmp.patch_fromText(patch.diff)
const patchResults = dmp.patch_apply(patches, editedElement.innerHTML)
// console.log('Patch results')
// console.log([patch.path, editedElement.innerHTML, patchResults[0]])
// patch changed directly into editor
editedElement.innerHTML = patchResults[0]
})
if(patches.length == 0){
return resolve(true)
}
var results = dmp.patch_apply(patches, currentText);
let newText = results[0]
this.noteText = newText
// this.editor.setHTML(newText)
document.getElementById('squire-id').innerHTML = newText
// save editor HTML after change for future comparisons
rawNoteText = editorElement.innerHTML
this.$nextTick(() => {
return resolve(true)
})
})
},
onKeyup(event){
this.statusText = 'modified'
// Small debounce on diff generation
clearTimeout(this.diffTextTimeout)
this.diffTextTimeout = setTimeout(() => {
this.diffText()
}, 25)
//Save after x seconds
clearTimeout(this.editDebounce)
this.editDebounce = setTimeout(() => {
@@ -1030,11 +1124,11 @@
})
},
destroyWebSockets(){
// this.$io.removeListener('past_diffs')
// this.$io.removeListener('update_user_count')
// this.$io.removeListener('incoming_diff')
this.$io.removeListener('past_diffs')
this.$io.removeListener('update_user_count')
this.$io.removeListener('incoming_diff')
},
setupWebSockets(){
initWebsocketEvents(){
//Tell server to push this note into a room
this.$io.emit('join_room', this.rawTextId )
@@ -1050,36 +1144,54 @@
this.diffsApplied = diffSinceLastUpdate.length
// console.log('Got Diffs Total -> ', diffSinceLastUpdate)
}
// console.log(diffSinceLastUpdate)
this.patchText(diffSinceLastUpdate)
.then(() => {
this.restoreCaretPosition()
})
})
this.$io.on('incoming_diff', incomingDiff => {
//Save current caret position
//Find index of child element based on past range
const element = window.getSelection().getRangeAt(0).startContainer.parentNode
const textLines = document.getElementById('squire-id').children
const childIndex = [...textLines].indexOf(element)
this.patchText([incomingDiff])
.then(() => {
this.restoreCaretPosition()
})
})
},
saveCaretPosition(event){
//Find index of child element based on past range
const element = window.getSelection().getRangeAt(0).startContainer.parentNode
//Save range to replace cursor if someone else makes an update
this.lastRange = this.generateSelector(element)
this.startOffset = parseInt(event.range.startOffset) || 0
if(childIndex == -1){
console.log('Cursor position lost. Div being updated was lost.')
return
}
},
restoreCaretPosition(){
return new Promise((resolve, reject) => {
// This code is intended to restore caret position to previous location
// when a third party updates the note.
if(!this.lastRange){ return resolve(true) }
const editorElement = document.getElementById('squire-id')
const lastElement = editorElement.querySelector(this.lastRange)
if( !lastElement ){ return resolve(true) }
//Reset caret position
//Find child index of old range and create a new one
let allChildren = document.getElementById('squire-id').children
const newLine = allChildren[childIndex].firstChild
let range = document.createRange()
range.setStart(newLine, this.startOffset)
range.setEnd(newLine, this.startOffset)
this.editor.setSelection(range)
})
})
range.setStart(lastElement.firstChild, this.startOffset)
range.setEnd(lastElement.firstChild, this.startOffset)
// Set range in editor element
this.editor.setSelection(range)
return resolve(true)
})
},
titleResize(){
//Resize the title field
@@ -1102,6 +1214,11 @@
z-index: 1019;
text-align: right;
}
.status-menu span + span {
border-left: 1px solid #ccc;
margin-left: 4px;
padding-left: 4px;
}
.font-color-bar {
/*width: calc(100% - 8px);*/

6
client/src/pages/NotesPage.vue
View File

@@ -37,10 +37,6 @@
<paste-button />
<span class="ui grey text text-fix">
Active Sessions {{ $store.getters.getActiveSessions }}
</span>
</div>
<div class="eight wide column" v-if="showClear">
@@ -571,7 +567,7 @@
// @TODO Don't even trigger this if the note wasn't changed
updateSingleNote(noteId, focuseAndAnimate = true){
console.log('updating single note', noteId)
// console.log('updating single note', noteId)
noteId = parseInt(noteId)

42
server/index.js
View File

@@ -114,29 +114,12 @@ io.on('connection', function(socket){
//Emit all sorted diffs to user
socket.emit('past_diffs', noteDiffs[rawTextId])
} else {
socket.emit('past_diffs', null)
}
const usersInRoom = io.sockets.adapter.rooms[rawTextId]
if(usersInRoom){
//Update users in room count
io.to(rawTextId).emit('update_user_count', usersInRoom.length)
//Debugging text - prints out notes in limbo
let noteDiffKeys = Object.keys(noteDiffs)
let totalDiffs = 0
noteDiffKeys.forEach(diffSetKey => {
if(noteDiffs[diffSetKey]){
totalDiffs += noteDiffs[diffSetKey].length
}
})
//Debugging Text
if(noteDiffKeys.length > 0){
console.log('Total notes in limbo -> ', noteDiffKeys.length)
console.log('Total Diffs for all notes -> ', totalDiffs)
}
}
})
@@ -162,31 +145,13 @@ io.on('connection', function(socket){
noteDiffs[noteId].push(data)
//Remove duplicate diffs if they exist
for (var i = noteDiffs[noteId].length - 1; i >= 0; i--) {
let pastDiff = noteDiffs[noteId][i]
for (var j = noteDiffs[noteId].length - 1; j >= 0; j--) {
let currentDiff = noteDiffs[noteId][j]
if(i == j){
continue
}
if(currentDiff.diff == pastDiff.diff || currentDiff.time == pastDiff.time){
console.log('Removing Duplicate')
noteDiffs[noteId].splice(i,1)
}
}
}
//Each user joins a room when they open the app.
// Go over each user in this note-room
io.in(noteId).clients((error, clients) => {
if (error) throw error;
//Go through each client in note room and send them the diff
//Go through each client in note-room and send them the diff
clients.forEach(socketId => {
// only send off diff if user
if(socketId != socket.id){
io.to(socketId).emit('incoming_diff', data)
}
@@ -213,7 +178,6 @@ io.on('connection', function(socket){
}
}
noteDiffs[checkpoint.rawTextId] = diffSet.slice(0, sliceTo)
if(noteDiffs[checkpoint.rawTextId].length == 0){