Collaboration

Add commenting, mentions, and role-based permissions so teams can review and discuss designs within the editor.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

function CollaborativeEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        collaboration: {
          enabled: true,
          role: 'editor', // 'editor' | 'reviewer'
          user: {
            id: 'user-42',
            name: 'Jane Smith',
            avatar: 'https://cdn.example.com/avatars/jane.jpg',
          },
          mentions: [
            { id: 'user-1', name: 'Alice Johnson' },
            { id: 'user-2', name: 'Bob Chen' },
            { id: 'user-3', name: 'Carlos Rivera' },
          ],
        },
      }}
      onComment={async (comment) => {
        await fetch('/api/comments', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(comment),
        });
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :collaboration="collabConfig"
    @comment="onComment"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

const collabConfig = {
  enabled: true,
  role: 'editor' as const,
  user: { id: 'user-42', name: 'Jane Smith' },
  mentions: [
    { id: 'user-1', name: 'Alice Johnson' },
    { id: 'user-2', name: 'Bob Chen' },
  ],
};

async function onComment(comment: any) {
  await fetch('/api/comments', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(comment),
  });
}
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';
import type { PexelizeSDK } from '@pexelize/editor-types';

@Component({
  selector: 'app-collab-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      [collaboration]="collabConfig"
      (comment)="onComment($event)"
    ></pexelize-editor>
  `,
})
export class CollabEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

  collabConfig = {
    enabled: true,
    role: 'reviewer' as const,
    user: { id: 'user-42', name: 'Jane Smith' },
    mentions: [{ id: 'user-1', name: 'Alice Johnson' }],
  };

  async onComment(comment: any) {
    await fetch('/api/comments', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(comment),
    });
  }
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    collaboration: {
      enabled: true,
      role: 'editor',
      user: { id: 'user-42', name: 'Jane Smith' },
      mentions: [
        { id: 'user-1', name: 'Alice Johnson' },
        { id: 'user-2', name: 'Bob Chen' },
      ],
    },
  },
  callbacks: {
    onComment: async (comment) => {
      await fetch('/api/comments', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(comment),
      });
    },
  },
});

Roles

Role	Can edit content	Can comment	Can resolve comments
editor	Yes	Yes	Yes
reviewer	No	Yes	No

Reviewer mode

Set role: 'reviewer' for stakeholders who need to give feedback but should not modify the design. They can add comments and mentions but cannot drag, edit, or delete content.

Mentions

Users type @ in a comment to trigger the mentions dropdown. Provide the mentions array with team members:

mentions: [
  { id: 'user-1', name: 'Alice Johnson', avatar: 'https://...' },
  { id: 'user-2', name: 'Bob Chen', avatar: 'https://...' },
]

Comment data structure

The onComment callback receives an object with { id, userId, userName, text, rowId, timestamp, mentions: string[] }. Persist this to your backend and load existing comments via the design JSON.

Method reference

Method	Returns	Description
setCollaboration(config)	void	Update collaboration settings at runtime

Callback	Parameters	Description
onComment	(comment: CommentData)	Fired when a user posts a comment

Next steps

• Validation — audit designs before approval
• Localization — translate the commenting UI
• Multiple Editors — run separate review and edit instances