Add spacing to toolbar

src/app/components/shared/view-comment-data/view-comment-data.component.scss

@@ -24,15 +24,19 @@
     &[data-mode=formula]::before {
       --quill-tooltip-label: var(--quill-tooltip-label-formula);
     }
+
     &[data-mode=video]::before {
       --quill-tooltip-label: var(--quill-tooltip-label-video);
     }
+
     &[data-mode=image]::before {
       --quill-tooltip-label: var(--quill-tooltip-label-image);
     }
+
     &[data-mode=link]::before {
       --quill-tooltip-label: var(--quill-tooltip-label-link);
     }
+
     &::before {
       content: var(--quill-tooltip-label) !important;
     }
@@ -87,6 +91,14 @@
   &.ql-toolbar, .ql-toolbar {
     border-color: var(--on-surface);
 
+    .ql-formats {
+      margin-right: 0;
+
+      > * {
+        margin: 12px;
+      }
+    }
+
     .ql-picker.ql-expanded {
       .ql-picker-label {
         border-color: var(--on-surface);

src/app/components/shared/view-comment-data/view-comment-data.component.ts

@@ -11,23 +11,12 @@ import { TranslateService } from '@ngx-translate/core';
 Quill.register('modules/imageResize', ImageResize);
 
 const participantToolbar = [
-  ['bold', 'strike'],
-  ['blockquote', 'code-block'],
-  [{ list: 'ordered' }, { list: 'bullet' }],
-  ['link', 'formula'],
-  ['emoji']
+  ['bold', 'blockquote', 'code-block', { list: 'ordered' }, { list: 'bullet' }, 'link', 'formula', 'emoji']
 ];
 
 const moderatorToolbar = [
-  ['bold', 'strike'],
-  ['blockquote', 'code-block'],
-  [{ header: 1 }, { header: 2 }],
-  [{ list: 'ordered' }, { list: 'bullet' }],
-  [{ indent: '-1' }, { indent: '+1' }],
-  [{ color: [] }],
-  [{ align: [] }],
-  ['link', 'image', 'video', 'formula'],
-  ['emoji']
+  ['bold', 'strike', 'blockquote', 'code-block', { header: 1 }, { header: 2 }, { list: 'ordered' }, { list: 'bullet' },
+    { indent: '-1' }, { indent: '+1' }, { color: [] }, { align: [] }, 'link', 'image', 'video', 'formula', 'emoji'],
 ];
 
 @Component({
@@ -51,7 +40,6 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
     onDocumentClick: (e) => void;
   };
   currentText = '';
-
   quillModules: QuillModules = {
     toolbar: {
       container: participantToolbar,
@@ -61,11 +49,6 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
         link: () => this.handleLink(),
         formula: () => this.handle('formula')
       }
-    },
-    'emoji-toolbar': true,
-    'emoji-shortname': true,
-    imageResize: {
-      modules: ['Resize', 'DisplaySize']
     }
   };
 
@@ -108,6 +91,13 @@ export class ViewCommentDataComponent implements OnInit, AfterViewInit {
     if (this.user && this.user.role > 0) {
       this.quillModules.toolbar['container'] = moderatorToolbar;
     }
+    if (this.isEditor) {
+      this.quillModules['emoji-toolbar'] = true;
+      this.quillModules['emoji-shortname'] = true;
+      this.quillModules.imageResize = {
+        modules: ['Resize', 'DisplaySize']
+      };
+    }
     this.translateService.use(localStorage.getItem('currentLang'));
     if (this.isEditor) {
       this.updateCSSVariables();

src/app/components/shared/write-comment/write-comment.component.html

@@ -52,7 +52,7 @@
 <ars-row ars-flex-box *ngIf="enabled" class="spellcheck">
   <ars-col>
     <button
-      [disabled]="!commentData || commentData.currentText.length < 4"
+      [disabled]="!commentData || commentData.currentText.length < 5"
       mat-flat-button
       class="spell-button"
       (click)="checkGrammar()">

src/app/components/shared/write-comment/write-comment.marks.ts

@@ -266,7 +266,6 @@ class Mark {
         }
         currentIndex += text.length;
       } else {
-        bounds.push([this.startIndex + currentIndex, 1]);
         ++currentIndex;
       }
     }