tulih-editor 0.1.0

package/src/plugins/pasteImage.ts

@@ -0,0 +1,61 @@
+import type { Plugin, PluginContext } from '../types';
+
+const pasteImage: Plugin = {
+  name: 'pasteImage',
+  order: 1,
+  init(ctx: PluginContext): void {
+    if(ctx.features.pasteImage === false) return;
+    var editor = ctx.editor;
+
+    function getImageFiles(e: ClipboardEvent): File[] {
+      var files: File[] = [];
+      var items = e.clipboardData && e.clipboardData.items;
+      if(items){
+        for(var i = 0; i < items.length; i++){
+          if(items[i].kind === 'file'){
+            var f = items[i].getAsFile();
+            if(f && /^image\//i.test(f.type)) files.push(f);
+          }
+        }
+      }
+      var rawFiles = e.clipboardData && e.clipboardData.files;
+      if(rawFiles){
+        for(var j = 0; j < rawFiles.length; j++){
+          if(/^image\//i.test(rawFiles[j].type)){
+            var dup = false;
+            for(var k = 0; k < files.length; k++){
+              if(files[k] === rawFiles[j] || files[k].name === rawFiles[j].name && files[k].size === rawFiles[j].size && files[k].lastModified === rawFiles[j].lastModified){
+                dup = true; break;
+              }
+            }
+            if(!dup) files.push(rawFiles[j]);
+          }
+        }
+      }
+      return files;
+    }
+
+    editor.addEventListener('paste', function(e: ClipboardEvent){
+      var imageFiles = getImageFiles(e);
+      if(imageFiles.length === 0) return;
+
+      e.preventDefault();
+      e.stopImmediatePropagation();
+
+      imageFiles.forEach(function(file){
+        var handler = (ctx.TulihEditor && ctx.TulihEditor.onUploadImage) || function(f: File | Blob, cb: (url: string) => void){
+          var r = new FileReader();
+          r.onload = function(){ cb(r.result as string); };
+          r.readAsDataURL(f);
+        };
+        handler(file, function(url: string){
+          if(!url) return;
+          var html = '<img src="' + url.replace(/"/g,'&quot;') + '" alt="' + ((file as File).name || '').replace(/"/g,'&quot;') + '" style="max-width:100%;" />';
+          document.execCommand('insertHTML', false, html);
+        });
+      });
+    }, true);
+  }
+};
+
+export default pasteImage;

package/src/plugins/pastePlain.ts

@@ -0,0 +1,43 @@
+import type { Plugin, PluginContext } from '../types';
+import * as H from '../core/helpers';
+
+const pastePlain: Plugin = {
+  name: 'pastePlain',
+  order: 24,
+  css: '' +
+    '.te-pasteplain-btn.active { background: #e7f1ff; border-color: #b6d4fe; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light te-pasteplain-btn" title="Paste as plain text" data-cmd="togglePastePlain"><i class="ti ti-clipboard"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.pastePlain) return;
+    var editor = ctx.editor;
+    ctx._pastePlain = false;
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="togglePastePlain"]');
+    if(btn){
+      btn.addEventListener('click', function(){
+        ctx._pastePlain = !ctx._pastePlain;
+        (btn as HTMLElement).classList.toggle('active', ctx._pastePlain as boolean);
+      });
+    }
+
+    editor.addEventListener('paste', function(e: ClipboardEvent){
+      if(!ctx._pastePlain) return;
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      var text = (e.clipboardData && e.clipboardData.getData('text/plain')) || '';
+      if(text){
+        var safe = H.escapeHtml(text);
+        var html = '<p>' + safe.replace(/\n{2,}/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
+        document.execCommand('insertHTML', false, html);
+      }
+      setTimeout(function(){
+        try {
+          H.normalizeParagraphs(editor);
+          H.ensureInitialParagraph(editor);
+        } catch(_){}
+      }, 0);
+    }, true);
+  }
+};
+
+export default pastePlain;

package/src/plugins/pre.ts

