Setup
Core Configurations
enableSingleEditorMode
Enables single editor mode, allowing only one user to edit the document at a time while others remain in read-only mode.
Params
config
: (object
, optional). Configuration object for controlling single editor mode behaviorcustomMode
: (boolean
, optional). When true, SDK won’t automatically make HTML elements read-only for viewers. You need to handle this manually with the help of other APIs listed here. (default:false
)singleTabEditor
: (boolean
, optional). When enabled, restricts the editor to edit in only one browser tab at a time, preventing them from making changes across multiple tabs simultaneously (default:true
)
disableSingleEditorMode
Disables single editor mode and returns to normal editing.
Define Single Editor Mode Elements
Restrict to specific containers
- Restrict Single Editor Mode to specific containers.
- By default Single Editor Mode is enabled at the entire DOM level. You can restrict this feature to only certain HTML containers & their children by using this.
Fine tune elements control
Control which elements are controlled by Single Editor Mode.
You must add the data-velt-sync-access-* attributes to native HTML elements (e.g. button, input). It will not work directly on React components.
enableDefaultSingleEditorUI
- Control the visibility of the default Single Editor Mode System UI.
- The default UI shows:
- Current user’s editor/viewer status
- Editor access requests
- Request timeout countdown
- Request rejection options
- If you disable the default UI, you’ll need to implement your own UI for these features.
Timeout Configuration
setEditorAccessTimeout
- Configure automatic editor access timeout.
- Default:
5 seconds
.
enableEditorAccessTransferOnTimeOut
- When editor access timeout is reached, automatically transfer editor access to the next user in the queue.
- Enabled by default.
disableEditorAccessTransferOnTimeOut
- When editor access timeout is reached, do not automatically transfer editor access to the next user in the queue.
- Enabled by default.
getEditorAccessTimer
Track the state of editor access request timeout.
Returns
EditorAccessTimer
object:state
('idle'
|'inProgress'
|'completed'
)durationLeft
(number
)
Auto-Sync Text Elements
- Enable automatic syncing of text element contents across all users.
- Supported elements:
<input>
<textarea>
- ContentEditable
<div>
- First enable the feature and then define which elements should sync realtime.
Editor
setUserAsEditor
Sets the current user as the editor, making all other users read-only.
isUserEditor
Get the current user’s editor status.
Returns
UserEditorAccess
object:isEditor
(boolean
) - Whether the user is the editorisEditorOnCurrentTab
(boolean
) - Whether the user is editor on current tab
To unsubscribe from the subscription:
getEditor
Get information about the current editor.
Returns
User
object:email
(string
) - Editor’s emailname
(string
) - Editor’s namephotoUrl
(string
) - Editor’s photo URLuserId
(string
) - Editor’s unique ID
To unsubscribe from the subscription:
isEditorAccessRequested
Check if any viewer has requested editor access.
Returns
null
- User is not editor or request was canceledEditorRequest
object:requestStatus
(string
) - ‘requested’ for active requestsrequestedBy
(User
) - User object of the requester
To unsubscribe from the subscription:
acceptEditorAccessRequest
Accept editor access requests.
rejectEditorAccessRequest
Reject editor access requests.
editCurrentTab
Make current tab editable when editor has multiple tabs open.
Viewer
requestEditorAccess
Request editor access from the current editor.
Returns
null
- Request is pendingtrue
- Request acceptedfalse
- Request rejected
To unsubscribe from the subscription:
cancelEditorAccessRequest
Cancel the editor access request.
resetUserAccess
Reset editor access for all users.
Best Practices
- Use
singleTabEditor
to prevent confusion when users have multiple tabs open - Add IDs to HTML elements with sync attributes for more robust syncing
- Only apply sync attributes to native HTML elements, not framework components