tulih-editor 0.1.0

package/src/plugins/colors.ts

@@ -0,0 +1,68 @@
+import type { Plugin, PluginContext } from '../types';
+
+const colors: Plugin = {
+  name: 'colors',
+  order: 30,
+  css: '' +
+    '.te-color-btn {' +
+    '  position: relative; padding: .15rem .35rem !important;' +
+    '  min-width: 28px; text-align: center;' +
+    '}' +
+    '.te-color-preview {' +
+    '  display: block; font-size: 1rem; line-height: 1;' +
+    '}' +
+    '.te-color-preview::after {' +
+    '  content: ""; display: block;' +
+    '  height: 3px; border-radius: 1px;' +
+    '  margin-top: 2px;' +
+    '}' +
+    '.te-fore-btn .te-color-preview::after {' +
+    '  background: currentColor;' +
+    '}' +
+    '.te-back-btn .te-color-preview::after {' +
+    '  background: var(--te-back-color, #ffff00);' +
+    '}' +
+    '.te-color-input {' +
+    '  position: absolute; top: 0; left: 0;' +
+    '  width: 100%; height: 100%;' +
+    '  opacity: 0; cursor: pointer;' +
+    '  border: none; padding: 0;' +
+    '}',
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light te-color-btn te-fore-btn" title="Text color">' +
+      '<span class="te-color-preview" style="color:#000000">A</span>' +
+      '<input type="color" class="te-color-input te-fore-color" value="#000000">' +
+    '</button>' +
+    '<button type="button" class="btn btn-sm btn-light te-color-btn te-back-btn" title="Background color">' +
+      '<span class="te-color-preview" style="--te-back-color:#ffff00;color:#000">A</span>' +
+      '<input type="color" class="te-color-input te-back-color" value="#ffff00">' +
+    '</button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.colors) return;
+
+    var foreInput = ctx.wrapper.querySelector('.te-fore-color') as HTMLInputElement | null;
+    var foreBtn = ctx.wrapper.querySelector('.te-fore-btn') as HTMLElement | null;
+    if(foreBtn && foreInput){
+      foreInput.addEventListener('change', function(){
+        var preview = foreBtn!.querySelector('.te-color-preview') as HTMLElement;
+        preview.style.color = foreInput!.value;
+        document.execCommand('foreColor', false, foreInput!.value);
+        ctx.editor.focus();
+      });
+    }
+
+    var backInput = ctx.wrapper.querySelector('.te-back-color') as HTMLInputElement | null;
+    var backBtn = ctx.wrapper.querySelector('.te-back-btn') as HTMLElement | null;
+    if(backBtn && backInput){
+      backInput.addEventListener('change', function(){
+        var preview = backBtn!.querySelector('.te-color-preview') as HTMLElement;
+        preview.style.setProperty('--te-back-color', backInput!.value);
+        try{ document.execCommand('hiliteColor', false, backInput!.value); }
+        catch(_){ document.execCommand('backColor', false, backInput!.value); }
+        ctx.editor.focus();
+      });
+    }
+  }
+};
+
+export default colors;

package/src/plugins/darkMode.ts