@@ -0,0 +1,11 @@
+import type { Plugin, PluginContext } from '../types';
+
+const pre: Plugin = {
+  name: 'pre',
+  order: 21,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Preformatted" data-cmd="formatBlock" data-val="pre"><i class="ti ti-code"></i></button>',
+  init(ctx: PluginContext): void {
+  }
+};
+
+export default pre;

package/src/plugins/readOnly.ts

@@ -0,0 +1,46 @@
+import type { Plugin, PluginContext } from '../types';
+
+function applyReadOnly(ctx: PluginContext, ro: boolean): void {
+  var btn = ctx.wrapper.querySelector('[data-cmd="toggleReadOnly"]');
+  if(ro){
+    ctx.editor.contentEditable = 'false';
+    ctx.wrapper.classList.add('te-readonly');
+    if(btn) btn.innerHTML = '<i class="ti ti-lock-open"></i>';
+  } else {
+    ctx.editor.contentEditable = 'true';
+    ctx.wrapper.classList.remove('te-readonly');
+    if(btn) btn.innerHTML = '<i class="ti ti-lock"></i>';
+  }
+  if(btn) btn.classList.toggle('active', ro);
+}
+
+const readOnly: Plugin = {
+  name: 'readOnly',
+  order: 75,
+  css: '' +
+    '.te-readonly-btn.active { background: #fff3cd; border-color: #ffecb5; }' +
+    '.te-readonly .te-toolbar select,' +
+    '.te-readonly .te-toolbar input,' +
+    '.te-readonly .te-toolbar .btn {' +
+    '  opacity: .5; pointer-events: none;' +
+    '}' +
+    '.te-readonly .te-editor { background: #f8f9fa; cursor: default; }',
+  toolbarHTML: '',
+  init(ctx: PluginContext): void {
+    if(ctx.features.readOnly === false) return;
+
+    if(ctx.options.readOnly) {
+      applyReadOnly(ctx, true);
+    }
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="toggleReadOnly"]');
+    if(!btn) return;
+
+    btn.addEventListener('click', function(){
+      var isRo = ctx.editor.contentEditable !== 'false';
+      applyReadOnly(ctx, !isRo);
+    });
+  }
+};
+
+export default readOnly;

package/src/plugins/shortcutCustomizer.ts

