Collaboration

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

React

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

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

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_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>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    :collaboration="collabConfig"
    @comment="onComment"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

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

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 { DragbleEditorComponent } from "dragble-angular-editor";
import type { DragbleSDK } from "dragble-types";

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

  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

dragble.init({
  containerId: "editor-container",
  editorKey: "db_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

:::tip 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://..." },
];

:::info 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