@licium/editor-plugin-emoji 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cdn/toastui-editor-plugin-emoji.css +43 -0
  2. package/dist/cdn/toastui-editor-plugin-emoji.js +151 -0
  3. package/dist/toastui-editor-plugin-emoji.css +43 -0
  4. package/dist/toastui-editor-plugin-emoji.js +151 -0
  5. package/package.json +46 -0
  6. package/src/css/plugin.css +37 -0
  7. package/src/index.ts +108 -0
package/dist/cdn/toastui-editor-plugin-emoji.css ADDED
@@ -0,0 +1,43 @@
1
+ /*!
2
+ * TOAST UI Editor : Emoji Plugin
3
+ * @version 1.0.0 | Tue Jan 06 2026
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+ .toastui-editor-popup-emoji {
8
+ border: 1px solid #ddd;
9
+ background: #fff;
10
+ padding: 10px;
11
+ border-radius: 4px;
12
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
13
+ max-width: 320px;
14
+ max-height: 300px;
15
+ overflow-y: auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(8, 1fr);
18
+ gap: 4px;
19
+ }
20
+
21
+ .toastui-editor-popup-emoji button {
22
+ border: none;
23
+ background: none;
24
+ cursor: pointer;
25
+ font-size: 20px;
26
+ padding: 4px;
27
+ border-radius: 4px;
28
+ transition: background-color 0.2s;
29
+ }
30
+
31
+ .toastui-editor-popup-emoji button:hover {
32
+ background-color: #f0f0f0;
33
+ }
34
+
35
+ /* Dark mode support */
36
+ .toastui-editor-dark .toastui-editor-popup-emoji {
37
+ background: #2f2f2f;
38
+ border-color: #444;
39
+ }
40
+
41
+ .toastui-editor-dark .toastui-editor-popup-emoji button:hover {
42
+ background-color: #444;
43
+ }
package/dist/cdn/toastui-editor-plugin-emoji.js ADDED
@@ -0,0 +1,151 @@
1
+ /*!
2
+ * TOAST UI Editor : Emoji Plugin
3
+ * @version 1.0.0 | Tue Jan 06 2026
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+ (function webpackUniversalModuleDefinition(root, factory) {
8
+ if(typeof exports === 'object' && typeof module === 'object')
9
+ module.exports = factory();
10
+ else if(typeof define === 'function' && define.amd)
11
+ define([], factory);
12
+ else if(typeof exports === 'object')
13
+ exports["toastui"] = factory();
14
+ else
15
+ root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["emoji"] = factory();
16
+ })(self, function() {
17
+ return /******/ (function() { // webpackBootstrap
18
+ /******/ "use strict";
19
+ /******/ // The require scope
20
+ /******/ var __webpack_require__ = {};
21
+ /******/
22
+ /************************************************************************/
23
+ /******/ /* webpack/runtime/define property getters */
24
+ /******/ !function() {
25
+ /******/ // define getter functions for harmony exports
26
+ /******/ __webpack_require__.d = function(exports, definition) {
27
+ /******/ for(var key in definition) {
28
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
29
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
30
+ /******/ }
31
+ /******/ }
32
+ /******/ };
33
+ /******/ }();
34
+ /******/
35
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
36
+ /******/ !function() {
37
+ /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
38
+ /******/ }();
39
+ /******/
40
+ /************************************************************************/
41
+ var __webpack_exports__ = {};
42
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
43
+ /* harmony export */ "default": function() { return /* binding */ emojiPlugin; }
44
+ /* harmony export */ });
45
+
46
+ var EMOJIS = [
47
+ // Symbols & Productivity (Requested)
48
+ '✅', '❌', '❗', '❓', '➕', '➖', '➗', '✴️', '✳️', '⭕', '💯',
49
+ '⚠️', '🚫', '🔴', '🟢', '🔵', '🟡', '🟣', '⚫', '⚪', '🟩', '🟥',
50
+ '👍', '👎', '👊', '👋', '👌', '👏', '🙌', '🙏', '💪', '🤝',
51
+ '📢', '📣', '🔔', '🔕', '💡', '🔦', '🔥', '✨', '⭐', '🌟',
52
+ '📅', '📆', '📝', '✏️', '📌', '📍', '📎', '✂️', '🔒', '🔓', '🔎',
53
+ // Smileys & People
54
+ '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
55
+ '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
56
+ '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
57
+ '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
58
+ '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
59
+ '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
60
+ '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
61
+ '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
62
+ '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
63
+ '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾',
64
+ '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿',
65
+ '😾', '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞',
66
+ // Animals & Nature
67
+ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
68
+ '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆',
69
+ '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋',
70
+ '🐌', '🐞', '🐜', '🦟', '🦗', '🕷️', '🕸️', '🦂', '🐢', '🐍',
71
+ '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠',
72
+ '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅', '🐆', '🦓', '🦍',
73
+ '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🐃', '🐂',
74
+ '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
75
+ '🦮', '🐕‍🦺', '🐈', '🐓', '🦃', '🦚', '🦜', '🦢', '🦩', '🕊️',
76
+ '🐇', '🦝', '🦨', '🦡', '🦦', '🦥', '🐁', '🐀', '🐿️', '🦔',
77
+ '💐', '🌸', '💮', '🏵️', '🌹', '🥀', '🌺', '🌻', '🌼', '🌷',
78
+ '🌱', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿', '☘️', '🍀', '🍁',
79
+ '🍂', '🍃',
80
+ // Objects & Hearts
81
+ '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
82
+ '💌', '💣', '💤', '💥', '💦', '💧', '💨', '👓', '🕶️', '🥽',
83
+ '🥼', '👔', '👕', '👖', '🧣', '🧤', '🧥', '🧦', '👗', '👘',
84
+ '🥻', '🩱', '🩲', '🩳', '👙', '👚', '👛', '👜', '👝', '🛍️',
85
+ '🎒', '👞', '👟', '🥾', '🥿', '👠', '👡', '🩰', '👢', '👑',
86
+ '👒', '🎩', '🎓', '🧢', '⛑️', '📿', '💄', '💍', '💎'
87
+ ];
88
+ function emojiPlugin(context) {
89
+ var eventEmitter = context.eventEmitter, i18n = context.i18n;
90
+ var container = document.createElement('div');
91
+ container.className = 'toastui-editor-popup-emoji';
92
+ EMOJIS.forEach(function (emoji) {
93
+ var button = document.createElement('button');
94
+ button.type = 'button';
95
+ button.textContent = emoji;
96
+ button.addEventListener('click', function () {
97
+ eventEmitter.emit('command', 'emoji', { emoji: emoji });
98
+ eventEmitter.emit('closePopup');
99
+ });
100
+ container.appendChild(button);
101
+ });
102
+ var toolbarItem = {
103
+ name: 'emoji',
104
+ tooltip: 'Insert Emoji',
105
+ className: 'toastui-editor-toolbar-icons emoji',
106
+ popup: {
107
+ className: 'toastui-editor-popup-emoji-wrapper',
108
+ body: container,
109
+ style: { width: 'auto' },
110
+ },
111
+ };
112
+ return {
113
+ markdownCommands: {
114
+ emoji: function (payload, state, dispatch) {
115
+ var emoji = payload.emoji;
116
+ var tr = state.tr, schema = state.schema;
117
+ if (emoji) {
118
+ tr.replaceSelectionWith(schema.text(emoji));
119
+ dispatch(tr);
120
+ return true;
121
+ }
122
+ return false;
123
+ },
124
+ },
125
+ wysiwygCommands: {
126
+ emoji: function (payload, state, dispatch) {
127
+ var emoji = payload.emoji;
128
+ var tr = state.tr, schema = state.schema;
129
+ if (emoji) {
130
+ tr.replaceSelectionWith(schema.text(emoji));
131
+ dispatch(tr);
132
+ return true;
133
+ }
134
+ return false;
135
+ },
136
+ },
137
+ toolbarItems: [
138
+ {
139
+ groupIndex: 3,
140
+ itemIndex: 3,
141
+ item: toolbarItem,
142
+ },
143
+ ],
144
+ };
145
+ }
146
+
147
+ __webpack_exports__ = __webpack_exports__["default"];
148
+ /******/ return __webpack_exports__;
149
+ /******/ })()
150
+ ;
151
+ });
package/dist/toastui-editor-plugin-emoji.css ADDED
@@ -0,0 +1,43 @@
1
+ /*!
2
+ * TOAST UI Editor : Emoji Plugin
3
+ * @version 1.0.0 | Tue Jan 06 2026
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+ .toastui-editor-popup-emoji {
8
+ border: 1px solid #ddd;
9
+ background: #fff;
10
+ padding: 10px;
11
+ border-radius: 4px;
12
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
13
+ max-width: 320px;
14
+ max-height: 300px;
15
+ overflow-y: auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(8, 1fr);
18
+ gap: 4px;
19
+ }
20
+
21
+ .toastui-editor-popup-emoji button {
22
+ border: none;
23
+ background: none;
24
+ cursor: pointer;
25
+ font-size: 20px;
26
+ padding: 4px;
27
+ border-radius: 4px;
28
+ transition: background-color 0.2s;
29
+ }
30
+
31
+ .toastui-editor-popup-emoji button:hover {
32
+ background-color: #f0f0f0;
33
+ }
34
+
35
+ /* Dark mode support */
36
+ .toastui-editor-dark .toastui-editor-popup-emoji {
37
+ background: #2f2f2f;
38
+ border-color: #444;
39
+ }
40
+
41
+ .toastui-editor-dark .toastui-editor-popup-emoji button:hover {
42
+ background-color: #444;
43
+ }
package/dist/toastui-editor-plugin-emoji.js ADDED
@@ -0,0 +1,151 @@
1
+ /*!
2
+ * TOAST UI Editor : Emoji Plugin
3
+ * @version 1.0.0 | Tue Jan 06 2026
4
+ * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
5
+ * @license MIT
6
+ */
7
+ (function webpackUniversalModuleDefinition(root, factory) {
8
+ if(typeof exports === 'object' && typeof module === 'object')
9
+ module.exports = factory();
10
+ else if(typeof define === 'function' && define.amd)
11
+ define([], factory);
12
+ else if(typeof exports === 'object')
13
+ exports["toastui"] = factory();
14
+ else
15
+ root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["emoji"] = factory();
16
+ })(self, function() {
17
+ return /******/ (function() { // webpackBootstrap
18
+ /******/ "use strict";
19
+ /******/ // The require scope
20
+ /******/ var __webpack_require__ = {};
21
+ /******/
22
+ /************************************************************************/
23
+ /******/ /* webpack/runtime/define property getters */
24
+ /******/ !function() {
25
+ /******/ // define getter functions for harmony exports
26
+ /******/ __webpack_require__.d = function(exports, definition) {
27
+ /******/ for(var key in definition) {
28
+ /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
29
+ /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
30
+ /******/ }
31
+ /******/ }
32
+ /******/ };
33
+ /******/ }();
34
+ /******/
35
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
36
+ /******/ !function() {
37
+ /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
38
+ /******/ }();
39
+ /******/
40
+ /************************************************************************/
41
+ var __webpack_exports__ = {};
42
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
43
+ /* harmony export */ "default": function() { return /* binding */ emojiPlugin; }
44
+ /* harmony export */ });
45
+
46
+ var EMOJIS = [
47
+ // Symbols & Productivity (Requested)
48
+ '✅', '❌', '❗', '❓', '➕', '➖', '➗', '✴️', '✳️', '⭕', '💯',
49
+ '⚠️', '🚫', '🔴', '🟢', '🔵', '🟡', '🟣', '⚫', '⚪', '🟩', '🟥',
50
+ '👍', '👎', '👊', '👋', '👌', '👏', '🙌', '🙏', '💪', '🤝',
51
+ '📢', '📣', '🔔', '🔕', '💡', '🔦', '🔥', '✨', '⭐', '🌟',
52
+ '📅', '📆', '📝', '✏️', '📌', '📍', '📎', '✂️', '🔒', '🔓', '🔎',
53
+ // Smileys & People
54
+ '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
55
+ '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
56
+ '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
57
+ '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
58
+ '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
59
+ '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
60
+ '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
61
+ '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
62
+ '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
63
+ '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾',
64
+ '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿',
65
+ '😾', '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞',
66
+ // Animals & Nature
67
+ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
68
+ '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆',
69
+ '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋',
70
+ '🐌', '🐞', '🐜', '🦟', '🦗', '🕷️', '🕸️', '🦂', '🐢', '🐍',
71
+ '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠',
72
+ '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅', '🐆', '🦓', '🦍',
73
+ '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🐃', '🐂',
74
+ '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
75
+ '🦮', '🐕‍🦺', '🐈', '🐓', '🦃', '🦚', '🦜', '🦢', '🦩', '🕊️',
76
+ '🐇', '🦝', '🦨', '🦡', '🦦', '🦥', '🐁', '🐀', '🐿️', '🦔',
77
+ '💐', '🌸', '💮', '🏵️', '🌹', '🥀', '🌺', '🌻', '🌼', '🌷',
78
+ '🌱', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿', '☘️', '🍀', '🍁',
79
+ '🍂', '🍃',
80
+ // Objects & Hearts
81
+ '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
82
+ '💌', '💣', '💤', '💥', '💦', '💧', '💨', '👓', '🕶️', '🥽',
83
+ '🥼', '👔', '👕', '👖', '🧣', '🧤', '🧥', '🧦', '👗', '👘',
84
+ '🥻', '🩱', '🩲', '🩳', '👙', '👚', '👛', '👜', '👝', '🛍️',
85
+ '🎒', '👞', '👟', '🥾', '🥿', '👠', '👡', '🩰', '👢', '👑',
86
+ '👒', '🎩', '🎓', '🧢', '⛑️', '📿', '💄', '💍', '💎'
87
+ ];
88
+ function emojiPlugin(context) {
89
+ var eventEmitter = context.eventEmitter, i18n = context.i18n;
90
+ var container = document.createElement('div');
91
+ container.className = 'toastui-editor-popup-emoji';
92
+ EMOJIS.forEach(function (emoji) {
93
+ var button = document.createElement('button');
94
+ button.type = 'button';
95
+ button.textContent = emoji;
96
+ button.addEventListener('click', function () {
97
+ eventEmitter.emit('command', 'emoji', { emoji: emoji });
98
+ eventEmitter.emit('closePopup');
99
+ });
100
+ container.appendChild(button);
101
+ });
102
+ var toolbarItem = {
103
+ name: 'emoji',
104
+ tooltip: 'Insert Emoji',
105
+ className: 'toastui-editor-toolbar-icons emoji',
106
+ popup: {
107
+ className: 'toastui-editor-popup-emoji-wrapper',
108
+ body: container,
109
+ style: { width: 'auto' },
110
+ },
111
+ };
112
+ return {
113
+ markdownCommands: {
114
+ emoji: function (payload, state, dispatch) {
115
+ var emoji = payload.emoji;
116
+ var tr = state.tr, schema = state.schema;
117
+ if (emoji) {
118
+ tr.replaceSelectionWith(schema.text(emoji));
119
+ dispatch(tr);
120
+ return true;
121
+ }
122
+ return false;
123
+ },
124
+ },
125
+ wysiwygCommands: {
126
+ emoji: function (payload, state, dispatch) {
127
+ var emoji = payload.emoji;
128
+ var tr = state.tr, schema = state.schema;
129
+ if (emoji) {
130
+ tr.replaceSelectionWith(schema.text(emoji));
131
+ dispatch(tr);
132
+ return true;
133
+ }
134
+ return false;
135
+ },
136
+ },
137
+ toolbarItems: [
138
+ {
139
+ groupIndex: 3,
140
+ itemIndex: 3,
141
+ item: toolbarItem,
142
+ },
143
+ ],
144
+ };
145
+ }
146
+
147
+ __webpack_exports__ = __webpack_exports__["default"];
148
+ /******/ return __webpack_exports__;
149
+ /******/ })()
150
+ ;
151
+ });
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@licium/editor-plugin-emoji",
3
+ "version": "1.0.1",
4
+ "description": "Emoji plugin for Toast UI Editor",
5
+ "keywords": [
6
+ "licium",
7
+ "editor",
8
+ "plugin",
9
+ "emoji"
10
+ ],
11
+ "main": "dist/toastui-editor-plugin-emoji.js",
12
+ "files": [
13
+ "dist",
14
+ "src",
15
+ "index.d.ts"
16
+ ],
17
+ "types": "index.d.ts",
18
+ "author": "NHN Cloud FE Development Lab <dl_javascript@nhn.com>",
19
+ "license": "MIT",
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/natorus87/tui.editor.git",
23
+ "directory": "plugins/emoji"
24
+ },
25
+ "bugs": {
26
+ "url": "https://github.com/natorus87/tui.editor/issues"
27
+ },
28
+ "homepage": "https://ui.toast.com",
29
+ "browserslist": "last 2 versions, not ie <= 10",
30
+ "scripts": {
31
+ "lint": "eslint .",
32
+ "test:types": "tsc",
33
+ "test": "jest --watch",
34
+ "test:ci": "jest",
35
+ "serve": "snowpack dev",
36
+ "serve:ie": "webpack serve",
37
+ "build:cdn": "webpack build --env cdn & webpack build --env cdn minify",
38
+ "build": "webpack build --no-stats"
39
+ },
40
+ "devDependencies": {
41
+ "cross-env": "^6.0.3"
42
+ },
43
+ "publishConfig": {
44
+ "access": "public"
45
+ }
46
+ }
package/src/css/plugin.css ADDED
@@ -0,0 +1,37 @@
1
+ .toastui-editor-popup-emoji {
2
+ border: 1px solid #ddd;
3
+ background: #fff;
4
+ padding: 10px;
5
+ border-radius: 4px;
6
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
7
+ max-width: 320px;
8
+ max-height: 300px;
9
+ overflow-y: auto;
10
+ display: grid;
11
+ grid-template-columns: repeat(8, 1fr);
12
+ gap: 4px;
13
+ }
14
+
15
+ .toastui-editor-popup-emoji button {
16
+ border: none;
17
+ background: none;
18
+ cursor: pointer;
19
+ font-size: 20px;
20
+ padding: 4px;
21
+ border-radius: 4px;
22
+ transition: background-color 0.2s;
23
+ }
24
+
25
+ .toastui-editor-popup-emoji button:hover {
26
+ background-color: #f0f0f0;
27
+ }
28
+
29
+ /* Dark mode support */
30
+ .toastui-editor-dark .toastui-editor-popup-emoji {
31
+ background: #2f2f2f;
32
+ border-color: #444;
33
+ }
34
+
35
+ .toastui-editor-dark .toastui-editor-popup-emoji button:hover {
36
+ background-color: #444;
37
+ }
package/src/index.ts ADDED
@@ -0,0 +1,108 @@
1
+ import { PluginContext, I18n } from '@licium/editor';
2
+ import './css/plugin.css';
3
+
4
+ const EMOJIS = [
5
+ // Symbols & Productivity (Requested)
6
+ '✅', '❌', '❗', '❓', '➕', '➖', '➗', '✴️', '✳️', '⭕', '💯',
7
+ '⚠️', '🚫', '🔴', '🟢', '🔵', '🟡', '🟣', '⚫', '⚪', '🟩', '🟥',
8
+ '👍', '👎', '👊', '👋', '👌', '👏', '🙌', '🙏', '💪', '🤝',
9
+ '📢', '📣', '🔔', '🔕', '💡', '🔦', '🔥', '✨', '⭐', '🌟',
10
+ '📅', '📆', '📝', '✏️', '📌', '📍', '📎', '✂️', '🔒', '🔓', '🔎',
11
+ // Smileys & People
12
+ '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
13
+ '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
14
+ '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
15
+ '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
16
+ '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
17
+ '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
18
+ '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
19
+ '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
20
+ '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
21
+ '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾',
22
+ '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿',
23
+ '😾', '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤏', '✌️', '🤞',
24
+ // Animals & Nature
25
+ '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
26
+ '🦁', '🐮', '🐷', '🐸', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆',
27
+ '🦅', '🦉', '🦇', '🐺', '🐗', '🐴', '🦄', '🐝', '🐛', '🦋',
28
+ '🐌', '🐞', '🐜', '🦟', '🦗', '🕷️', '🕸️', '🦂', '🐢', '🐍',
29
+ '🦎', '🦖', '🦕', '🐙', '🦑', '🦐', '🦞', '🦀', '🐡', '🐠',
30
+ '🐟', '🐬', '🐳', '🐋', '🦈', '🐊', '🐅', '🐆', '🦓', '🦍',
31
+ '🦧', '🐘', '🦛', '🦏', '🐪', '🐫', '🦒', '🦘', '🐃', '🐂',
32
+ '🐄', '🐎', '🐖', '🐏', '🐑', '🦙', '🐐', '🦌', '🐕', '🐩',
33
+ '🦮', '🐕‍🦺', '🐈', '🐓', '🦃', '🦚', '🦜', '🦢', '🦩', '🕊️',
34
+ '🐇', '🦝', '🦨', '🦡', '🦦', '🦥', '🐁', '🐀', '🐿️', '🦔',
35
+ '💐', '🌸', '💮', '🏵️', '🌹', '🥀', '🌺', '🌻', '🌼', '🌷',
36
+ '🌱', '🌲', '🌳', '🌴', '🌵', '🌾', '🌿', '☘️', '🍀', '🍁',
37
+ '🍂', '🍃',
38
+ // Objects & Hearts
39
+ '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
40
+ '💌', '💣', '💤', '💥', '💦', '💧', '💨', '👓', '🕶️', '🥽',
41
+ '🥼', '👔', '👕', '👖', '🧣', '🧤', '🧥', '🧦', '👗', '👘',
42
+ '🥻', '🩱', '🩲', '🩳', '👙', '👚', '👛', '👜', '👝', '🛍️',
43
+ '🎒', '👞', '👟', '🥾', '🥿', '👠', '👡', '🩰', '👢', '👑',
44
+ '👒', '🎩', '🎓', '🧢', '⛑️', '📿', '💄', '💍', '💎'
45
+ ];
46
+
47
+ export default function emojiPlugin(context: PluginContext) {
48
+ const { eventEmitter, i18n } = context;
49
+
50
+ const container = document.createElement('div');
51
+ container.className = 'toastui-editor-popup-emoji';
52
+
53
+ EMOJIS.forEach(emoji => {
54
+ const button = document.createElement('button');
55
+ button.type = 'button';
56
+ button.textContent = emoji;
57
+ button.addEventListener('click', () => {
58
+ eventEmitter.emit('command', 'emoji', { emoji });
59
+ eventEmitter.emit('closePopup');
60
+ });
61
+ container.appendChild(button);
62
+ });
63
+
64
+ const toolbarItem = {
65
+ name: 'emoji',
66
+ tooltip: 'Insert Emoji',
67
+ className: 'toastui-editor-toolbar-icons emoji',
68
+ popup: {
69
+ className: 'toastui-editor-popup-emoji-wrapper',
70
+ body: container,
71
+ style: { width: 'auto' },
72
+ },
73
+ };
74
+
75
+ return {
76
+ markdownCommands: {
77
+ emoji: (payload: { emoji: string }, state: any, dispatch: any) => {
78
+ const { emoji } = payload;
79
+ const { tr, schema } = state;
80
+ if (emoji) {
81
+ tr.replaceSelectionWith(schema.text(emoji));
82
+ dispatch!(tr);
83
+ return true;
84
+ }
85
+ return false;
86
+ },
87
+ },
88
+ wysiwygCommands: {
89
+ emoji: (payload: { emoji: string }, state: any, dispatch: any) => {
90
+ const { emoji } = payload;
91
+ const { tr, schema } = state;
92
+ if (emoji) {
93
+ tr.replaceSelectionWith(schema.text(emoji));
94
+ dispatch!(tr);
95
+ return true;
96
+ }
97
+ return false;
98
+ },
99
+ },
100
+ toolbarItems: [
101
+ {
102
+ groupIndex: 3, // Add to the end of the 4th group (index 3) or similar
103
+ itemIndex: 3,
104
+ item: toolbarItem,
105
+ },
106
+ ],
107
+ };
108
+ }