@@ -0,0 +1,125 @@
+import type { Plugin, PluginContext } from '../types';
+
+var STORAGE_KEY = 'te-shortcut-map';
+
+var DEFAULT_MAP: Record<string, {key: string; ctrl: boolean; shift: boolean}> = {
+  'Bold':      {key:'b', ctrl:true, shift:false},
+  'Italic':    {key:'i', ctrl:true, shift:false},
+  'Underline': {key:'u', ctrl:true, shift:false},
+  'Strike':    {key:'s', ctrl:true, shift:false},
+  'Undo':      {key:'z', ctrl:true, shift:false},
+  'Redo':      {key:'z', ctrl:true, shift:true},
+  'RedoAlt':   {key:'y', ctrl:true, shift:false},
+  'Link':      {key:'k', ctrl:true, shift:false}
+};
+
+function loadMap(): Record<string, {key: string; ctrl: boolean; shift: boolean}>{
+  try {
+    var raw = localStorage.getItem(STORAGE_KEY);
+    if(raw) return JSON.parse(raw);
+  } catch(_){}
+  return JSON.parse(JSON.stringify(DEFAULT_MAP));
+}
+
+function saveMap(map: Record<string, {key: string; ctrl: boolean; shift: boolean}>): void{
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(map)); } catch(_){}
+}
+
+function esc(s: string): string{ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+const shortcutCustomizer: Plugin = {
+  name: 'shortcutCustomizer',
+  order: 6,
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Customize shortcuts" data-cmd="customizeShortcuts"><i class="ti ti-edit"></i></button>',
+  modalHTML: '' +
+    '<div class="te-modal" data-te-modal="shortcutCustomizer">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog" style="width:420px">' +
+    '    <div class="te-modal-header"><strong>Customize Shortcuts</strong><button type="button" class="btn-close" data-te-close></button></div>' +
+    '    <div class="te-modal-body te-shortcut-body"></div>' +
+    '    <div class="te-modal-footer">' +
+    '      <button type="button" class="btn btn-sm btn-secondary" data-te-sc-reset>Reset</button>' +
+    '      <button type="button" class="btn btn-sm btn-secondary" data-te-close>Close</button>' +
+    '      <button type="button" class="btn btn-sm btn-primary" data-te-shortcut-save>Save</button>' +
+    '    </div>' +
+    '  </div>' +
+    '</div>',
+  css: '' +
+    '.te-shortcut-body table { width: 100%; border-collapse: collapse; }' +
+    '.te-shortcut-body td, .te-shortcut-body th { padding: 4px 8px; border-bottom: 1px solid #dee2e6; text-align: left; font-size: .85rem; }' +
+    '.te-shortcut-body th { font-weight: 600; color: #495057; }' +
+    '.te-shortcut-body input[type="text"] { width: 40px; padding: 2px 6px; border: 1px solid #dee2e6; border-radius: 3px; font-size: .85rem; }' +
+    '.te-shortcut-body input[type="text"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }' +
+    '.te-shortcut-body label { font-size: .8rem; margin-left: 4px; }',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.shortcutCustomizer) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="customizeShortcuts"]');
+    if(!btn) return;
+
+    btn.addEventListener('click', function(){
+      var modal = ctx.wrapper.querySelector('[data-te-modal="shortcutCustomizer"]');
+      if(!modal) return;
+      var body = modal.querySelector('.te-shortcut-body');
+      if(!body) return;
+
+      var map = loadMap();
+      var names = ['Bold','Italic','Underline','Strike','Undo','Redo','RedoAlt','Link'];
+      var html = '<table><tr><th>Action</th><th>Shortcut</th></tr>';
+      for(var i = 0; i < names.length; i++){
+        var n = names[i];
+        var s = map[n] || {key:'', ctrl:true, shift:false};
+        var label = n === 'RedoAlt' ? 'Redo (alt)' : n;
+        html += '<tr><td>' + label + '</td><td>' +
+          'Ctrl <input type="checkbox" data-ctrl="' + n + '" ' + (s.ctrl ? 'checked' : '') + ' />' +
+          ' Shift <input type="checkbox" data-shift="' + n + '" ' + (s.shift ? 'checked' : '') + ' />' +
+          ' <input type="text" class="te-sc-input" data-action="' + n + '" value="' + esc(s.key) + '" placeholder="key" maxlength="1" />' +
+          '</td></tr>';
+      }
+      html += '</table>';
+      body.innerHTML = html;
+      modal.classList.add('is-open');
+    });
+
+    ctx.wrapper.addEventListener('click', function(e: MouseEvent){
+      var saveBtn = (e.target as HTMLElement).closest('[data-te-shortcut-save]');
+      if(!saveBtn) return;
+      var modal = ctx.wrapper.querySelector('[data-te-modal="shortcutCustomizer"]');
+      if(!modal) return;
+      var map: Record<string, {key: string; ctrl: boolean; shift: boolean}> = {};
+      modal.querySelectorAll('.te-sc-input').forEach(function(inp){
+        var action = inp.getAttribute('data-action');
+        var key = (inp as HTMLInputElement).value.trim().toLowerCase();
+        var ctrl = (modal!.querySelector('[data-ctrl="' + action + '"]') as HTMLInputElement).checked;
+        var shift = (modal!.querySelector('[data-shift="' + action + '"]') as HTMLInputElement).checked;
+        if(key) map[action!] = {key:key, ctrl:ctrl, shift:shift};
+      });
+      saveMap(map);
+      modal.classList.remove('is-open');
+    });
+
+    ctx.wrapper.addEventListener('click', function(e: MouseEvent){
+      var resetBtn = (e.target as HTMLElement).closest('[data-te-sc-reset]');
+      if(!resetBtn) return;
+      var modal = ctx.wrapper.querySelector('[data-te-modal="shortcutCustomizer"]');
+      if(!modal) return;
+      saveMap(JSON.parse(JSON.stringify(DEFAULT_MAP)));
+      var body = modal.querySelector('.te-shortcut-body');
+      var names = ['Bold','Italic','Underline','Strike','Undo','Redo','RedoAlt','Link'];
+      var html = '<table><tr><th>Action</th><th>Shortcut</th></tr>';
+      for(var i = 0; i < names.length; i++){
+        var n = names[i];
+        var s = DEFAULT_MAP[n];
+        var label = n === 'RedoAlt' ? 'Redo (alt)' : n;
+        html += '<tr><td>' + label + '</td><td>' +
+          'Ctrl <input type="checkbox" data-ctrl="' + n + '" ' + (s.ctrl ? 'checked' : '') + ' />' +
+          ' Shift <input type="checkbox" data-shift="' + n + '" ' + (s.shift ? 'checked' : '') + ' />' +
+          ' <input type="text" class="te-sc-input" data-action="' + n + '" value="' + esc(s.key) + '" placeholder="key" maxlength="1" />' +
+          '</td></tr>';
+      }
+      html += '</table>';
+      if(body) body.innerHTML = html;
+    });
+  }
+};
+
+export default shortcutCustomizer;

