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 behavior
customMode: (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)
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.
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.
Copy
Ask AI
// Enable sync access on custom elementsreturn ( <div data-velt-sync-access="true"> Controlled by Single Editor Mode </div>);// Exclude elements from sync accessreturn ( <button data-velt-sync-access-disabled="true"> Not controlled by Single Editor Mode </button>);
setUserAsEditor includes validations to prevent assigning an editor when one already exists. It returns a promise that resolves to an optional error object.
Copy
Ask AI
export interface SetUserAsEditorResponse { error?: ErrorEvent;}export type ErrorEvent = { error?: string; code: string; message?: string; source?: string;};// Usageconst liveStateSyncElement = useLiveStateSyncUtils();const result = await liveStateSyncElement.setUserAsEditor();if (result?.error) { if (result.error.code === 'same_user_editor_current_tab') { // Same user already editor in current tab } else if (result.error.code === 'same_user_editor_different_tab') { // Same user already editor in different tab } else if (result.error.code === 'another_user_editor') { // Another user already editor }}
Possible error values:
Copy
Ask AI
{ code: 'same_user_editor_current_tab', message: 'Same user is already editor in current tab.', source: 'setUserAsEditor',}{ code: 'same_user_editor_different_tab', message: 'Same user is already editor in different tab.', source: 'setUserAsEditor',}{ code: 'another_user_editor', message: 'Another user is already editor.', source: 'setUserAsEditor',}
Check if any viewer has requested editor access.Returns
null - User is not editor or request was canceled
EditorRequest object:
requestStatus (string) - ‘requested’ for active requests
requestedBy (User) - User object of the requester
Copy
Ask AI
// Using Hooksconst editorAccessRequested = useEditorAccessRequestHandler();// Using APIconst liveStateSyncElement = useLiveStateSyncUtils();let subscription = liveStateSyncElement.isEditorAccessRequested().subscribe((data) => { if (data === null) { console.log('No active requests or user is not editor'); } else { console.log('Request from:', data.requestedBy.name); }});
Send a lightweight heartbeat from your host app to Velt. Velt will use that as a fallback in rare edge cases if it fails to detect multi‑tab/device presence. Most apps don’t need this; use only if you see ambiguity in who’s the active editor.
Copy
Ask AI
export interface LiveStateSingleEditorExternalUserPresence { /** True if the same user is present on a different tab. */ sameUserPresentOnTab?: boolean; /** True if a different user is present on a different tab. */ differentUserPresentOnTab?: boolean; /** User IDs of users present on a different tab. */ userIds?: string[];}const liveStateSyncElement = useLiveStateSyncUtils();liveStateSyncElement.updateUserPresence({ sameUserPresentOnTab: false, differentUserPresentOnTab: true, userIds: ['user-2']});