Overview
//Get Velt Client
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
function MyComponent(){
const { client } = useVeltClient();
useEffect( () => {
//Get LiveStateSyncElement from Velt Client
const liveStateSyncElement = client.getLiveStateSyncElement();
//Enable Single Editor Mode
liveStateSyncElement.enableSingleEditorMode();
//Disable Single Editor Mode
liveStateSyncElement.disableSingleEditorMode();
//Check if Current User is Editor
liveStateSyncElement.isUserEditor().subscribe((isUserEditor) => {
// your logic here...
});
//Set Current User as Editor
liveStateSyncElement.setUserAsEditor();
//Reset Editor Access
liveStateSyncElement.resetUserAccess();
//Enable Auto Sync State
liveStateSyncElement.enableAutoSyncState();
//Restrict Auto Sync Access to Specified Parent Elements
liveStateSyncElement.singleEditorModeContainerIds(['element-1','element-2'])
},[])
return (
<div>
{/* Enable Auto Sync State across on Text Elements */}
<textarea id="uniqueId" data-velt-sync-state="true"></textarea>
{/* Enable Auto Sync Access on Custom Elements */}
<div data-velt-sync-access="true"></div>
{/* Disable Auto Sync Access on Default Elements */}
<button data-velt-sync-access-disabled="true"></button>
</div>
)
}
React / Next.js
HTML
Single Editor Mode
With Single Editor Mode, only one user will be able to edit the document at any given time. All other users live on the document will automatically be read-only.
Enable Single Editor Mode
Enables single editor mode.
Disabled by default
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.enableSingleEditorMode(); //enables single editor mode
Disable Single Editor Mode
Disables single editor mode.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.disableSingleEditorMode(); // disables single editor mode
Check if current user is the Editor
isUserEditor()
is a subscription that returns:
true
: when the current user is set aseditor
false
: when the current user is set asreader
null
: when the current user’s access is not set.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.isUserEditor().subscribe((isUserEditor) => {
// your logic here...
});
Set current user as the Editor
Sets the current user as Editor. Note this will mark all the other users on the document as readonly users.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.setUserAsEditor();
Reset access for all users
Resets access for all users.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.resetUserAccess();
Auto Sync State on Text Elements
Auto syncs the content of the following Text HTML elements, such that when editor
types, the element’s content is synced across all active users currently live on the document.
- input
- textarea
- ContentEditable Divs
To enable syncing, follow these two steps:
- Enable Auto Sync State feature:
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.enableAutoSyncState();
- Set the
data-velt-sync-state
attribute totrue
on the Text HTML element you want to sync:
id
to the HTML element to make the syncing more robust.<textarea id="uniqueId" data-velt-sync-state="true"></textarea>
data-velt-sync-state
attribute to a native HTML element (e.g. input, textarea). It will not work directly on React components.Auto Sync Access on HTML Elements
By default in Single Editor Mode, we control enabling and disabling of these html elements on the entire DOM:
- input
- textarea
- select
- button
- contentEditable divs
For users in Read-Only mode, the default elements listed above will be disabled, meaning click
, mouseup
and mousedown
events will be prevented.
If there are any other elements that you want us to control beyond the default elements we listed above, such as div
, span
elements etc, then you can add data-velt-sync-access="true"
to that element.
<div data-velt-sync-access="true"></div>
data-velt-sync-access
attribute to native HTML elements (e.g. div, span). It will not work directly on React components.Exclude default HTML elements from Auto Syncing Access
In Single Editor Mode, we control enabling and disabling of certain html elements on the entire DOM.
If you want to exclude any of those html elements from this behavior, you can add data-velt-sync-access-disabled="true"
to that element.
<button data-velt-sync-access-disabled="true"></button>
data-velt-sync-access-disabled
attribute to native HTML elements (e.g. button, input). It will not work directly on React components.Restrict Single Editor Mode to Specific Parent 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 the singleEditorModeContainerIds()
method. It takes in an array of element ID strings. These IDs represent the parent elements within which Single Editor Mode will be enabled.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateElement.singleEditorModeContainerIds(["rightPanel"]);
//Get Velt Client
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
function MyComponent(){
const { client } = useVeltClient();
useEffect( () => {
//Get LiveStateSyncElement from Velt Client
const liveStateSyncElement = client.getLiveStateSyncElement();
//Enable Single Editor Mode
liveStateSyncElement.enableSingleEditorMode();
//Disable Single Editor Mode
liveStateSyncElement.disableSingleEditorMode();
//Check if Current User is Editor
liveStateSyncElement.isUserEditor().subscribe((isUserEditor) => {
// your logic here...
});
//Set Current User as Editor
liveStateSyncElement.setUserAsEditor();
//Reset Editor Access
liveStateSyncElement.resetUserAccess();
//Enable Auto Sync State
liveStateSyncElement.enableAutoSyncState();
//Restrict Auto Sync Access to Specified Parent Elements
liveStateSyncElement.singleEditorModeContainerIds(['element-1','element-2'])
},[])
return (
<div>
{/* Enable Auto Sync State across on Text Elements */}
<textarea id="uniqueId" data-velt-sync-state="true"></textarea>
{/* Enable Auto Sync Access on Custom Elements */}
<div data-velt-sync-access="true"></div>
{/* Disable Auto Sync Access on Default Elements */}
<button data-velt-sync-access-disabled="true"></button>
</div>
)
}