package/src/plugins/shortcutsHelp.ts

@@ -0,0 +1,51 @@
+import type { Plugin, PluginContext } from '../types';
+
+const shortcutsHelp: Plugin = {
+  name: 'shortcutsHelp',
+  order: 90,
+  css: '' +
+    '.te-shortcuts-table { width: 100%; border-collapse: collapse; font-size: .875rem; }' +
+    '.te-shortcuts-table th, .te-shortcuts-table td { padding: .4rem .75rem; border-bottom: 1px solid #e9ecef; text-align: left; color: #000; }' +
+    '.te-shortcuts-table th { background: #f8f9fa; font-weight: 600; }' +
+    '.te-shortcuts-table kbd { display: inline-block; padding: 2px 6px; font-size: .75rem; font-family: monospace; background: #f0f0f0; border: 1px solid #d0d0d0; border-radius: 3px; color: #000; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Keyboard shortcuts" data-cmd="shortcutsHelp"><i class="ti ti-help-circle"></i></button>',
+  modalHTML: '' +
+    '<div class="te-shortcuts-modal te-modal" aria-hidden="true">' +
+    '  <div class="te-modal-backdrop" data-te-close></div>' +
+    '  <div class="te-modal-dialog">' +
+    '    <div class="te-modal-header">' +
+    '      <h5 class="te-modal-title m-0">Keyboard Shortcuts</h5>' +
+    '      <button type="button" class="btn-close" data-te-close aria-label="Close"></button>' +
+    '    </div>' +
+    '    <div class="te-modal-body">' +
+    '      <table class="te-shortcuts-table">' +
+    '        <thead><tr><th>Shortcut</th><th>Action</th></tr></thead>' +
+    '        <tbody>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>B</kbd></td><td>Bold</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>I</kbd></td><td>Italic</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>U</kbd></td><td>Underline</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>S</kbd></td><td>Strikethrough</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td><td>Undo</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td><td>Redo</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>Y</kbd></td><td>Redo</td></tr>' +
+    '          <tr><td><kbd>Ctrl</kbd> + <kbd>K</kbd></td><td>Insert link</td></tr>' +
+    '          <tr><td><kbd>Tab</kbd></td><td>Indent list item</td></tr>' +
+    '          <tr><td><kbd>Shift</kbd> + <kbd>Tab</kbd></td><td>Outdent list item</td></tr>' +
+    '        </tbody>' +
+    '      </table>' +
+    '    </div>' +
+    '  </div>' +
+    '</div>',
+  init(ctx: PluginContext): void {
+    if(ctx.features.shortcutsHelp === false) return;
+    var btn = ctx.wrapper.querySelector('[data-cmd="shortcutsHelp"]');
+    if(btn){
+      btn.addEventListener('click', function(){
+        var m = ctx.wrapper.querySelector('.te-shortcuts-modal');
+        if(m) m.classList.add('is-open');
+      });
+    }
+  }
+};
+
+export default shortcutsHelp;

package/src/plugins/source.ts

