Improved the options to share the URL

ASP.NET Core Web API/wwwroot/scripts/workers.js

@@ -9,7 +9,7 @@ self.addEventListener('message', function (e) {
 var currentRoomName;
 
 //var serviceUrl = "http://localhost:5212/";
-var serviceUrl = "https://webapplication120230413155843.azurewebsites.net/";
+var serviceUrl = "http://localhost:5212/";
 
 var connection = new signalR.HubConnectionBuilder().withUrl(serviceUrl + 'documenteditorhub', {
  skipNegotiation: true,

ASP.NET Core/wwwroot/scripts/workers.js

@@ -9,7 +9,7 @@ self.addEventListener('message', function (e) {
 var currentRoomName;
 
 //var serviceUrl = "http://localhost:5212/";
-var serviceUrl = "https://webapplication120230413155843.azurewebsites.net/";
+var serviceUrl = "http://localhost:5212/";
 
 var connection = new signalR.HubConnectionBuilder().withUrl(serviceUrl + 'documenteditorhub', {
  skipNegotiation: true,

Angular/package.json

@@ -20,6 +20,8 @@
  "@angular/router": "^17.0.0",
  "@microsoft/signalr": "^8.0.0",
  "@syncfusion/ej2-angular-documenteditor": "*",
+ "@syncfusion/ej2-layouts": "*",
+ "@syncfusion/ej2-notifications": "*",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"

Angular/src/app/app.component.html

@@ -1,9 +1,18 @@
-<div>
+<div id="toast_type"></div>
+
+<div style="height: 93vh;">
  <div id="documenteditor_titlebar" class="e-de-ctn-title" style="height:35px;"></div>
- <ejs-documenteditorcontainer #documenteditor_default [enableToolbar]="true" (created)="onCreated()"
- (contentChange)="onContentChange($event)" height="600px" style="display: block;"></ejs-documenteditorcontainer>
+ <ejs-documenteditorcontainer #documenteditor_default [toolbarItems]="toolbarItems" [enableToolbar]="true" (created)="onCreated()"
+ (contentChange)="onContentChange($event)" [currentUser]="currentUser" height="100%" style="display: block;"></ejs-documenteditorcontainer>
 </div>
 
-
+<div id="defaultDialog" style="display: none;">
+ <div class="e-de-para-dlg-heading">
+ Share this URL with others for real-time editing
+ </div>
+ <div class="e-de-container-row">
+ <input type="text" id="share_url" class="e-input" readonly />
+ </div>
+</div>
 
 <router-outlet></router-outlet>

Angular/src/app/app.component.spec.ts

@@ -1,10 +1,16 @@
 import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
  beforeEach(async () => {
  await TestBed.configureTestingModule({
- imports: [AppComponent],
+ imports: [
+ RouterTestingModule
+ ],
+ declarations: [
+ AppComponent
+ ],
  }).compileComponents();
  });
 
@@ -14,16 +20,16 @@ describe('AppComponent', () => {
  expect(app).toBeTruthy();
  });
 
- it(`should have the 'syncfusion-angular-app' title`, () => {
+ it(`should have as title 'ej2-angular-showcase-template'`, () => {
  const fixture = TestBed.createComponent(AppComponent);
  const app = fixture.componentInstance;
- expect(app.title).toEqual('syncfusion-angular-app');
+ expect(app.title).toEqual('ej2-angular-showcase-template');
  });
 
  it('should render title', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.nativeElement as HTMLElement;
- expect(compiled.querySelector('h1')?.textContent).toContain('Hello, syncfusion-angular-app');
+ expect(compiled.querySelector('.content span')?.textContent).toContain('ej2-angular-showcase-template app is running!');
  });
 });

Angular/src/app/app.component.ts

@@ -5,16 +5,15 @@ import { RouterOutlet } from '@angular/router';
 import { DocumentEditor, CollaborativeEditingHandler } from '@syncfusion/ej2-documenteditor';
 import { TitleBar } from "./title-bar"
 import { HubConnectionBuilder, HttpTransportType, HubConnectionState, HubConnection } from '@microsoft/signalr';
-import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 
 DocumentEditor.Inject(CollaborativeEditingHandler);
 @Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocumentEditorContainerModule, CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
- styleUrl: './app.component.scss',
+ styleUrls: ['./app.component.scss'],
  providers: [ToolbarService],
 })
 export class AppComponent {
@@ -28,13 +27,17 @@ export class AppComponent {
  public titleBar?: TitleBar;
  public connectionId: string = '';
  public currentUser: string = 'Guest user';
+ public toolbarItems = ['Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields']
+ public users = ["Kathryn Fuller", "Tamer Fuller", "Martin Nancy", "Davolio Leverling", "Nancy Fuller", "Fuller Margaret", "Leverling Andrew"];
 
 
  onCreated() {
- this.container.documentEditor.documentName = 'Getting Started';
+ const random = Math.floor(Math.random() * this.users.length);
+ this.currentUser = this.users[random];
+ this.container.documentEditor.documentName = 'Gaint Panda';
  //Enable collaborative editing in Document Editor.
  this.container.documentEditor.enableCollaborativeEditing = true;
-
+ this.collaborativeEditingHandler = this.container.documentEditor.collaborativeEditingHandlerModule;
  //Title bar implementation
  this.titleBar = new TitleBar(document.getElementById('documenteditor_titlebar') as HTMLElement, this.container.documentEditor, true);
  this.titleBar.updateDocumentTitle();
@@ -43,9 +46,6 @@ export class AppComponent {
  }
 
  onContentChange = (args: ContainerContentChangeEventArgs) => {
- if(isNullOrUndefined(this.collaborativeEditingHandler)) {
- this.collaborativeEditingHandler = this.container.documentEditor.collaborativeEditingHandlerModule;
- }
  if (this.collaborativeEditingHandler) {
  //Send the editing action to server
  this.collaborativeEditingHandler.sendActionToServer(args.operations as Operation[])
@@ -78,10 +78,10 @@ export class AppComponent {
  if (this.titleBar) {
  if (action == 'action' || action == 'addUser') {
  //Add the user to title bar when user joins the room
- this.titleBar.addUser(data);
+ this.titleBar.updateUserInfo(data, 'addUser');
  } else if (action == 'removeUser') {
  //Remove the user from title bar when user leaves the room
- this.titleBar.removeUser(data);
+ this.titleBar.updateUserInfo(data, 'removeUser');
  }
  }
  }
@@ -91,7 +91,7 @@ export class AppComponent {
  }
 
  openDocument(responseText: string, roomName: string): void {
- showSpinner(document.getElementById('container') as HTMLElement);
+
 
  let data = JSON.parse(responseText);
  if (this.container) {
@@ -110,16 +110,18 @@ export class AppComponent {
  }
  });
  }
- hideSpinner(document.getElementById('container') as HTMLElement);
+ hideSpinner(document.body);
  }
 
  loadDocumentFromServer() {
+ createSpinner({ target: document.body });
+ showSpinner(document.body);
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
- let roomId = urlParams.get('id');
+ let roomId = urlParams.get('roomId');
  if (roomId == null) {
  roomId = Math.random().toString(32).slice(2)
- window.history.replaceState({}, "", `?id=` + roomId);
+ window.history.replaceState({}, "", `?roomId=` + roomId);
  }
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('Post', this.serviceUrl + 'api/CollaborativeEditing/ImportFile', true);
@@ -130,7 +132,7 @@ export class AppComponent {
  this.openDocument(httpRequest.responseText, roomId as string);
  }
  else {
- hideSpinner(document.getElementById('container') as HTMLElement);
+ hideSpinner(document.body);
  alert('Fail to load the document');
  }
  }