@@ -0,0 +1,123 @@
+import type { Plugin, PluginContext } from '../types';
+
+const darkMode: Plugin = {
+  name: 'darkMode',
+  order: 59,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Toggle dark mode" data-cmd="toggleDark"><i class="ti ti-moon"></i></button>',
+  css: '' +
+    '.te-container.te-dark {' +
+    '  color-scheme: dark;' +
+    '}' +
+    '.te-container.te-dark .te-toolbar {' +
+    '  background: #1e1e1e; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-toolbar .btn {' +
+    '  color: #ccc; border-color: #555; background: #2a2a2a;' +
+    '}' +
+    '.te-container.te-dark .te-toolbar .btn:hover {' +
+    '  background: #333; color: #fff;' +
+    '}' +
+    '.te-container.te-dark .te-toolbar .btn.active {' +
+    '  background: #0d6efd; color: #fff; border-color: #0d6efd;' +
+    '}' +
+    '.te-container.te-dark .te-editor {' +
+    '  background: #121212; border-color: #444; color: #e0e0e0;' +
+    '}' +
+    '.te-container.te-dark .te-editor:focus {' +
+    '  box-shadow: inset 0 0 0 2px rgba(13,110,253,.5);' +
+    '}' +
+    '.te-container.te-dark .te-editor[placeholder]:empty:before {' +
+    '  color: #666;' +
+    '}' +
+    '.te-container.te-dark .te-divider {' +
+    '  background: #444;' +
+    '}' +
+    '.te-container.te-dark .te-status {' +
+    '  color: #999;' +
+    '}' +
+    '.te-container.te-dark .te-modal-dialog {' +
+    '  background: #1e1e1e; color: #e0e0e0; box-shadow: 0 20px 60px rgba(0,0,0,.5);' +
+    '}' +
+    '.te-container.te-dark .te-modal-header,' +
+    '.te-container.te-dark .te-modal-footer {' +
+    '  background: #2a2a2a; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-modal-header .te-modal-title {' +
+    '  color: #e0e0e0;' +
+    '}' +
+    '.te-container.te-dark .te-modal-body {' +
+    '  color: #e0e0e0;' +
+    '}' +
+    '.te-container.te-dark .btn-close {' +
+    '  filter: invert(1);' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-primary {' +
+    '  background: #555; border-color: #555; color: #fff;' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-primary:hover {' +
+    '  background: #777; border-color: #777;' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-outline-secondary {' +
+    '  color: #ccc; border-color: #555;' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-outline-secondary:hover {' +
+    '  background: #333; border-color: #777;' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-outline-danger {' +
+    '  color: #e57373; border-color: #e57373;' +
+    '}' +
+    '.te-container.te-dark .te-modal .btn-outline-danger:hover {' +
+    '  background: #C1272D; border-color: #C1272D; color: #fff;' +
+    '}' +
+    '.te-container.te-dark .form-control {' +
+    '  background: #2a2a2a; border-color: #555; color: #e0e0e0;' +
+    '}' +
+    '.te-container.te-dark .form-select {' +
+    '  background: #2a2a2a; border-color: #555; color: #e0e0e0;' +
+    '}' +
+    '.te-container.te-dark .te-table-tools {' +
+    '  background: #1e1e1e; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-table-tools .btn {' +
+    '  color: #ccc; border-color: #555; background: #2a2a2a;' +
+    '}' +
+    '.te-container.te-dark .te-table-tools .tt-label {' +
+    '  color: #999;' +
+    '}' +
+    '.te-container.te-dark .te-image-tools {' +
+    '  background: #1e1e1e; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-image-tools .btn {' +
+    '  color: #ccc; border-color: #555; background: #2a2a2a;' +
+    '}' +
+    '.te-container.te-dark .te-float-toolbar {' +
+    '  background: #1e1e1e; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-float-toolbar .btn {' +
+    '  color: #ccc; border-color: #555; background: #2a2a2a;' +
+    '}' +
+    '.te-container.te-dark .te-hr-popup {' +
+    '  background: #1e1e1e; border-color: #444;' +
+    '}' +
+    '.te-container.te-dark .te-hr-popup .btn {' +
+    '  color: #ccc; border-color: #555; background: #2a2a2a;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.darkMode) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="toggleDark"]');
+    if(!btn) return;
+
+    btn.addEventListener('click', function(){
+      var container = ctx.wrapper.querySelector('.te-container');
+      if(!container) return;
+      var isDark = container.classList.toggle('te-dark');
+      var icon = btn!.querySelector('.ti');
+      if(icon){
+        icon.className = 'ti ' + (isDark ? 'ti-sun' : 'ti-moon');
+      }
+      (btn as HTMLElement).classList.toggle('active', isDark);
+    });
+  }
+};
+
+export default darkMode;

package/src/plugins/direction.ts

@@ -0,0 +1,30 @@
+import type { Plugin, PluginContext } from '../types';
+
+const direction: Plugin = {
+  name: 'direction',
+  order: 61,
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light" title="Left to Right" data-cmd="ltr"><i class="ti ti-arrow-left"></i> LTR</button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Right to Left" data-cmd="rtl">RTL <i class="ti ti-arrow-right"></i></button>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.direction) return;
+    ctx.wrapper.querySelectorAll('[data-cmd="ltr"],[data-cmd="rtl"]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var dir = btn.getAttribute('data-cmd');
+        document.execCommand('formatBlock', false, 'p');
+        var sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          var node: Node | null = sel.anchorNode;
+          if (node && node.nodeType === 3) node = node.parentNode;
+          var block = node && (node as Element).closest && (node as Element).closest('p,h1,h2,h3,h4,h5,h6,div');
+          if (block && ctx.wrapper.contains(block)) {
+            block.setAttribute('dir', dir!);
+          }
+        }
+        ctx.editor.focus();
+      });
+    });
+  }
+};
+
+export default direction;