@@ -0,0 +1,77 @@
+import type { Plugin, PluginContext } from '../types';
+
+const source: Plugin = {
+  name: 'source',
+  order: 65,
+  css: '' +
+    '.te-source-toggle.active { background: #e7f1ff; border-color: #b6d4fe; }' +
+    '.te-editor.te-source-mode { display: none; }' +
+    '.te-source-textarea {' +
+    '  width: 100%; min-height: 200px; border: 1px solid #dee2e6;' +
+    '  border-radius: .375rem; padding: .75rem; resize: vertical;' +
+    '  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;' +
+    '  font-size: .85rem; line-height: 1.6; display: none;' +
+    '}',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-outline-secondary" title="Toggle source" data-cmd="editSource"><i class="ti ti-source-code"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.source) return;
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="editSource"]') as HTMLButtonElement | null;
+    if(!btn) return;
+
+    var ta = document.createElement('textarea');
+    ta.className = 'te-source-textarea';
+    ta.spellcheck = false;
+    ctx.editor.parentNode!.insertBefore(ta, ctx.editor);
+
+    var sourceMode = false;
+
+    function formatSource(html: string): string {
+      if(!html) return '';
+      var out = String(html);
+      var blockTags = ['p','h1','h2','h3','h4','h5','h6','blockquote','pre','li','tr','thead','tbody','tfoot','table','ul','ol'];
+      blockTags.forEach(function(tag){
+        var openRe = new RegExp('<' + tag + '(\\s[^>]*)?>', 'gi');
+        var closeRe = new RegExp('</' + tag + '>', 'gi');
+        out = out.replace(openRe, function(m){ return '\n' + m; });
+        out = out.replace(closeRe, function(m){ return m + '\n'; });
+      });
+      out = out.replace(/\n{2,}/g, '\n');
+      return out.trim();
+    }
+
+    function toggleSource(){
+      sourceMode = !sourceMode;
+      if(sourceMode){
+        ta.value = formatSource(ctx.editor.innerHTML);
+        ctx.editor.classList.add('te-source-mode');
+        ta.style.display = 'block';
+        ta.focus();
+      } else {
+        var safe = ctx.utils.sanitizeHTML ? ctx.utils.sanitizeHTML(ta.value, ctx.options.sanitize || {}) : ta.value;
+        ctx.editor.innerHTML = safe;
+        ctx.editor.classList.remove('te-source-mode');
+        ta.style.display = 'none';
+        ctx.editor.focus();
+      }
+      btn!.classList.toggle('active', sourceMode);
+      var allControls = ctx.toolbar.querySelectorAll('[data-cmd], select, input');
+      for(var i = 0; i < allControls.length; i++){
+        if(allControls[i] === btn) continue;
+        if(sourceMode){
+          (allControls[i] as HTMLElement).setAttribute('disabled', 'disabled');
+          (allControls[i] as HTMLElement).style.opacity = '.4';
+          (allControls[i] as HTMLElement).style.pointerEvents = 'none';
+        } else {
+          (allControls[i] as HTMLElement).removeAttribute('disabled');
+          (allControls[i] as HTMLElement).style.opacity = '';
+          (allControls[i] as HTMLElement).style.pointerEvents = '';
+        }
+      }
+    }
+
+    btn.addEventListener('click', toggleSource);
+  }
+};
+
+export default source;

package/src/plugins/specialChars.ts

