feat: add emoji plugin #136

mostafaznv · Sep 10, 2024 · 33fa163 · 33fa163
1 parent 131165b
commit 33fa163
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/config/nova-ckeditor.php b/config/nova-ckeditor.php
@@ -206,6 +206,7 @@
                 '|',
                 'codeBlock',
                 'blockQuote',
+                'emoji',
                 'bulletedList',
                 'numberedList',
                 '|',

diff --git a/package.json b/package.json
@@ -51,6 +51,7 @@
         "webpack": "^5.89.0"
     },
     "dependencies": {
+        "@phudak/ckeditor5-emoji": "^1.1.1",
         "@vueuse/components": "^10.7.0",
         "@vueuse/core": "^10.7.0",
         "lodash": "^4.17.21",

diff --git a/resources/js/ckeditor/ckeditor.js b/resources/js/ckeditor/ckeditor.js
@@ -72,6 +72,8 @@ import Audio from "./plugins/audio/audio"
 import {Clipboard} from '@ckeditor/ckeditor5-clipboard'
 import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting'
 import ElementAddAttributes from './plugins/element-attribute/src/add-attribute-to-element'
+import {Emoji, EmojiActivity, EmojiFlags, EmojiFood, EmojiNature, EmojiObjects, EmojiPeople, EmojiPlaces, EmojiSymbols} from '@phudak/ckeditor5-emoji/src';
+
 
 // Extend the Base Class
 export default class CkEditor extends ClassicEditorBase {
@@ -141,7 +143,16 @@ export default class CkEditor extends ClassicEditorBase {
             IndentBlock,
             ElementAddAttributes,
             Clipboard,
-            SimpleUploadAdapter
+            SimpleUploadAdapter,
+            Emoji,
+            EmojiPeople,
+            EmojiNature,
+            EmojiPlaces,
+            EmojiFood,
+            EmojiActivity,
+            EmojiObjects,
+            EmojiSymbols,
+            EmojiFlags,
         ]
     }
 }
diff --git a/resources/sass/field.sass b/resources/sass/field.sass
@@ -137,6 +137,15 @@ input
         opacity: 0.5
         cursor: not-allowed
 
+
+// emojis
+.ck-character-grid__tiles
+    display: grid
+    grid-template-columns: repeat(10, 1fr)
+    height: 200px!important
+    overflow-y: auto
+
+
 @media (max-width: 800px)
     .nova-ckeditor-mobile-none
         display: none !important