package/src/plugins/dragDrop.ts

@@ -0,0 +1,68 @@
+import type { Plugin, PluginContext } from '../types';
+
+const dragDrop: Plugin = {
+  name: 'dragDrop',
+  order: 3,
+  css: '' +
+    '.te-editor.te-dragover {' +
+    '  outline: 3px dashed rgba(13,110,253,.5);' +
+    '  outline-offset: -6px;' +
+    '  background: rgba(13,110,253,.03);' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(ctx.features.dragDrop === false) return;
+    var editor = ctx.editor;
+
+    function isImageFile(file: File): boolean {
+      return file && /^image\/(png|jpe?g|gif|webp|svg\+xml|bmp)$/i.test(file.type);
+    }
+
+    function readFile(file: File | Blob, cb: (url: string) => void): void {
+      var reader = new FileReader();
+      reader.onload = function(){ cb(reader.result as string); };
+      reader.readAsDataURL(file);
+    }
+
+    editor.addEventListener('dragenter', function(e: DragEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      editor.classList.add('te-dragover');
+    });
+
+    editor.addEventListener('dragover', function(e: DragEvent){
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    editor.addEventListener('dragleave', function(e: DragEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      if(!editor.contains(e.relatedTarget as Node)){
+        editor.classList.remove('te-dragover');
+      }
+    });
+
+    editor.addEventListener('drop', function(e: DragEvent){
+      e.preventDefault();
+      e.stopPropagation();
+      editor.classList.remove('te-dragover');
+
+      var files = e.dataTransfer && e.dataTransfer.files;
+      if(!files || files.length === 0) return;
+
+      for(var i = 0; i < files.length; i++){
+        var file = files[i];
+        if(!isImageFile(file)) continue;
+
+        var handler = (ctx.TulihEditor && ctx.TulihEditor.onUploadImage) || readFile;
+        handler(file, function(url: string){
+          if(!url) return;
+          var html = '<img src="' + url.replace(/"/g,'&quot;') + '" alt="' + (file.name || '').replace(/"/g,'&quot;') + '" style="max-width:100%;" />';
+          document.execCommand('insertHTML', false, html);
+        });
+      }
+    });
+  }
+};
+
+export default dragDrop;

package/src/plugins/emoji.ts

@@ -0,0 +1,188 @@
+import type { Plugin, PluginContext } from '../types';
+
+var EMOJIS = '😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😗😚😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳🥸😎🤓🧐😕😟🙁😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠💩🤡👹👺👻👽👾🤖💋👋✋👌🤏🤞🤟🤘🤙👈👉👆🖕👍👎✊👊🤛🤜👏🙌👐🤲🤝🙏✍💅👂👃👣👀👅👄'.match(/.{1,2}/g) || [];
+
+var EMOJI_NAMES: Record<string, string> = {
+  '😀':'grinning laugh happy','😃':'grinning smile happy','😄':'grinning smile happy','😁':'beaming grin happy',
+  '😆':'laughing grinning','🤣':'rolling floor laughing','😂':'tears joy laughing cry',
+  '🙂':'slight smile','🙃':'upside down','😉':'winking wink',
+  '😊':'blush smile happy','😇':'innocent halo angel',
+  '🥰':'love heart smile','😍':'heart eyes love','🤩':'star struck',
+  '😘':'kiss blowing heart','😗':'kissing kiss','😚':'kiss closed eyes',
+  '😋':'savor tongue yum','😛':'tongue playful','😜':'wink tongue silly','🤪':'crazy wild','😝':'squint tongue',
+  '🤑':'money tongue rich',
+  '🤗':'hug open hands','🤭':'hand over mouth secret','🤫':'shush quiet silent',
+  '🤔':'thinking think','🤐':'zipper mouth secret','🤨':'raised eyebrow suspicious',
+  '😐':'neutral straight face','😑':'expressionless blank','😶':'no mouth silent',
+  '😏':'smirk smug','😒':'unamified roll','🙄':'eye roll',
+  '😬':'grimace awkward','🤥':'lying liar nose',
+  '😌':'relieved relief','😔':'pensive sad','😪':'sleepy tired','🤤':'drooling drool','😴':'sleeping sleep zzz',
+  '😷':'medical mask sick','🤒':'thermometer sick fever','🤕':'head bandage hurt',
+  '🤢':'nauseous sick vomit','🤮':'vomiting sick','🤧':'sneeze sick',
+  '🥵':'hot fever sweat','🥶':'cold freeze ice','🥴':'dizzy tipsy',
+  '😵':'dizzy confused','🤯':'exploding head mind blown',
+  '🤠':'cowboy hat','🥳':'party celebration','🥸':'disguise mask',
+  '😎':'sunglasses cool','🤓':'nerd geek glasses','🧐':'monocle detective',
+  '😕':'confused unsure','😟':'worried concern','🙁':'slight frown sad',
+  '😮':'surprised shock','😯':'hushed surprise','😲':'astonished amazed','😳':'flushed embarrassed',
+  '🥺':'pleading puppy eyes',
+  '😦':'frown sad','😧':'anguish distressed','😨':'fearful afraid','😰':'anxious sweat worry',
+  '😥':'disappointed sad','😢':'cry sad tear','😭':'sobbing cry tears',
+  '😱':'scream fear horror','😖':'confounded frustrated','😣':'persevere struggle',
+  '😞':'disappointed sad','😓':'downcast sweat','😩':'weary tired','😫':'tired exhausted','🥱':'yawn sleepy',
+  '😤':'triumph frustrated steam','😡':'angry rage','😠':'angry mad','🤬':'cursing swear',
+  '😈':'devil evil grin','👿':'devil evil angry','💀':'skull death','☠':'skull crossbones danger',
+  '💩':'poop poo','🤡':'clown circus','👹':'ogre monster','👺':'goblin monster',
+  '👻':'ghost halloween','👽':'alien ufo','👾':'alien monster space','🤖':'robot ai',
+  '💋':'kiss lips',
+  '👋':'wave hand hello bye','✋':'raised hand stop high five','👌':'ok perfect',
+  '🤏':'pinching small little','🤞':'crossed fingers luck','🤟':'love gesture',
+  '🤘':'horns rock metal','🤙':'call me phone',
+  '👈':'point left','👉':'point right','👆':'point up','🖕':'middle finger fuck',
+  '👍':'thumbs up like','👎':'thumbs down dislike',
+  '✊':'fist raised power','👊':'fist punch','🤛':'fist left','🤜':'fist right',
+  '👏':'clap applause','🙌':'raised hands celebration','👐':'open hands',
+  '🤲':'palms together pray','🤝':'handshake deal agree','🙏':'folded hands pray please thank',
+  '✍':'writing hand','💅':'nail polish care',
+  '👂':'ear listen','👃':'nose smell','👣':'footsteps feet','👀':'eyes look','👅':'tongue taste','👄':'mouth lips'
+};
+
+const emoji: Plugin = {
+  name: 'emoji',
+  order: 60,
+  css: '' +
+    '.te-emoji-popup {' +
+    '  position: absolute; z-index: 3000;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .4rem; max-width: 290px;' +
+    '}' +
+    '.te-emoji-popup .te-emoji-search {' +
+    '  width: 100%; box-sizing: border-box;' +
+    '  padding: .3rem .5rem; margin-bottom: .4rem;' +
+    '  border: 1px solid #dee2e6; border-radius: .375rem;' +
+    '  font-size: .8rem; outline: none;' +
+    '}' +
+    '.te-emoji-popup .te-emoji-search:focus {' +
+    '  border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.15);' +
+    '}' +
+    '.te-emoji-popup .te-emoji-no-result {' +
+    '  padding: 1rem; text-align: center; color: #6c757d; font-size: .8rem;' +
+    '}' +
+    '.te-emoji-popup .te-emoji-grid {' +
+    '  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;' +
+    '  max-height: 220px; overflow-y: auto;' +
+    '}' +
+    '.te-emoji-popup .te-emoji-grid button {' +
+    '  background: none; border: none; font-size: 1.3rem;' +
+    '  padding: .25rem; cursor: pointer; border-radius: .25rem; text-align: center;' +
+    '}' +
+    '.te-emoji-popup .te-emoji-grid button:hover { background: #f0f0f0; }' +
+    '.te-emoji-popup .te-emoji-grid button.hidden { display: none; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Emoji" data-cmd="emoji"><i class="ti ti-mood-smile"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.emoji) return;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-emoji-popup';
+    popup.style.display = 'none';
+    popup.innerHTML = '<input type="text" class="te-emoji-search" placeholder="Search emoji..." /><div class="te-emoji-grid"></div><div class="te-emoji-no-result" style="display:none">No emoji found</div>';
+    var grid = popup.querySelector('.te-emoji-grid') as HTMLElement;
+    var search = popup.querySelector('.te-emoji-search') as HTMLInputElement;
+    var noResult = popup.querySelector('.te-emoji-no-result') as HTMLElement;
+
+    EMOJIS.forEach(function(emoji){
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = emoji;
+      btn.setAttribute('data-emoji', emoji);
+      btn.title = EMOJI_NAMES[emoji] || '';
+      grid.appendChild(btn);
+    });
+    document.body.appendChild(popup);
+
+    var toolbarBtn = ctx.wrapper.querySelector('[data-cmd="emoji"]') as HTMLElement | null;
+    var savedRange: Range | null = null;
+
+    function saveEditorRange(){
+      var sel = window.getSelection();
+      if(sel && sel.rangeCount > 0) savedRange = sel.getRangeAt(0).cloneRange();
+      else savedRange = null;
+    }
+
+    function restoreEditorRange(){
+      if(!savedRange) return;
+      var sel = window.getSelection();
+      sel!.removeAllRanges();
+      sel!.addRange(savedRange);
+    }
+
+    function showPopup(){
+      saveEditorRange();
+      var rect = toolbarBtn!.getBoundingClientRect();
+      popup.style.display = 'block';
+      popup.style.visibility = 'hidden';
+      var pw = popup.offsetWidth, ph = popup.offsetHeight;
+      var sx = window.scrollX, sy = window.scrollY;
+      var vw = window.innerWidth, vh = window.innerHeight;
+
+      var left = rect.left + sx;
+      if(left + pw > sx + vw - 8) left = sx + vw - pw - 8;
+      if(left < sx + 4) left = sx + 4;
+      popup.style.left = left + 'px';
+
+      var top = rect.bottom + 4 + sy;
+      if(top + ph > sy + vh - 8) top = rect.top - ph - 4 + sy;
+      if(top < sy + 4) top = sy + 4;
+      popup.style.top = top + 'px';
+
+      popup.style.visibility = '';
+      search.value = '';
+      grid.querySelectorAll('button').forEach(function(b){ b.classList.remove('hidden'); });
+      noResult.style.display = 'none';
+      search.focus();
+    }
+
+    if(toolbarBtn){
+      toolbarBtn.addEventListener('click', function(e: MouseEvent){
+        if(popup.style.display !== 'none'){ popup.style.display = 'none'; return; }
+        showPopup();
+      });
+    }
+
+    search.addEventListener('input', function(){
+      var q = search.value.trim().toLowerCase();
+      var visible = 0;
+      grid.querySelectorAll('button').forEach(function(b){
+        var name = (EMOJI_NAMES[(b as HTMLButtonElement).textContent!] || '').toLowerCase();
+        var match = !q || name.indexOf(q) !== -1;
+        b.classList.toggle('hidden', !match);
+        if(match) visible++;
+      });
+      noResult.style.display = visible ? 'none' : 'block';
+    });
+
+    search.addEventListener('keydown', function(e: KeyboardEvent){
+      if(e.key === 'Escape'){ popup.style.display = 'none'; ctx.editor.focus(); }
+    });
+
+    popup.addEventListener('mousedown', function(e: MouseEvent){
+      var btn = (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('[data-emoji]');
+      if(!btn) return;
+      e.preventDefault();
+      ctx.editor.focus();
+      restoreEditorRange();
+      document.execCommand('insertHTML', false, (btn as HTMLElement).textContent!);
+      popup.style.display = 'none';
+    });
+
+    document.addEventListener('click', function(e: MouseEvent){
+      if(popup.style.display === 'none') return;
+      if(!popup.contains(e.target as Node) && e.target !== toolbarBtn){
+        popup.style.display = 'none';
+      }
+    });
+  }
+};
+
+export default emoji;

package/src/plugins/emojiAutocomplete.ts

@@ -0,0 +1,183 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+var EMOJIS = '😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😗😚😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳🥸😎🤓🧐😕😟🙁😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬😈👿💀☠💩🤡👹👺👻👽👾🤖'.match(/.{1,2}/g) || [];
+
+var EMOJI_NAMES: Record<string, string> = {
+  '😀':'grinning laugh happy','😃':'grinning smile','😄':'smile happy','😁':'beaming grin','😆':'laughing grinning',
+  '🤣':'rolling floor laugh','😂':'tears joy cry',
+  '🙂':'slight smile','🙃':'upside down','😉':'winking wink','😊':'blush smile','😇':'innocent angel',
+  '🥰':'love heart','😍':'heart eyes','🤩':'star struck','😘':'kiss blowing','😗':'kissing','😚':'kiss closed',
+  '😋':'savor yum','😛':'tongue','😜':'wink tongue silly','🤪':'crazy wild','😝':'squint tongue',
+  '🤑':'money tongue','🤗':'hug','🤭':'hand over mouth secret','🤫':'shush quiet silent',
+  '🤔':'thinking think','🤐':'zipper mouth secret','🤨':'raised eyebrow suspicious',
+  '😐':'neutral straight','😑':'expressionless blank','😶':'no mouth silent',
+  '😏':'smirk smug','😒':'unamified','🙄':'eye roll',
+  '😬':'grimace awkward','🤥':'lying liar nose',
+  '😌':'relieved','😔':'pensive sad','😪':'sleepy tired','🤤':'drooling','😴':'sleeping zzz',
+  '😷':'mask sick','🤒':'fever','🤕':'hurt bandage','🤢':'nauseous sick','🤮':'vomiting','🤧':'sneeze',
+  '🥵':'hot sweat','🥶':'cold freeze','🥴':'dizzy','😵':'dizzy confused','🤯':'mind blown exploding',
+  '🤠':'cowboy','🥳':'party celebration','🥸':'disguise','😎':'sunglasses cool','🤓':'nerd geek','🧐':'monocle',
+  '😕':'confused','😟':'worried','🙁':'frown sad','😮':'surprised shock','😯':'hushed','😲':'astonished',
+  '😳':'flushed embarrassed','🥺':'pleading puppy eyes',
+  '😦':'frown','😧':'anguish','😨':'fearful afraid','😰':'anxious worry','😥':'disappointed',
+  '😢':'cry sad tear','😭':'sobbing cry','😱':'scream horror','😖':'confounded','😣':'struggle',
+  '😞':'disappointed','😓':'sweat','😩':'weary','😫':'tired exhausted','🥱':'yawn sleepy',
+  '😤':'frustrated','😡':'angry rage','😠':'angry mad','🤬':'cursing swear',
+  '😈':'devil evil grin','👿':'devil evil angry','💀':'skull death','☠':'skull crossbones danger',
+  '💩':'poop','🤡':'clown','👹':'ogre monster','👺':'goblin',
+  '👻':'ghost halloween','👽':'alien ufo','👾':'alien monster','🤖':'robot',
+  '💋':'kiss lips',
+  '👋':'wave hello bye','✋':'raised hand stop','👌':'ok perfect',
+  '🤏':'pinching small','🤞':'crossed fingers luck','🤟':'love gesture','🤘':'horns rock','🤙':'call me',
+  '👈':'point left','👉':'point right','👆':'point up','🖕':'middle finger',
+  '👍':'thumbs up like','👎':'thumbs down dislike',
+  '✊':'fist raised power','👊':'fist punch','🤛':'fist left','🤜':'fist right',
+  '👏':'clap applause','🙌':'celebration','👐':'open hands','🤲':'palms together pray',
+  '🤝':'handshake deal','🙏':'pray please thank',
+  '✍':'writing','💅':'nail polish',
+  '👂':'ear listen','👃':'nose smell','👣':'footsteps','👀':'eyes','👅':'tongue','👄':'mouth lips'
+};
+
+const emojiAutocomplete: Plugin = {
+  name: 'emojiAutocomplete',
+  order: 6,
+  css: '' +
+    '.te-emoji-ac {' +
+    '  position: fixed; z-index: 9999;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .25rem; display: none;' +
+    '  max-height: 160px; overflow-y: auto;' +
+    '  min-width: 120px;' +
+    '}' +
+    '.te-emoji-ac-item {' +
+    '  display: flex; align-items: center; gap: 6px;' +
+    '  padding: 4px 8px; cursor: pointer;' +
+    '  border-radius: .25rem; font-size: 1rem;' +
+    '}' +
+    '.te-emoji-ac-item:hover, .te-emoji-ac-item.active {' +
+    '  background: #e7f1ff;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(ctx.features.emojiAutocomplete === false) return;
+    var editor = ctx.editor;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-emoji-ac';
+    document.body.appendChild(popup);
+
+    var query = '';
+    var activeIdx = 0;
+    var items: Element[] = [];
+
+    function buildItems(filter: string){
+      filter = filter || '';
+      popup.innerHTML = '';
+      items = [];
+      activeIdx = 0;
+      var f = filter.toLowerCase();
+      EMOJIS.forEach(function(e){
+        var name = (EMOJI_NAMES[e] || '').toLowerCase();
+        if(f && name.indexOf(f) === -1) return;
+        var div = document.createElement('div');
+        div.className = 'te-emoji-ac-item';
+        div.textContent = e;
+        div.setAttribute('data-emoji', e);
+        popup.appendChild(div);
+      });
+      items = Array.prototype.slice.call(popup.children);
+      if(items.length === 0){ popup.style.display = 'none'; return; }
+      items[0].classList.add('active');
+      popup.style.display = 'block';
+      position();
+    }
+
+    function position(){
+      var sel = window.getSelection();
+      if(!sel || !sel.rangeCount) return;
+      var r = sel.getRangeAt(0);
+      var rect = r.getBoundingClientRect();
+      popup.style.left = Math.max(4, rect.left) + 'px';
+      popup.style.top = (rect.bottom + 4) + 'px';
+      var pr = popup.getBoundingClientRect();
+      if(pr.right > window.innerWidth - 4){
+        popup.style.left = (window.innerWidth - pr.width - 4) + 'px';
+      }
+      if(pr.bottom > window.innerHeight - 4){
+        popup.style.top = (rect.top - pr.height - 4) + 'px';
+      }
+    }
+
+    function insertEmoji(emoji: string){
+      editor.focus();
+      var sel = window.getSelection();
+      if(sel && sel.rangeCount > 0 && query){
+        var range = sel.getRangeAt(0);
+        var len = query.length + 1;
+        if(range.startOffset >= len && range.startContainer.nodeType === 3){
+          range.setStart(range.startContainer, range.startOffset - len);
+          range.deleteContents();
+        }
+      }
+      document.execCommand('insertText', false, emoji);
+      popup.style.display = 'none';
+      query = '';
+    }
+
+    function move(dir: number){
+      if(items.length === 0) return;
+      items[activeIdx].classList.remove('active');
+      activeIdx = (activeIdx + dir + items.length) % items.length;
+      items[activeIdx].classList.add('active');
+      (items[activeIdx] as HTMLElement).scrollIntoView({ block: 'nearest' });
+    }
+
+    editor.addEventListener('keydown', function(e: KeyboardEvent){
+      if(popup.style.display === 'none') return;
+      if(e.key === 'ArrowDown'){ e.preventDefault(); move(1); return; }
+      if(e.key === 'ArrowUp'){ e.preventDefault(); move(-1); return; }
+      if(e.key === 'Enter' || e.key === 'Tab'){
+        e.preventDefault();
+        var active = popup.querySelector('.active');
+        if(active){
+          var emoji = active.getAttribute('data-emoji');
+          if(emoji) insertEmoji(emoji);
+        }
+        return;
+      }
+      if(e.key === 'Escape'){ popup.style.display = 'none'; query = ''; return; }
+    });
+
+    editor.addEventListener('input', function(){
+      var sel = window.getSelection();
+      if(!sel || !sel.rangeCount || !sel.anchorNode) return;
+      var node = sel.anchorNode;
+      var text = node.textContent || '';
+      var offset = sel.anchorOffset;
+      var before = text.slice(0, offset);
+      var colon = before.lastIndexOf(':');
+      if(colon !== -1 && before.indexOf(' ', colon) === -1 && colon !== offset - 1){
+        query = before.slice(colon + 1);
+        if(query.indexOf(':') !== -1){ popup.style.display = 'none'; return; }
+        buildItems(query);
+      } else if(colon !== -1 && colon === offset - 1){
+        query = '';
+        buildItems('');
+      } else {
+        popup.style.display = 'none';
+        query = '';
+      }
+    });
+
+    popup.addEventListener('mousedown', function(e: MouseEvent){
+      var item = (e.target as HTMLElement) && (e.target as HTMLElement).closest && (e.target as HTMLElement).closest('.te-emoji-ac-item');
+      if(!item) return;
+      e.preventDefault();
+      var emoji = (item as HTMLElement).getAttribute('data-emoji');
+      if(emoji) insertEmoji(emoji);
+    });
+  }
+};
+
+export default emojiAutocomplete;