first commit

This commit is contained in:
2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions

View File

@@ -0,0 +1,703 @@
/* eslint-disable camelcase */
// Migrated from services/web/frontend/js/ide/editor/Document.js
import RangesTracker from '@overleaf/ranges-tracker'
import { ShareJsDoc } from './share-js-doc'
import { debugConsole } from '@/utils/debugging'
import { Socket } from '@/features/ide-react/connection/types/socket'
import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter'
import { EditorFacade } from '@/features/source-editor/extensions/realtime'
import EditorWatchdogManager from '@/features/ide-react/connection/editor-watchdog-manager'
import EventEmitter from '@/utils/EventEmitter'
import {
AnyOperation,
Change,
CommentOperation,
EditOperation,
} from '../../../../../types/change'
import {
isCommentOperation,
isDeleteOperation,
isEditOperation,
isInsertOperation,
} from '@/utils/operations'
import { decodeUtf8 } from '@/utils/decode-utf8'
import {
ShareJsOperation,
TrackChangesIdSeeds,
} from '@/features/ide-react/editor/types/document'
import { ThreadId } from '../../../../../types/review-panel/review-panel'
import getMeta from '@/utils/meta'
const MAX_PENDING_OP_SIZE = 64
type JoinCallback = (error?: Error) => void
type LeaveCallback = JoinCallback
type Update =
| {
v: number
doc: string
}
| {
v: number
doc: string
op: AnyOperation[]
meta: {
type?: string
source: string
user_id: string
ts: number
}
hash?: string
lastV?: number
}
type Message = {
meta: {
tc: string
user_id: string
}
}
type ErrorMetadata = Record<string, any>
function getOpSize(op: AnyOperation) {
if (isInsertOperation(op)) {
return op.i.length
}
if (isDeleteOperation(op)) {
return op.d.length
}
return 0
}
function getShareJsOpSize(shareJsOp: ShareJsOperation) {
return shareJsOp.reduce((total, op) => total + getOpSize(op), 0)
}
// TODO: define these in RangesTracker
type _RangesTracker = Omit<RangesTracker, 'changes' | 'comments'> & {
changes: Change<EditOperation>[]
comments: Change<CommentOperation>[]
track_changes?: boolean
}
export type RangesTrackerWithResolvedThreadIds = _RangesTracker & {
resolvedThreadIds: Record<ThreadId, boolean>
}
export class DocumentContainer extends EventEmitter {
private connected: boolean
private wantToBeJoined = false
private chaosMonkeyTimer: number | null = null
public track_changes_as: string | null = null
private joinCallbacks: JoinCallback[] = []
private leaveCallbacks: LeaveCallback[] = []
doc?: ShareJsDoc
cm6?: EditorFacade
oldInflightOp?: ShareJsOperation
ranges?: _RangesTracker | RangesTrackerWithResolvedThreadIds
joined = false
// This is set and read in useCodeMirrorScope
docName = ''
constructor(
readonly doc_id: string,
readonly socket: Socket,
private readonly globalEditorWatchdogManager: EditorWatchdogManager,
private readonly ideEventEmitter: IdeEventEmitter,
private readonly detachDoc: (docId: string, doc: DocumentContainer) => void
) {
super()
this.connected = this.socket.socket.connected
this.bindToEditorEvents()
this.bindToSocketEvents()
}
attachToCM6(cm6: EditorFacade) {
this.cm6 = cm6
if (this.doc) {
this.doc.attachToCM6(this.cm6)
}
this.cm6.on('change', this.checkConsistency)
}
detachFromCM6() {
if (this.doc) {
this.doc.detachFromCM6()
}
if (this.cm6) {
this.cm6.off('change', this.checkConsistency)
}
delete this.cm6
this.clearChaosMonkey()
if (this.doc) {
this.ideEventEmitter.emit('document:closed', this.doc)
}
}
submitOp(...ops: AnyOperation[]) {
this.doc?.submitOp(ops)
}
private checkConsistency = (editor: EditorFacade) => {
// We've been seeing a lot of errors when I think there shouldn't be
// any, which may be related to this check happening before the change is
// applied. If we use a timeout, hopefully we can reduce this.
window.setTimeout(() => {
const editorValue = editor?.getValue()
const sharejsValue = this.doc?.getSnapshot()
if (editorValue !== sharejsValue) {
return this.onError(
new Error('Editor text does not match server text'),
{},
editorValue
)
}
}, 0)
}
getSnapshot() {
return this.doc?.getSnapshot()
}
getType() {
return this.doc?.getType()
}
getInflightOp(): ShareJsOperation | undefined {
return this.doc?.getInflightOp()
}
getPendingOp(): ShareJsOperation | undefined {
return this.doc?.getPendingOp()
}
getRecentAck() {
return this.doc?.getRecentAck()
}
getInflightOpCreatedAt() {
return this.doc?.getInflightOpCreatedAt()
}
getPendingOpCreatedAt() {
return this.doc?.getPendingOpCreatedAt()
}
hasBufferedOps() {
return this.doc?.hasBufferedOps()
}
setTrackingChanges(track_changes: boolean) {
if (this.doc) {
this.doc.track_changes = track_changes
}
}
getTrackingChanges() {
return !!this.doc?.track_changes
}
setTrackChangesIdSeeds(id_seeds: TrackChangesIdSeeds) {
if (this.doc) {
this.doc.track_changes_id_seeds = id_seeds
}
}
private onUpdateAppliedHandler = (update: any) => this.onUpdateApplied(update)
private onErrorHandler = (error: Error, message: ErrorMetadata) => {
// 'otUpdateError' are emitted per doc socket.io room, hence we can be
// sure that message.doc_id exists.
if (message.doc_id !== this.doc_id) {
// This error is for another doc. Do not action it. We could open
// a modal that has the wrong context on it.
return
}
this.onError(error, message)
}
private onDisconnectHandler = () => this.onDisconnect()
private bindToSocketEvents() {
this.socket.on('otUpdateApplied', this.onUpdateAppliedHandler)
this.socket.on('otUpdateError', this.onErrorHandler)
return this.socket.on('disconnect', this.onDisconnectHandler)
}
private unBindFromSocketEvents() {
this.socket.removeListener('otUpdateApplied', this.onUpdateAppliedHandler)
this.socket.removeListener('otUpdateError', this.onErrorHandler)
return this.socket.removeListener('disconnect', this.onDisconnectHandler)
}
private bindToEditorEvents() {
this.ideEventEmitter.on('project:joined', this.onReconnect)
}
private unBindFromEditorEvents() {
this.ideEventEmitter.off('project:joined', this.onReconnect)
}
leaveAndCleanUp(cb?: (error?: Error) => void) {
return this.leave((error?: Error) => {
this.cleanUp()
if (cb) cb(error)
})
}
leaveAndCleanUpPromise() {
return new Promise<void>((resolve, reject) => {
this.leaveAndCleanUp((error?: Error) => {
if (error) {
reject(error)
} else {
resolve()
}
})
})
}
join(callback?: JoinCallback) {
this.wantToBeJoined = true
this.cancelLeave()
if (this.connected) {
this.joinDoc(callback)
} else if (callback) {
this.joinCallbacks.push(callback)
}
}
leave(callback?: LeaveCallback) {
this.flush() // force an immediate flush when leaving document
this.wantToBeJoined = false
this.cancelJoin()
if (this.doc?.hasBufferedOps()) {
debugConsole.log(
'[leave] Doc has buffered ops, pushing callback for later'
)
if (callback) {
this.leaveCallbacks.push(callback)
}
} else if (!this.connected) {
debugConsole.log('[leave] Not connected, returning now')
callback?.()
} else {
debugConsole.log('[leave] Leaving now')
this.leaveDoc(callback)
}
}
flush() {
return this.doc?.flushPendingOps()
}
chaosMonkey(line = 0, char = 'a') {
const orig = char
let copy: string | null = null
let pos = 0
const timer = () => {
if (copy == null || !copy.length) {
copy = orig.slice() + ' ' + new Date() + '\n'
line += Math.random() > 0.1 ? 1 : -2
if (line < 0) {
line = 0
}
pos = 0
}
char = copy[0]
copy = copy.slice(1)
if (this.cm6) {
this.cm6.view.dispatch({
changes: {
from: Math.min(pos, this.cm6.view.state.doc.length),
insert: char,
},
})
}
pos += 1
this.chaosMonkeyTimer = window.setTimeout(
timer,
100 + (Math.random() < 0.1 ? 1000 : 0)
)
}
timer()
}
clearChaosMonkey() {
const timer = this.chaosMonkeyTimer
if (timer) {
this.chaosMonkeyTimer = null
window.clearTimeout(timer)
}
}
pollSavedStatus() {
// returns false if doc has ops waiting to be acknowledged or
// sent that haven't changed since the last time we checked.
// Otherwise returns true.
let saved
const inflightOp = this.getInflightOp()
const pendingOp = this.getPendingOp()
const recentAck = this.getRecentAck()
const pendingOpSize = pendingOp ? getShareJsOpSize(pendingOp) : 0
if (inflightOp == null && pendingOp == null) {
// There's nothing going on, this is OK.
saved = true
debugConsole.log('[pollSavedStatus] no inflight or pending ops')
} else if (inflightOp && inflightOp === this.oldInflightOp) {
// The same inflight op has been sitting unacked since we
// last checked, this is bad.
saved = false
debugConsole.log('[pollSavedStatus] inflight op is same as before')
} else if (
pendingOp != null &&
recentAck &&
pendingOpSize < MAX_PENDING_OP_SIZE
) {
// There is an op waiting to go to server but it is small and
// within the recent ack limit, this is OK for now.
saved = true
debugConsole.log(
'[pollSavedStatus] pending op (small with recent ack) assume ok',
pendingOp,
pendingOpSize
)
} else {
// In any other situation, assume the document is unsaved.
saved = false
debugConsole.log(
`[pollSavedStatus] assuming not saved (inflightOp?: ${
inflightOp != null
}, pendingOp?: ${pendingOp != null})`
)
}
this.oldInflightOp = inflightOp
return saved
}
private cancelLeave() {
this.leaveCallbacks = []
}
private cancelJoin() {
this.joinCallbacks = []
}
private onUpdateApplied(update: Update) {
if (update?.doc === this.doc_id && this.doc != null) {
// FIXME: change this back to processUpdateFromServer when redis fixed
this.doc.processUpdateFromServerInOrder(update)
if (!this.wantToBeJoined) {
return this.leave()
}
}
}
private onDisconnect() {
debugConsole.log('[onDisconnect] disconnecting')
this.connected = false
this.joined = false
return this.doc != null
? this.doc.updateConnectionState('disconnected')
: undefined
}
private onReconnect = () => {
debugConsole.log('[onReconnect] reconnected (joined project)')
this.connected = true
if (this.wantToBeJoined || this.doc?.hasBufferedOps()) {
debugConsole.log(
`[onReconnect] Rejoining (wantToBeJoined: ${
this.wantToBeJoined
} OR hasBufferedOps: ${this.doc?.hasBufferedOps()})`
)
this.joinDoc((error?: Error) => {
if (error) {
this.onError(error)
return
}
this.doc?.updateConnectionState('ok')
this.doc?.flushPendingOps()
this.callJoinCallbacks()
})
}
}
private callJoinCallbacks() {
for (const callback of this.joinCallbacks) {
callback()
}
this.joinCallbacks = []
}
private joinDoc(callback?: JoinCallback) {
if (this.doc) {
return this.socket.emit(
'joinDoc',
this.doc_id,
this.doc.getVersion(),
{ encodeRanges: true, age: this.doc.getTimeSinceLastServerActivity() },
(error, docLines, version, updates, ranges) => {
if (error) {
callback?.(error)
return
}
this.joined = true
this.doc?.catchUp(updates)
this.decodeRanges(ranges)
this.catchUpRanges(ranges?.changes, ranges?.comments)
callback?.()
}
)
} else {
this.socket.emit(
'joinDoc',
this.doc_id,
{ encodeRanges: true },
(error, docLines, version, updates, ranges) => {
if (error) {
callback?.(error)
return
}
this.joined = true
this.doc = new ShareJsDoc(
this.doc_id,
docLines,
version,
this.socket,
this.globalEditorWatchdogManager,
this.ideEventEmitter
)
this.decodeRanges(ranges)
this.ranges = new RangesTracker(ranges?.changes, ranges?.comments)
this.bindToShareJsDocEvents()
callback?.()
}
)
}
}
private decodeRanges(ranges: RangesTracker) {
try {
if (ranges.changes) {
for (const change of ranges.changes) {
if (isInsertOperation(change.op)) {
change.op.i = decodeUtf8(change.op.i)
}
if (isDeleteOperation(change.op)) {
change.op.d = decodeUtf8(change.op.d)
}
}
}
return (() => {
if (!ranges.comments) {
return []
}
return ranges.comments.map((comment: Change<CommentOperation>) =>
comment.op.c != null
? (comment.op.c = decodeUtf8(comment.op.c))
: undefined
)
})()
} catch (err) {
debugConsole.error(err)
}
}
private leaveDoc(callback?: LeaveCallback) {
debugConsole.log('[leaveDoc] Sending leaveDoc request')
this.socket.emit('leaveDoc', this.doc_id, error => {
if (error) {
callback?.(error)
return
}
this.joined = false
for (const leaveCallback of this.leaveCallbacks) {
debugConsole.log('[_leaveDoc] Calling buffered callback', leaveCallback)
leaveCallback(error)
}
this.leaveCallbacks = []
callback?.()
})
}
cleanUp() {
// if we arrive here from _onError the pending and inflight ops will have been cleared
if (this.hasBufferedOps()) {
debugConsole.log(
`[cleanUp] Document (${this.doc_id}) has buffered ops, refusing to remove from openDocs`
)
return // return immediately, do not unbind from events
}
this.detachDoc(this.doc_id, this)
this.unBindFromEditorEvents()
this.unBindFromSocketEvents()
}
private bindToShareJsDocEvents() {
if (!this.doc) {
return
}
this.doc.on('error', (error: Error, meta: ErrorMetadata) =>
this.onError(error, meta)
)
this.doc.on('externalUpdate', (update: Update) => {
return this.trigger('externalUpdate', update)
})
this.doc.on('remoteop', (...ops: AnyOperation[]) => {
return this.trigger('remoteop', ...ops)
})
this.doc.on('op:sent', (op: AnyOperation) => {
return this.trigger('op:sent')
})
this.doc.on('op:acknowledged', (op: AnyOperation) => {
this.ideEventEmitter.emit('ide:opAcknowledged', {
doc_id: this.doc_id,
op,
})
return this.trigger('op:acknowledged')
})
this.doc.on('op:timeout', (op: AnyOperation) => {
this.trigger('op:timeout')
return this.onError(new Error('op timed out'))
})
let docChangedTimeout: number | null = null
this.doc.on(
'change',
(ops: AnyOperation[], oldSnapshot: any, msg: Message) => {
this.applyOpsToRanges(ops, msg)
if (docChangedTimeout) {
window.clearTimeout(docChangedTimeout)
}
docChangedTimeout = window.setTimeout(() => {
if (ops.some(isEditOperation)) {
window.dispatchEvent(
new CustomEvent('doc:changed', { detail: { id: this.doc_id } })
)
this.ideEventEmitter.emit('doc:changed', {
doc_id: this.doc_id,
})
}
}, 50)
}
)
this.doc.on('flipped_pending_to_inflight', () => {
return this.trigger('flipped_pending_to_inflight')
})
let docSavedTimeout: number | null
this.doc.on('saved', () => {
if (docSavedTimeout) {
window.clearTimeout(docSavedTimeout)
}
docSavedTimeout = window.setTimeout(() => {
window.dispatchEvent(
new CustomEvent('doc:saved', { detail: { id: this.doc_id } })
)
this.ideEventEmitter.emit('doc:saved', { doc_id: this.doc_id })
}, 50)
})
}
private onError(
error: Error,
meta: ErrorMetadata = {},
editorContent?: string
) {
meta.doc_id = this.doc_id
debugConsole.log('ShareJS error', error, meta)
if (error.message === 'no project_id found on client') {
debugConsole.log('ignoring error, will wait to join project')
return
}
if (this.doc) {
this.doc.clearInflightAndPendingOps()
}
this.trigger('error', error, meta, editorContent)
// The clean-up should run after the error is triggered because the error triggers a
// disconnect. If we run the clean-up first, we remove our event handlers and miss
// the disconnect event, which means we try to leaveDoc when the connection comes back.
// This could interfere with the new connection of a new instance of this document.
this.cleanUp()
}
private applyOpsToRanges(ops: AnyOperation[], msg?: Message) {
let old_id_seed
let track_changes_as = null
const remote_op = msg != null
if (remote_op && msg?.meta.tc) {
old_id_seed = this.ranges!.getIdSeed()
this.ranges!.setIdSeed(msg.meta.tc)
track_changes_as = msg.meta.user_id
} else if (!remote_op && this.track_changes_as != null) {
track_changes_as = this.track_changes_as
}
this.ranges!.track_changes = track_changes_as != null
for (const op of this.filterOps(ops)) {
this.ranges!.applyOp(op, { user_id: track_changes_as })
}
if (old_id_seed != null) {
this.ranges!.setIdSeed(old_id_seed)
}
if (remote_op) {
// With remote ops, the editor hasn't been updated when we receive this
// op, so defer updating track changes until it has
return window.setTimeout(() => this.emit('ranges:dirty'))
} else {
return this.emit('ranges:dirty')
}
}
private catchUpRanges(
changes: Change<EditOperation>[],
comments: Change<CommentOperation>[]
) {
// We've just been given the current server's ranges, but need to apply any local ops we have.
// Reset to the server state then apply our local ops again.
if (changes == null) {
changes = []
}
if (comments == null) {
comments = []
}
this.emit('ranges:clear')
this.ranges!.changes = changes
this.ranges!.comments = comments
this.ranges!.track_changes = this.doc?.track_changes ?? false
for (const op of this.filterOps(this.doc?.getInflightOp() || [])) {
this.ranges!.setIdSeed(this.doc?.track_changes_id_seeds?.inflight)
this.ranges!.applyOp(op, { user_id: this.track_changes_as })
}
for (const op of this.filterOps(this.doc?.getPendingOp() || [])) {
this.ranges!.setIdSeed(this.doc?.track_changes_id_seeds?.pending)
this.ranges!.applyOp(op, { user_id: this.track_changes_as })
}
return this.emit('ranges:redraw')
}
private filterOps(ops: AnyOperation[]) {
// Read-only token users can't see/edit comment, so we filter out comment
// ops to avoid highlighting comment ranges.
if (getMeta('ol-isRestrictedTokenMember')) {
return ops.filter(op => !isCommentOperation(op))
} else {
return ops
}
}
}