@@ -0,0 +1,64 @@
+import type { Plugin, PluginContext } from '../types';
+
+var CHARS = '©®™§±•·†‡•¶′″←↑→↓↔↕⇒⇔∞≈≠≤≥√∛∜÷×∑∏∫∂∇∅∈∉∋∧∨∩∪⊂⊃⊆⊇¬∧∨⇒⇔∀∃∄∵∴∷∠∟∡∥∦∼≅≜≛≝≟≠≡≢≤≥≦≧≨≩≪≫≬≭≮≯≰≱≲≳≴≵≶≷≸≹≺≻≼≽≾≿⊀⊁⊂⊃⊄⊅⊆⊇⊈⊉⊊⊋⊌⊍⊎⊏⊐⊑⊒⊓⊔⊕⊖⊗⊘⊙⊚⊛⊜⊝⊞⊟⊠⊡⊢⊣⊤⊥⊦⊧⊨⊩⊪⊫⊬⊭⊮⊯⊰⊱⊲⊳⊴⊵⊶⊷⊸⊹⊺⊻⊼⊽⊾⊿⋀⋁⋂⋃⋄⋅⋆⋇⋈⋉⋊⋋⋌⋍⋎⋏⋐⋑⋒⋓⋔⋕⋖⋗⋘⋙⋚⋛⋜⋝⋞⋟€£¥₩₽₨₪₫₭₮₰₱₲₳₴₵₶₷₸₹₺₻₼₽₾₿'.split('');
+
+const specialChars: Plugin = {
+  name: 'specialChars',
+  order: 29,
+  css: '' +
+    '.te-sc-popup {' +
+    '  position: absolute; z-index: 3000;' +
+    '  display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;' +
+    '  background: #fff; border: 1px solid #dee2e6;' +
+    '  border-radius: .5rem; box-shadow: 0 6px 20px rgba(0,0,0,.15);' +
+    '  padding: .5rem; max-width: 320px; max-height: 200px; overflow-y: auto;' +
+    '}' +
+    '.te-sc-popup button {' +
+    '  background: none; border: none; font-size: 1rem;' +
+    '  padding: .25rem; cursor: pointer; border-radius: .25rem; text-align: center;' +
+    '}' +
+    '.te-sc-popup button:hover { background: #f0f0f0; }',
+  toolbarHTML: '<button type="button" class="btn btn-sm btn-light" title="Special characters" data-cmd="specialChars"><i class="ti ti-hash"></i></button>',
+  init(ctx: PluginContext): void {
+    if(!ctx.features.specialChars) return;
+
+    var popup = document.createElement('div');
+    popup.className = 'te-sc-popup';
+    popup.style.display = 'none';
+    CHARS.forEach(function(ch){
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = ch;
+      btn.setAttribute('data-sc', ch);
+      popup.appendChild(btn);
+    });
+    document.body.appendChild(popup);
+
+    var btn = ctx.wrapper.querySelector('[data-cmd="specialChars"]') as HTMLElement | null;
+    if(btn){
+      btn.addEventListener('click', function(e: MouseEvent){
+        var rect = (btn as HTMLElement).getBoundingClientRect();
+        popup.style.left = (window.scrollX + rect.left) + 'px';
+        popup.style.top = (window.scrollY + rect.bottom + 4) + 'px';
+        popup.style.display = popup.style.display === 'none' ? 'grid' : 'none';
+      });
+    }
+
+    popup.addEventListener('click', function(e: MouseEvent){
+      var ch = (e.target as HTMLElement) && (e.target as HTMLElement).getAttribute('data-sc');
+      if(!ch) return;
+      document.execCommand('insertHTML', false, ch);
+      popup.style.display = 'none';
+      ctx.editor.focus();
+    });
+
+    document.addEventListener('click', function(e: MouseEvent){
+      if(popup.style.display === 'none') return;
+      if(!popup.contains(e.target as Node) && e.target !== btn){
+        popup.style.display = 'none';
+      }
+    });
+  }
+};
+
+export default specialChars;

package/src/plugins/statusBar.ts

