Fix icon positioning

Editor Updates

Author: MrEssex

docs/pages/components/editor.md

@@ -6,7 +6,27 @@ layout: component
 ---
 
 ```html:preview
+
 <zn-editor></zn-editor>
+
+
+<script>
+  let cannedResponses = [
+    {
+      title:   'Hello',
+      content: 'Hello, how can I help you?'
+      command: 'hello'
+    },
+    {
+      title:   'Goodbye',
+      content: 'Goodbye, have a nice day!'
+      command: 'goodbye'
+    }
+  ];
+
+  let editor = document.querySelector('zn-editor');
+  editor.setAttribute('canned-responses', JSON.stringify(cannedResponses));
+</script>
 ```
 
 ## Examples

docs/pages/components/item.md

@@ -46,7 +46,10 @@ layout: component
 </zn-item>
 
 <zn-cols layout="1, 1">
-  <zn-item inline icon="person">This is the content</zn-item>
+  <zn-item inline icon="person">
+    <div>First Name</div>
+    <div>Second Name</div>
+  </zn-item>
   <zn-item inline icon="person">This is the content</zn-item>
 </zn-cols>
 ```

src/components/editor/editor.component.ts

@@ -1,14 +1,14 @@
-import { property, query } from 'lit/decorators.js';
-import { type CSSResultGroup, html, PropertyValues, unsafeCSS } from 'lit';
-import ZincElement, { ZincFormControl } from '../../internal/zinc-element';
+import {property, query} from 'lit/decorators.js';
+import {type CSSResultGroup, html, PropertyValues, unsafeCSS} from 'lit';
+import ZincElement, {ZincFormControl} from '../../internal/zinc-element';
 import Quill from "quill";
-import { FormControlController } from '../../internal/form';
-import DropdownModule, { dropdownOpen } from "./modules/dropdown-module";
+import {FormControlController} from '../../internal/form';
+import DropdownModule, {dropdownOpen} from "./modules/dropdown-module";
 import AttachmentModule from "./modules/attachment-module";
 import TimeTrackingModule from "./modules/time-tracking-module";
 import DragAndDropModule from "./modules/drag-drop-module";
 import ImageResizeModule from "./modules/image-resize-module/image-resize-module";
-import { normalizeNative } from "./normalize-native";
+import {normalizeNative} from "./normalize-native";
 
 import styles from './editor.scss';
 
@@ -43,15 +43,15 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property() name: string;
   @property() value: string;
 
-  @property({ attribute: 'interaction-type', type: String })
+  @property({attribute: 'interaction-type', type: String})
   interactionType: 'ticket' | 'chat' = 'chat';
 
-  @property({ attribute: 'canned-responses', type: Array })
-  cannedResponses: Array<any>;
+  @property({attribute: 'canned-responses', type: Array})
+  cannedResponses: any[];
 
-  @property({ attribute: 'canned-responses-url' }) cannedResponsesUri: string;
+  @property({attribute: 'canned-responses-url'}) cannedResponsesUri: string;
 
-  @property({ attribute: 'attachment-url', type: String })
+  @property({attribute: 'attachment-url', type: String})
   uploadAttachmentUrl: string;
 
   private quillElement: Quill;
@@ -101,7 +101,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     const container = [
       ['bold', 'italic', 'underline', 'strike'],
       ['undo', 'redo'],
-      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+      [{'list': 'ordered'}, {'list': 'bullet'}],
     ];
     container.push(this.interactionType === 'ticket' ? ['link', 'image', 'image-attachment'] : ['link', 'image', 'video']);
     container.push(['remove-formatting']);
@@ -161,7 +161,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
               xhr.onload = () => {
                 if (xhr.status === 200) {
                   const response = JSON.parse(xhr.responseText);
-                  resolve({ path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename });
+                  resolve({path: response.uploadPath, url: response.uploadUrl, filename: response.originalFilename});
                 }
               };
               xhr.send(fd);
@@ -195,10 +195,10 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     this._setupTitleAttributes(quill);
 
-    const html = quill.clipboard.convert({ html: this.value });
+    const html = quill.clipboard.convert({html: this.value});
     quill.setContents(html, Quill.sources.SILENT);
 
-    this.emit('zn-element-added', { detail: { element: this.editor } });
+    this.emit('zn-element-added', {detail: {element: this.editor}});
 
     super.firstUpdated(_changedProperties);
   }
@@ -234,7 +234,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
           const clipboard = context.event.clipboardData;
           const text = clipboard.getData('text/plain');
           const html = clipboard.getData('text/html');
-          const delta = this.quillElement.clipboard.convert({ html: html, text: text });
+          const delta = this.quillElement.clipboard.convert({html: html, text: text});
           this.quillElement.setContents(delta, 'silent');
           this.quillElement.setSelection(delta.length(), Quill.sources.SILENT);
         }
@@ -254,7 +254,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
         handler: () => {
           const form = this.closest('form');
           if (form && !dropdownOpen && this.value && this.value.trim().length > 0 && !empty(this.value)) {
-            this.emit('zn-submit', { detail: { value: this.value, element: this } });
+            this.emit('zn-submit', {detail: {value: this.value, element: this}});
             form.requestSubmit();
             this.quillElement.setText('');
           }

src/components/editor/editor.scss

@@ -60,6 +60,7 @@
     height: 100%;
     max-height: 100%;
     overflow-y: auto;
+    flex-grow: 1;
     color: rgb(var(--zn-text-body));
     background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
     font-size: 15px;
@@ -77,6 +78,7 @@
   }
 
   #editor {
+    display: contents;
     flex: 1;
     height: 0;
     padding: 0;

src/components/editor/modules/drag-drop-module.ts

@@ -1,6 +1,6 @@
 import Quill from 'quill';
 
-type DragAndDropModuleOptions = {
+interface DragAndDropModuleOptions {
   onDrop: (file: File, options: object) => void;
   draggableContentTypePattern: string;
   draggables: [];

src/components/editor/modules/dropdown-module.ts

@@ -1,12 +1,12 @@
 import Quill from 'quill';
 
-type DropdownModuleOptions = {
+interface DropdownModuleOptions {
   cannedResponses: DropdownModuleCannedResponse[];
   cannedResponsesUri: string;
 }
 
-type DropdownModuleCannedResponse = {
-  title: string
+interface DropdownModuleCannedResponse {
+  title: string;
   content: string;
   command: string;
   labels?: string[];
@@ -116,7 +116,7 @@ class DropdownModule {
       const char = index === 0 ? text.charAt(0) : text.charAt(index - 1); // Last input char
 
       // if there's no character before the forward slash, we will open the dropdown
-      if (char === '/' && !dropdownOpen &&
+      if (char === '#' && !dropdownOpen &&
         (text.charAt(index - 2) === ' '
           || text.charAt(index - 2) === '\n'
           || text.charAt(index - 2) === ''

src/components/item/item.component.ts

@@ -56,6 +56,8 @@ export default class ZnItem extends ZincElement {
   }
 
   render() {
+    const hasIcon = this.icon && this.icon.length > 0;
+
     return html`
       <div class=${classMap({
         'description-item': true,
@@ -65,6 +67,7 @@ export default class ZnItem extends ZincElement {
         'description-item--small': this.size === 'small',
         'description-item--medium': this.size === 'medium',
         'description-item--large': this.size === 'large',
+        'description-item--has-icon': hasIcon,
       })}>
 
         ${this.icon ? html`

src/components/item/item.scss

@@ -26,14 +26,18 @@
     gap: var(--zn-spacing-small);
   }
 
-  &__icon:not(:empty) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: var(--zn-spacing-small);
-    color: rgb(var(--zn-text-heading));
-  }
+  &--has-icon {
+    align-items: flex-start !important;
 
+    .description-item__icon {
+      position: relative;
+      line-height: 33px;
+      display: flex;
+      justify-content: center;
+      margin-right: var(--zn-spacing-small);
+      color: rgb(var(--zn-text-heading));
+    }
+  }
 
   &__header {
     display: flex;