Replace colon emojis (#1601)

package.json

@@ -72,6 +72,7 @@
     "class-validator": "0.14.0",
     "commander": "7.2.0",
     "dayjs": "1.11.10",
+    "emoji-js": "^3.7.0",
     "fastify": "4.23.2",
     "fs-extra": "10.1.0",
     "node-cache": "5.1.2",

ui/angular.json

@@ -61,7 +61,8 @@
               "xterm",
               "xterm-addon-fit",
               "xterm-addon-web-links",
-              "mobile-detect"
+              "mobile-detect",
+              "emoji-js"
             ],
             "aot": false,
             "stylePreprocessorOptions": {

ui/src/app/core/core.module.ts

@@ -7,7 +7,7 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
 import { ConvertTempPipe } from './pipes/convert-temp.pipe';
 import { ReplacePipe } from './pipes/replace.pipe';
 import { ExternalLinkIconPipe } from './pipes/external-link-icon.pipe';
-import { HrefTargetBlankDirective } from './directives/href-target-blank.directive';
+import { PluginsMarkdownDirective } from './directives/plugins.markdown.directive';
 import { LongClickDirective } from './directives/longclick.directive';
 import { BackupRestoreComponent } from './backup-restore/backup-restore.component';
 import { ScheduledBackupsComponent } from './backup-restore/scheduled-backups/scheduled-backups.component';
@@ -24,7 +24,7 @@ import { JsonSchemaFormPatchDirective } from './directives/json-schema-form-patc
         ConvertTempPipe,
         ReplacePipe,
         ExternalLinkIconPipe,
-        HrefTargetBlankDirective,
+        PluginsMarkdownDirective,
         LongClickDirective,
         RtlDirective,
         JsonSchemaFormPatchDirective,
@@ -46,7 +46,7 @@ import { JsonSchemaFormPatchDirective } from './directives/json-schema-form-patc
         ConvertTempPipe,
         ReplacePipe,
         ExternalLinkIconPipe,
-        HrefTargetBlankDirective,
+        PluginsMarkdownDirective,
         LongClickDirective,
         RtlDirective,
         JsonSchemaFormPatchDirective,

ui/src/app/core/directives/href-target-blank.directive.ts → ui/src/app/core/directives/plugins.markdown.directive.ts

@@ -1,9 +1,10 @@
 import { Directive, ElementRef, OnInit } from '@angular/core';
+import { EmojiConvertor } from 'emoji-js';
 
 @Directive({
-  selector: '[hrefTargetBlank]',
+  selector: 'markdown',
 })
-export class HrefTargetBlankDirective implements OnInit {
+export class PluginsMarkdownDirective implements OnInit {
 
   constructor(
     private el: ElementRef,
@@ -16,6 +17,10 @@ export class HrefTargetBlankDirective implements OnInit {
       a.target = '_blank';
       a.rel = 'noopener noreferrer';
     });
+
+    // replace colon emojis
+    const emoji = new EmojiConvertor();
+    this.el.nativeElement.innerHTML = emoji.replace_colons(this.el.nativeElement.innerHTML);
   }
 
 }

ui/src/app/core/manage-plugins/custom-plugins/homebridge-google-smarthome/homebridge-google-smarthome.component.html

@@ -47,7 +47,7 @@ <h4 class="mt-2">
     </div>
 
     <div class="mt-3" *ngIf="gshConfig && gshConfig.token">
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay">
+      <markdown class="plugin-md" [data]="schema.footerDisplay" *ngIf="schema.footerDisplay">
       </markdown>
     </div>
 

ui/src/app/core/manage-plugins/manage-plugins-modal/manage-plugins-modal.component.html

@@ -17,7 +17,7 @@ <h3 class="text-center primary-text" [translate]="'platform.version.title_servic
       </div>
       <hr>
     </div>
-    <markdown hrefTargetBlank class="plugin-md" [data]="changeLog"></markdown>
+    <markdown class="plugin-md" [data]="changeLog"></markdown>
   </div>
   <div *ngIf="!onlineUpdateOk" class="modal-body">
     <h4 class="primary-text text-center" [translate]="'plugins.manage.label_manual_update_required'">
@@ -41,7 +41,7 @@ <h4 class="primary-text text-center" [translate]="'plugins.manage.label_manual_u
   <div *ngIf="showReleaseNotes && !actionComplete" class="modal-body plugin-modal-body">
     <h3>Release Notes</h3>
     <h5>{{ release.name }}</h5>
-    <markdown hrefTargetBlank class="plugin-md" [data]="release.changelog"></markdown>
+    <markdown class="plugin-md" [data]="release.changelog"></markdown>
   </div>
   <div class="modal-footer" *ngIf="!onlineUpdateOk || actionComplete || showReleaseNotes || actionFailed">
     <button type="button" class="btn btn-elegant" data-dismiss="modal" (click)="activeModal.dismiss('Cross click')"

ui/src/app/core/manage-plugins/settings-plugins-modal/settings-plugins-modal.component.html

@@ -11,7 +11,7 @@ <h5 class="modal-title">
   </div>
   <div class="modal-body">
     <div>
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.headerDisplay | interpolateMd"
+      <markdown class="plugin-md" [data]="schema.headerDisplay | interpolateMd"
         *ngIf="schema.headerDisplay"></markdown>
     </div>
 
@@ -50,7 +50,7 @@ <h5 class="m-0">{{ block.name }}</h5>
     </div>
 
     <div class="mt-3">
-      <markdown hrefTargetBlank class="plugin-md" [data]="schema.footerDisplay | interpolateMd"
+      <markdown class="plugin-md" [data]="schema.footerDisplay | interpolateMd"
         *ngIf="schema.footerDisplay"></markdown>
     </div>
   </div>