@@ -0,0 +1,85 @@
+import type { Plugin, PluginContext } from '../types';
+
+const statusBar: Plugin = {
+  name: 'statusBar',
+  order: 100,
+  css: '' +
+    '.te-statusbar {' +
+    '  display: flex; justify-content: space-between; gap: 1rem;' +
+    '  padding: 4px 8px; font-size: .75rem; color: #6c757d;' +
+    '  background: #f8f9fa; border: 1px solid #dee2e6;' +
+    '  border-top: none; border-radius: 0 0 .375rem .375rem;' +
+    '}' +
+    '.te-statusbar .te-status-tag {' +
+    '  font-weight: 600;' +
+    '  font-family: monospace;' +
+    '}',
+  init(ctx: PluginContext): void {
+    if(ctx.features.statusBar === false) return;
+    var editor = ctx.editor;
+
+    var bar = document.createElement('div');
+    bar.className = 'te-statusbar';
+    bar.innerHTML = '<span class="te-status-tag"></span><span class="te-status-right"><span class="te-status-words">0 words</span><span class="te-status-chars">0 characters</span></span>';
+    editor.parentNode!.insertBefore(bar, editor.nextSibling);
+
+    function getActiveTag(): string {
+      var sel = window.getSelection();
+      if(!sel || sel.rangeCount === 0) return '';
+      var n: Node | null = sel.anchorNode;
+      if(n && n.nodeType === 3) n = n.parentNode;
+      if(!n || !editor.contains(n)) return '';
+      var tag = '';
+      var el: HTMLElement | null = n as HTMLElement;
+      while(el && el !== editor){
+        var t = el.tagName ? el.tagName.toLowerCase() : '';
+        if(['p','h1','h2','h3','h4','h5','h6','div','blockquote','pre','li','td','th','ol','ul','table','thead','tbody','tfoot','tr'].indexOf(t) !== -1){
+          tag = t;
+          break;
+        }
+        el = el.parentElement;
+      }
+      return tag;
+    }
+
+    function update(): void {
+      var sel = window.getSelection();
+      var hasSel = sel && !sel.isCollapsed && editor.contains(sel.anchorNode) && editor.contains(sel.focusNode);
+      var text = editor.textContent || '';
+      var words = text.trim() ? text.trim().split(/\s+/).length : 0;
+      var chars = text.length;
+      var tagEl = bar.querySelector('.te-status-tag') as HTMLElement | null;
+      var rightEl = bar.querySelector('.te-status-right') as HTMLElement | null;
+      if(tagEl) tagEl.textContent = getActiveTag();
+      if(rightEl){
+        var wEl = rightEl.querySelector('.te-status-words') as HTMLElement | null;
+        var cEl = rightEl.querySelector('.te-status-chars') as HTMLElement | null;
+        if(!wEl || !cEl){
+          rightEl.innerHTML = '<span class="te-status-words"></span><span class="te-status-chars"></span>';
+          wEl = rightEl.querySelector('.te-status-words') as HTMLElement | null;
+          cEl = rightEl.querySelector('.te-status-chars') as HTMLElement | null;
+        }
+        if(wEl) wEl.textContent = words + ' word' + (words !== 1 ? 's' : '');
+        if(cEl) cEl.textContent = chars + ' character' + (chars !== 1 ? 's' : '');
+        if(hasSel){
+          var selText = sel!.toString();
+          var selWords = selText.trim() ? selText.trim().split(/\s+/).length : 0;
+          var txt = selWords + ' word' + (selWords !== 1 ? 's' : '') + ', ' + selText.length + ' char selected  |  ' + words + ' word' + (words !== 1 ? 's' : '') + ', ' + chars + ' characters';
+          if(wEl) wEl.style.display = 'none';
+          if(cEl) cEl.textContent = txt;
+        } else {
+          if(wEl) wEl.style.display = '';
+        }
+      }
+    }
+
+    editor.addEventListener('input', update);
+    editor.addEventListener('paste', function(){ setTimeout(update, 100); });
+    document.addEventListener('selectionchange', function(){
+      if(document.activeElement === editor || editor.contains(document.activeElement)) update();
+    });
+    update();
+  }
+};
+
+export default statusBar;

package/src/plugins/subSuper.ts

@@ -0,0 +1,20 @@
+import type { Plugin, PluginContext } from '../types';
+
+const subSuper: Plugin = {
+  name: 'subSuper',
+  order: 26,
+  toolbarHTML: '' +
+    '<button type="button" class="btn btn-sm btn-light" title="Subscript" data-cmd="subscript">x₂</button>' +
+    '<button type="button" class="btn btn-sm btn-light" title="Superscript" data-cmd="superscript">x²</button>',
+  init(ctx: PluginContext): void {
+    if (!ctx.features.subSuper) return;
+    ctx.wrapper.querySelectorAll('[data-cmd="subscript"],[data-cmd="superscript"]').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        document.execCommand(btn.getAttribute('data-cmd')!, false, undefined);
+        ctx.editor.focus();
+      });
+    });
+  }
+};
+
+export default subSuper;