Single Editor Mode

Wireframes for the Single Editor Mode Panel.

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

VeltSingleEditorModePanelWireframe

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe>
        <VeltSingleEditorModePanelWireframe.ViewerText />
        <VeltSingleEditorModePanelWireframe.EditorText />
        <VeltSingleEditorModePanelWireframe.Countdown />
        
        {/* Editor sees this button when they try to edit in a different tab */}
        <VeltSingleEditorModePanelWireframe.EditHere />
        
        {/* Editor sees these buttons when Viewer requests access */}
        <VeltSingleEditorModePanelWireframe.AcceptRequest />
        <VeltSingleEditorModePanelWireframe.RejectRequest />
        
        {/* Viewer sees this button by default */}
        <VeltSingleEditorModePanelWireframe.RequestAccess />

        {/* Viewer sees this button when they have already requested access */}
        <VeltSingleEditorModePanelWireframe.CancelRequest />
    </VeltSingleEditorModePanelWireframe>
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-wireframe>
        <velt-single-editor-mode-panel-viewer-text-wireframe></velt-single-editor-mode-panel-viewer-text-wireframe>
        <velt-single-editor-mode-panel-editor-text-wireframe></velt-single-editor-mode-panel-editor-text-wireframe>
        <velt-single-editor-mode-panel-countdown-wireframe></velt-single-editor-mode-panel-countdown-wireframe>

        <!-- Editor sees this button when they try to edit in a different tab -->
        <velt-single-editor-mode-panel-edit-here-wireframe></velt-single-editor-mode-panel-edit-here-wireframe>

        <!-- Editor sees these buttons when Viewer requests access -->
        <velt-single-editor-mode-panel-accept-request-wireframe></velt-single-editor-mode-panel-accept-request-wireframe>
        <velt-single-editor-mode-panel-reject-request-wireframe></velt-single-editor-mode-panel-reject-request-wireframe>

        <!-- Viewer sees these buttons by default -->
        <velt-single-editor-mode-panel-request-access-wireframe></velt-single-editor-mode-panel-request-access-wireframe>

        <!-- Viewer sees this button when they have already requested access -->
        <velt-single-editor-mode-panel-cancel-request-wireframe></velt-single-editor-mode-panel-cancel-request-wireframe>
    </velt-single-editor-mode-panel-wireframe>
</velt-wireframe>

ViewerText

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.ViewerText />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-viewer-text-wireframe></velt-single-editor-mode-panel-viewer-text-wireframe>
</velt-wireframe>

EditorText

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.EditorText />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-editor-text-wireframe></velt-single-editor-mode-panel-editor-text-wireframe>
</velt-wireframe>

Countdown

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.Countdown />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-countdown-wireframe></velt-single-editor-mode-panel-countdown-wireframe>
</velt-wireframe>

EditHere

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.EditHere />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-edit-here-wireframe></velt-single-editor-mode-panel-edit-here-wireframe>
</velt-wireframe>

AcceptRequest

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.AcceptRequest />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-accept-request-wireframe></velt-single-editor-mode-panel-accept-request-wireframe>
</velt-wireframe>

RejectRequest

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.RejectRequest />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-reject-request-wireframe></velt-single-editor-mode-panel-reject-request-wireframe>
</velt-wireframe>

RequestAccess

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.RequestAccess />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-request-access-wireframe></velt-single-editor-mode-panel-request-access-wireframe>
</velt-wireframe>

CancelRequest

React / Next.js

<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltWireframe>

Other Frameworks

<velt-wireframe style="display:none;">
    <velt-single-editor-mode-panel-cancel-request-wireframe></velt-single-editor-mode-panel-cancel-request-wireframe>
</velt-wireframe>

Styling

Disable ShadowDOM

• By default, Shadow DOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
• Disable the shadow dom to apply your custom CSS to the component.

Default: true

React / Next.js

<VeltSingleEditorModePanel shadowDom={false} />

Other Frameworks

<velt-single-editor-mode-panel shadow-dom="false"></velt-single-editor-mode-panel>

Dark Mode

By default, all components are in Light Mode. Use this prop to enable Dark Mode.

Default: false

React / Next.js

<VeltSingleEditorModePanel darkMode={true} />

Other Frameworks

  <velt-single-editor-mode-panel dark-mode="true"></velt-single-editor-mode-panel>

Variants

You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here here.

React / Next.js

<VeltSingleEditorModePanel variant="variant-name" />

Other Frameworks

  <velt-single-editor-mode-panel variant="variant-name"></velt-single-editor-mode-panel>