//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>
    )
}
These Features are currently in Beta and may be subject to change.

  • 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.

1

Enable Single Editor Mode

Enables single editor mode.

Disabled by default

const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.enableSingleEditorMode(); //enables single editor mode
2

Disable Single Editor Mode

Disables single editor mode.

const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.disableSingleEditorMode(); // disables single editor mode
3

Check if current user is the Editor

isUserEditor() is a subscription that returns:

  • true: when the current user is set as editor
  • false: when the current user is set as reader
  • null: when the current user’s access is not set.
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.isUserEditor().subscribe((isUserEditor) => {
		// your logic here...
});
4

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();
5

Reset access for all users

Resets access for all users.

const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.resetUserAccess();
6

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:

  1. Enable Auto Sync State feature:
const liveStateSyncElement = client.getLiveStateSyncElement();
liveStateSyncElement.enableAutoSyncState();
  1. Set the data-velt-sync-state attribute to true on the Text HTML element you want to sync:
You can set an id to the HTML element to make the syncing more robust.
<textarea id="uniqueId" data-velt-sync-state="true"></textarea>
You must add the data-velt-sync-state attribute to a native HTML element (e.g. input, textarea). It will not work directly on React components.
7

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>
You must add the data-velt-sync-access attribute to native HTML elements (e.g. div, span). It will not work directly on React components.
8

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>
You must add the data-velt-sync-access-disabled attribute to native HTML elements (e.g. button, input). It will not work directly on React components.
9

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"]);

Was this page helpful?

OverviewOverview