View File

@@ -0,0 +1,16 @@
import { debugConsole } from '@/utils/debugging'
type EditorEvent = { type: string; meta: unknown; date: Date }
// Record events and then do nothing with them.
export class EventLog {
private recentEvents: EditorEvent[] = []
pushEvent = (type: string, meta: unknown = {}) => {
debugConsole.log('event', type, meta)
this.recentEvents.push({ type, meta, date: new Date() })
if (this.recentEvents.length > 100) {
return this.recentEvents.shift()
}
}
}

View File

@@ -0,0 +1,126 @@
// Migrated from static methods of Document in Document.js
import { DocumentContainer } from '@/features/ide-react/editor/document-container'
import { debugConsole } from '@/utils/debugging'
import { Socket } from '@/features/ide-react/connection/types/socket'
import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter'
import EditorWatchdogManager from '@/features/ide-react/connection/editor-watchdog-manager'
export class OpenDocuments {
private openDocs = new Map<string, DocumentContainer>()
// eslint-disable-next-line no-useless-constructor
constructor(
private readonly socket: Socket,
private readonly globalEditorWatchdogManager: EditorWatchdogManager,
private readonly events: IdeEventEmitter
) {}
getDocument(docId: string) {
// Try to clean up existing docs before reopening them. If the doc has no
// buffered ops then it will be deleted by _cleanup() and a new instance
// of the document created below. This prevents us trying to follow the
// joinDoc:existing code path on an existing doc that doesn't have any
// local changes and getting an error if its version is too old.
if (this.openDocs.has(docId)) {
debugConsole.log(
`[getDocument] Cleaning up existing document instance for ${docId}`
)
this.openDocs.get(docId)?.cleanUp()
}
if (!this.openDocs.has(docId)) {
debugConsole.log(
`[getDocument] Creating new document instance for ${docId}`
)
this.createDoc(docId)
} else {
debugConsole.log(
`[getDocument] Returning existing document instance for ${docId}`
)
}
return this.openDocs.get(docId)
}
private createDoc(docId: string) {
const doc = new DocumentContainer(
docId,
this.socket,
this.globalEditorWatchdogManager,
this.events,
this.detachDoc.bind(this)
)
this.openDocs.set(docId, doc)
}
detachDoc(docId: string, doc: DocumentContainer) {
if (this.openDocs.get(docId) === doc) {
debugConsole.log(
`[detach] Removing document with ID (${docId}) from openDocs`
)
this.openDocs.delete(docId)
} else {
// It's possible that this instance has error, and the doc has been reloaded.
// This creates a new instance in Document.openDoc with the same id. We shouldn't
// clear it because it's not this instance.
debugConsole.log(
`[_cleanUp] New instance of (${docId}) created. Not removing`
)
}
}
hasUnsavedChanges() {
for (const doc of this.openDocs.values()) {
if (doc.hasBufferedOps()) {
return true
}
}
return false
}
flushAll() {
for (const doc of this.openDocs.values()) {
doc.flush()
}
}
unsavedDocs() {
const docs = []
for (const doc of this.openDocs.values()) {
if (!doc.pollSavedStatus()) {
docs.push(doc)
}
}
return docs
}
async awaitBufferedOps(signal: AbortSignal) {
if (this.hasUnsavedChanges()) {
const { promise, resolve } = Promise.withResolvers<void>()
let resolved = false
const listener = () => {
if (!this.hasUnsavedChanges()) {
debugConsole.log('saved')
window.removeEventListener('doc:saved', listener)
resolved = true
resolve()
}
}
window.addEventListener('doc:saved', listener)
signal.addEventListener('abort', () => {
if (!resolved) {
debugConsole.log('aborted')
window.removeEventListener('doc:saved', listener)
resolve()
}
})
this.flushAll()
await promise
}
}
}

