From a885a3f14571db09528a6992ef80c68ab6d6738e Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Tue, 28 Nov 2023 21:19:05 +0100
Subject: [PATCH] Loading and emoji preview

---
 resources/js/components/forms/editor.vue      |  5 +++-
 .../js/components/forms/emoji-picker.vue      | 27 ++++++++++++++++---
 resources/js/components/forms/markdown.vue    | 11 +++++++-
 .../sass/components/forms/_emoji-picker.scss  |  5 ++++
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/forms/editor.vue b/resources/js/components/forms/editor.vue
index 0cf3494a4d..b15f60ab4d 100644
--- a/resources/js/components/forms/editor.vue
+++ b/resources/js/components/forms/editor.vue
@@ -7,7 +7,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import {Emit, Prop, Ref, Watch} from "vue-property-decorator";
-import {CodeBlockLanguages, Editor4Play, EditorState} from "@riddled/4play";
+import {CodeBlockLanguages, Editor4Play, EditorState, EmojiUrl} from "@riddled/4play";
 
 @Component
 export default class VueEditor extends Vue {
@@ -18,6 +18,8 @@ export default class VueEditor extends Vue {
   readonly placeholder!: string;
   @Prop()
   readonly autocompleteSource!: Function
+  @Prop()
+  readonly emojiUrl!: EmojiUrl
 
   @Ref('view')
   readonly view!: HTMLElement;
@@ -33,6 +35,7 @@ export default class VueEditor extends Vue {
       username => this.autocompleteSource(username),
       'Zwykły tekst',
       this.codeBlockLanguages(),
+      this.emojiUrl,
     );
   }
 
diff --git a/resources/js/components/forms/emoji-picker.vue b/resources/js/components/forms/emoji-picker.vue
index 37a6b914da..af1ec35b91 100644
--- a/resources/js/components/forms/emoji-picker.vue
+++ b/resources/js/components/forms/emoji-picker.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="emoji-picker" v-on-clickaway="blur">
     <div class="card card-body">
-      <div style="display:flex; flex-direction:column;">
+      <div style="display:flex; flex-direction:column;" v-if="complete">
         <div class="emoji-grid">
           <div class="emoji-scroll" @mouseleave="mouseLeave">
             <div class="category" v-for="category in emojis.categories">
@@ -44,6 +44,9 @@
           </button>
         </div>
       </div>
+      <div class="loading" v-else>
+        Ładowanie...
+      </div>
     </div>
   </div>
 </template>
@@ -51,6 +54,14 @@
 <script>
 import {mixin as clickAway} from 'vue-clickaway';
 
+function onIdle(callback) {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(callback);
+  } else {
+    setTimeout(callback, 500);
+  }
+}
+
 export default {
   mixins: [clickAway],
   props: {
@@ -58,10 +69,16 @@ export default {
   },
   data() {
     return {
+      complete: false,
       searchPhrase: '',
       emoji: null,
     };
   },
+  mounted() {
+    onIdle(() => {
+      this.complete = true;
+    });
+  },
   methods: {
     select(emoji) {
       this.$emit('input', emoji);
@@ -107,8 +124,12 @@ export default {
       this.emoji = null;
     },
     isDesktop() {
-      const style = window.getComputedStyle(this.$refs["close-button"]);
-      return style.display === 'none';
+      const closeButton = this.$refs["close-button"];
+      if (closeButton) {
+        const style = window.getComputedStyle(closeButton);
+        return style.display === 'none';
+      }
+      return false;
     }
   },
   computed: {
diff --git a/resources/js/components/forms/markdown.vue b/resources/js/components/forms/markdown.vue
index 30f00a289c..62d6f9db8f 100644
--- a/resources/js/components/forms/markdown.vue
+++ b/resources/js/components/forms/markdown.vue
@@ -26,6 +26,7 @@
             placeholder="Kliknij, aby dodać treść..."
             :autocompleteSource="autocomplete"
             v-paste:success="addAsset"
+            :emojiUrl="emojiUrl"
             @submit="save"
             @cancel="cancel"
             @state="updateState"/>
@@ -35,7 +36,7 @@
 
       <div v-show="isPreview" v-html="previewHtml" class="preview post-content"/>
 
-      <div v-if="emojiPickerOpen" class="emoji-picker-container">
+      <div v-show="emojiPickerOpen" class="emoji-picker-container">
         <div class="triangle"/>
         <vue-emoji-picker
           ref="emoji-picker"
@@ -467,6 +468,14 @@ export default class VueMarkdown extends Vue {
     return false;
   }
 
+  emojiUrl(emojiName: string) {
+    const emoticon = this.emojis?.emoticons[emojiName];
+    if (emoticon) {
+      return 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/' + emoticon.unified + '.svg'
+    }
+    return '';
+  }
+
   focus() {
     this.editor.focus();
   }
diff --git a/resources/sass/components/forms/_emoji-picker.scss b/resources/sass/components/forms/_emoji-picker.scss
index 8615b579d6..f6582b6bda 100644
--- a/resources/sass/components/forms/_emoji-picker.scss
+++ b/resources/sass/components/forms/_emoji-picker.scss
@@ -162,6 +162,11 @@
           }
         }
       }
+      
+      .loading {
+        padding: 1.75rem;
+        text-align: center;
+      }
     }
   }
 }