Merge pull request #2319 from intersective/golive/2.4.y.z

Golive/2.4.2.2

Author: shawnm0705

package-lock.json

@@ -61,11 +61,12 @@
     "moment": "^2.29.4",
     "ng-circle-progress": "^1.6.0",
     "ng-intercom": "^8.0.2",
-    "ngx-quill": "^16.0.0",
+    "ngx-quill": "^16.2.1",
     "plyr": "^3.6.12",
     "pusher-js": "^4.4.0",
     "quill": "^1.3.7",
     "quill-delta": "^5.0.0",
+    "quill-magic-url": "^4.2.0",
     "rxjs": "~6.6.0",
     "rxjs-compat": "^6.6.7",
     "ts-md5": "^1.2.11",

package.json

@@ -192,6 +192,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
   // redirect to the last visited url/assessment if available
   redirectToLastVisitedUrl(): Promise<boolean> {
+    if (this.noneCachedUrl.some((url) => window.location?.href?.includes(url))) {
+      return this.navigate(window.location.href);
+    }
+
     const lastVisitedUrl = this.storage.lastVisited("url") as string;
     if (lastVisitedUrl) {
       const lastVisitedAssessmentUrl = this.storage.lastVisited("assessmentUrl");

projects/v3/src/app/app.component.ts

@@ -61,7 +61,11 @@
 
           <ng-container *ngIf="message.message || !message.fileObject;">
             <!-- Quill read only view/ use to render html content -->
-            <quill-view id="message-content" [content]="message.message" tabindex="0"></quill-view>
+            <quill-view id="message-content"
+              [content]="message.message"
+              [strict]="true"
+              tabindex="0"
+            ></quill-view>
           </ng-container>
 
           <ng-container *ngIf="message.fileObject">
@@ -152,34 +156,17 @@
   <ion-grid class="white-bg">
     <ion-row nowrap class="ion-no-padding">
       <ion-col [size]="12" class="ion-align-self-center ion-no-padding">
-        <!-- quill editor -->
         <quill-editor aria-label="chat message input"
-        customToolbarPosition="top"
-        [classes]="isMobile ? 'editor-class' : 'editor-class desktop'"
-        [required]="true"
-        class="message-text-editor"
-        [placeholder]="'Enter your message'"
-        [(ngModel)]="typingMessage"
-        (ngModelChange)="typing()"
-        (onEditorCreated)="utils.formatQuillClipboard($event)"
-        i18n-placeholder>
-          <div quill-editor-toolbar>
-            <span class="ql-formats">
-              <button class="ql-bold" [title]="'Bold'"></button>
-              <button class="ql-italic" [title]="'Italic'"></button>
-              <button class="ql-underline" [title]="'Underline'"></button>
-              <button class="ql-strike" [title]="'Strike'"></button>
-            </span>
-            <span class="ql-formats">
-              <button class="ql-list" value="ordered"></button>
-              <button class="ql-list" value="bullet"></button>
-            </span>
-            <span class="ql-formats">
-              <button class="ql-link"></button>
-            </span>
-          </div>
-        </quill-editor>
-      <!-- quill editor -->
+          customToolbarPosition="top"
+          [modules]="editorModules"
+          [classes]="isMobile ? 'editor-class' : 'editor-class desktop'"
+          [required]="true"
+          class="message-text-editor"
+          placeholder="Enter your message"
+          [(ngModel)]="typingMessage"
+          (ngModelChange)="typing()"
+          i18n-placeholder
+        ></quill-editor>
       </ion-col>
     </ion-row>
     <!-- Attachment Preview section -->

projects/v3/src/app/pages/chat/chat-room/chat-room.component.html

@@ -1,3 +1,4 @@
+
 $message-body-size: 60%;
 
 .not-started-empty-status {
@@ -334,8 +335,8 @@ $message-body-size: 60%;
         min-height: 48px;
 
         .message-text-editor {
-          .ql-toolbar, .ql-container.ql-snow {
-            border: none;
+          .ql-toolbar.ql-snow, .ql-container.ql-snow {
+            border: none !important;
           }
         }
 
@@ -519,3 +520,15 @@ ion-button.ion-focused {
 ion-fab.scroll-to-bottom {
   opacity: 0.7;
 }
+
+
+.ql-editor {
+  a {
+    text-decoration: underline;
+    word-break: break-all;
+  }
+
+   a:hover {
+    color: var(--ion-color-primary);
+  }
+}