View File

@@ -0,0 +1,446 @@
/* eslint-disable camelcase */
// Migrated from services/web/frontend/js/ide/editor/ShareJsDoc.js
import EventEmitter from '../../../utils/EventEmitter'
import { Doc } from '@/vendor/libs/sharejs'
import { Socket } from '@/features/ide-react/connection/types/socket'
import { debugConsole } from '@/utils/debugging'
import { decodeUtf8 } from '@/utils/decode-utf8'
import { IdeEventEmitter } from '@/features/ide-react/create-ide-event-emitter'
import EditorWatchdogManager from '@/features/ide-react/connection/editor-watchdog-manager'
import {
Message,
ShareJsConnectionState,
ShareJsOperation,
TrackChangesIdSeeds,
} from '@/features/ide-react/editor/types/document'
import { EditorFacade } from '@/features/source-editor/extensions/realtime'
import { recordDocumentFirstChangeEvent } from '@/features/event-tracking/document-first-change-event'
import getMeta from '@/utils/meta'
// All times below are in milliseconds
const SINGLE_USER_FLUSH_DELAY = 2000
const MULTI_USER_FLUSH_DELAY = 500
const INFLIGHT_OP_TIMEOUT = 5000 // Retry sending ops after 5 seconds without an ack
const WAIT_FOR_CONNECTION_TIMEOUT = 500
const FATAL_OP_TIMEOUT = 45000
const RECENT_ACK_LIMIT = 2 * SINGLE_USER_FLUSH_DELAY
type Update = Record<string, any>
type Connection = {
send: (update: Update) => void
state: ShareJsConnectionState
id: string
}
export class ShareJsDoc extends EventEmitter {
type: string
track_changes = false
track_changes_id_seeds: TrackChangesIdSeeds | null = null
connection: Connection
// @ts-ignore
_doc: Doc
private editorWatchdogManager: EditorWatchdogManager
private lastAcked: number | null = null
private pendingOpCreatedAt: number | null = null
private inflightOpCreatedAt: number | null = null
private queuedMessageTimer: number | null = null
private queuedMessages: Message[] = []
private detachEditorWatchdogManager: (() => void) | null = null
private _timeoutTimer: number | null = null
constructor(
readonly doc_id: string,
docLines: string[],
version: number,
readonly socket: Socket,
private readonly globalEditorWatchdogManager: EditorWatchdogManager,
private readonly eventEmitter: IdeEventEmitter
) {
super()
this.type = 'text'
// Decode any binary bits of data
const snapshot = docLines.map(line => decodeUtf8(line)).join('\n')
this.connection = {
send: (update: Update) => {
this.startInflightOpTimeout(update)
if (this.track_changes && this.track_changes_id_seeds) {
if (update.meta == null) {
update.meta = {}
}
update.meta.tc = this.track_changes_id_seeds.inflight
}
return this.socket.emit(
'applyOtUpdate',
this.doc_id,
update,
(error: Error) => {
if (error != null) {
this.handleError(error)
}
}
)
},
state: 'ok',
id: this.socket.publicId,
}
this._doc = new Doc(this.connection, this.doc_id, {
type: this.type,
})
this._doc.setFlushDelay(SINGLE_USER_FLUSH_DELAY)
this._doc.on('change', (...args: any[]) => {
const isRemote = args[3]
if (!isRemote && !this.pendingOpCreatedAt) {
debugConsole.log('set pendingOpCreatedAt', new Date())
this.pendingOpCreatedAt = performance.now()
}
return this.trigger('change', ...args)
})
this.editorWatchdogManager = new EditorWatchdogManager({
parent: globalEditorWatchdogManager,
})
this._doc.on('acknowledge', () => {
this.lastAcked = performance.now() // note time of last ack from server for an op we sent
this.inflightOpCreatedAt = null
debugConsole.log('unset inflightOpCreatedAt')
this.editorWatchdogManager.onAck() // keep track of last ack globally
return this.trigger('acknowledge')
})
this._doc.on('remoteop', (...args: any[]) => {
// As soon as we're working with a collaborator, start sending
// ops more frequently for low latency.
this._doc.setFlushDelay(MULTI_USER_FLUSH_DELAY)
return this.trigger('remoteop', ...args)
})
this._doc.on('flipped_pending_to_inflight', () => {
this.inflightOpCreatedAt = this.pendingOpCreatedAt
debugConsole.log('set inflightOpCreatedAt from pendingOpCreatedAt')
this.pendingOpCreatedAt = null
debugConsole.log('unset pendingOpCreatedAt')
return this.trigger('flipped_pending_to_inflight')
})
this._doc.on('saved', () => {
return this.trigger('saved')
})
this._doc.on('error', (e: Error) => {
return this.handleError(e)
})
this.bindToDocChanges(this._doc)
this.processUpdateFromServer({
open: true,
v: version,
snapshot,
})
this.removeCarriageReturnCharFromShareJsDoc()
}
private removeCarriageReturnCharFromShareJsDoc() {
const doc = this._doc
if (doc.snapshot.indexOf('\r') === -1) {
return
}
let nextPos
while ((nextPos = doc.snapshot.indexOf('\r')) !== -1) {
debugConsole.log('[ShareJsDoc] remove-carriage-return-char', nextPos)
doc.del(nextPos, 1)
}
}
submitOp(op: ShareJsOperation) {
this._doc.submitOp(op)
}
// The following code puts out of order messages into a queue
// so that they can be processed in order. This is a workaround
// for messages being delayed by redis cluster.
// FIXME: REMOVE THIS WHEN REDIS PUBSUB IS SENDING MESSAGES IN ORDER
private isAheadOfExpectedVersion(message: Message) {
return this._doc.version > 0 && message.v > this._doc.version
}
private pushOntoQueue(message: Message) {
debugConsole.log(`[processUpdate] push onto queue ${message.v}`)
// set a timer so that we never leave messages in the queue indefinitely
if (!this.queuedMessageTimer) {
this.queuedMessageTimer = window.setTimeout(() => {
debugConsole.log(`[processUpdate] queue timeout fired for ${message.v}`)
// force the message to be processed after the timeout,
// it will cause an error if the missing update has not arrived
this.processUpdateFromServer(message)
}, INFLIGHT_OP_TIMEOUT)
}
this.queuedMessages.push(message)
// keep the queue in order, lowest version first
this.queuedMessages.sort(function (a, b) {
return a.v - b.v
})
}
private clearQueue() {
this.queuedMessages = []
}
private processQueue() {
if (this.queuedMessages.length > 0) {
const nextAvailableVersion = this.queuedMessages[0].v
if (nextAvailableVersion > this._doc.version) {
// there are updates we still can't apply yet
} else {
// there's a version we can accept on the queue, apply it
debugConsole.log(
`[processUpdate] taken from queue ${nextAvailableVersion}`
)
const message = this.queuedMessages.shift()
if (message) {
this.processUpdateFromServerInOrder(message)
}
// clear the pending timer if the queue has now been cleared
if (this.queuedMessages.length === 0 && this.queuedMessageTimer) {
debugConsole.log('[processUpdate] queue is empty, cleared timeout')
window.clearTimeout(this.queuedMessageTimer)
this.queuedMessageTimer = null
}
}
}
}
// FIXME: This is the new method which reorders incoming updates if needed
// called from document.ts
processUpdateFromServerInOrder(message: Message) {
// Is this update ahead of the next expected update?
// If so, put it on a queue to be handled later.
if (this.isAheadOfExpectedVersion(message)) {
this.pushOntoQueue(message)
return // defer processing this update for now
}
const error = this.processUpdateFromServer(message)
if (
error instanceof Error &&
error.message === 'Invalid version from server'
) {
// if there was an error, abandon the queued updates ahead of this one
this.clearQueue()
return
}
// Do we have any messages queued up?
// find the next message if available
this.processQueue()
}
// FIXME: This is the original method. Switch back to this when redis
// issues are resolved.
processUpdateFromServer(message: Message) {
try {
this._doc._onMessage(message)
} catch (error) {
// Version mismatches are thrown as errors
debugConsole.log(error)
this.handleError(error)
return error // return the error for queue handling
}
if (message.meta?.type === 'external') {
return this.trigger('externalUpdate', message)
}
}
catchUp(updates: Message[]) {
return updates.map(update => {
update.v = this._doc.version
update.doc = this.doc_id
return this.processUpdateFromServer(update)
})
}
getSnapshot() {
return this._doc.snapshot as string | undefined
}
getVersion() {
return this._doc.version
}
getTimeSinceLastServerActivity() {
return Math.floor(performance.now() - this._doc.lastServerActivity)
}
getType() {
return this.type
}
clearInflightAndPendingOps() {
this.clearFatalTimeoutTimer()
this._doc.inflightOp = null
this._doc.inflightCallbacks = []
this._doc.pendingOp = null
return (this._doc.pendingCallbacks = [])
}
flushPendingOps() {
// This will flush any ops that are pending.
// If there is an inflight op it will do nothing.
return this._doc.flush()
}
updateConnectionState(state: ShareJsConnectionState) {
debugConsole.log(`[updateConnectionState] Setting state to ${state}`)
this.connection.state = state
this.connection.id = this.socket.publicId
this._doc.autoOpen = false
this._doc._connectionStateChanged(state)
this.lastAcked = null // reset the last ack time when connection changes
}
hasBufferedOps() {
return this._doc.inflightOp != null || this._doc.pendingOp != null
}
getInflightOp() {
return this._doc.inflightOp
}
getPendingOp() {
return this._doc.pendingOp
}
getRecentAck() {
// check if we have received an ack recently (within a factor of two of the single user flush delay)
return (
this.lastAcked !== null &&
performance.now() - this.lastAcked < RECENT_ACK_LIMIT
)
}
getInflightOpCreatedAt() {
return this.inflightOpCreatedAt
}
getPendingOpCreatedAt() {
return this.pendingOpCreatedAt
}
private attachEditorWatchdogManager(editor: EditorFacade) {
// end-to-end check for edits -> acks, for this very ShareJsdoc
// This will catch a broken connection and missing UX-blocker for the
// user, allowing them to keep editing.
this.detachEditorWatchdogManager =
this.editorWatchdogManager.attachToEditor(editor)
}
private attachToEditor(editor: EditorFacade, attachToShareJs: () => void) {
this.attachEditorWatchdogManager(editor)
attachToShareJs()
}
private maybeDetachEditorWatchdogManager() {
// a failed attach attempt may lead to a missing cleanup handler
if (this.detachEditorWatchdogManager) {
this.detachEditorWatchdogManager()
this.detachEditorWatchdogManager = null
}
}
attachToCM6(cm6: EditorFacade) {
this.attachToEditor(cm6, () => {
cm6.attachShareJs(this._doc, getMeta('ol-maxDocLength'))
})
}
detachFromCM6() {
this.maybeDetachEditorWatchdogManager()
if (this._doc.detach_cm6) {
this._doc.detach_cm6()
}
}
private startInflightOpTimeout(update: Update) {
this.startFatalTimeoutTimer(update)
const retryOp = () => {
// Only send the update again if inflightOp is still populated
// This can be cleared when hard reloading the document in which
// case we don't want to keep trying to send it.
debugConsole.log('[inflightOpTimeout] Trying op again')
if (this._doc.inflightOp != null) {
// When there is a socket.io disconnect, @_doc.inflightSubmittedIds
// is updated with the socket.io client id of the current op in flight
// (meta.source of the op).
// @connection.id is the client id of the current socket.io session.
// So we need both depending on whether the op was submitted before
// one or more disconnects, or if it was submitted during the current session.
update.dupIfSource = [
this.connection.id,
...Array.from(this._doc.inflightSubmittedIds),
]
// We must be joined to a project for applyOtUpdate to work on the real-time
// service, so don't send an op if we're not. Connection state is set to 'ok'
// when we've joined the project
if (this.connection.state !== 'ok') {
debugConsole.log(
'[inflightOpTimeout] Not connected, retrying in 0.5s'
)
window.setTimeout(retryOp, WAIT_FOR_CONNECTION_TIMEOUT)
} else {
debugConsole.log('[inflightOpTimeout] Sending')
return this.connection.send(update)
}
}
}
const timer = window.setTimeout(retryOp, INFLIGHT_OP_TIMEOUT)
return this._doc.inflightCallbacks.push(() => {
this.clearFatalTimeoutTimer()
window.clearTimeout(timer)
}) // 30 seconds
}
private startFatalTimeoutTimer(update: Update) {
// If an op doesn't get acked within FATAL_OP_TIMEOUT, something has
// gone unrecoverably wrong (the op will have been retried multiple times)
if (this._timeoutTimer != null) {
return
}
return (this._timeoutTimer = window.setTimeout(() => {
this.clearFatalTimeoutTimer()
return this.trigger('op:timeout', update)
}, FATAL_OP_TIMEOUT))
}
private clearFatalTimeoutTimer() {
if (this._timeoutTimer == null) {
return
}
clearTimeout(this._timeoutTimer)
return (this._timeoutTimer = null)
}
private handleError(error: unknown, meta = {}) {
return this.trigger('error', error, meta)
}
// @ts-ignore
private bindToDocChanges(doc: Doc) {
const { submitOp } = doc
doc.submitOp = (op: ShareJsOperation, callback?: () => void) => {
recordDocumentFirstChangeEvent()
this.trigger('op:sent', op)
doc.pendingCallbacks.push(() => {
return this.trigger('op:acknowledged', op)
})
return submitOp.call(doc, op, callback)
}
const { flush } = doc
doc.flush = () => {
this.trigger('flush', doc.inflightOp, doc.pendingOp, doc.version)
return flush.call(doc)
}
}
}

View File

@@ -0,0 +1,20 @@
import { AnyOperation } from '../../../../../../types/change'
export type Version = number
export type ShareJsConnectionState = 'ok' | 'disconnected' | 'stopped'
export type ShareJsOperation = AnyOperation[]
export type TrackChangesIdSeeds = { inflight: string; pending: string }
// TODO: check the properties of this type
export type Message = {
v: Version
open?: boolean
meta?: {
type?: string
}
doc?: string
snapshot?: string
}

View File

@@ -0,0 +1 @@
export type EditorType = 'cm6' | 'cm6-rich-text'